# AP0.6b – Abschlussbericht Jinkendo UX/PWA Remediation

**Status:** abgeschlossen  
**Stand:** 2026-07-05 (final)  
**Branch:** `develop` · Dev-Deploy und Tests grün  
**Frontend-Version:** `0.6.1-ap0.6b`  
**Backend:** unverändert (Schema `006`)

**Wesentliche Commits:** `48a599e` (Remediation), `26cd9fe` (Fix Vorhaben-Detail)

---

## 1. Ausgangsproblem

AP0.6 lieferte die fachliche Workspace-UX (Vorhaben, Maßnahmen, Widget-Registry), aber die GUI war nicht abnahmefähig:

- Generisches Blau-Theme, keine Jinkendo-Familienanmutung
- Keine konsistente App Shell (Navigation, Header, Kontext)
- Fehlende oder unzureichende responsive Umschaltung Desktop/Mobile
- Keine PWA-Grundlagen (Manifest, Icons, Viewport-Meta)
- Uneinheitliche Karten, Badges, Formulare und Zustände (Loading/Error/Empty)
- Verstreute Styles in `workspace.css` ohne Design-Tokens

AP0.6b ist eine **Remediation ohne neue Fachfeatures**.

---

## 2. Definition of Done — Prüfmatrix

### 2.1 AP0.6b-Auftrag (Abnahmekriterien)

| Kriterium | Ergebnis | Nachweis |
|-----------|----------|----------|
| Keine generische Demo-App | ✓ | Design-Tokens, Family-Shell |
| Jinkendo-Produkt erkennbar | ✓ | Brand, Grün, Sidebar/Bottom-Nav |
| Desktop brauchbar (1440px) | ✓ | Manueller Smoke (User bestätigt) |
| Mobile brauchbar (390px) | ✓ | Manueller Smoke (User bestätigt) |
| Desktop/Mobile-Umschaltung | ✓ | Shell @1024px, Components @768px |
| PWA-Manifest korrekt | ✓ | `manifest.webmanifest`, `index.html` |
| Konsistente Karten/Widgets | ✓ | `WidgetCard`, `components.css` |
| Klare Navigation | ✓ | Workspace · Vorhaben · Meine Maßnahmen |
| Status/Priorität visuell sauber | ✓ | Badges mit Textlabels |
| Loading/Error/Empty States | ✓ | Alle Widgets/Pages |
| Widget/View Registry klein | ✓ | 4 Widgets, 4 Views, frontend-only |
| Keine neuen Fachfeatures | ✓ | Nur UX; Backend unverändert |
| Tests/Smoke grün | ✓ | Vitest 9/9, Build OK, manueller Smoke OK |
| README/UX-Doku | ✓ | README AP0.6b-Abschnitt |

### 2.2 Scope 1–9 (Auftrag)

| # | Bereich | Ergebnis |
|---|---------|----------|
| 1 | App Shell | ✓ Header, Sidebar, BottomNav, ContextIndicator, MainContent |
| 2 | Responsive Desktop/Mobile | ✓ Breakpoints 768/769/1024 |
| 3 | PWA-Grundlagen | ✓ Manifest, Icons, Meta; kein SW (dokumentiert) |
| 4 | Jinkendo Look & Feel | ✓ `--jk-*` Tokens in `tokens.css` |
| 5 | Workspace UX | ✓ Alle AP0.6-Widgets/Pages überarbeitet |
| 6 | Navigation | ✓ 3 Pflichtpunkte, aktive Route sichtbar |
| 7 | Widget/View Registry | ✓ Beibehalten, + `kairo.my_actions` |
| 8 | Accessibility | ✓ Labels, Fokus, Touch-Ziele, Badge-Text |
| 9 | Keine neuen Produktfeatures | ✓ |

### 2.3 Tests

| Test | Ergebnis | Nachweis |
|------|----------|----------|
| Vitest `badges.test.jsx` | ✓ 3/3 | lokal + CI |
| Vitest `registry.test.js` | ✓ 6/6 | lokal + CI |
| `vite build` | ✓ | Production-Build |
| Backend pytest | ✓ | unverändert; CI grün (User bestätigt) |
| Manueller UI-Smoke | ✓ | Login, Workspace, Vorhaben, Maßnahmen, Status, Responsive, PWA — **User bestätigt alle Tests erfolgreich** |

### 2.4 Post-QA Bugfix

| Issue | Fix | Status |
|-------|-----|--------|
| Weißer Bildschirm bei Vorhaben-Klick (`actorsFromContext` nicht importiert) | `26cd9fe` — Import in `InitiativeDetailPage.jsx` | ✓ behoben, manuell verifiziert |

---

## 3. Umgesetzte Dateien

### Neu

| Datei | Zweck |
|-------|--------|
| `frontend/src/styles/tokens.css` | Jinkendo Design-Tokens (`--jk-*`) |
| `frontend/src/styles/shell.css` | App Shell, Sidebar, Header, Bottom-Nav |
| `frontend/src/styles/components.css` | Cards, Buttons, Badges, Forms, States |
| `frontend/src/styles/pages.css` | Seiten-spezifische Ergänzungen |
| `frontend/src/config/appNav.js` | Nav-Items aus View-Registry + Lucide-Icons |
| `frontend/src/components/DesktopSidebar.jsx` | Desktop-Navigation (≥1024px) |
| `frontend/src/components/BottomNav.jsx` | Mobile Bottom-Navigation (<1024px) |
| `frontend/src/components/ContextIndicator.jsx` | Tenant-/Actor-Kontext |
| `frontend/src/components/WidgetCard.jsx` | Einheitliche Widget-Karten |
| `frontend/src/pages/MyActionsPage.jsx` | Route `/my-actions` |
| `frontend/public/manifest.webmanifest` | PWA-Manifest |
| `frontend/public/icons/kairo-icon.svg` | App-Icon (Platzhalter, Jinkendo-Grün) |

### Geändert / Entfernt

- `frontend/index.html`, `package.json`, `app.css`, `AppLayout.jsx`, Registry, alle Widgets/Pages/Forms
- Entfernt: `frontend/src/styles/workspace.css`
- Backend: **keine Änderungen**

---

## 4. App Shell

```text
AppShell (.app-shell)
  DesktopSidebar          — nur ≥1024px
  app-shell__column
    Header (.app-header--mobile) — Brand + ContextIndicator
    MainContent (.app-main > .app-page)
    BottomNav               — nur <1024px
```

- Produktname **Kairo**, Family-Bezug „Jinkendo Program Director“
- Tenant-/Actor-Kontext in Sidebar (Desktop) und kompakt im Mobile-Header
- Content max-width `--content-max: 1120px`

---

## 5. Jinkendo Look & Feel

Design-Tokens in `tokens.css`, abgeleitet von Mitai/Shinkan (`--jk-primary: #1D9E75`, warme Neutrals). Dark Mode via `prefers-color-scheme: dark`. Einheitliche Komponenten in `components.css`.

---

## 6. Responsive Desktop/Mobile

| Viewport | Verhalten | Prüfung |
|----------|-----------|---------|
| ≥1024px | Desktop-Sidebar | ✓ manuell |
| 768–1023px | Mobile-Shell, Bottom-Nav | ✓ manuell |
| ≤767px | Kompakt, safe-area | ✓ manuell |
| 1440 / 1024 / 390 px | Smoke-Checkliste README | ✓ User bestätigt |

---

## 7. PWA-Grundlagen

Manifest, Icons, Viewport, theme-color, Apple-Tags — ✓. **Service Worker bewusst nicht** (Shinkan-Niveau; dokumentiert in README).

---

## 8. Navigation

| Route | Label |
|-------|-------|
| `/workspace` | Workspace |
| `/initiatives` (+ Detail) | Vorhaben |
| `/my-actions` | Meine Maßnahmen |

Zentral: `viewRegistry.js` + `config/appNav.js`. Prefix-Matching für Vorhaben-Detail.

---

## 9. Widget/View Registry

- **Widgets:** 4 Stück in `widgetRegistry.js`, Capability-Filter
- **Views:** 4 Stück in `viewRegistry.js` (+ `kairo.my_actions`)
- Keine Backend-Registry, kein Drag & Drop, keine Layout-Persistenz

---

## 10. Workspace UX

Alle AP0.6-Widgets/Pages auf `WidgetCard` + Family-Styles. Status/Priorität-Badges, Loading/Error/Empty States, Formulare konsistent.

---

## 11. Accessibility / Bedienbarkeit

Labels, Fokus-States, Badge-Text, Touch-Ziele Bottom-Nav ≥48px — Sprint-0-Basis erfüllt.

---

## 12. Übernommene Muster aus Mitai

Accent-Grün, warme Neutrals, Card-Dashboard, Bottom-Nav, CSS-Variablen, `100dvh` + safe-area.

**Nicht übernommen:** Gesundheits-/Tracking-Karten, Domänenlogik.

---

## 13. Übernommene Muster aus Shinkan

Desktop-Sidebar ab 1024px, sachlicher Header, Mandanten-/Actor-Kontext, robuste Seitenstruktur.

**Nicht übernommen:** Trainings-/Vereinslogik, Übungskatalog.

---

## 14. Bewusst nicht umgesetzte Punkte

- Service Worker / Offline-Caching
- Push Notifications, Background Sync
- Playwright Viewport-Tests
- PNG-Icon-Set (nur SVG)
- `GET /api/actors` (AP0.7)
- Admin-Konsole, Drag & Drop, User-Dashboard-Konfiguration

---

## 15. Noch offene UX-Mängel (nicht AP0.6b-blockierend)

- Actor-Zuweisung nur Human Actor (API-Lücke AP0.7)
- Tablet nutzt Mobile-Shell ab <1024px
- SVG-Icon nicht für alle Android-Launcher maskable-optimiert
- Kein explizites Light/Dark-Toggle

---

## 16. Empfehlung für den nächsten Schritt

1. **AP0.7:** `GET /api/actors` + ActorSelect mit echter Liste
2. **Design:** PNG-Icons (192/512) für PWA
3. **Optional:** leichtgewichtiger Service Worker
4. **QA:** Playwright-Smoke in CI
5. Sprint-1-Fachscope gemäß Product Spec (nicht vorziehen)