Zum Hauptinhalt springen

Handoff: Akten-Cockpit (Mandanten-Akte)

Repo-Kontext (MED-D-218): Dies ist das eingefrorene Design-Handoff-Archiv aus dem claude.ai/design- Projekt „Mandanten-Akte verbessern" — die Pixel-Quelle der Wahrheit fürs Akten-Cockpit, ins Repo geholt als Abnahme-Referenz (schließt die Lücke aus dem App-Audit v0.99.12). Die .dc.html heißt hier Akten-Cockpit-1a-Detail.dc.html (Leerzeichen/Klammern im Dateinamen normalisiert). Das Warum je Entscheidung ist in docs/produkt/Design-Entscheidungen-Akte.md eingearbeitet; der Bau-/Slice-Plan steht in docs/architektur/Akten-Cockpit-Redesign.md. Das Archiv selbst bleibt unverändert (Referenz, kein lebendes Doc).

Überblick​

Redesign der Mandanten-Akte als fokussiertes Akten-Cockpit: Dreiteilung Person (links) / Arbeit (Mitte, Reiter) / Nächstes (rechts). Kernideen: Lebenszyklus (Person) strikt getrennt von Prozessphase (je Mandat); Dokumentstatus als zustandsgetriebener DocuSign-Flow; sekundäre Ansichten als Overlays statt Reiter; alles append-only versioniert.

Über die Design-Dateien​

Die Dateien hier sind Design-Referenzen in HTML — ein klickbarer Prototyp, kein Produktionscode. Aufgabe: die Designs in der bestehenden Umgebung des Ziel-Repos drkv-com/medidentas nachbauen — Angular-Komponenten unter client/src/app/, zentrale Labels in labels.ts, Styles/Tokens in client/src/styles.css (World-2 --*-Tokens, .mw-scope-Kaskade, Themes light/dark/system via data-theme). Keine neuen Libraries einführen; bestehende Muster (md-*-Klassen, weiche Validierung MED-OP-VALID-1) weiterverwenden.

Fidelity​

High-fidelity. Farben, Typo, Abstände, Radien, Wording und Interaktionen sind final und pixelgenau nachzubauen — mit den vorhandenen Tokens/Klassen des Repos, nicht mit kopierten Inline-Styles.

Dateien in diesem Paket​

  • Akten-Cockpit 1a (Detail).dc.html — der Prototyp, Quelle der Wahrheit für Markup, exakte Inline-Werte und Verhalten (Template + class Component-Logik im selben File; support.js daneben legen und die Datei direkt im Browser öffnen).
  • akte-patterns.md — verbindliche Spezifikation: Wording-Tabelle & Zustandsmodelle (§1), alle neuen Komponenten mit Maßen/Tokens (§2), Interaktionsregeln (§3), Enum-Vorschläge (§4).
  • design-decisions.md — Decision Log (AD-001…AD-015): das Warum hinter jeder Entscheidung. Bei der Implementierung in die Produktdoku (docs/produkt/) einarbeiten.
  • screenshots/01–17-akten-cockpit.png — Soll-Zustände (Referenz-Renderings; Typo dort ist eine Fallback-Schrift — verbindlich ist Space Grotesk für Display, system-ui für Body, wie im Repo vorhanden).

Screens (Screenshot-Nummer → Zustand)​

01 Basis-Informationen (Onboarding-Dokumente inkl. Zustandsmaschine, abgelaufen-Chip, „wartet auf Signatur") · 02 Mandate · 03 Mandat-Overlay (Praxisfinanzierung) · 04 Alle Dokumente · 05 Fristen & Aufgaben · 06 Praxen · 07 Zeiten-Overlay · 08 Stammdaten-Overlay (VersionedField, Bankverbindungen mit Swipe-to-Archive, Self-Service-Karte) · 09–17 Unterschriften-Assistent: Schritt 1 Prüfen (Konto-Auswahl, Inline-IBAN) → Schritt 2 Versenden (E-Mail/Vor-Ort, SES/AES/QES, Sammel-Umschlag) → Vor-Ort-Strecke (Übergabe → Kunden-Signatur → Danke) → Schritt 3 Verfolgen (versendet/signiert) → Abschluss mit erledigter Sidebar-Aufgabe.

Interaktionen & Verhalten​

Vollständig in akte-patterns.md §2–3. Kritisch:

  • DocumentRow-Zustandsmaschine: Aktionen strikt zustandsgetrieben (Fehlt → „Zur Unterschrift"; versendet → „Erinnern" + „Signiert hochladen" (Sign on Paper); Erhalten/Geprüft → keine Send-Aktionen). Abgelaufen ⇒ automatischer Rückfall auf „Fehlt" + roter Chip.
  • Assistent-Write-back: E-Mail-Versand ⇒ Dokument „versendet"; Vor-Ort-Signatur ⇒ „Erhalten", SEPA-Konto „gültig", Aufgabe erledigt, Verlaufseintrag.
  • Overlays: ESC + Scrim-Klick schließen; keine verwaisten Vollansichten.
  • Swipe-to-Archive (BankRow): Snap −96px bei Schwelle −48px; Peek-Teach einmalig beim Öffnen; niemals „löschen".
  • Motion nur cubic-bezier(.22,1,.36,1), 0.14–0.28s; prefers-reduced-motion respektieren.

State​

Zustandsmodelle und Enum-Vorschläge in akte-patterns.md §1 + §4: Dokument fehlt|erhalten|geprüft + Flags versendet|abgelaufen|nicht_erforderlich; Konto neu|geprüft|archiviert + sepa_gueltig (je Konto: Inhaber + Zeichnungsberechtigung); Stammdaten feld-versioniert (append-only, Quelle je Version); Fortschritt zählt nur Erforderliches.

Design-Tokens​

Ausschließlich die vorhandenen World-2-Tokens aus client/src/styles.css verwenden (--bg --panel --card --chip --hover --bd --bd2 --text --text2 --mut --faint --accent --accentInk --accentText --selBg --selBd --green --amber --red --shadow --overlay). Radien: Controls 8–10px, Pills 999px, Cockpit-Karten 16px, Checkbox 4px. Keine neuen Farben erfinden.

Assets​

Alles bereits im Repo: Space-Grotesk-Webfonts (assets/fonts/), Heart-Pulse-Marke (assets/logo-mark.svg — nie nachzeichnen). Keine neuen Assets nötig; Icons als Inline-Line-SVGs (24×24, 2px, currentColor), keine Emojis.

Vorgehen (Empfehlung)​

  1. akte-patterns.md lesen (Wording zuerst — Labels nach labels.ts-Muster zentralisieren).
  2. Prototyp im Browser öffnen und parallel zum jeweiligen Screenshot durchklicken.
  3. Pro Komponente aus §2 implementieren; exakte Werte bei Bedarf aus dem .dc.html ablesen.
  4. Screenshots als Abnahme-Referenz je Zustand verwenden.