Zum Hauptinhalt springen

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 via data-theme). Alle Maße unten sind verbindlich, keine Neuinterpretation.

1 · Begriffe & Zustandsmodelle (G-3, verbindlich)

KonzeptZustände / BegriffeRegeln
Lebenszyklus des Kunden (Person/Akte)Lead → Onboarding → Aktiv (betreut) → Ruhend → ArchiviertLebt im Avatar-Ring. Nie „Mandats-Status" nennen.
Prozessphase (je Beratungsmandat)in Anbahnung → in Beratung → zur Unterschrift → abgeschlossenLebt auf Mandats-Karten/-Overlay, nie an der Person.
Dokumentstatus (Slider, vom Berater gesetzt)Fehlt → Erhalten → GeprüftGleiche Wortfamilie wie Ablage (angefordert/erhalten/geprüft). Nie „Nötig"/„Da"/„Bereitgestellt".
Erforderlichkeit (Checkbox je Dokument)erforderlich / vorerst nicht erforderlichAbgewä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 → ErhaltenVom 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üfstatusneu → geprüft → archiviertGetrennt von SEPA-Dimension: „SEPA gültig" / „ohne gültiges SEPA" (zwei Pills).
Archivieren statt LöschenüberallAkte ist append-only; das Verb „löschen" existiert im UI nicht.
Stammdaten-Versionv1…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; aktiv background/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:

ZustandAnzeige rechts
Fehlt (nicht versendet)Button „Zur Unterschrift →" (öffnet Assistent)
Fehlt + versendetPill amber „wartet auf Signatur" + Ghost „Erinnern" + Button „↑ Signiert hochladen" (Sign on Paper: Scan wird derselben Sendung zugeordnet und schließt sie ab)
Erhalten / Geprüftkeine Send-Aktionen (nur Slider)
abgelaufenzusätzlich roter Chip „abgelaufen"; Status steht auf Fehlt
FremdformularPill „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".

  1. 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 →".
  2. 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".
  3. 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, Transition transform .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; respektiert prefers-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 Rail border-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-motion deaktiviert alles.

4 · Handoff an Claude Code

  1. Markup/Verhalten 1:1 aus Akten-Cockpit 1a (Detail).dc.html übernehmen (Klassen mw-*/md-*, Tokens --*).
  2. screenshots/01–17 sind die Soll-Zustände (Typo dort Fallback — verbindlich ist Space Grotesk aus assets/fonts/).
  3. Labels zentral pflegen (labels.ts-Muster) — Wording-Tabelle aus §1 ist die Referenz.
  4. Neue Enum-Werte: Dokument fehlt|erhalten|geprüft + Flags versendet|abgelaufen|nicht_erforderlich; Konto neu|geprüft|archiviert + sepa_gueltig; alles append-only versioniert.