DS-Erweiterung: Akte-Patterns (Mandanten-Akte / Akten-Cockpit)
Ergänzung zum Medidentas Design System für die neu entworfene Mandanten-Akte.
Quelle der Wahrheit: Akten-Cockpit 1a (Detail).dc.html (lauffähiger Prototyp, komplette Markup-Referenz)
screenshots/NN-akten-cockpit.png(exakte Soll-Zustände). Tokens = World-2 (--*,client/src/styles.css, Themes light/dark/system viadata-theme). Alle Maße unten sind verbindlich, keine Neuinterpretation.
1 · Begriffe & Zustandsmodelle (G-3, verbindlich)
| Konzept | Zustände / Begriffe | Regeln |
|---|---|---|
| Lebenszyklus des Kunden (Person/Akte) | Lead → Onboarding → Aktiv (betreut) → Ruhend → Archiviert | Lebt im Avatar-Ring. Nie „Mandats-Status" nennen. |
| Prozessphase (je Beratungsmandat) | in Anbahnung → in Beratung → zur Unterschrift → abgeschlossen | Lebt auf Mandats-Karten/-Overlay, nie an der Person. |
| Dokumentstatus (Slider, vom Berater gesetzt) | Fehlt → Erhalten → Geprüft | Gleiche Wortfamilie wie Ablage (angefordert/erhalten/geprüft). Nie „Nötig"/„Da"/„Bereitgestellt". |
| Erforderlichkeit (Checkbox je Dokument) | erforderlich / vorerst nicht erforderlich | Abgewählt → sortiert ans Gruppenende unter Trenner „VORERST NICHT ERFORDERLICH"; zählt nicht im Fortschritt (x/n nur über erforderliche). |
| Versand (Systemzustand, DocuSign-Envelope) | Entwurf → versendet („wartet auf Signatur") → signiert → Erhalten | Vom System geschrieben, nicht manuell. |
| abgelaufen (Systemzustand) | Chip „abgelaufen" + Meta „war geprüft · gültig bis TT.MM.JJJJ" | Gültigkeitsdatum überschritten ⇒ Status fällt automatisch auf „Fehlt" zurück. Kein 4. Slider-Zustand. |
| Konto-Prüfstatus | neu → geprüft → archiviert | Getrennt von SEPA-Dimension: „SEPA gültig" / „ohne gültiges SEPA" (zwei Pills). |
| Archivieren statt Löschen | überall | Akte ist append-only; das Verb „löschen" existiert im UI nicht. |
| Stammdaten-Version | v1…vN, „Stand: vN · TT.MM.JJJJ" | Jede Änderung erzeugt neue Version; frühere Werte bleiben je Feld abrufbar. |
Verbotene Wörter im UI: Rohcodes (leistungszeit, mandant.angelegt), „im Bulk", „provisionieren", „löschen" (für Akteninhalte), Emojis.
2 · Neue Komponenten
2.1 StatusSlider (Dokumentstatus-Pillenschalter)
- Container:
display:inline-flex; background:var(--chip); border:1px solid var(--bd2); border-radius:999px; padding:2px. - Segmente (Buttons):
font-size:.72rem; font-weight:600; border-radius:999px; padding:3px 11px, Reihenfolge Fehlt · Erhalten · Geprüft (Prozessrichtung, nie umgekehrt). - Aktiv-Füllung: Fehlt=
--amber, Erhalten=--accent, Geprüft=--green; Textfarbe--accentInk; inaktiv transparent +--mut. - Tooltips: Fehlt „Fehlt noch — wird beim Speichern angefordert bzw. der Upload-Link erstellt" · Erhalten „Liegt vor, noch nicht geprüft" · Geprüft „Fachlich geprüft".
2.2 RequirementCheckbox + Inaktiv-Trenner
- Kontrollierter Button (kein natives Input): 16×16,
border-radius:4px; aktivbackground/border: var(--accent), Glyph ✓ (--accentInk); inaktiv transparent +--bd2.aria-pressed. - Abwählen ⇒ Zeile rutscht unter Trenner „VORERST NICHT ERFORDERLICH" (Label:
.68rem/700, letter-spacing .06em, uppercase,--faint), Slider + Aktionen ausgeblendet, Name--mut.
2.3 DocumentRow (Onboarding-Dokumente)
Zeile: padding:7px 0; border-top:1px solid var(--bd); font-size:.86rem; display:flex; flex-wrap:wrap; gap:6px 12px; Name flex:1 1 240px.
Aktionen sind zustandsgetrieben (DocuSign-Standard), nie alle gleichzeitig:
| Zustand | Anzeige rechts |
|---|---|
| Fehlt (nicht versendet) | Button „Zur Unterschrift →" (öffnet Assistent) |
| Fehlt + versendet | Pill amber „wartet auf Signatur" + Ghost „Erinnern" + Button „↑ Signiert hochladen" (Sign on Paper: Scan wird derselben Sendung zugeordnet und schließt sie ab) |
| Erhalten / Geprüft | keine Send-Aktionen (nur Slider) |
| abgelaufen | zusätzlich roter Chip „abgelaufen"; Status steht auf Fehlt |
| Fremdformular | Pill „Fremdformular · PDF" (PDF aus Admin-Bereich, Felder im Feld-Editor markiert) |
Gruppen: „Uploads externer Nachweise" · „Auszufüllende und zu unterzeichnende Formulare" (Sektionslabel mw-sec-label-Stil).
2.4 Overlay-Shell (Stammdaten · Zeiten · Mandat · Assistent)
- Scrim:
rgba(10,14,12,.45)+backdrop-filter:blur(3px), z-index 60 (Assistent 70),align-items:flex-start, padding 40px 24px. - Panel:
width:min(760px,100%)(Assistent 720px),max-height:calc(100vh - 80px), overflow-y auto,background:var(--bg),border:1px solid var(--bd2),border-radius:16px, padding 20px 22px,--shadow. - Kopf: Sektionslabel links, Aktionen/Pill mittig, Ghost „Schließen ✕" rechts. ESC und Klick auf Scrim schließen. Kinder-Karten
flex:none(kein Stauchen).
2.5 UnterschriftenAssistent (3 Schritte + Vor-Ort-Strecke)
Einstiege: Aufgabenkarte „Senden →", Dokumentzeile „Zur Unterschrift →", Bankverbindung „SEPA einholen →". Kopf-Pill „Schritt N von 3 — Prüfen/Versenden/Verfolgen".
- Prüfen: Pflichtdaten-Liste (✓ grün „· aus Stammdaten"; fehlend ● rot mit Inline-Erfassung — weiche Validierung, Formatvorschlag amber, Übernahme in Stammdaten bei „Weiter"). Nur SEPA: Konto-Auswahlkarten (Auswahl =
--selBg/--selBd) + „Neues Konto erfassen" (IBAN, Kontoinhaber, Zeichnungsberechtigt). Formular-Vorschau (vorbefüllte Felder; „füllt die Praxis beim Signieren aus"). Fremdformular: neutrale Hinweisbox + „Im Feld-Editor öffnen →". - Versenden: zwei Versandart-Karten „Per E-Mail senden" / „Vor Ort unterschreiben"; Empfänger editierbar + Hinweis „Zeichnungsberechtigt für das gewählte Konto: … — die Signatur-Anfrage geht an diese Person"; Signaturniveau-Slider SES/AES/QES (SES vorausgewählt; AES/QES-Hinweis „Kunde benötigt zusätzliche Identifikation (ID-Check)"); E-Mail: Frist-Select + „Erinnerung nach 5 Tagen" + auto-Wiedervorlage; Sammel-Umschlag-Checkbox („eine Signatur-Sitzung für alles"); Fallback „Stattdessen drucken / signiert hochladen".
- Verfolgen: Ergebnis-Karte „→ Zur Unterschrift versendet" (Frist, Erinnerung, Wiedervorlage) oder „✓ Signiert & abgelegt" (SEPA gültig für Konto X, Version 1 „Erhalten", Aufgabe geschlossen, Verlaufseintrag). Vor-Ort (DocuSign In-Person, Host = Berater): Übergabe-Screen (Akte ausgeblendet) → Kunden-Signaturansicht (Marke + Formulardaten + eIDAS-Hinweis, „Jetzt signieren") → Danke/Rückgabe-Screen → Schritt 3. Write-back: E-Mail-Versand ⇒ Dokument „versendet"; Vor-Ort-Signatur ⇒ „Erhalten" (Meta „· signiert vor Ort · Prüfung offen"), SEPA-Konto ⇒ „SEPA gültig", Aufgabe erledigt, Blocker-Zähler sinkt.
2.6 BankRow (Bankverbindungen, Stammdaten-Overlay)
- Inhalt: IBAN (
ui-monospace, .8rem) + Metazeile „Bank · Inhaber: … · zeichnungsberechtigt: …" (.72rem,--faint). - Zwei Pills: Prüfstatus (neu=amber, geprüft=grün, archiviert=grau) + SEPA („SEPA gültig" grün / „ohne gültiges SEPA" amber). Aktion „SEPA einholen →" nur ohne gültiges SEPA.
- Swipe-to-Archive: Zeile nach links ziehen (Pointer/Touch,
touch-action:pan-y), Button „Archivieren" (amber) liegt darunter (104px Spur), Snap offen bei < −48px auf −96px, Transitiontransform .18s cubic-bezier(.22,1,.36,1). Archivierte Zeilen: nicht wischbar, ans Ende sortiert,--mut. - Affordanz: dezentes „‹" am Zeilenende (Tooltip „Nach links wischen: Archivieren") + Peek-Teach beim Öffnen: erste Zeile animiert
mwPeek(0→−26px→0, 1.1s, delay .6s, einmalig; respektiertprefers-reduced-motion). - Fußnote: „Eintrag nach links wischen/ziehen → Archivieren. Gelöscht wird nicht — die Akte ist append-only, Archiviertes bleibt versioniert erhalten."
2.7 VersionedField (Feld-Historie) + Versions-Pill
- Overlay-Kopf: Pill „Stand: v7 · 10.07.2026" (Tooltip append-only-Erklärung).
- Je Feld (Muster an „Anschrift"): Toggle-Link „⟲ N frühere Werte anzeigen/ausblenden" (
.72rem,--accentText), Historie als Railborder-left:2px solid var(--bd2); padding-left:10px, Einträge „vN · bis TT.MM.JJJJ · Wert · Quelle" (.72rem,--mut/--faint; Quellen: „aus Self-Service", „aus Onboarding", „aus Formular-Rücklauf"). - Fußzeile: „Speichern erzeugt Version 8 — frühere Werte bleiben erhalten. Freitext geht immer durch." Primär-Button „Speichern → v8".
2.8 Self-Service-Karte „Aktualisierung anfordern" (im Stammdaten-Overlay)
Link-Zeile (Kopieren · In Stammdaten übernehmen · Neuen Link erzeugen), Status-Pill; Beschreibung: Praxis sieht Dokumentstatus, lädt Dokumente hoch, jeder Upload = neue Version. Sektion „ÜBER DEN LINK HOCHGELADEN": Zeilen mit Pill „neue Version · v2" (grün) + „Prüfen"-Button bzw. „ausstehend" (amber).
2.9 TaskCard (Anstehende Aufgaben, rechte Spalte)
mw-next-Karte: Typ-Label uppercase (BLOCKIEREND --red · FÄLLIG --amber · ERLEDIGT --green), Titel mit fettem Objekt, Aktionslink rechts („Freigeben →" / „Senden →" / „Erledigen →"). Kopf-Pill „N blockierend" (rot), zählt live. Erledigte Aufgabe bleibt sichtbar: „… signiert ✓" (--mut).
2.10 LifecycleRing (Avatar) & TimerCard
- Ring: 5 Segmente ab 6-Uhr-Position im Uhrzeigersinn (Lead→…→Archiviert); erledigt=grün, aktuell=accent (●), offen=
--bd2. Tooltip: „Lebenszyklus des Kunden: Lead ✓ → Onboarding ✓ → Aktiv (betreut) ● → Ruhend → Archiviert · Schritt 3 von 5". - TimerCard: Punkt pulsierend + „ZEITERFASSUNG LÄUFT", Uhr
ui-monospace, Kommentar-Textarea „Was wurde getan? (Pflicht beim Buchen)", Mandat-Select, „Pause"/„abrechenbar", Primär „Buchen (N Min)" (auf 15 min gerundet, transparent kommuniziert), Link „Erfasste Zeiten öffnen →" ⇒ Zeiten-Overlay (kein eigener Reiter).
3 · Interaktions-Grundregeln
- Overlays: ESC + Scrim-Klick schließen; keine verwaisten Vollansichten — sekundäre Ansichten (Zeiten, Stammdaten, Mandat, Assistent) sind Overlays über dem Cockpit.
- Weiche Validierung überall (MED-OP-VALID-1): Freitext geht durch, Formatvorschlag in amber statt Fehler.
- Fortschrittsbalken zählen nur Erforderliches; 100 % muss erreichbar sein.
- Ein Statuswert hat genau eine Quelle; abgeleitete Anzeigen (Sidebar-Blocker, Ring, Pills) rechnen aus demselben Zustand.
- Motion: nur
cubic-bezier(.22,1,.36,1), 0.14–0.28s (Peek 1.1s einmalig);prefers-reduced-motiondeaktiviert alles.
4 · Handoff an Claude Code
- Markup/Verhalten 1:1 aus
Akten-Cockpit 1a (Detail).dc.htmlübernehmen (Klassenmw-*/md-*, Tokens--*). screenshots/01–17sind die Soll-Zustände (Typo dort Fallback — verbindlich ist Space Grotesk ausassets/fonts/).- Labels zentral pflegen (
labels.ts-Muster) — Wording-Tabelle aus §1 ist die Referenz. - Neue Enum-Werte: Dokument
fehlt|erhalten|geprüft+ Flagsversendet|abgelaufen|nicht_erforderlich; Kontoneu|geprüft|archiviert+sepa_gueltig; alles append-only versioniert.