chore(repo): sync wireframe structure and references
This commit is contained in:
david committed
1 parent
05d2d5777f
commit
d953a79e95
453 files changed
+36639
-621
No files matched your search
@@ -0,0 +1,34 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: M01
|
||||
screen: Verschieben (interner Slot-Picker)
|
||||
typ: Modal
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "aus S06"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# M01 — Verschieben (interner Slot-Picker)
|
||||
|
||||
## Ziel
|
||||
|
||||
Das Büro verschiebt eine Buchung auf einen neuen freien Slot — der Kunde wird automatisch informiert.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- Kompakter Slot-Picker (gleiche Logik wie die öffentliche Slot-Wahl: nur echte freie Zeiten)
|
||||
- Alter Termin sichtbar durchgestrichen, neuer Termin zur Bestätigung
|
||||
- Hinweis: »Der Kunde bekommt automatisch eine E-Mail mit dem neuen Termin«
|
||||
- Optional: anderer Mitarbeiter zusammen mit neuem Slot (wenn der bisherige nicht kann)
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
A5 Modal; Reschedule-Slot-Picker aus dem Ticket.
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: M02
|
||||
screen: Stornieren
|
||||
typ: Modal
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "aus S05/S06 (auch Bulk)"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# M02 — Stornieren (Grund + Auto-Mail)
|
||||
|
||||
## Ziel
|
||||
|
||||
Bewusst absagen: mit Grund, und der Kunde erfährt es automatisch.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- **Grund** (Pflicht, Freitext oder Auswahl) — landet im Verlauf der Buchung
|
||||
- Hinweis: »Der Kunde bekommt automatisch eine Absage-Mail« (mit Grund-Vorschau)
|
||||
- **Bulk-Variante** aus S05: zeigt Anzahl der Buchungen, ein Grund für alle, eine Mail je Kunde
|
||||
- Bestätigen/Abbrechen; danach Status »storniert« + Termin verschwindet aus dem Kalender
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
A5 Confirm-Modal.
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S01
|
||||
screen: Termin waehlen (Slot-Picker)
|
||||
typ: BESPOKE-Public
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "/b/{firma}/{slug}"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S01 — 🌐 Termin wählen (Slot-Picker) ⭐
|
||||
|
||||
## Ziel
|
||||
|
||||
Der Kunde findet in Sekunden einen freien Termin — Calendly-Erlebnis, höchster Polish, mit dem Branding des Betriebs.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- **Monats-Kalender** mit freien/belegten Tagen + **Zeitslot-Liste** zum gewählten Tag
|
||||
- Nur echte freie Slots: berechnet aus Verfügbarkeit (S09), bestehenden Buchungen, Google-Kalender der Mitarbeiter, Puffer und Vorlauf — Vergabe v1: »erster freier Mitarbeiter«
|
||||
- **Zeitzonen-fest** + Zeitzonen-Wechsler (Anzeige »Zeiten in deiner Zeitzone«)
|
||||
- Kopf: Firmen-Logo/Branding, Name der Buchungsseite, Dauer, Beschreibung
|
||||
- **iFrame-Embed-Variante** (gleiche Strecke ohne Seiten-Rahmen)
|
||||
- Slot wählen → weiter zu S02 (Fragen)
|
||||
- Zustände: keine freien Termine (Klartext), laden, Fehler, Seite nicht veröffentlicht (404 mit Branding)
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
BESPOKE-Public (höchster Polish laut Ticket). Bekommt in W4 die finale Politur (D-POLISH).
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S02
|
||||
screen: Fragen (Kunden-Formular)
|
||||
typ: BESPOKE-Public
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "Schritt 2 nach Slot-Wahl"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S02 — 🌐 Fragen (Kunden-Formular)
|
||||
|
||||
## Ziel
|
||||
|
||||
Der Kunde gibt seine Daten ein — genau die Felder, die der Betrieb im Editor (S08) festgelegt hat.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- Zusammenfassung des gewählten Slots oben (Datum, Zeit, Dauer) + »Termin ändern«-Link zurück zu S01
|
||||
- **Felder aus dem Editor** (Name, E-Mail Pflicht; weitere je Konfiguration — Text, Telefon, Auswahl, …), Pflichtfeld-Markierung, Klartext-Validierung
|
||||
- **Spam-Schutz** (mCaptcha) vor dem Absenden
|
||||
- Absenden = verbindlich buchen → S03; **Race-Schutz:** ist der Slot inzwischen weg → Klartext-Hinweis + zurück zur Slot-Wahl (kein Datenverlust der Eingaben)
|
||||
- Datenschutz-Hinweis (kurz, Klartext)
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
BESPOKE-Public. Feld-Rendering v1 als einfache Feld-Liste (D-FORM liegt als Review-Draft vor und wird später nur eingesteckt).
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S03
|
||||
screen: Bestaetigung
|
||||
typ: BESPOKE-Public
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "Schritt 3 nach Buchung"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S03 — 🌐 Bestätigung
|
||||
|
||||
## Ziel
|
||||
|
||||
Der Kunde weiß: Termin steht. Und er kriegt ihn in seinen eigenen Kalender.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- Große Bestätigung mit allen Termin-Daten (Datum, Zeit, Dauer, ggf. Ort/Hinweise aus der Buchungsseite)
|
||||
- **Add-to-Calendar-Knopf (.ics)** — funktioniert auf Handy und Desktop
|
||||
- Hinweis auf die **Bestätigungs-Mail** (mit Absage-/Verschiebe-Link → S04)
|
||||
- Firmen-Branding wie in S01/S02
|
||||
- Was im Hintergrund passiert (nicht sichtbar, aber geplant): Anfrage im Lead-Eingang **oder** Aktivität am bekannten Kontakt (E-Mail-Match), Termin im Mitarbeiter-Kalender, Bestätigungs-Mail raus
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
BESPOKE-Public.
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S04
|
||||
screen: Absagen/Verschieben per Link
|
||||
typ: BESPOKE-Public
|
||||
umsetzung: Bauen
|
||||
status: Validiert (Davids Delta)
|
||||
route: "Link aus der Bestaetigungs-Mail"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S04 — 🌐 Absagen/Verschieben per Link (Davids Delta)
|
||||
|
||||
## Ziel
|
||||
|
||||
»Wie bei Calendly«: Der Kunde verwaltet seinen Termin selbst — ohne anzurufen. **Change-Request an Dev** (steht nicht in AK-P16b).
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- Zeigt die Buchung (Datum, Zeit, Buchungsseite, Firmen-Branding)
|
||||
- **Verschieben:** öffnet den Slot-Picker (wie S01) → neuer Slot → Bestätigung; alte Zeit wird frei, Büro + Kalender automatisch aktuell
|
||||
- **Absagen:** mit optionalem Grund → Bestätigung; Büro bekommt Benachrichtigung, Termin verschwindet aus dem Kalender
|
||||
- Zustände: Link abgelaufen/ungültig, Termin liegt in der Vergangenheit, Termin wurde bereits storniert — je Klartext ohne Interna
|
||||
- Sicherheit: signierter Link aus der Mail (kein Login nötig)
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
BESPOKE-Public, nutzt den Slot-Picker aus S01 wieder.
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S05
|
||||
screen: Buchungen-Liste
|
||||
typ: A2 Liste
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "/bookings"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S05 — Buchungen-Liste
|
||||
|
||||
## Ziel
|
||||
|
||||
Der Überblick: Was ist gebucht, was war, was wurde abgesagt.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- **Reiter:** Anstehend · Vergangen · Storniert · Alle
|
||||
- Spalten: Termin (Datum/Zeit), Endkunde (Name/E-Mail), Buchungsseite, zuständiger Mitarbeiter, Status
|
||||
- **Filter:** Status, Mitarbeiter, Buchungsseite, Zeitraum
|
||||
- **Mehrfach-Aktion:** Bulk-Storno (öffnet M02, eine Auto-Mail je Kunde)
|
||||
- **CSV-Export**
|
||||
- Zeilen-Klick → S06 (Detail); Schnell-Aktionen in der Zeile (stornieren, verschieben)
|
||||
- Zustände: leer (Klartext + Link zu den Buchungsseiten), laden, Fehler
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
A2 Liste (sortierbar, paginiert) + Filter-Bar + Bulk-Toolbar — wie Lead-Inbox/Aufgaben-Liste.
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S06
|
||||
screen: Buchungs-Detail
|
||||
typ: A3 Detail (Karteikarten-Muster)
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "/bookings/:id"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S06 — Buchungs-Detail (Karteikarte)
|
||||
|
||||
## Ziel
|
||||
|
||||
Alles zu einer Buchung an einem Ort — nach dem validierten P6-Karteikarten-Muster.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- **Links:** Termin-Daten (Datum, Zeit, Dauer, Buchungsseite), zuständiger Mitarbeiter, **verknüpfter Kontakt/Anfrage** (klickbar), Kalender-Sync-Badge (synchronisiert / steht aus / Fehler)
|
||||
- **Rechts:** die **Antworten des Kunden** (Frage → Antwort, in Reihenfolge), **interne Notizen**, Verlauf (gebucht/verschoben/storniert mit wann + von wem)
|
||||
- **Aktionen im Kopf:** als »stattgefunden« / »nicht erschienen« (No-Show) markieren · **Stornieren** (M02) · **Verschieben** (M01) · **anderem Mitarbeiter zuweisen** (Auswahl mit Verfügbarkeits-Hinweis)
|
||||
- Status-Anzeige: gebucht / verschoben / storniert (mit Grund) / stattgefunden / No-Show
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
A3 Detail — Karteikarten-Grundgerüst aus WF-P6 (Zweispalter + Aktionen im Kopf).
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S07
|
||||
screen: Buchungsseiten-Liste
|
||||
typ: A2 Liste
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "/bookings/pages"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S07 — Buchungsseiten-Liste
|
||||
|
||||
## Ziel
|
||||
|
||||
Alle Buchungslinks des Betriebs auf einen Blick — mit dem Link zum Kopieren direkt in der Zeile.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- Spalten: Titel, Link (Slug) mit **Kopier-Knopf**, zugewiesene Mitarbeiter, Buchungen (gesamt / letzte 30 Tage), Status (veröffentlicht / Entwurf)
|
||||
- »+ Neue Buchungsseite« → S08 (Editor)
|
||||
- Zeilen-Aktionen: bearbeiten (S08), Link kopieren, veröffentlichen/zurückziehen, duplizieren
|
||||
- Zustände: leer (Klartext + CTA »Erste Buchungsseite anlegen«), laden, Fehler
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
A2 Liste.
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S08
|
||||
screen: Buchungsseiten-Editor
|
||||
typ: A6 + A4
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "/bookings/pages/:id + /new"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S08 — Buchungsseiten-Editor
|
||||
|
||||
## Ziel
|
||||
|
||||
Hier entsteht der Buchungslink: alles einstellen, »was da auch bei Calendly stehen würde« (Davids Vorgabe).
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- **Grunddaten:** Name, Link (Slug), Beschreibung (sieht der Kunde)
|
||||
- **Termin-Logik:** Dauer · **Puffer** (Mindestabstand zwischen Terminen) · **Vorlauf** (frühestens buchbar ab) · wie weit im Voraus buchbar
|
||||
- **Mitarbeiter-Auswahl:** wer kommt in Frage (v1-Vergabe: erster freier — Hinweis im UI)
|
||||
- **Kunden-Fragen:** Felder festlegen (Name + E-Mail Pflicht, weitere frei: Text, Telefon, Auswahl, …) und je Feld die **Zuordnung zum Lead-Eingang** (welches Kunden-Feld → welches Lead-Feld) — Davids Punkt: nichts abtippen
|
||||
- **Bestätigungs-Mail:** Text bearbeiten (Markdown + Platzhalter wie {Vorname}, {Termin}); enthält automatisch den Absage-/Verschiebe-Link (S04)
|
||||
- **Veröffentlichen:** Publish-Schalter · öffentliche URL mit Kopier-Knopf · **Embed-Code (iFrame)** · **QR-Code**
|
||||
- Hinweis, welche Verfügbarkeits-Zeiten (S09) greifen
|
||||
- Zustände: unveröffentlichte Änderungen, Validierungs-Fehler in Klartext
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
A6 Settings + A4 Formular; Embed/QR/Copy-Muster wie im Ticket. Fragen-Felder v1 als einfache Feld-Liste (D-FORM liegt als Review-Draft vor und wird später eingesteckt).
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: S09
|
||||
screen: Verfuegbarkeit
|
||||
typ: A6 + A4
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "/availability"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# S09 — Verfügbarkeit (»Wann bin ich buchbar?«)
|
||||
|
||||
## Ziel
|
||||
|
||||
Jeder Mitarbeiter pflegt seine eigenen buchbaren Zeiten; Admins können alle einsehen und ändern.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- **Wochen-Regeln:** je Wochentag mehrere Zeitfenster (z. B. Mo 8–12 + 13–17), an/aus je Tag
|
||||
- **Ausnahme-Tage:** Datum wählen → ganz frei ODER Sonder-Zeitfenster (z. B. 24.12. nur 8–12)
|
||||
- **Zeitzone** der Zeiten
|
||||
- **Admin-Sicht:** Mitarbeiter-Wechsler oben — Admin sieht und bearbeitet alle, jeder andere nur sich selbst
|
||||
- Hinweis: **welche Buchungsseiten** diese Zeiten nutzen (mit Links)
|
||||
- Klartext-Zusammenspiel: »Buchbar = diese Zeiten MINUS bestehende Termine (inkl. Google-Kalender) MINUS Puffer«
|
||||
- Zustände: noch nichts gepflegt (Leer-Zustand mit Standard-Vorschlag Mo–Fr 8–17), Validierungs-Fehler
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
A6 Settings + A4; Wochen-Verfügbarkeits-Editor + Ausnahmen-Editor (UI-Elemente aus dem Ticket).
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
---
|
||||
kind: screen
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
id: V01
|
||||
screen: Termin waehlen — Handy
|
||||
typ: BESPOKE-Public 📱
|
||||
umsetzung: Bauen
|
||||
status: Validiert
|
||||
route: "Variante von S01"
|
||||
subframe: ""
|
||||
---
|
||||
|
||||
# V01 — 🌐 Termin wählen — Handy 📱
|
||||
|
||||
## Ziel
|
||||
|
||||
Kunden buchen oft am Handy — die wichtigste öffentliche Seite muss dort genauso gut funktionieren.
|
||||
|
||||
## Was das Tool können muss
|
||||
|
||||
- Gleiche Logik wie S01, gestapelt: erst Tag wählen (kompakter Monats-Kalender), dann Zeitslot-Liste
|
||||
- Zeitzonen-Wechsler erreichbar, Branding oben
|
||||
- Fragen (S02) und Bestätigung (S03) sind auf dem Handy dieselben Screens (einspaltig) — nur der Slot-Picker braucht den eigenen Nachweis-Frame
|
||||
|
||||
## Pattern / Archetyp
|
||||
|
||||
BESPOKE-Public, Mobile-Variante von S01.
|
||||
|
||||
## Subframe
|
||||
|
||||
- (erst nach explizitem OK)
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"nodes":[
|
||||
{"id":"md-paket","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/WF-P16 Terminbuchung.md","x":-80,"y":-440,"width":460,"height":280},
|
||||
{"id":"group-public","type":"group","x":-80,"y":-100,"width":2260,"height":660,"label":"Kunde 🌐 (Calendly-Stil, höchster Polish)"},
|
||||
{"id":"group-intern","type":"group","x":2360,"y":-100,"width":1700,"height":940,"label":"Büro (intern)"},
|
||||
{"id":"group-modals","type":"group","x":4160,"y":-100,"width":1180,"height":380,"label":"Aktionen (Modals)"},
|
||||
{"id":"note-entry","type":"text","text":"# Einstieg Kunde\n\nBuchungslink / QR / iFrame-Embed.\n\nJede Buchung → Anfrage im Lead-Eingang ODER Aktivität am bekannten Kontakt (E-Mail-Match) + Termin im Mitarbeiter-Kalender.","x":0,"y":0,"width":360,"height":200},
|
||||
{"id":"s01","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S01 Termin waehlen.md","x":560,"y":0,"width":420,"height":200},
|
||||
{"id":"s02","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S02 Fragen.md","x":1120,"y":0,"width":420,"height":200},
|
||||
{"id":"s03","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S03 Bestaetigung.md","x":1680,"y":0,"width":420,"height":200},
|
||||
{"id":"v01","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/V01 Termin waehlen Handy.md","x":560,"y":280,"width":420,"height":200},
|
||||
{"id":"s04","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S04 Absagen Verschieben.md","x":1680,"y":280,"width":420,"height":200},
|
||||
{"id":"s05","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S05 Buchungen-Liste.md","x":2440,"y":0,"width":420,"height":200},
|
||||
{"id":"s06","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S06 Buchungs-Detail.md","x":3000,"y":0,"width":420,"height":200},
|
||||
{"id":"s07","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S07 Buchungsseiten-Liste.md","x":2440,"y":280,"width":420,"height":200},
|
||||
{"id":"s08","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S08 Buchungsseiten-Editor.md","x":3000,"y":280,"width":420,"height":200},
|
||||
{"id":"s09","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/S09 Verfuegbarkeit.md","x":2440,"y":560,"width":420,"height":200},
|
||||
{"id":"note-intern","type":"text","text":"# Slot-Berechnung\n\nBuchbar = Verfügbarkeit (S09) − bestehende Termine (inkl. Google-Kalender aus WF-P16 Kalender) − Puffer/Vorlauf.\n\nVergabe v1: erster freier Mitarbeiter.","x":3000,"y":560,"width":460,"height":200},
|
||||
{"id":"m01","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/M01 Verschieben.md","x":4240,"y":0,"width":420,"height":200},
|
||||
{"id":"m02","type":"file","file":"02 Wireframes/P16 Terminbuchung/WF-P16 Terminbuchung/Screens/M02 Stornieren.md","x":4820,"y":0,"width":420,"height":200}
|
||||
],
|
||||
"edges":[
|
||||
{"id":"e-entry","fromNode":"note-entry","fromSide":"right","toNode":"s01","toSide":"left","toEnd":"arrow","styleAttributes":{"path":"dotted"}},
|
||||
{"id":"e-s1s2","fromNode":"s01","fromSide":"right","toNode":"s02","toSide":"left","toEnd":"arrow","label":"weiter"},
|
||||
{"id":"e-s2s3","fromNode":"s02","fromSide":"right","toNode":"s03","toSide":"left","toEnd":"arrow","label":"buchen"},
|
||||
{"id":"e-handy","fromNode":"s01","fromSide":"bottom","toNode":"v01","toSide":"top","toEnd":"arrow","label":"Handy"},
|
||||
{"id":"e-mail","fromNode":"s03","fromSide":"bottom","toNode":"s04","toSide":"top","toEnd":"arrow","label":"Link in der Mail"},
|
||||
{"id":"e-open","fromNode":"s05","fromSide":"right","toNode":"s06","toSide":"left","toEnd":"arrow","label":"öffnen"},
|
||||
{"id":"e-editor","fromNode":"s07","fromSide":"right","toNode":"s08","toSide":"left","toEnd":"arrow","label":"öffnen"},
|
||||
{"id":"e-m01","fromNode":"s06","fromSide":"right","toNode":"m01","toSide":"left","toEnd":"arrow","label":"verschieben"},
|
||||
{"id":"e-m02","fromNode":"s06","fromSide":"right","toNode":"m02","toSide":"left","toEnd":"arrow","label":"stornieren"},
|
||||
{"id":"e-avail","fromNode":"note-intern","fromSide":"left","toNode":"s09","toSide":"right","toEnd":"arrow","styleAttributes":{"path":"dotted"}}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
kind: wireframe-package
|
||||
project: HiveGrid Screen Project
|
||||
ticket: D-BOOK + D-P16 (Teil)
|
||||
package: WF-P16 Terminbuchung
|
||||
typ: Flow
|
||||
status: Validiert
|
||||
subframe: ""
|
||||
canvas: "WF-P16 Terminbuchung.canvas"
|
||||
---
|
||||
|
||||
# WF-P16 Terminbuchung
|
||||
|
||||
Status: Validiert (Screen-Liste)
|
||||
Subframe-Link: -
|
||||
Canvas: [Canvas](<WF-P16 Terminbuchung.canvas>)
|
||||
Stand: 2026-07-09
|
||||
|
||||
---
|
||||
|
||||
## 1. Kurzfassung
|
||||
|
||||
Online-Terminbuchung »wie bei Calendly« (Davids Vorgabe): Der Betrieb erstellt Buchungslinks (Dauer, Puffer, Vorlauf, Mitarbeiter, Kunden-Fragen inkl. **Feld-Zuordnung zum Lead-Eingang**), der Kunde bucht sich über eine 🌐 öffentliche Seite selbst einen freien Slot (Zeitzonen-fest, einbettbar, höchster Polish) und kann per Link in der Bestätigungs-Mail **selbst absagen/verschieben** (Davids Delta). Intern: Buchungen-Liste + Detail mit Notizen, Stornieren mit Grund + Auto-Mail, Verschieben, Neu-Zuweisen. Jede Buchung landet als Anfrage im Lead-Eingang oder hängt sich an den bestehenden Kontakt.
|
||||
|
||||
---
|
||||
|
||||
## 2. Intent Check
|
||||
|
||||
| Frage | Antwort |
|
||||
|---|---|
|
||||
| Ticket/Modul | D-BOOK (öffentliche Booking-Page) + D-P16 (Buchungen-Verwaltung, Editor, Verfügbarkeit), Dev-Pendant AK-P16b |
|
||||
| Nutzer-Ziel | Kunde: Termin buchen ohne Anruf · Büro: Buchungslinks pflegen, Buchungen verwalten, nichts abtippen |
|
||||
| Quellen geprüft | `ticket-docs/D-BOOK.md`, `ticket-docs/D-P16.md`, `designer-briefs/P16-…md`, HiveGrid Map |
|
||||
| Sicher im Scope | 🌐 Buchungsstrecke (3 Schritte + Handy), 🌐 Absagen/Verschieben (Delta), Buchungen-Liste/-Detail, Buchungsseiten-Liste/-Editor, Verfügbarkeit |
|
||||
| Sicher nicht im Scope | Formular-Baukasten selbst (D-FORM liegt als Review-Draft vor; Fragen hier bleiben als einfache Feld-Liste); Kalender-Grid (WF-P16 Kalender); Round-Robin/Wunsch-Mitarbeiter (v2) |
|
||||
| Unsichere Annahmen | Self-Service-Absage/Verschieben ist NICHT im Dev-Ticket — Change-Request nötig (s. Offene Fragen) |
|
||||
|
||||
---
|
||||
|
||||
## 3. Scope
|
||||
|
||||
| Punkt | Inhalt |
|
||||
|---|---|
|
||||
| Startpunkt | 🌐 Buchungslink (`/b/{firma}/{slug}`) · Sidebar »Buchungen« (intern) |
|
||||
| Ziel | Kunde hat gebucht (ohne Doppel-Buchung) · Buchung ist im Lead-Eingang/am Kontakt · Büro hat den Überblick |
|
||||
| Haupt-Archetyp | **BESPOKE-Public** (höchster Polish) + A2/A3 Listen/Detail + A6/A4 Editor/Settings |
|
||||
| Out of scope | v2: Wunsch-Mitarbeiter/Round-Robin, personalisierte Links |
|
||||
|
||||
---
|
||||
|
||||
## 4. Entscheidungen (validiert 2026-07-09)
|
||||
|
||||
| Entscheidung | Status | Notiz |
|
||||
|---|---|---|
|
||||
| Buchungsstrecke = 3 eigene Screens + 1 Handy-Frame | genommen | Termin wählen → Fragen → Bestätigung; Handy-Frame vom Slot-Picker (Kunden buchen oft mobil) |
|
||||
| Kunde kann per Mail-Link selbst absagen/verschieben | genommen (Delta) | »Wie Calendly« — eigene 🌐 Seite S04; **Change-Request an Dev** (AK-P16b kennt nur internes Cancel/Reschedule) |
|
||||
| Buchungs-Detail als eigene Detailseite | genommen | Karteikarten-Muster (P6): links Termin + Verknüpfungen, rechts Antworten/Notizen, Aktionen im Kopf |
|
||||
| Verfügbarkeit pflegt jeder selbst, Admin alle | genommen | Passt zur Pro-Nutzer-Kalender-Verbindung; Admin hat Mitarbeiter-Auswahl in S09 |
|
||||
| Fragen-Felder mit Feld-Zuordnung zum Lead-Eingang | genommen | Davids Punkt: im Editor festlegen, welches Kunden-Feld in welches Lead-Feld wandert — nichts abtippen |
|
||||
| Slot-Vergabe v1: »erster freier Mitarbeiter« | genommen | Ticket-Schnitt; Kunde wählt keinen Mitarbeiter |
|
||||
| Slot-Berechnung nutzt Kalender + Verfügbarkeit | genommen | Arbeitszeiten (S09) + bestehende Buchungen + Google-Sync (WF-P16 Kalender) + Puffer + Vorlauf |
|
||||
|
||||
### Happy Path
|
||||
|
||||
1. Büro legt Buchungsseite »Wartungstermin (30 Min)« an: Dauer, Puffer, Vorlauf, Mitarbeiter, 3 Kunden-Fragen (+ Zuordnung zum Lead), Bestätigungs-Mail — veröffentlichen, Link/QR teilen.
|
||||
2. Kunde öffnet den Link (oft am Handy): freie Slots, wählt einen, beantwortet die Fragen, bucht — Bestätigung + Kalender-Datei.
|
||||
3. Die Buchung erscheint intern (Liste + Lead-Eingang bzw. am bekannten Kontakt); der Termin steht im Kalender des Mitarbeiters.
|
||||
4. Kunde kann's doch nicht einrichten → klickt »verschieben« in seiner Mail, wählt neuen Slot — Büro und Kalender bleiben automatisch aktuell.
|
||||
|
||||
### Meldungs-/Error-States (validiert)
|
||||
|
||||
| Ereignis | UI-Form | Blockiert? | Bauen? | Copy/Notiz |
|
||||
|---|---|---|---|---|
|
||||
| Slot gerade vergeben (Race-Schutz) | Klartext-Hinweis in S02/S03-Übergang + zurück zur Slot-Wahl | ja | Nur dokumentieren | »Dieser Termin wurde gerade vergeben — bitte wähle einen anderen.« |
|
||||
| Keine freien Termine | Leer-Zustand in S01 mit Klartext | nein | Nur dokumentieren | »Aktuell sind keine Termine frei …« + ggf. Kontakt-Hinweis |
|
||||
| Seite nicht veröffentlicht / Link falsch | 🌐 404-Seite mit Branding | ja | Nur dokumentieren | keine Interna verraten |
|
||||
| Spam-Schutz | mCaptcha in S02 | ja (Submit) | Nur dokumentieren | wie öffentliche Formulare |
|
||||
| Absage-/Verschiebe-Link abgelaufen oder Termin vorbei | Klartext-Zustand in S04 | ja | Nur dokumentieren | »Dieser Termin liegt in der Vergangenheit …« |
|
||||
| Storno intern | M02 mit Pflicht-Grund + Hinweis auf Auto-Mail | ja (Aktion) | Bauen (M02) | auch als Bulk aus S05 |
|
||||
| Kalender-Sync-Status je Buchung | Badge in S06 | nein | Nur dokumentieren | synchronisiert / steht aus / Fehler |
|
||||
|
||||
---
|
||||
|
||||
## 7. Validierte Screen-Liste
|
||||
|
||||
| ID | Screen/Zustand | Typ | Umsetzung | Ort | Status |
|
||||
|---|---|---|---|---|---|
|
||||
| S01 | 🌐 Termin wählen (Slot-Picker) ⭐ | BESPOKE-Public | Bauen | `/b/{firma}/{slug}` | Validiert |
|
||||
| S02 | 🌐 Fragen (Kunden-Formular) | BESPOKE-Public | Bauen | Schritt 2 | Validiert |
|
||||
| S03 | 🌐 Bestätigung (+ Kalender-Datei) | BESPOKE-Public | Bauen | Schritt 3 | Validiert |
|
||||
| V01 | 🌐 Termin wählen — Handy | BESPOKE-Public 📱 | Bauen | Variante von S01 | Validiert |
|
||||
| S04 | 🌐 Absagen/Verschieben per Link | BESPOKE-Public | Bauen | Link aus Bestätigungs-Mail | Validiert (Delta) |
|
||||
| S05 | Buchungen-Liste | A2 Liste | Bauen | `/bookings` | Validiert |
|
||||
| S06 | Buchungs-Detail (Karteikarte) | A3 Detail | Bauen | `/bookings/:id` | Validiert |
|
||||
| S07 | Buchungsseiten-Liste | A2 Liste | Bauen | `/bookings/pages` | Validiert |
|
||||
| S08 | Buchungsseiten-Editor | A6 + A4 | Bauen | `/bookings/pages/:id`, `/new` | Validiert |
|
||||
| S09 | Verfügbarkeit (Wochen-Zeiten + Ausnahmen) | A6 + A4 | Bauen | `/availability` | Validiert |
|
||||
| M01 | Verschieben (interner Slot-Picker) | Modal | Bauen | aus S06 | Validiert |
|
||||
| M02 | Stornieren (Grund + Auto-Mail) | Modal | Bauen | aus S05/S06 | Validiert |
|
||||
| D01–D05 | Race/leer/404/Spam/Link-abgelaufen (s. Tabelle) | Inline/Zustand | Nur dokumentieren | — | Validiert |
|
||||
|
||||
---
|
||||
|
||||
## 8. Grid
|
||||
|
||||
```text
|
||||
🌐 Kunde: Link/QR/Embed -> S01 (Slots, Zeitzone) -> S02 (Fragen + Spam-Schutz) -> S03 (Bestätigung + .ics)
|
||||
S01 -> V01 (Handy-Variante) · Bestätigungs-Mail -> S04 (absagen/verschieben -> zurück zu S01-Slots)
|
||||
Buchung erzeugt: Anfrage im Lead-Eingang ODER Activity am bekannten Kontakt (E-Mail-Match) + Termin im Kalender (WF-P16 Kalender)
|
||||
Intern: Sidebar -> S05 (Liste, Tabs) -> S06 (Detail: Antworten, Notizen, stattgefunden/No-Show)
|
||||
S06 -> M01 (verschieben) / M02 (stornieren, Grund + Auto-Mail) / neu zuweisen
|
||||
S07 (Buchungsseiten) -> S08 (Editor: Dauer/Puffer/Vorlauf/Fragen+Lead-Zuordnung/Mail/Publish/QR+Embed)
|
||||
S09 Verfügbarkeit (jeder selbst, Admin alle) — speist die Slot-Berechnung
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Screen-Pakete
|
||||
|
||||
- [[S01 Termin waehlen]] · [[S02 Fragen]] · [[S03 Bestaetigung]] · [[V01 Termin waehlen Handy]] · [[S04 Absagen Verschieben]]
|
||||
- [[S05 Buchungen-Liste]] · [[S06 Buchungs-Detail]] · [[S07 Buchungsseiten-Liste]] · [[S08 Buchungsseiten-Editor]] · [[S09 Verfuegbarkeit]] · [[M01 Verschieben]] · [[M02 Stornieren]]
|
||||
|
||||
---
|
||||
|
||||
## 10. Offene Fragen
|
||||
|
||||
- **Change-Request an Dev:** 🌐 Self-Service-Absage/Verschieben per Mail-Link (S04) — AK-P16b kennt nur internes Cancel/Reschedule
|
||||
- Fragen-Formular: v1 als einfache Feld-Liste im Editor (12 Feld-Typen) — der volle Formular-Baukasten (D-FORM) liegt als Review-Draft vor und wird hier später nur eingesteckt → mit Dev klären, dass die Schnittstelle passt
|
||||
- Bulk-Storno: eine Mail je Kunde (automatisch) — Grenzen/Limits? → Dev
|
||||
- Vorlauf-Feinheiten (max. wie weit im Voraus buchbar) → Standardwerte beim Subframe-Bau festlegen
|
||||
|
||||
## Handoff-Check
|
||||
|
||||
- [x] Jeder Screen ist mit Umsetzung markiert.
|
||||
- [x] Meldungs-/Error-State-Matrix ist ausgefüllt.
|
||||
- [ ] Subframe-Link ist eingetragen. *(Subframe erst nach explizitem OK)*
|
||||
Reference in new issue
Block a user