initial commit
This commit is contained in:
Lars
commit
ece111c0a7
42
.gitignore
vendored
Normal file
42
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build output
|
||||
dist/
|
||||
dist-ssr/
|
||||
|
||||
# Vite cache
|
||||
.vite/
|
||||
|
||||
# TypeScript build info
|
||||
*.tsbuildinfo
|
||||
|
||||
# Local environment / secrets
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Editor & OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
*.swp
|
||||
*.swo
|
||||
.idea/
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Claude Code local settings (machine-specific, not project-wide)
|
||||
.claude/settings.local.json
|
||||
|
||||
# Logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# PWA generated files
|
||||
public/sw.js
|
||||
public/workbox-*.js
|
||||
101
CLAUDE.md
Normal file
101
CLAUDE.md
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
# CLAUDE.md — Assignment Monitor
|
||||
|
||||
Progressive Web App zur Live-Bewertung von Capgemini-Trainees (Institutees) während Kunden-Assignments.
|
||||
|
||||
**Vollständige Dokumentation:** `docs/` — bei neuer Session zuerst `docs/HANDOVER.md` lesen.
|
||||
|
||||
---
|
||||
|
||||
## Stack
|
||||
|
||||
- React 18 + TypeScript + Vite (PWA)
|
||||
- Tailwind CSS v4 — `@import "tailwindcss"` in CSS, **kein** `tailwind.config.js`
|
||||
- Dexie.js v5 — IndexedDB-Wrapper, kein Backend
|
||||
- React Router v6
|
||||
- Capgemini-Brandfarbe: `#0070AD`
|
||||
|
||||
## Entwicklung
|
||||
|
||||
```bash
|
||||
npm run dev # Dev-Server starten
|
||||
npx tsc --noEmit # TypeScript-Check — muss vor jeder Abgabe fehlerfrei sein
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Kritische Eigenheiten
|
||||
|
||||
### Doppelte `criteriaId`-Semantik
|
||||
|
||||
```
|
||||
Assessment.criteriaId → FeedbackCriterionItem.id (Gesamtbewertung)
|
||||
ConversationSkillScore.criteriaId → FeedbackCategory.id (Schnellbewertung)
|
||||
```
|
||||
|
||||
### AssignmentType.criteriaIds
|
||||
|
||||
Referenziert `FeedbackCriterionItem.id[]`. Leer = alle Kriterien anzeigen.
|
||||
|
||||
Filterlogik (immer so anwenden):
|
||||
```typescript
|
||||
const itemFilter = aType?.criteriaIds?.length ? new Set(aType.criteriaIds) : null
|
||||
const filteredItems = itemFilter ? allItems.filter(i => itemFilter.has(i.id!)) : allItems
|
||||
const visibleCatIds = new Set(filteredItems.map(i => i.categoryId))
|
||||
const filteredCats = itemFilter ? allCats.filter(c => visibleCatIds.has(c.id!)) : allCats
|
||||
```
|
||||
|
||||
### Rating-Skala
|
||||
|
||||
```typescript
|
||||
type FeedbackRating = 'na' | 'not_client_ready' | 'partially_client_ready' | 'nearly_client_ready' | 'client_ready'
|
||||
// Numerisch: na=0, not=1, partially=2, nearly=3, fully=4
|
||||
// N/A gilt als "nicht gesetzt" — aus allen Berechnungen ausschließen!
|
||||
```
|
||||
|
||||
Aggregation: gewichteter Durchschnitt → `avg < 1.5` Not · `< 2.5` Partially · `< 3.5` Nearly · `≥ 3.5` Fully
|
||||
|
||||
### Routing
|
||||
|
||||
```
|
||||
/assignment/:id/meeting/:meetingId ← meetingId ist MeetingInstance.id, nicht Assignment-ID
|
||||
```
|
||||
|
||||
MeetingView liest: `const { id, meetingId: meetingIdParam } = useParams()`
|
||||
|
||||
### Sonstige Fallstricke
|
||||
|
||||
- `MeetingInstance.generalNotes` kann `undefined` sein → immer `?? ''` als Fallback
|
||||
- `PhaseKey` ist `string`, kein Union-Typ
|
||||
- Tailwind v4: arbitrary values `bg-[#0070AD]` direkt im className — kein Config nötig
|
||||
|
||||
---
|
||||
|
||||
## Stil-Regeln
|
||||
|
||||
- **Keine Kommentare** außer für nicht-offensichtliche Invarianten (kein „Was", nur „Warum")
|
||||
- **Keine Auto-Resize-Textarea via `rows={1}` + JS** — stattdessen View/Edit-Toggle oder `fieldSizing: 'content'` als Inline-Style
|
||||
- **`RATING_OPTIONS`-Array** nicht neu definieren — immer aus dem bestehenden Array in der jeweiligen Datei verwenden
|
||||
- **Kein `useEffect` für DB-Calls** außer bei initialem Load — lieber direkte `async`-Funktionen
|
||||
|
||||
---
|
||||
|
||||
## Offene Punkte (priorisiert)
|
||||
|
||||
| Prio | Aufgabe | Datei |
|
||||
|---|---|---|
|
||||
| M | `Evaluation.tsx` auf neue Datenstruktur migrieren | `src/pages/Evaluation.tsx` |
|
||||
| M | AI-Prompt auf `feedbackCriterionItems` umstellen | `src/pages/AssignmentFeedbackPage.tsx` |
|
||||
| M | `meetingExport.ts` — Kriterien-Auflösung anpassen | `src/utils/meetingExport.ts` |
|
||||
| N | Dashboard: Assignment-Nummer anzeigen | `src/pages/Dashboard.tsx` |
|
||||
| N | AssignmentCreate: Feld für Assignment-Nummer | `src/pages/AssignmentCreate.tsx` |
|
||||
| N | Toter Code in FeedbackStructureConfig entfernen | `src/pages/FeedbackStructureConfig.tsx` |
|
||||
| L | SQLite WASM + OPFS Migration (kein festes Datum) | `src/db/index.ts` |
|
||||
|
||||
---
|
||||
|
||||
## Datenschutz
|
||||
|
||||
- Alle Daten lokal (IndexedDB) — **kein Public Cloud Upload**
|
||||
- GDPR-relevant: Institutee-Namen, Kundennamen, Gesprächsnotizen
|
||||
- KI-API-Key in `localStorage` — nie loggen oder ausgeben
|
||||
- Backup-JSON enthält alle personenbezogenen Daten → vertraulich behandeln
|
||||
4
build.bat
Normal file
4
build.bat
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@echo off
|
||||
cd /d C:\dev\AssigmentMonitor
|
||||
npm run build > build_log.txt 2>&1
|
||||
echo Exit code: %ERRORLEVEL% >> build_log.txt
|
||||
160
docs/FACHLICHE_ARCHITEKTUR.md
Normal file
160
docs/FACHLICHE_ARCHITEKTUR.md
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
# Fachliche Architektur — Assignment Monitor
|
||||
|
||||
## Zweck und Kontext
|
||||
|
||||
Assignment Monitor ist eine Progressive Web App (PWA) zur **Live-Begleitung und Bewertung von Capgemini-Trainees** (Institutees) während ihrer Kunden-Assignments. Die App wird vom jeweiligen Lead (Führungskraft / Mentor) auf dem Smartphone genutzt, um:
|
||||
|
||||
- Kundentermine strukturiert zu protokollieren
|
||||
- Beobachtungen und Bewertungen in Echtzeit zu erfassen
|
||||
- Am Ende eines Assignments ein qualifiziertes Feedback vorzubereiten
|
||||
|
||||
**Nutzer:** Lars Stommer (Capgemini Management Consultant Trainee Program Lead)
|
||||
**Sprache der App:** Deutsch (Bedienoberfläche), Englisch (Rating-Labels)
|
||||
**Datenschutz:** Alle Daten bleiben lokal im Browser (IndexedDB). Kein Public Cloud Upload.
|
||||
|
||||
---
|
||||
|
||||
## Fachliche Entitätenhierarchie
|
||||
|
||||
```
|
||||
AssignmentType ← Konfiguration (z.B. "Case Interview")
|
||||
└── PhaseTemplate[] ← Definierter Meeting-Flow des Typs
|
||||
└── criteriaIds: FeedbackCriterionItem[] ← Welche Kriterien gelten für diesen Typ
|
||||
|
||||
Assignment ← Ein konkretes Kundenprojekt
|
||||
└── AssignmentType ← Zugeordneter Typ
|
||||
└── Institutees: Consultant[] ← Begleitete Berater (1–n)
|
||||
└── MeetingInstance[] ← Durchgeführte Meetings je Phase
|
||||
|
||||
MeetingInstance ← Ein konkreter Termin (z.B. "Briefing Call #1")
|
||||
└── PhaseTemplate ← Welche Phase des Assignments
|
||||
└── ConversationEntry[] ← Zeitleiste: wer spricht wann
|
||||
└── Assessment[] ← Gesamtbewertung pro Institutee am Ende
|
||||
|
||||
ConversationEntry ← Ein Gesprächsbeitrag eines Institutees
|
||||
└── ConversationSkillScore[] ← Kategorie-Schnellbewertung (während des Beitrags)
|
||||
|
||||
FeedbackDimension ← Übergeordnete Dimension für das Assignment-Feedback
|
||||
└── FeedbackCategory[] ← Kategorie (z.B. "Kommunikationsfähigkeit")
|
||||
└── FeedbackCriterionItem[] ← Einzelnes Kriterium (z.B. "To the point")
|
||||
|
||||
AssignmentFeedback ← Strukturiertes Abschluss-Feedback pro Institutee
|
||||
└── FeedbackCategoryRating[] ← Bewertung je Kategorie
|
||||
└── FeedbackDimensionText[] ← Freitext Achievements + Development Needs je Dimension
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Meeting-Phasen
|
||||
|
||||
Jeder AssignmentTyp definiert einen geordneten Flow von PhaseTemplates. Die drei vordefinierten Typen haben folgende Phasen:
|
||||
|
||||
| Phase | Mit wem | Wdh. | Protokoll | Bewertung | Generisch | Case | Pitch |
|
||||
|---|---|:-:|:-:|:-:|:-:|:-:|:-:|
|
||||
| Pre-Briefing (Lead) | Lead | — | — | — | ✓ | ✓ | ✓ |
|
||||
| Briefing (Kunde) | Kunde | — | ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| Alignment Call | Kunde | **✓** | ✓ | ✓ | ✓ | — | ✓ |
|
||||
| Pre-Delivery (Lead) | Lead | — | — | — | ✓ | — | ✓ |
|
||||
| Delivery / Pitch | Kunde | — | ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| Feedback Call (Kunde) | Kunde | — | ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| Feedback Call (Lead) | Lead | — | — | — | ✓ | ✓ | ✓ |
|
||||
|
||||
Wiederholbare Phasen (z.B. Alignment Calls) werden mit fortlaufendem `phaseIndex` und Dateinamen-Suffix `-#2`, `-#3` etc. gekennzeichnet.
|
||||
|
||||
---
|
||||
|
||||
## Bewertungssystem
|
||||
|
||||
### Skala
|
||||
|
||||
| Label | Kürzel | Farbe | Numerischer Wert |
|
||||
|---|---|---|:-:|
|
||||
| N/A | N/A | grau | 0 |
|
||||
| Not Client Ready | Not | rot | 1 |
|
||||
| Partially Client Ready | Partially | orange | 2 |
|
||||
| Nearly Client Ready | Nearly | hellgrün | 3 |
|
||||
| Client Ready | Fully | dunkelgrün | 4 |
|
||||
|
||||
`N/A` gilt als „nicht gesetzt" und wird aus allen Berechnungen ausgeschlossen.
|
||||
|
||||
### Aggregationslogik
|
||||
|
||||
**Gewichteter Durchschnitt** über alle Kriterien mit `weight`-Faktor (×1–×5):
|
||||
|
||||
```
|
||||
avg = Σ(score_i × weight_i) / Σ(weight_i)
|
||||
```
|
||||
|
||||
Mapping auf Rating:
|
||||
- `avg < 1.5` → Not
|
||||
- `avg < 2.5` → Partially
|
||||
- `avg < 3.5` → Nearly
|
||||
- `avg ≥ 3.5` → Fully
|
||||
|
||||
### Zwei Assessment-Ebenen
|
||||
|
||||
1. **Kategorie-Level (live, während Gesprächsbeitrag):** `ConversationSkillScore.criteriaId` → `FeedbackCategory.id`
|
||||
Schnelle Bewertung während ein Institutee spricht. Optional, da im Hektik oft nicht machbar.
|
||||
|
||||
2. **Kriterium-Level (Gesamtbewertung am Ende des Meetings):** `Assessment.criteriaId` → `FeedbackCriterionItem.id`
|
||||
Detaillierte Bewertung je Kriterium nach dem Meeting. Grundlage für die Kategorie-Farbkodierung im Gesamtbewertungs-Tab.
|
||||
|
||||
---
|
||||
|
||||
## Feedback-Struktur (Abschluss-Feedback)
|
||||
|
||||
Die Feedback-Struktur ist vollständig konfigurierbar und von der Meeting-Bewertungsstruktur **getrennt**. Sie spiegelt das Capgemini-Kompetenzmodell wider:
|
||||
|
||||
| Dimension | Kategorien (Beispiele) |
|
||||
|---|---|
|
||||
| Mindset, Commitment, Collaboration | Persönliche Einstellung, Professionalität, Commitment, Kommunikationsfähigkeit, Zusammenarbeit |
|
||||
| Running Our Projects | Ergebnisverantwortung, Arbeitsstil, Kundenmanagement, Lieferzeiten |
|
||||
| Growing our People | Networking, Learning und Development |
|
||||
| Functional & Technical Skills | Qualität des Inhalts, Inhaltliche Vollständigkeit, Qualität der Unterlage, Prozesstreue |
|
||||
| Innovation und Asset Development | Innovation |
|
||||
|
||||
Das Abschluss-Feedback (`AssignmentFeedbackPage`) erlaubt:
|
||||
- Manuelle Bewertung je Kategorie (N/A bis Fully)
|
||||
- KI-gestützten Textentwurf via OpenRouter API (GPT-4o, Claude, Gemini)
|
||||
- Manuell editierbare Textfelder „Achievements" und „Development Needs" je Dimension
|
||||
- Status-Toggle: Entwurf → Final
|
||||
|
||||
---
|
||||
|
||||
## Protokoll-Notation
|
||||
|
||||
Im Gesprächsprotokoll unterstützt die App eine Schnellnotations-Syntax, die farbig gerendert wird:
|
||||
|
||||
| Symbol | Bedeutung | Darstellung |
|
||||
|---|---|---|
|
||||
| `+` | Positiv | grün |
|
||||
| `(+)` | Positiv mit Abstrichen | grün (gedimmt) |
|
||||
| `!` | Negativ | rot |
|
||||
| `(!)` | Negativ mit Abstrichen | rot (gedimmt) |
|
||||
| `>` | Einwand / Kundeninput | blau |
|
||||
| `[…]` | Slide-/Dokument-Referenz | grau |
|
||||
|
||||
---
|
||||
|
||||
## Export-Funktionen
|
||||
|
||||
### Meeting-Export
|
||||
**Format:** `{AssignmentNummer}_{Datum}_{PhasenLabel}{-#Nr}.{md|json}`
|
||||
**Beispiel:** `CGI-2024-001_02-07-2026_Alignment Call-2.md`
|
||||
|
||||
- **Markdown:** Lesbare Dokumentation mit Protokoll, Bewertungen und Notizen
|
||||
- **JSON:** Vollständige Datensicherung eines einzelnen Meetings
|
||||
|
||||
### Datenbank-Backup
|
||||
Vollständiger Export aller Tabellen als JSON-Datei. Import löscht alle Daten und stellt den gesicherten Stand wieder her. Backup sollte nach jedem Meeting erstellt werden.
|
||||
|
||||
---
|
||||
|
||||
## Datenschutz und Datenhaltung
|
||||
|
||||
- Alle Daten bleiben im **lokalen Browser-IndexedDB** (Dexie.js)
|
||||
- Kein Backend, kein Cloud-Sync
|
||||
- Personenbezogene Daten: Namen von Institutees, Kundennamen, Gesprächsnotizen
|
||||
- GDPR-relevant: Backup-Dateien müssen sicher (OneDrive, lokaler Ordner) aufbewahrt werden
|
||||
- **Kein Public Cloud Storage** erlaubt (explizite Anforderung)
|
||||
- Zukünftig geplant: SQLite WASM + OPFS für robustere lokale Speicherung ohne Installation
|
||||
169
docs/HANDOVER.md
Normal file
169
docs/HANDOVER.md
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
# Handover-Dokument — Assignment Monitor
|
||||
|
||||
Dieses Dokument ermöglicht einem neuen Chat-Kontext, die Arbeit am Projekt nahtlos fortzuführen.
|
||||
|
||||
---
|
||||
|
||||
## Worum geht es?
|
||||
|
||||
**Assignment Monitor** ist eine PWA für Lars Stommer (Capgemini Management Consultant Trainee Program Lead). Die App wird auf dem Smartphone genutzt, um Trainees (intern: „Institutees") während ihrer Kunden-Assignments live zu begleiten und zu bewerten. Lars führt die Meetings, beobachtet die Trainees und möchte sofort Notizen und Bewertungen erfassen, ohne Stift/Papier.
|
||||
|
||||
## Tech-Stack
|
||||
|
||||
- **React 18 + TypeScript + Vite** (PWA)
|
||||
- **Tailwind CSS v4** (`@import "tailwindcss"` — kein `tailwind.config.js`!)
|
||||
- **Dexie.js v5** als IndexedDB-Wrapper (lokale DB im Browser, kein Backend)
|
||||
- **React Router v6**
|
||||
- **Capgemini-Brandfarbe:** `#0070AD`
|
||||
- Arbeitsverzeichnis: `C:\dev\AssigmentMonitor`
|
||||
|
||||
## Bewertungsskala (kritisch für alle Berechnungen)
|
||||
|
||||
```typescript
|
||||
type FeedbackRating = 'na' | 'not_client_ready' | 'partially_client_ready' | 'nearly_client_ready' | 'client_ready'
|
||||
// Numerisch: na=0, not=1, partially=2, nearly=3, fully=4
|
||||
// Labels: N/A, Not, Partially, Nearly, Fully
|
||||
// Farben: grau, rot, orange, hellgrün, dunkelgrün
|
||||
// N/A gilt als "nicht gesetzt" — aus allen Berechnungen ausgeschlossen!
|
||||
```
|
||||
|
||||
Aggregation: **gewichteter Durchschnitt** (avg < 1.5 → Not, < 2.5 → Partially, < 3.5 → Nearly, ≥ 3.5 → Fully)
|
||||
|
||||
## Datenmodell-Kern (was zu wissen ist)
|
||||
|
||||
### Schlüssel-Unterschied: zwei `criteriaId`-Semantiken
|
||||
|
||||
```
|
||||
Assessment.criteriaId → FeedbackCriterionItem.id (Gesamtbewertung nach Meeting)
|
||||
ConversationSkillScore.criteriaId → FeedbackCategory.id (Schnellbewertung während Gespräch)
|
||||
```
|
||||
|
||||
Das klingt inkonsistent — ist aber so gewollt und funktioniert so.
|
||||
|
||||
### AssignmentType.criteriaIds
|
||||
|
||||
```typescript
|
||||
// Leer = alle Kriterien anzeigen
|
||||
// Befüllt = nur diese FeedbackCriterionItem.id anzeigen
|
||||
criteriaIds?: number[] // → FeedbackCriterionItem.id
|
||||
```
|
||||
|
||||
Filterlogik (in MeetingView + AssignmentDetail):
|
||||
```typescript
|
||||
const itemFilter = aType?.criteriaIds?.length ? new Set(aType.criteriaIds) : null
|
||||
const filteredItems = itemFilter ? allItems.filter(i => itemFilter.has(i.id!)) : allItems
|
||||
const visibleCatIds = new Set(filteredItems.map(i => i.categoryId))
|
||||
const filteredCats = itemFilter ? allCats.filter(c => visibleCatIds.has(c.id!)) : allCats
|
||||
```
|
||||
|
||||
### Dateiname für Meeting-Exporte
|
||||
|
||||
```typescript
|
||||
`${assignment.assignmentNumber ?? assignment.title}_${date}_${template.label}${phaseIndex > 1 ? `-${phaseIndex}` : ''}.${ext}`
|
||||
// Beispiel: CGI-2024-001_02-07-2026_Alignment Call-2.md
|
||||
```
|
||||
|
||||
## Routing-Übersicht
|
||||
|
||||
```
|
||||
/ Dashboard
|
||||
/assignment/new Neues Assignment
|
||||
/assignment/:id AssignmentDetail
|
||||
/assignment/:id/edit AssignmentEdit
|
||||
/assignment/:id/meeting/:meetingId MeetingView ← WICHTIG: meetingId != assignmentId
|
||||
/assignment/:id/feedback/:instituteeId AssignmentFeedbackPage
|
||||
/assignment/:id/feedback-draft/:instituteeId FeedbackDraftPage (Legacy)
|
||||
/evaluation Auswertung (veraltet!)
|
||||
/consultants Berater
|
||||
/config Konfiguration (3 Tabs)
|
||||
```
|
||||
|
||||
MeetingView liest den Param als: `const { id, meetingId: meetingIdParam } = useParams()`
|
||||
|
||||
## Konfigurationsbereich
|
||||
|
||||
**Tab "Feedback"** (`FeedbackStructureConfig.tsx`):
|
||||
- Dimensionen → Kategorien → Kriterium-Items (mit Gewichtung ×1–×5)
|
||||
- Nur Feedback-Struktur, kein AssignmentType-CRUD mehr!
|
||||
|
||||
**Tab "Ass.-Typen"** (`AssignmentTypeConfig.tsx`):
|
||||
- AssignmentTypen CRUD
|
||||
- Pro Typ: Sub-Tabs "Phasen" und "Kriterien"
|
||||
- Kriterien-Tab: Baumstruktur Dimension → Kategorie → Items (Checkbox, Indeterminate)
|
||||
|
||||
**Tab "Backup"** (`Configuration.tsx`):
|
||||
- JSON-Export aller Tabellen via `exportFullBackup()`
|
||||
- JSON-Import via `importFullBackup(file)` (löscht alles, dann bulkAdd)
|
||||
|
||||
## Bekannte offene Punkte (Priorität nach Dringlichkeit)
|
||||
|
||||
### Sofort-Fixes (einfach)
|
||||
1. **Dashboard zeigt keine Assignment-Nummer** — `Dashboard.tsx` Zeile ~57: `{a.assignmentNumber && <span>...{a.assignmentNumber}</span>}` hinzufügen
|
||||
2. **AssignmentCreate hat kein Nummer-Feld** — Inputfeld für `assignmentNumber` hinzufügen
|
||||
3. **Toter Code in FeedbackStructureConfig** — State-Variablen `assignmentTypes`, `phaseTemplates`, `showCatalogs`, `showTypeConfig`, `expandedType`, `newTypeName`, `newPhase`, `typeError` + alle Handler `toggleCatalogCategory`, `addAssignmentType`, `updateAssignmentTypeName`, `deleteAssignmentType`, `addPhaseTemplate`, `updatePhaseTemplate`, `deletePhaseTemplate` entfernen
|
||||
|
||||
### Mittlere Aufgaben
|
||||
4. **Evaluation.tsx neu schreiben** — nutzt `db.categories` + `db.criteria` (Legacy). Soll `feedbackCriterionItems` + `assessments` nutzen und Rating-Labels zeigen
|
||||
5. **meetingExport.ts anpassen** — Score-Aufschlüsselung nutzt `db.criteria`, sollte `feedbackCriterionItems` nutzen; Kategorie-Namen im Markdown fehlen
|
||||
6. **AI-Prompt in AssignmentFeedbackPage** — nutzt `db.criteria` (alt), sollte `feedbackCriterionItems` + neue Assessment-Scores nutzen
|
||||
|
||||
### Große Aufgaben
|
||||
7. **SQLite WASM + OPFS** — Migration weg von IndexedDB. Konzept steht, Implementierung steht aus.
|
||||
|
||||
## Stil-Regeln (bitte einhalten)
|
||||
|
||||
- **Tailwind v4**: kein `bg-[#0070AD]` via config, direkt als CSS-Variable nicht nötig — `bg-[#0070AD]` im Class-String funktioniert direkt
|
||||
- **Keine Kommentare** außer für nicht-offensichtliche Invarianten
|
||||
- **Kein `rows={1}` + JS-Autoresize** — besser View/Edit-Toggle oder `fieldSizing: 'content'` via Inline-Style
|
||||
- **Rating-Buttons** immer mit `RATING_OPTIONS`-Array (nicht neu definieren):
|
||||
```typescript
|
||||
{ value, short, color (inaktiv), active (aktiv) }
|
||||
```
|
||||
- **Weighted-Average** immer: N/A excludieren, dann `Σ(score×weight)/Σ(weight)`
|
||||
|
||||
## Notations-Parser
|
||||
|
||||
`src/utils/notationParser.tsx` exportiert `<NotationText text={string} />` — rendert `+`, `(+)`, `!`, `(!)`, `>`, `[…]` farbig. Überall verwenden wo Protokoll-Text angezeigt wird.
|
||||
|
||||
## DB-Backup
|
||||
|
||||
`src/utils/dbBackup.ts` exportiert:
|
||||
```typescript
|
||||
exportFullBackup(): Promise<void> // Download als JSON
|
||||
importFullBackup(file: File): Promise<{ ok: boolean; error?: string }> // Clears + bulkAdd
|
||||
```
|
||||
|
||||
Alle 20 Tabellen-Namen sind in `TABLE_NAMES` aufgelistet — bei neuen Tabellen dort ergänzen.
|
||||
|
||||
## Seed-Daten
|
||||
|
||||
`src/main.tsx` ruft beim Start auf:
|
||||
1. `seedIfEmpty()` — 3 AssignmentTypen + Legacy-Kriterien
|
||||
2. `seedFeedbackStructureIfEmpty()` — 5 Dimensionen, 14 Kategorien, ~70 Items
|
||||
3. `seedCriterionMappingsIfEmpty()` — Legacy-Mappings
|
||||
4. `migrateToUnifiedCriteriaIfNeeded()` — Migration auf FeedbackCategory-IDs in PhaseTemplates
|
||||
|
||||
## Datenschutz-Hinweise
|
||||
|
||||
- Alle Daten lokal, kein Cloud-Backend
|
||||
- GDPR-relevant: Institutee-Namen + Kundennamen in der DB
|
||||
- KI-API: OpenRouter, API-Key in localStorage (nicht im Klartext loggen!)
|
||||
- Backup-JSON enthält alle personenbezogenen Daten → vertraulich behandeln
|
||||
|
||||
## TypeScript-Build
|
||||
|
||||
```bash
|
||||
npx tsc --noEmit # Muss ohne Fehler durchlaufen
|
||||
npm run dev # Dev-Server starten
|
||||
```
|
||||
|
||||
Vor jeder Abgabe: `npx tsc --noEmit` ausführen und alle Fehler beheben.
|
||||
|
||||
## Wichtige Eigenheiten / Fallstricke
|
||||
|
||||
1. **`MeetingInstance.generalNotes`**: Kann in alten Datensätzen `undefined` sein → immer `?? ''` fallback
|
||||
2. **`Assessment.criteriaId`**: Zeigt auf `FeedbackCriterionItem.id`, NICHT auf `FeedbackCategory.id` — das verwirrt, weil der Feldname `criteriaId` ist
|
||||
3. **`PhaseKey`**: Ist `type PhaseKey = string` (kein Union-Typ mehr)
|
||||
4. **`aType2`** in `AssignmentDetail.tsx`: Doppelte Variable aus Refactoring — `aType` wird zweimal deklariert, zweite heißt `aType2`. Technische Schuld.
|
||||
5. **`expandedCat`** in `MeetingView`: `Record<instituteeId, categoryId | null>` — öffnet pro Institutee genau eine Kategorie gleichzeitig
|
||||
6. **Dexie v5**: `bulkAdd` schlägt fehl wenn IDs schon vorhanden → Backup-Import leert erst alle Tabellen
|
||||
98
docs/STATUS_UND_OFFENE_PUNKTE.md
Normal file
98
docs/STATUS_UND_OFFENE_PUNKTE.md
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
# Projektstatus und offene Punkte — Assignment Monitor
|
||||
|
||||
Stand: 2026-07-02
|
||||
|
||||
---
|
||||
|
||||
## Implementierungsstatus
|
||||
|
||||
### ✅ Vollständig implementiert
|
||||
|
||||
| Feature | Seite / Datei |
|
||||
|---|---|
|
||||
| Dashboard: Assignment-Liste | `Dashboard.tsx` |
|
||||
| Assignment anlegen (Typ, Institutees, Phasen-Preview) | `AssignmentCreate.tsx` |
|
||||
| Assignment nachbearbeiten (Nummer, Typ-Wechsel-Warnung, Institutee-Laufzeiten) | `AssignmentEdit.tsx` |
|
||||
| Phasen-Flow-Ansicht pro Assignment | `AssignmentDetail.tsx` |
|
||||
| Soft-Delete + Papierkorb für Meetings | `AssignmentDetail.tsx` |
|
||||
| Bewertungs-Chips je Institutee + Kategorie in der Übersicht | `AssignmentDetail.tsx` |
|
||||
| Live-Gesprächsprotokoll mit Sprecher-Zeitlinie | `MeetingView.tsx` |
|
||||
| Schnellnotation (+, !, >, […]) mit farbigem Rendering | `MeetingView.tsx`, `notationParser.tsx` |
|
||||
| Äh-Counter pro Institutee (live + nachträgliche Anpassung) | `MeetingView.tsx` |
|
||||
| Gesamtbewertung auf Kriterium-Ebene (Accordion, farbige Kategorie-Header) | `MeetingView.tsx` |
|
||||
| Auto-Calc Bewertung aus Protokoll-Kategorie-Scores | `MeetingView.tsx` |
|
||||
| Allgemeine Notizen mit Auto-Resize + Notation-Rendering | `MeetingView.tsx` |
|
||||
| Meeting-Export: Markdown + JSON, strukturierter Dateiname | `meetingExport.ts` |
|
||||
| Assignment-Nummer im Dateinamen | `MeetingView.tsx`, `AssignmentDetail.tsx` |
|
||||
| Strukturiertes Abschluss-Feedback pro Institutee | `AssignmentFeedbackPage.tsx` |
|
||||
| KI-Feedback-Generierung via OpenRouter | `AssignmentFeedbackPage.tsx` |
|
||||
| Feedback-Status: Entwurf → Final | `AssignmentFeedbackPage.tsx` |
|
||||
| Feedback-Dimensionsstruktur CRUD mit Gewichtung ×1–×5 | `FeedbackStructureConfig.tsx` |
|
||||
| AssignmentTyp CRUD mit Phasen-Templates | `AssignmentTypeConfig.tsx` |
|
||||
| Kriterien-Auswahl je Typ (Baumstruktur, Indeterminate) | `AssignmentTypeConfig.tsx` |
|
||||
| Kriterien-Filterung je Typ in Meetings + Übersicht | `MeetingView.tsx`, `AssignmentDetail.tsx` |
|
||||
| Vollständiges DB-Backup (JSON Export/Import) | `dbBackup.ts`, `Configuration.tsx` |
|
||||
| Berater/Gruppen-Verwaltung | `Consultants.tsx` |
|
||||
| PWA (installierbar, Offline-fähig) | Vite-PWA-Plugin |
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Offene Punkte / Bugs
|
||||
|
||||
### Priorität Hoch
|
||||
|
||||
| # | Beschreibung | Datei | Aufwand |
|
||||
|---|---|---|---|
|
||||
| H1 | **IndexedDB-Robustheit**: Browser kann IndexedDB unter Speicherdruck löschen. Migration zu SQLite WASM + OPFS geplant. Bis dahin: regelmäßige Backups als einzige Sicherheit. | `db/index.ts` | L (Wochen) |
|
||||
| H2 | **Backup-Reminder fehlt**: Es gibt keine automatische Erinnerung / keinen Hinweis nach abgeschlossenem Meeting, dass ein Backup erstellt werden sollte. | `MeetingView.tsx` | S |
|
||||
|
||||
### Priorität Mittel
|
||||
|
||||
| # | Beschreibung | Datei | Aufwand |
|
||||
|---|---|---|---|
|
||||
| M1 | **Evaluation.tsx veraltet**: Nutzt die Legacy-`Category`/`Criterion`-Tabellen, nicht die neue `feedbackCriterionItems`-Struktur. Zeigt falsche / keine Daten aus neuen Meetings. | `Evaluation.tsx` | M |
|
||||
| M2 | **AI-Prompt veraltet**: `AssignmentFeedbackPage` liest `db.criteria` (alt) für Score-Zeilen. Sollte auf `feedbackCriterionItems` + `assessments` umgestellt werden. | `AssignmentFeedbackPage.tsx` | M |
|
||||
| M3 | **meetingExport.md veraltet**: Kriterien-Scores werden über `db.criteria` aufgelöst, nicht `feedbackCriterionItems`. Kategorie-Namen fehlen im Export. | `meetingExport.ts` | S |
|
||||
|
||||
### Priorität Niedrig
|
||||
|
||||
| # | Beschreibung | Datei | Aufwand |
|
||||
|---|---|---|---|
|
||||
| N1 | **Dashboard**: Zeigt keine Assignment-Nummer. Nur Titel + Kunde + Typ. | `Dashboard.tsx` | XS |
|
||||
| N2 | **AssignmentCreate**: Kein Feld für Assignment-Nummer. Muss nachträglich über Edit eingegeben werden. | `AssignmentCreate.tsx` | XS |
|
||||
| N3 | **FeedbackStructureConfig**: Toter Code — Funktionen für AssignmentType-CRUD wurden verschoben, Deklarationen blieben (`assignmentTypes`, `phaseTemplates` State + alle zugehörigen Handler). | `FeedbackStructureConfig.tsx` | XS |
|
||||
| N4 | **Evaluation-Route**: Zeigt Scores als Dezimalzahlen `/5` mit alter Skala statt neuer Rating-Labels. | `Evaluation.tsx` | S |
|
||||
| N5 | **AssignmentCreate**: Erstellt keine `instituteeEnrollments`. Von/Bis-Daten können nur über Edit gepflegt werden. | `AssignmentCreate.tsx` | S |
|
||||
| N6 | **Meeting-Route**: URL ist `/assignment/:id/meeting/:meetingId` — `:id` ist die Assignment-ID, aber die Assignment-Nummer (z.B. CGI-2024-001) ist nicht in der URL. Akzeptiert als nice-to-have. | `App.tsx` | M |
|
||||
|
||||
---
|
||||
|
||||
## Geplante Erweiterungen (Roadmap)
|
||||
|
||||
### SQLite WASM + OPFS (Datenbankevolution)
|
||||
**Ziel:** Robuste lokale Datenhaltung ohne Installation, ohne Risiko durch Browser-Speicherdruck.
|
||||
**Technologie:** SQLite compiled to WebAssembly, persistiert via Origin Private File System (OPFS).
|
||||
**Vorteil:** Echte Datei auf Gerät, nicht löschbar wie IndexedDB. Kein Server nötig.
|
||||
**Status:** Konzept beschlossen. Implementierung steht aus. Paralleles Backup-System ist die aktuelle Notlösung.
|
||||
|
||||
### Evaluation neu (M1 oben)
|
||||
Auswertungsseite auf neue Datenstruktur migrieren. Soll zeigen:
|
||||
- Pro Institutee: aggregierte Kriterien-Scores über alle Meetings
|
||||
- Trend über mehrere Assignments
|
||||
- Vergleich zwischen Institutees
|
||||
|
||||
### Dashboard-Verbesserungen (N1 oben)
|
||||
- Assignment-Nummer anzeigen
|
||||
- Filtern nach Status (aktiv/abgeschlossen)
|
||||
- Sortierung nach Datum / Assignment-Nummer
|
||||
|
||||
---
|
||||
|
||||
## Bekannte Datenkonsistenz-Risiken
|
||||
|
||||
| Risiko | Beschreibung | Mitigation |
|
||||
|---|---|---|
|
||||
| `criteriaIds` auf `AssignmentType` | Referenziert `FeedbackCriterionItem.id`. Wenn Kriterien gelöscht werden, bleiben verwaiste IDs in `criteriaIds`. Filter ignoriert fehlende IDs stillschweigend. | Beim Löschen von Items: `criteriaIds` in allen AssignmentTypes bereinigen |
|
||||
| `Assessment.criteriaId` | Referenziert `FeedbackCriterionItem.id`. Kein FK-Constraint in IndexedDB. | Beim Löschen von Items: zugehörige Assessments löschen |
|
||||
| `ConversationSkillScore.criteriaId` | Referenziert `FeedbackCategory.id`. Gleiche Gefahr. | Beim Löschen von Kategorien: ConversationSkillScores bereinigen |
|
||||
| Typ-Wechsel bei Assignment | Zeigt Warnung, löscht aber keine alten Meeting-Bewertungen. Bewertungen mit IDs aus dem alten Typ-Kriteriensatz bleiben erhalten, werden aber möglicherweise nicht mehr angezeigt. | Dokumentiertes Verhalten, absichtlich so gestaltet |
|
||||
256
docs/TECHNISCHE_ARCHITEKTUR.md
Normal file
256
docs/TECHNISCHE_ARCHITEKTUR.md
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
# Technische Architektur — Assignment Monitor
|
||||
|
||||
## Stack
|
||||
|
||||
| Schicht | Technologie | Version | Zweck |
|
||||
|---|---|---|---|
|
||||
| UI-Framework | React | 18 | Component-basiertes UI |
|
||||
| Sprache | TypeScript | 5 | Typsicherheit |
|
||||
| Build | Vite | 6 | Dev-Server, HMR, PWA-Plugin |
|
||||
| CSS | Tailwind CSS | v4 | Utility-First, `@import "tailwindcss"` |
|
||||
| Datenbank | Dexie.js | 5 | IndexedDB-Wrapper |
|
||||
| Routing | React Router | v6 | Client-Side-Routing (SPA) |
|
||||
| PWA | vite-plugin-pwa | — | Offline-Fähigkeit, installierbar |
|
||||
| KI | OpenRouter API | — | Feedback-Generierung (extern, opt-in) |
|
||||
|
||||
**Capgemini Brand Color:** `#0070AD`
|
||||
|
||||
---
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
src/
|
||||
db/
|
||||
index.ts ← Dexie DB-Klasse, alle Interfaces, Seed-Funktionen, Migrations
|
||||
pages/
|
||||
Dashboard.tsx ← Assignment-Liste (Home)
|
||||
AssignmentCreate.tsx ← Neues Assignment anlegen
|
||||
AssignmentDetail.tsx ← Phasen-Flow, Meeting-Übersicht, Bewertungs-Chips
|
||||
AssignmentEdit.tsx ← Assignment nachträglich bearbeiten
|
||||
MeetingView.tsx ← Live-Meeting: Protokoll + Gesamtbewertung
|
||||
AssignmentFeedbackPage.tsx ← Strukturiertes Abschluss-Feedback + KI-Generierung
|
||||
FeedbackDraftPage.tsx ← Einfacher Feedback-Entwurf (Legacy)
|
||||
Evaluation.tsx ← Auswertung (teilweise veraltet, nutzt alte Criterion-Tabelle)
|
||||
Configuration.tsx ← Tab-Container für alle Konfigurationsseiten
|
||||
FeedbackStructureConfig.tsx ← Dimensionen/Kategorien/Kriterien CRUD + Gewichtung
|
||||
AssignmentTypeConfig.tsx ← AssignmentTypen + Phasen + Kriterien-Auswahl (Baum)
|
||||
Consultants.tsx ← Berater/Gruppen-Verwaltung
|
||||
utils/
|
||||
meetingExport.ts ← Markdown + JSON Export-Logik
|
||||
dbBackup.ts ← Vollständiges DB-Backup (JSON Export/Import)
|
||||
notationParser.tsx ← +/!/>/[…] Notation → farbiges JSX
|
||||
App.tsx ← Route-Definitionen, Navigation
|
||||
main.tsx ← React-Einstiegspunkt, DB-Seed-Aufruf
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Datenmodell (IndexedDB via Dexie v5)
|
||||
|
||||
### DB-Version: 5
|
||||
|
||||
```typescript
|
||||
// Konfiguration (Legacy, nur noch für Evaluation.tsx)
|
||||
categories: '++id, order'
|
||||
criteria: '++id, categoryId, order'
|
||||
|
||||
// Assignment-Typen
|
||||
assignmentTypes: '++id'
|
||||
phaseTemplates: '++id, assignmentTypeId, order'
|
||||
|
||||
// Stammdaten
|
||||
groups: '++id'
|
||||
consultants: '++id, groupId'
|
||||
|
||||
// Assignments
|
||||
assignments: '++id, status, createdAt'
|
||||
meetingInstances: '++id, assignmentId, phaseTemplateId'
|
||||
|
||||
// Gesprächsprotokoll
|
||||
conversationEntries: '++id, meetingInstanceId, instituteeId, sequenceIndex'
|
||||
conversationSkillScores: '++id, conversationEntryId, criteriaId'
|
||||
|
||||
// Meeting-Assessment
|
||||
assessments: '++id, meetingInstanceId, instituteeId, criteriaId'
|
||||
|
||||
// Feedback-Entwürfe (Legacy)
|
||||
feedbackDrafts: '++id, assignmentId, instituteeId'
|
||||
|
||||
// Strukturiertes Feedback
|
||||
feedbackDimensions: '++id, order'
|
||||
feedbackCategories: '++id, dimensionId, order'
|
||||
feedbackCriterionItems: '++id, categoryId, order'
|
||||
assignmentFeedbacks: '++id, assignmentId, instituteeId'
|
||||
feedbackCategoryRatings: '++id, assignmentFeedbackId, feedbackCategoryId'
|
||||
feedbackDimensionTexts: '++id, assignmentFeedbackId, feedbackDimensionId'
|
||||
|
||||
// Mappings (Legacy, kaum genutzt)
|
||||
criterionCategoryMappings: '++id, criterionId, feedbackCategoryId'
|
||||
criterionLevelDescriptions: '++id, criterionItemId, rating'
|
||||
```
|
||||
|
||||
### Wichtige Interface-Details
|
||||
|
||||
```typescript
|
||||
type FeedbackRating = 'na' | 'not_client_ready' | 'partially_client_ready' | 'nearly_client_ready' | 'client_ready'
|
||||
|
||||
interface AssignmentType {
|
||||
id?: number
|
||||
name: string
|
||||
defaultPhaseKeys: string[]
|
||||
criteriaIds?: number[] // FeedbackCriterionItem IDs; leer = alle anzeigen
|
||||
}
|
||||
|
||||
interface Assignment {
|
||||
id?: number
|
||||
title: string
|
||||
client: string
|
||||
assignmentTypeId: number
|
||||
instituteeIds: number[]
|
||||
leadName: string
|
||||
status: 'active' | 'done'
|
||||
createdAt: string
|
||||
assignmentNumber?: string // z.B. "CGI-2024-001"
|
||||
description?: string
|
||||
instituteeEnrollments?: Array<{
|
||||
instituteeId: number
|
||||
from?: string // ISO date
|
||||
to?: string // ISO date
|
||||
}>
|
||||
}
|
||||
|
||||
interface MeetingInstance {
|
||||
id?: number
|
||||
assignmentId: number
|
||||
phaseTemplateId: number
|
||||
phaseIndex: number // 1 = erste Instanz, 2+ = Wiederholungen
|
||||
date: string
|
||||
status: 'planned' | 'active' | 'done'
|
||||
generalNotes: string
|
||||
deletedAt?: string // Soft-Delete
|
||||
}
|
||||
|
||||
interface FeedbackCriterionItem {
|
||||
id?: number
|
||||
categoryId: number
|
||||
name: string
|
||||
weight?: number // Gewichtung ×1–×5, default 1
|
||||
order: number
|
||||
}
|
||||
|
||||
// Assessment.criteriaId → FeedbackCriterionItem.id (Gesamtbewertung)
|
||||
// ConversationSkillScore.criteriaId → FeedbackCategory.id (Schnellbewertung)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Routing
|
||||
|
||||
```
|
||||
/ Dashboard (Assignment-Liste)
|
||||
/assignment/new Neues Assignment anlegen
|
||||
/assignment/:id AssignmentDetail (Phasen-Flow)
|
||||
/assignment/:id/edit Assignment bearbeiten
|
||||
/assignment/:id/meeting/:meetingId MeetingView (Protokoll + Bewertung)
|
||||
/assignment/:id/feedback/:instituteeId AssignmentFeedbackPage (strukturiertes Feedback)
|
||||
/assignment/:id/feedback-draft/:instituteeId FeedbackDraftPage (Legacy)
|
||||
/evaluation Auswertungsübersicht
|
||||
/consultants Berater-Verwaltung
|
||||
/config Konfiguration (3 Tabs: Feedback | Ass.-Typen | Backup)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Konfigurationsbereich
|
||||
|
||||
### Tab "Feedback" → `FeedbackStructureConfig`
|
||||
CRUD für:
|
||||
- Feedback-Dimensionen (mit Reihenfolge ↑/↓)
|
||||
- Feedback-Kategorien je Dimension
|
||||
- Feedback-Kriterium-Items je Kategorie (mit Gewichtung ×1–×5)
|
||||
|
||||
### Tab "Ass.-Typen" → `AssignmentTypeConfig`
|
||||
CRUD für:
|
||||
- Assignment-Typen (Name, Löschschutz wenn Assignments vorhanden)
|
||||
- Phasen-Templates je Typ (Label, Lead/Kunde, Wiederholbar, Protokoll, Bewertung)
|
||||
- Kriterien-Auswahl je Typ: Baumstruktur Dimension → Kategorie → Item (mit Checkbox, Indeterminate-State)
|
||||
- `criteriaIds = []` → alle Kriterien werden angezeigt
|
||||
|
||||
### Tab "Backup" → in `Configuration.tsx`
|
||||
- JSON-Export aller Tabellen
|
||||
- Zweistufiger JSON-Import mit Überschreib-Warnung
|
||||
|
||||
---
|
||||
|
||||
## Bewertungs-Aggregation (Implementierungsdetail)
|
||||
|
||||
```typescript
|
||||
const NUM_MAP: Record<FeedbackRating, number> = {
|
||||
na: 0, not_client_ready: 1, partially_client_ready: 2, nearly_client_ready: 3, client_ready: 4
|
||||
}
|
||||
|
||||
function catMode(cat: FeedbackCategory, fbItems: FeedbackCriterionItem[], getScore: (itemId: number) => FeedbackRating | null): FeedbackRating | null {
|
||||
const scored = fbItems
|
||||
.filter(i => i.categoryId === cat.id)
|
||||
.map(i => ({ score: getScore(i.id!), w: i.weight ?? 1 }))
|
||||
.filter((x): x is { score: FeedbackRating; w: number } => x.score !== null && x.score !== 'na')
|
||||
if (scored.length === 0) return null
|
||||
const wSum = scored.reduce((s, x) => s + x.w, 0)
|
||||
const avg = scored.reduce((s, x) => s + NUM_MAP[x.score] * x.w, 0) / wSum
|
||||
if (avg < 1.5) return 'not_client_ready'
|
||||
if (avg < 2.5) return 'partially_client_ready'
|
||||
if (avg < 3.5) return 'nearly_client_ready'
|
||||
return 'client_ready'
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Export-Dateiname-Schema
|
||||
|
||||
```typescript
|
||||
const buildFilename = (ext: string) => {
|
||||
const date = new Date(meeting.date).toLocaleDateString('de-DE').replace(/\./g, '-')
|
||||
const label = template.label // z.B. "Alignment Call"
|
||||
const idx = phaseIndex > 1 ? `-${phaseIndex}` : ''
|
||||
const id = assignment.assignmentNumber ?? assignment.title
|
||||
return `${id}_${date}_${label}${idx}.${ext}`
|
||||
// Beispiel: CGI-2024-001_02-07-2026_Alignment Call-2.md
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## KI-Integration (AssignmentFeedbackPage)
|
||||
|
||||
- **Provider:** OpenRouter (https://openrouter.ai) — ermöglicht Modellwechsel ohne eigenen API-Zugang
|
||||
- **Modelle:** GPT-4o mini, GPT-4o, Claude Sonnet 4.5, Claude Haiku 4.5, Gemini Flash 1.5
|
||||
- **API-Key:** Lokal in `localStorage` gespeichert (`ai_api_key`, `ai_model`)
|
||||
- **Datenweitergabe:** Kriterien-Scores, Protokoll-Notizen, Kategorie-Bewertungen werden im Prompt strukturiert übermittelt
|
||||
- **Hinweis:** Der AI-Prompt nutzt noch die alte `criteria`-Tabelle (Legacy) — Aktualisierung auf `feedbackCriterionItems` steht aus
|
||||
|
||||
---
|
||||
|
||||
## Seed-Daten (beim ersten Start)
|
||||
|
||||
Die App legt beim ersten Start automatisch an:
|
||||
|
||||
1. **3 Assignment-Typen** mit je vollständigem Phasen-Flow (Generisch, Case Interview, Stakeholder Meeting / Pitch)
|
||||
2. **Legacy-Kriterien** in `categories` + `criteria` (für Evaluation.tsx)
|
||||
3. **Feedback-Dimensionsstruktur** mit 5 Dimensionen, 14 Kategorien, ~70 Kriterium-Items (Capgemini-Kompetenzmodell)
|
||||
4. **Criterion-Mappings** (Legacy, nicht mehr aktiv genutzt)
|
||||
|
||||
---
|
||||
|
||||
## Bekannte technische Schulden
|
||||
|
||||
| Bereich | Problem | Priorität |
|
||||
|---|---|---|
|
||||
| `Evaluation.tsx` | Nutzt alte `Category`/`Criterion`-Tabellen statt neue `feedbackCriterionItems` | Mittel |
|
||||
| `meetingExport.ts` | Bewertungs-Labels im Markdown-Export zeigen `FeedbackRating`-Keys statt Labels | Niedrig |
|
||||
| `FeedbackStructureConfig.tsx` | Enthält toten Code (Funktionen für gelöschte AssignmentType-CRUD) | Niedrig |
|
||||
| AI-Prompt in `AssignmentFeedbackPage` | Nutzt `db.criteria` (alt), sollte `feedbackCriterionItems` nutzen | Mittel |
|
||||
| Dashboard | Zeigt keine Assignment-Nummer | Niedrig |
|
||||
| `AssignmentCreate` | Kein Feld für Assignment-Nummer | Niedrig |
|
||||
| IndexedDB | Keine robuste Persistenz-Garantie (Browser kann löschen) | Hoch → SQLite WASM geplant |
|
||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Assignment Monitor</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
8229
package-lock.json
generated
Normal file
8229
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "assignment-monitor",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.6.2",
|
||||
"dexie": "^4.0.11",
|
||||
"zustand": "^5.0.5",
|
||||
"recharts": "^2.15.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.25.0",
|
||||
"@tailwindcss/vite": "^4.1.10",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"eslint": "^9.25.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^16.0.0",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-pwa": "^1.0.0"
|
||||
}
|
||||
}
|
||||
54
src/App.tsx
Normal file
54
src/App.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { Routes, Route, NavLink } from 'react-router-dom'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import Configuration from './pages/Configuration'
|
||||
import Consultants from './pages/Consultants'
|
||||
import AssignmentCreate from './pages/AssignmentCreate'
|
||||
import AssignmentDetail from './pages/AssignmentDetail'
|
||||
import AssignmentEdit from './pages/AssignmentEdit'
|
||||
import MeetingView from './pages/MeetingView'
|
||||
import FeedbackDraftPage from './pages/FeedbackDraftPage'
|
||||
import AssignmentFeedbackPage from './pages/AssignmentFeedbackPage'
|
||||
import Evaluation from './pages/Evaluation'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col">
|
||||
<header className="bg-[#0070AD] text-white px-4 py-3 flex items-center gap-3 shadow">
|
||||
<span className="font-bold text-lg tracking-tight">Assignment Monitor</span>
|
||||
</header>
|
||||
<main className="flex-1 p-4 max-w-2xl mx-auto w-full pb-20">
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/assignment/new" element={<AssignmentCreate />} />
|
||||
<Route path="/assignment/:id" element={<AssignmentDetail />} />
|
||||
<Route path="/assignment/:id/edit" element={<AssignmentEdit />} />
|
||||
<Route path="/assignment/:id/meeting/:meetingId" element={<MeetingView />} />
|
||||
<Route path="/assignment/:id/feedback/:instituteeId" element={<AssignmentFeedbackPage />} />
|
||||
<Route path="/assignment/:id/feedback-draft/:instituteeId" element={<FeedbackDraftPage />} />
|
||||
<Route path="/evaluation" element={<Evaluation />} />
|
||||
<Route path="/consultants" element={<Consultants />} />
|
||||
<Route path="/config" element={<Configuration />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<nav className="bg-white border-t border-gray-200 flex justify-around py-2 sticky bottom-0">
|
||||
{[
|
||||
{ to: '/', label: 'Home' },
|
||||
{ to: '/consultants', label: 'Berater' },
|
||||
{ to: '/evaluation', label: 'Auswertung' },
|
||||
{ to: '/config', label: 'Config' },
|
||||
].map(({ to, label }) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
to={to}
|
||||
end
|
||||
className={({ isActive }) =>
|
||||
`text-xs px-3 py-1 rounded ${isActive ? 'text-[#0070AD] font-semibold' : 'text-gray-500'}`
|
||||
}
|
||||
>
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
602
src/db/index.ts
Normal file
602
src/db/index.ts
Normal file
|
|
@ -0,0 +1,602 @@
|
|||
import Dexie, { type Table } from 'dexie'
|
||||
|
||||
// ─── Bewertungs-Skala (einheitlich für Meetings und Feedback) ─────────────────
|
||||
|
||||
export type FeedbackRating =
|
||||
| 'na'
|
||||
| 'not_client_ready'
|
||||
| 'partially_client_ready'
|
||||
| 'nearly_client_ready'
|
||||
| 'client_ready'
|
||||
|
||||
// ─── Konfiguration ───────────────────────────────────────────────────────────
|
||||
|
||||
export interface Category {
|
||||
id?: number
|
||||
name: string
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface Criterion {
|
||||
id?: number
|
||||
categoryId: number
|
||||
name: string
|
||||
description: string
|
||||
weight: number
|
||||
order: number
|
||||
}
|
||||
|
||||
// ─── Assignment-Typen & Phase-Templates ──────────────────────────────────────
|
||||
|
||||
export type PhaseKey = string
|
||||
|
||||
export interface AssignmentType {
|
||||
id?: number
|
||||
name: string
|
||||
defaultPhaseKeys: PhaseKey[]
|
||||
criteriaIds?: number[] // FeedbackCategory IDs; leer = alle Kategorien anzeigen
|
||||
}
|
||||
|
||||
export interface PhaseTemplate {
|
||||
id?: number
|
||||
assignmentTypeId: number
|
||||
phaseKey: PhaseKey
|
||||
label: string
|
||||
withWhom: 'lead' | 'client'
|
||||
isRepeatable: boolean
|
||||
hasConversation: boolean
|
||||
hasAssessment: boolean
|
||||
criteriaIds: number[]
|
||||
order: number
|
||||
}
|
||||
|
||||
// ─── Stammdaten ───────────────────────────────────────────────────────────────
|
||||
|
||||
export interface Group {
|
||||
id?: number
|
||||
name: string
|
||||
cohortYear: number
|
||||
}
|
||||
|
||||
export interface Consultant {
|
||||
id?: number
|
||||
groupId: number
|
||||
firstName: string
|
||||
lastName: string
|
||||
}
|
||||
|
||||
// ─── Assignments ─────────────────────────────────────────────────────────────
|
||||
|
||||
export interface Assignment {
|
||||
id?: number
|
||||
title: string
|
||||
client: string
|
||||
assignmentTypeId: number
|
||||
instituteeIds: number[]
|
||||
leadName: string
|
||||
status: 'active' | 'done'
|
||||
createdAt: string
|
||||
assignmentNumber?: string // Offizielle Assignment-Nummer aus Systemsystemen
|
||||
description?: string
|
||||
instituteeEnrollments?: Array<{
|
||||
instituteeId: number
|
||||
from?: string // ISO date string
|
||||
to?: string // ISO date string
|
||||
}>
|
||||
}
|
||||
|
||||
// ─── Meeting-Instanzen ────────────────────────────────────────────────────────
|
||||
|
||||
export interface MeetingInstance {
|
||||
id?: number
|
||||
assignmentId: number
|
||||
phaseTemplateId: number
|
||||
phaseIndex: number
|
||||
date: string
|
||||
status: 'planned' | 'active' | 'done'
|
||||
generalNotes: string
|
||||
deletedAt?: string
|
||||
}
|
||||
|
||||
// ─── Gesprächs-Zeitleiste ─────────────────────────────────────────────────────
|
||||
|
||||
export interface ConversationEntry {
|
||||
id?: number
|
||||
meetingInstanceId: number
|
||||
instituteeId: number
|
||||
sequenceIndex: number
|
||||
note: string
|
||||
fillerCount: number
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
// criteriaId here now holds a FeedbackCategory.id (unified criteria system)
|
||||
export interface ConversationSkillScore {
|
||||
id?: number
|
||||
conversationEntryId: number
|
||||
criteriaId: number // → FeedbackCategory.id
|
||||
score: FeedbackRating | null
|
||||
}
|
||||
|
||||
// ─── Gesamtbewertung ─────────────────────────────────────────────────────────
|
||||
|
||||
// criteriaId here now holds a FeedbackCategory.id (unified criteria system)
|
||||
export interface Assessment {
|
||||
id?: number
|
||||
meetingInstanceId: number
|
||||
instituteeId: number
|
||||
criteriaId: number // → FeedbackCategory.id
|
||||
score: FeedbackRating | null
|
||||
note: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
// ─── Feedback-Entwurf (Legacy, bleibt erhalten) ──────────────────────────────
|
||||
|
||||
export interface FeedbackDraft {
|
||||
id?: number
|
||||
assignmentId: number
|
||||
instituteeId: number
|
||||
content: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
// ─── Strukturiertes Assignment-Feedback ───────────────────────────────────────
|
||||
|
||||
export interface FeedbackDimension {
|
||||
id?: number
|
||||
name: string
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface FeedbackCategory {
|
||||
id?: number
|
||||
dimensionId: number
|
||||
name: string
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface FeedbackCriterionItem {
|
||||
id?: number
|
||||
categoryId: number
|
||||
name: string
|
||||
weight?: number // Gewichtung, default 1
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface AssignmentFeedback {
|
||||
id?: number
|
||||
assignmentId: number
|
||||
instituteeId: number
|
||||
status: 'draft' | 'final'
|
||||
aiModel: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface FeedbackCategoryRating {
|
||||
id?: number
|
||||
assignmentFeedbackId: number
|
||||
feedbackCategoryId: number
|
||||
rating: FeedbackRating
|
||||
}
|
||||
|
||||
export interface FeedbackDimensionText {
|
||||
id?: number
|
||||
assignmentFeedbackId: number
|
||||
feedbackDimensionId: number
|
||||
achievements: string
|
||||
developmentNeeds: string
|
||||
}
|
||||
|
||||
// Mapping: Assessment-Kriterium → Feedback-Kategorie (n:m, Legacy-Kompatibilität)
|
||||
export interface CriterionCategoryMapping {
|
||||
id?: number
|
||||
criterionId: number
|
||||
feedbackCategoryId: number
|
||||
}
|
||||
|
||||
// Beschreibungstext pro FeedbackCriterionItem und Bewertungsstufe
|
||||
export interface CriterionLevelDescription {
|
||||
id?: number
|
||||
criterionItemId: number // → FeedbackCriterionItem.id
|
||||
rating: FeedbackRating
|
||||
text: string
|
||||
}
|
||||
|
||||
// ─── Dexie DB ────────────────────────────────────────────────────────────────
|
||||
|
||||
class AssignmentMonitorDB extends Dexie {
|
||||
categories!: Table<Category>
|
||||
criteria!: Table<Criterion>
|
||||
assignmentTypes!: Table<AssignmentType>
|
||||
phaseTemplates!: Table<PhaseTemplate>
|
||||
groups!: Table<Group>
|
||||
consultants!: Table<Consultant>
|
||||
assignments!: Table<Assignment>
|
||||
meetingInstances!: Table<MeetingInstance>
|
||||
conversationEntries!: Table<ConversationEntry>
|
||||
conversationSkillScores!: Table<ConversationSkillScore>
|
||||
assessments!: Table<Assessment>
|
||||
feedbackDrafts!: Table<FeedbackDraft>
|
||||
feedbackDimensions!: Table<FeedbackDimension>
|
||||
feedbackCategories!: Table<FeedbackCategory>
|
||||
feedbackCriterionItems!: Table<FeedbackCriterionItem>
|
||||
assignmentFeedbacks!: Table<AssignmentFeedback>
|
||||
feedbackCategoryRatings!: Table<FeedbackCategoryRating>
|
||||
feedbackDimensionTexts!: Table<FeedbackDimensionText>
|
||||
criterionCategoryMappings!: Table<CriterionCategoryMapping>
|
||||
criterionLevelDescriptions!: Table<CriterionLevelDescription>
|
||||
|
||||
constructor() {
|
||||
super('AssignmentMonitorDB')
|
||||
this.version(1).stores({
|
||||
categories: '++id, order',
|
||||
criteria: '++id, categoryId, order',
|
||||
groups: '++id',
|
||||
consultants: '++id, groupId',
|
||||
meetings: '++id, date, status, groupId',
|
||||
assessments: '++id, meetingId, consultantId, criteriaId',
|
||||
consultantNotes: '++id, meetingId, consultantId',
|
||||
})
|
||||
this.version(2).stores({
|
||||
categories: '++id, order',
|
||||
criteria: '++id, categoryId, order',
|
||||
assignmentTypes: '++id',
|
||||
phaseTemplates: '++id, assignmentTypeId, order',
|
||||
groups: '++id',
|
||||
consultants: '++id, groupId',
|
||||
assignments: '++id, status, createdAt',
|
||||
meetingInstances: '++id, assignmentId, phaseTemplateId',
|
||||
conversationEntries: '++id, meetingInstanceId, instituteeId, sequenceIndex',
|
||||
conversationSkillScores: '++id, conversationEntryId, criteriaId',
|
||||
assessments: '++id, meetingInstanceId, instituteeId, criteriaId',
|
||||
feedbackDrafts: '++id, assignmentId, instituteeId',
|
||||
// v1 tables no longer used but kept for safe migration
|
||||
meetings: null,
|
||||
consultantNotes: null,
|
||||
})
|
||||
this.version(3).stores({
|
||||
categories: '++id, order',
|
||||
criteria: '++id, categoryId, order',
|
||||
assignmentTypes: '++id',
|
||||
phaseTemplates: '++id, assignmentTypeId, order',
|
||||
groups: '++id',
|
||||
consultants: '++id, groupId',
|
||||
assignments: '++id, status, createdAt',
|
||||
meetingInstances: '++id, assignmentId, phaseTemplateId',
|
||||
conversationEntries: '++id, meetingInstanceId, instituteeId, sequenceIndex',
|
||||
conversationSkillScores: '++id, conversationEntryId, criteriaId',
|
||||
assessments: '++id, meetingInstanceId, instituteeId, criteriaId',
|
||||
feedbackDrafts: '++id, assignmentId, instituteeId',
|
||||
feedbackDimensions: '++id, order',
|
||||
feedbackCategories: '++id, dimensionId, order',
|
||||
feedbackCriterionItems: '++id, categoryId, order',
|
||||
assignmentFeedbacks: '++id, assignmentId, instituteeId',
|
||||
feedbackCategoryRatings: '++id, assignmentFeedbackId, feedbackCategoryId',
|
||||
feedbackDimensionTexts: '++id, assignmentFeedbackId, feedbackDimensionId',
|
||||
meetings: null,
|
||||
consultantNotes: null,
|
||||
})
|
||||
this.version(4).stores({
|
||||
categories: '++id, order',
|
||||
criteria: '++id, categoryId, order',
|
||||
assignmentTypes: '++id',
|
||||
phaseTemplates: '++id, assignmentTypeId, order',
|
||||
groups: '++id',
|
||||
consultants: '++id, groupId',
|
||||
assignments: '++id, status, createdAt',
|
||||
meetingInstances: '++id, assignmentId, phaseTemplateId',
|
||||
conversationEntries: '++id, meetingInstanceId, instituteeId, sequenceIndex',
|
||||
conversationSkillScores: '++id, conversationEntryId, criteriaId',
|
||||
assessments: '++id, meetingInstanceId, instituteeId, criteriaId',
|
||||
feedbackDrafts: '++id, assignmentId, instituteeId',
|
||||
feedbackDimensions: '++id, order',
|
||||
feedbackCategories: '++id, dimensionId, order',
|
||||
feedbackCriterionItems: '++id, categoryId, order',
|
||||
assignmentFeedbacks: '++id, assignmentId, instituteeId',
|
||||
feedbackCategoryRatings: '++id, assignmentFeedbackId, feedbackCategoryId',
|
||||
feedbackDimensionTexts: '++id, assignmentFeedbackId, feedbackDimensionId',
|
||||
criterionCategoryMappings: '++id, criterionId, feedbackCategoryId',
|
||||
meetings: null,
|
||||
consultantNotes: null,
|
||||
})
|
||||
this.version(5).stores({
|
||||
categories: '++id, order',
|
||||
criteria: '++id, categoryId, order',
|
||||
assignmentTypes: '++id',
|
||||
phaseTemplates: '++id, assignmentTypeId, order',
|
||||
groups: '++id',
|
||||
consultants: '++id, groupId',
|
||||
assignments: '++id, status, createdAt',
|
||||
meetingInstances: '++id, assignmentId, phaseTemplateId',
|
||||
conversationEntries: '++id, meetingInstanceId, instituteeId, sequenceIndex',
|
||||
conversationSkillScores: '++id, conversationEntryId, criteriaId',
|
||||
assessments: '++id, meetingInstanceId, instituteeId, criteriaId',
|
||||
feedbackDrafts: '++id, assignmentId, instituteeId',
|
||||
feedbackDimensions: '++id, order',
|
||||
feedbackCategories: '++id, dimensionId, order',
|
||||
feedbackCriterionItems: '++id, categoryId, order',
|
||||
assignmentFeedbacks: '++id, assignmentId, instituteeId',
|
||||
feedbackCategoryRatings: '++id, assignmentFeedbackId, feedbackCategoryId',
|
||||
feedbackDimensionTexts: '++id, assignmentFeedbackId, feedbackDimensionId',
|
||||
criterionCategoryMappings: '++id, criterionId, feedbackCategoryId',
|
||||
criterionLevelDescriptions: '++id, criterionItemId, rating',
|
||||
meetings: null,
|
||||
consultantNotes: null,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const db = new AssignmentMonitorDB()
|
||||
|
||||
// ─── Seed ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function seedIfEmpty() {
|
||||
const count = await db.assignmentTypes.count()
|
||||
if (count > 0) return
|
||||
|
||||
// ── Gemeinsame Kategorien & Kriterien ────────────────────────────────────
|
||||
const catKomm = await db.categories.add({ name: 'Kommunikation', order: 1 })
|
||||
const catFach = await db.categories.add({ name: 'Fachkompetenz', order: 2 })
|
||||
const catKunde = await db.categories.add({ name: 'Kundenorientierung', order: 3 })
|
||||
const catSelf = await db.categories.add({ name: 'Selbstorganisation', order: 4 })
|
||||
const catCase = await db.categories.add({ name: 'Case-Kompetenz', order: 5 })
|
||||
|
||||
const kritKlarheit = await db.criteria.add({ categoryId: catKomm, name: 'Klarheit & Struktur', description: 'Klare, strukturierte Aussagen', weight: 2, order: 1 })
|
||||
const kritUeberzeug = await db.criteria.add({ categoryId: catKomm, name: 'Überzeugungskraft', description: 'Argumente überzeugend präsentieren', weight: 2, order: 2 })
|
||||
const kritZuhoeren = await db.criteria.add({ categoryId: catKomm, name: 'Aktives Zuhören', description: 'Eingehen auf Gesprächspartner', weight: 1, order: 3 })
|
||||
const kritFragen = await db.criteria.add({ categoryId: catKomm, name: 'Umgang mit Fragen', description: 'Reaktion auf Kunden-Fragen', weight: 2, order: 4 })
|
||||
const kritTiefe = await db.criteria.add({ categoryId: catFach, name: 'Fachliche Tiefe', description: 'Inhaltliche Korrektheit und Tiefe', weight: 3, order: 1 })
|
||||
const kritProblem = await db.criteria.add({ categoryId: catFach, name: 'Problemlösung', description: 'Analytisches Vorgehen, Hypothesen', weight: 3, order: 2 })
|
||||
const kritStakeholder = await db.criteria.add({ categoryId: catKunde, name: 'Stakeholder-Verständnis', description: 'Erkennt Bedürfnisse und Erwartungen', weight: 2, order: 1 })
|
||||
const kritEmpathie = await db.criteria.add({ categoryId: catKunde, name: 'Empathie', description: 'Einfühlungsvermögen im Gespräch', weight: 1, order: 2 })
|
||||
const kritVorb = await db.criteria.add({ categoryId: catSelf, name: 'Vorbereitung', description: 'Zeigt gute Meeting-Vorbereitung', weight: 2, order: 1 })
|
||||
const kritInitiative = await db.criteria.add({ categoryId: catSelf, name: 'Eigeninitiative', description: 'Handelt proaktiv ohne Aufforderung', weight: 2, order: 2 })
|
||||
const kritStruktur = await db.criteria.add({ categoryId: catCase, name: 'Problemstrukturierung', description: 'Systematische Zerlegung des Problems', weight: 3, order: 1 })
|
||||
const kritHypo = await db.criteria.add({ categoryId: catCase, name: 'Hypothesenbildung', description: 'Klare, testbare Hypothesen', weight: 3, order: 2 })
|
||||
const kritAnalyse = await db.criteria.add({ categoryId: catCase, name: 'Rechnen & Analyse', description: 'Datenbasiertes Vorgehen, Schätzfähigkeit', weight: 2, order: 3 })
|
||||
const kritZeitmanage = await db.criteria.add({ categoryId: catCase, name: 'Zeitmanagement', description: 'Effizienter Umgang mit der Case-Zeit', weight: 2, order: 4 })
|
||||
|
||||
// ── Hilfsfunktion: PhaseTemplate anlegen ────────────────────────────────
|
||||
const addPhase = (
|
||||
assignmentTypeId: number,
|
||||
phaseKey: PhaseKey,
|
||||
label: string,
|
||||
withWhom: 'lead' | 'client',
|
||||
opts: { repeatable?: boolean; conv?: boolean; assess?: boolean; criteriaIds?: number[]; order: number }
|
||||
) => db.phaseTemplates.add({
|
||||
assignmentTypeId,
|
||||
phaseKey,
|
||||
label,
|
||||
withWhom,
|
||||
isRepeatable: opts.repeatable ?? false,
|
||||
hasConversation: opts.conv ?? false,
|
||||
hasAssessment: opts.assess ?? false,
|
||||
criteriaIds: opts.criteriaIds ?? [],
|
||||
order: opts.order,
|
||||
})
|
||||
|
||||
// ── AssignmentType 1: Generisch ──────────────────────────────────────────
|
||||
const genericId = await db.assignmentTypes.add({
|
||||
name: 'Generisch',
|
||||
defaultPhaseKeys: ['preBriefing', 'briefing', 'alignmentCall', 'preDelivery', 'delivery', 'feedbackCallClient', 'feedbackCallLead'],
|
||||
})
|
||||
const genericCriteria = [kritKlarheit, kritUeberzeug, kritZuhoeren, kritTiefe, kritProblem, kritStakeholder, kritEmpathie, kritVorb, kritInitiative]
|
||||
await addPhase(genericId, 'preBriefing', 'Pre-Briefing (Lead)', 'lead', { order: 1 })
|
||||
await addPhase(genericId, 'briefing', 'Briefing (Kunde)', 'client', { conv: true, assess: true, criteriaIds: genericCriteria, order: 2 })
|
||||
await addPhase(genericId, 'alignmentCall', 'Alignment Call (Kunde)', 'client', { repeatable: true, conv: true, assess: true, criteriaIds: genericCriteria, order: 3 })
|
||||
await addPhase(genericId, 'preDelivery', 'Pre-Delivery (Lead)', 'lead', { order: 4 })
|
||||
await addPhase(genericId, 'delivery', 'Delivery (Kunde)', 'client', { conv: true, assess: true, criteriaIds: genericCriteria, order: 5 })
|
||||
await addPhase(genericId, 'feedbackCallClient','Feedback Call (Kunde)', 'client', { conv: true, assess: true, criteriaIds: genericCriteria, order: 6 })
|
||||
await addPhase(genericId, 'feedbackCallLead', 'Feedback Call (Lead)', 'lead', { order: 7 })
|
||||
|
||||
// ── AssignmentType 2: Case Interview ────────────────────────────────────
|
||||
const caseId = await db.assignmentTypes.add({
|
||||
name: 'Case Interview',
|
||||
defaultPhaseKeys: ['preBriefing', 'briefing', 'delivery', 'feedbackCallClient', 'feedbackCallLead'],
|
||||
})
|
||||
const caseCriteria = [kritStruktur, kritHypo, kritAnalyse, kritKlarheit, kritZeitmanage, kritUeberzeug, kritFragen]
|
||||
await addPhase(caseId, 'preBriefing', 'Pre-Briefing (Lead)', 'lead', { order: 1 })
|
||||
await addPhase(caseId, 'briefing', 'Case Briefing (Kunde)', 'client', { conv: true, assess: true, criteriaIds: caseCriteria, order: 2 })
|
||||
await addPhase(caseId, 'delivery', 'Case Delivery (Kunde)', 'client', { conv: true, assess: true, criteriaIds: caseCriteria, order: 3 })
|
||||
await addPhase(caseId, 'feedbackCallClient','Feedback Call (Kunde)', 'client', { conv: true, assess: true, criteriaIds: caseCriteria, order: 4 })
|
||||
await addPhase(caseId, 'feedbackCallLead', 'Feedback Call (Lead)', 'lead', { order: 5 })
|
||||
|
||||
// ── AssignmentType 3: Stakeholder Meeting / Pitch ────────────────────────
|
||||
const pitchId = await db.assignmentTypes.add({
|
||||
name: 'Stakeholder Meeting / Pitch',
|
||||
defaultPhaseKeys: ['preBriefing', 'briefing', 'alignmentCall', 'preDelivery', 'delivery', 'feedbackCallClient', 'feedbackCallLead'],
|
||||
})
|
||||
const pitchCriteria = [kritVorb, kritKlarheit, kritUeberzeug, kritStakeholder, kritFragen, kritEmpathie, kritInitiative]
|
||||
await addPhase(pitchId, 'preBriefing', 'Pre-Briefing (Lead)', 'lead', { order: 1 })
|
||||
await addPhase(pitchId, 'briefing', 'Briefing (Kunde)', 'client', { conv: true, assess: true, criteriaIds: pitchCriteria, order: 2 })
|
||||
await addPhase(pitchId, 'alignmentCall', 'Alignment Call (Kunde)', 'client', { repeatable: true, conv: true, assess: true, criteriaIds: pitchCriteria, order: 3 })
|
||||
await addPhase(pitchId, 'preDelivery', 'Pre-Delivery (Lead)', 'lead', { order: 4 })
|
||||
await addPhase(pitchId, 'delivery', 'Pitch / Delivery (Kunde)', 'client', { conv: true, assess: true, criteriaIds: pitchCriteria, order: 5 })
|
||||
await addPhase(pitchId, 'feedbackCallClient','Feedback Call (Kunde)', 'client', { conv: true, assess: true, criteriaIds: pitchCriteria, order: 6 })
|
||||
await addPhase(pitchId, 'feedbackCallLead', 'Feedback Call (Lead)', 'lead', { order: 7 })
|
||||
}
|
||||
|
||||
// ─── Seed: Feedback-Dimensionsstruktur ───────────────────────────────────────
|
||||
|
||||
export async function seedFeedbackStructureIfEmpty() {
|
||||
const count = await db.feedbackDimensions.count()
|
||||
if (count > 0) return
|
||||
|
||||
type CatSeed = { name: string; items: string[] }
|
||||
type DimSeed = { name: string; cats: CatSeed[] }
|
||||
|
||||
const dimensions: DimSeed[] = [
|
||||
{
|
||||
name: 'Mindset, Commitment, Collaboration',
|
||||
cats: [
|
||||
{ name: 'Persönliche Einstellung', items: ['Ruhig bei Stress', 'Offen für neue Themen', 'Auftreten / Ausstrahlung', 'Pro aktiv', 'Lösungsorientiert'] },
|
||||
{ name: 'Professionalität', items: ['Pünktlichkeit', 'Professionell bei informellen Gesprächen', 'Adressatengerecht', 'Hohes Maß an Selbststeuerung', 'Klarheit', 'Zuverlässigkeit'] },
|
||||
{ name: 'Commitment', items: ['Offen für spontane Änderungen', 'Selbständiger Lösungsansatz', 'Pro aktive Ideen', 'Verantwortungsbewusst', 'Hilfsbereit', 'Teamorientiert'] },
|
||||
{ name: 'Kommunikationsfähigkeit', items: ['To the point', 'Recap-Fähigkeit', 'Active Listening', 'Souveränität'] },
|
||||
{ name: 'Zusammenarbeit', items: ['Regelmäßige Abstimmung', 'Unterstützung bei Bedarf', 'Know-How Sharing', 'Starkes Teamverhalten', 'Verantwortung und Vertrauen', 'Inhaltlich unterstützend'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Running Our Projects',
|
||||
cats: [
|
||||
{ name: 'Ergebnisverantwortung', items: ['Fokussierung', 'Priorisierung (Impact Driven)', 'Machbarkeit / Umsetzbarkeit', 'Alternativvorschläge', 'Interne Abstimmung und Feedback'] },
|
||||
{ name: 'Arbeitsstil', items: ['Komplexitätsmanagement', 'Eigenverantwortung', 'Feedbackaffinität', 'Verantwortungsbewusst / vorausschauend', 'Selbstreflektiert, lösungsorientiert', 'Offen, initiativ, kollegial', 'Organisiert, kommunikationsfähig', 'Lernfähig, anpassungsbereit, flexibel'] },
|
||||
{ name: 'Kundenmanagement', items: ['Aktives Erwartungsmanagement', 'Selbstsicherheit und fachliche Überzeugung', 'Aktive Advisory', 'Realistisch', 'Kundenfokussiert'] },
|
||||
{ name: 'Lieferzeiten', items: ['Verlässlichkeit', 'Fortschrittskontrolle und Planadaption', 'Aktives Scoping', 'Meetingsvorbereitung', 'Transparent'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Growing our People',
|
||||
cats: [
|
||||
{ name: 'Networking', items: ['Cross-Collaboration', 'Network Growth', 'Network Utilization'] },
|
||||
{ name: 'Learning und Development', items: ['Kritikfähigkeit', 'Wissensaufbau (Kompetenzausstrahlung)', 'Umsetzungsbereitschaft Feedback'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Functional & Technical Skills',
|
||||
cats: [
|
||||
{ name: 'Qualität des Inhalts', items: ['Belastbarkeit', 'Nachvollziehbarkeit', 'Logische Storyline'] },
|
||||
{ name: 'Inhaltliche Vollständigkeit', items: ['Wesentliche Elemente vorhanden', 'Realitätsnähe', 'Nutzenfokus'] },
|
||||
{ name: 'Qualität der Unterlage', items: ['Design nach Standardvorgaben', 'Sprachliche Präzision', 'Visualisierungen unterstützen Kernbotschaften'] },
|
||||
{ name: 'Prozesstreue', items: ['Kenne und befolge Prozesse und Vorgaben', 'Nachvollziehbarkeit und Transparenz', 'Qualitätschecks'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Innovation und Asset Development',
|
||||
cats: [
|
||||
{ name: 'Innovation', items: ['Aktiver Vorschlag für Verbesserungen', 'Neue Ideen zur Verbesserung', 'Nutze aktuellen Wissensstand', 'Liefere über den Kundenerwartungen'] },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
for (let di = 0; di < dimensions.length; di++) {
|
||||
const dim = dimensions[di]
|
||||
const dimId = await db.feedbackDimensions.add({ name: dim.name, order: di + 1 })
|
||||
for (let ci = 0; ci < dim.cats.length; ci++) {
|
||||
const cat = dim.cats[ci]
|
||||
const catId = await db.feedbackCategories.add({ dimensionId: dimId, name: cat.name, order: ci + 1 })
|
||||
for (let ii = 0; ii < cat.items.length; ii++) {
|
||||
await db.feedbackCriterionItems.add({ categoryId: catId, name: cat.items[ii], order: ii + 1 })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Seed: Kriterien-Mapping ──────────────────────────────────────────────────
|
||||
|
||||
export async function seedCriterionMappingsIfEmpty() {
|
||||
const count = await db.criterionCategoryMappings.count()
|
||||
if (count > 0) return
|
||||
|
||||
// Warte bis Kriterien und Feedback-Kategorien vorhanden sind
|
||||
const [crits, cats] = await Promise.all([
|
||||
db.criteria.toArray(),
|
||||
db.feedbackCategories.toArray(),
|
||||
])
|
||||
if (crits.length === 0 || cats.length === 0) return
|
||||
|
||||
const c = (name: string) => crits.find(x => x.name === name)?.id
|
||||
const f = (name: string) => cats.find(x => x.name === name)?.id
|
||||
|
||||
const mappings: [string, string][] = [
|
||||
// Kriterium → Feedback-Kategorie
|
||||
['Klarheit & Struktur', 'Kommunikationsfähigkeit'],
|
||||
['Klarheit & Struktur', 'Qualität des Inhalts'],
|
||||
['Überzeugungskraft', 'Kommunikationsfähigkeit'],
|
||||
['Überzeugungskraft', 'Kundenmanagement'],
|
||||
['Aktives Zuhören', 'Kommunikationsfähigkeit'],
|
||||
['Umgang mit Fragen', 'Kommunikationsfähigkeit'],
|
||||
['Umgang mit Fragen', 'Kundenmanagement'],
|
||||
['Fachliche Tiefe', 'Qualität des Inhalts'],
|
||||
['Fachliche Tiefe', 'Inhaltliche Vollständigkeit'],
|
||||
['Problemlösung', 'Ergebnisverantwortung'],
|
||||
['Problemlösung', 'Arbeitsstil'],
|
||||
['Stakeholder-Verständnis', 'Kundenmanagement'],
|
||||
['Stakeholder-Verständnis', 'Persönliche Einstellung'],
|
||||
['Empathie', 'Persönliche Einstellung'],
|
||||
['Empathie', 'Kommunikationsfähigkeit'],
|
||||
['Vorbereitung', 'Professionalität'],
|
||||
['Vorbereitung', 'Lieferzeiten'],
|
||||
['Eigeninitiative', 'Commitment'],
|
||||
['Eigeninitiative', 'Persönliche Einstellung'],
|
||||
['Problemstrukturierung', 'Ergebnisverantwortung'],
|
||||
['Problemstrukturierung', 'Qualität des Inhalts'],
|
||||
['Hypothesenbildung', 'Ergebnisverantwortung'],
|
||||
['Hypothesenbildung', 'Arbeitsstil'],
|
||||
['Rechnen & Analyse', 'Qualität des Inhalts'],
|
||||
['Rechnen & Analyse', 'Inhaltliche Vollständigkeit'],
|
||||
['Zeitmanagement', 'Lieferzeiten'],
|
||||
['Zeitmanagement', 'Arbeitsstil'],
|
||||
]
|
||||
|
||||
for (const [critName, catName] of mappings) {
|
||||
const criterionId = c(critName)
|
||||
const feedbackCategoryId = f(catName)
|
||||
if (criterionId && feedbackCategoryId) {
|
||||
await db.criterionCategoryMappings.add({ criterionId, feedbackCategoryId })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Migration: Unified Criteria System ──────────────────────────────────────
|
||||
// Löscht nur Bewertungs-Scores (noch nicht befüllt), nie Protokoll-Texte.
|
||||
// Verknüpft PhaseTemplates mit FeedbackCategory-IDs statt alten Criterion-IDs.
|
||||
|
||||
export async function migrateToUnifiedCriteriaIfNeeded() {
|
||||
// Prüfen ob Migration schon gelaufen: erste PhaseTemplate mit criteriaIds die
|
||||
// auf eine FeedbackCategory zeigen (vs. alte Criterion-IDs die niedrig sein werden)
|
||||
const cats = await db.feedbackCategories.toArray()
|
||||
if (cats.length === 0) return // Feedback-Struktur noch nicht geseeded
|
||||
|
||||
const templates = await db.phaseTemplates.toArray()
|
||||
if (templates.length === 0) return
|
||||
|
||||
// Prüfen ob irgendeine Template-criteriaId in den FeedbackCategory-IDs liegt
|
||||
const catIds = new Set(cats.map(c => c.id!))
|
||||
const firstWithIds = templates.find(t => t.criteriaIds.length > 0)
|
||||
if (firstWithIds && catIds.has(firstWithIds.criteriaIds[0])) return // schon migriert
|
||||
|
||||
// Kategorien nach Name nachschlagen
|
||||
const cat = (name: string) => cats.find(c => c.name === name)?.id
|
||||
|
||||
// Scores löschen (keine Textinhalte, nur Bewertungszahlen)
|
||||
await db.conversationSkillScores.clear()
|
||||
await db.assessments.clear()
|
||||
|
||||
// Phase-Templates mit neuen Kategorie-IDs befüllen
|
||||
// Kategorien-Sets pro Assignment-Typ und Phasentyp
|
||||
const genericCats = [
|
||||
cat('Kommunikationsfähigkeit'), cat('Persönliche Einstellung'),
|
||||
cat('Kundenmanagement'), cat('Ergebnisverantwortung'), cat('Qualität des Inhalts'),
|
||||
].filter(Boolean) as number[]
|
||||
|
||||
const caseCats = [
|
||||
cat('Kommunikationsfähigkeit'), cat('Ergebnisverantwortung'),
|
||||
cat('Arbeitsstil'), cat('Qualität des Inhalts'), cat('Inhaltliche Vollständigkeit'),
|
||||
].filter(Boolean) as number[]
|
||||
|
||||
const pitchCats = [
|
||||
cat('Kommunikationsfähigkeit'), cat('Persönliche Einstellung'),
|
||||
cat('Kundenmanagement'), cat('Ergebnisverantwortung'),
|
||||
cat('Qualität des Inhalts'), cat('Qualität der Unterlage'),
|
||||
].filter(Boolean) as number[]
|
||||
|
||||
const types = await db.assignmentTypes.toArray()
|
||||
for (const tmpl of templates) {
|
||||
if (!tmpl.hasAssessment && !tmpl.hasConversation) {
|
||||
await db.phaseTemplates.update(tmpl.id!, { criteriaIds: [] })
|
||||
continue
|
||||
}
|
||||
const aType = types.find(t => t.id === tmpl.assignmentTypeId)
|
||||
let newIds: number[]
|
||||
if (aType?.name === 'Case Interview') {
|
||||
newIds = caseCats
|
||||
} else if (aType?.name === 'Stakeholder Meeting / Pitch') {
|
||||
newIds = pitchCats
|
||||
} else {
|
||||
newIds = genericCats
|
||||
}
|
||||
await db.phaseTemplates.update(tmpl.id!, { criteriaIds: newIds })
|
||||
}
|
||||
}
|
||||
1
src/index.css
Normal file
1
src/index.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "tailwindcss";
|
||||
20
src/main.tsx
Normal file
20
src/main.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { seedIfEmpty, seedFeedbackStructureIfEmpty, seedCriterionMappingsIfEmpty, migrateToUnifiedCriteriaIfNeeded } from './db/index.ts'
|
||||
|
||||
seedIfEmpty()
|
||||
seedFeedbackStructureIfEmpty().then(() => {
|
||||
seedCriterionMappingsIfEmpty()
|
||||
migrateToUnifiedCriteriaIfNeeded()
|
||||
})
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
)
|
||||
212
src/pages/AssignmentCreate.tsx
Normal file
212
src/pages/AssignmentCreate.tsx
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { db, type AssignmentType, type PhaseTemplate, type Consultant, type Group } from '../db'
|
||||
|
||||
export default function AssignmentCreate() {
|
||||
const navigate = useNavigate()
|
||||
const [types, setTypes] = useState<AssignmentType[]>([])
|
||||
const [phases, setPhases] = useState<PhaseTemplate[]>([])
|
||||
const [groups, setGroups] = useState<Group[]>([])
|
||||
const [consultants, setConsultants] = useState<Consultant[]>([])
|
||||
const [form, setForm] = useState({
|
||||
title: '',
|
||||
client: '',
|
||||
leadName: '',
|
||||
assignmentTypeId: 0,
|
||||
selectedGroupId: 0,
|
||||
instituteeIds: [] as number[],
|
||||
})
|
||||
// Inline Berater-Anlage
|
||||
const [showAddInstitutee, setShowAddInstitutee] = useState(false)
|
||||
const [newFirst, setNewFirst] = useState('')
|
||||
const [newLast, setNewLast] = useState('')
|
||||
|
||||
const reload = async () => {
|
||||
const [t, g, c] = await Promise.all([
|
||||
db.assignmentTypes.toArray(),
|
||||
db.groups.toArray(),
|
||||
db.consultants.toArray(),
|
||||
])
|
||||
setTypes(t)
|
||||
setGroups(g)
|
||||
setConsultants(c)
|
||||
}
|
||||
|
||||
useEffect(() => { reload() }, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!form.assignmentTypeId) { setPhases([]); return }
|
||||
db.phaseTemplates.where('assignmentTypeId').equals(form.assignmentTypeId).sortBy('order').then(setPhases)
|
||||
}, [form.assignmentTypeId])
|
||||
|
||||
const groupConsultants = consultants.filter(c => c.groupId === form.selectedGroupId)
|
||||
|
||||
const toggleInstitutee = (id: number) =>
|
||||
setForm(p => ({
|
||||
...p,
|
||||
instituteeIds: p.instituteeIds.includes(id)
|
||||
? p.instituteeIds.filter(x => x !== id)
|
||||
: [...p.instituteeIds, id],
|
||||
}))
|
||||
|
||||
const addInstituteeInline = async () => {
|
||||
if (!newFirst.trim() || !newLast.trim()) return
|
||||
let groupId = form.selectedGroupId
|
||||
if (!groupId) {
|
||||
// Erstelle eine Standardgruppe falls keine vorhanden
|
||||
groupId = await db.groups.add({ name: 'Neue Gruppe', cohortYear: new Date().getFullYear() })
|
||||
setForm(p => ({ ...p, selectedGroupId: groupId }))
|
||||
}
|
||||
const id = await db.consultants.add({ groupId, firstName: newFirst.trim(), lastName: newLast.trim() })
|
||||
await reload()
|
||||
setForm(p => ({ ...p, instituteeIds: [...p.instituteeIds, id] }))
|
||||
setNewFirst('')
|
||||
setNewLast('')
|
||||
setShowAddInstitutee(false)
|
||||
}
|
||||
|
||||
const create = async () => {
|
||||
if (!form.title.trim() || !form.client.trim() || !form.assignmentTypeId || form.instituteeIds.length === 0) return
|
||||
const id = await db.assignments.add({
|
||||
title: form.title,
|
||||
client: form.client,
|
||||
leadName: form.leadName,
|
||||
assignmentTypeId: form.assignmentTypeId,
|
||||
instituteeIds: form.instituteeIds,
|
||||
status: 'active',
|
||||
createdAt: new Date().toISOString(),
|
||||
})
|
||||
navigate(`/assignment/${id}`)
|
||||
}
|
||||
|
||||
const canCreate = form.title.trim() && form.client.trim() && form.assignmentTypeId && form.instituteeIds.length > 0
|
||||
const selectedInstitutees = consultants.filter(c => form.instituteeIds.includes(c.id!))
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<h1 className="text-xl font-bold text-gray-800">Neues Assignment</h1>
|
||||
|
||||
{/* Basisdaten */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 space-y-3">
|
||||
<input className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Titel des Assignments" value={form.title}
|
||||
onChange={e => setForm(p => ({ ...p, title: e.target.value }))} />
|
||||
<input className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Kunde / Unternehmen" value={form.client}
|
||||
onChange={e => setForm(p => ({ ...p, client: e.target.value }))} />
|
||||
<input className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Lead-Name (dein Name)" value={form.leadName}
|
||||
onChange={e => setForm(p => ({ ...p, leadName: e.target.value }))} />
|
||||
<select className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.assignmentTypeId}
|
||||
onChange={e => setForm(p => ({ ...p, assignmentTypeId: +e.target.value }))}>
|
||||
<option value={0}>Assignment-Typ wählen…</option>
|
||||
{types.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Phase-Preview */}
|
||||
{phases.length > 0 && (
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-xl p-4">
|
||||
<div className="text-xs font-semibold text-blue-600 uppercase tracking-wide mb-2">Meeting-Flow</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{phases.map((p, i) => (
|
||||
<span key={p.id} className="text-xs bg-white border border-blue-200 text-blue-700 px-2 py-1 rounded-full">
|
||||
{i + 1}. {p.label}{p.isRepeatable ? ' *' : ''}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-xs text-blue-400 mt-2">* = wiederholbar</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Institutees */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-semibold text-gray-700 text-sm">Institutees (Berater)</h2>
|
||||
<button onClick={() => setShowAddInstitutee(p => !p)}
|
||||
className="text-xs text-[#0070AD] border border-[#0070AD] px-2.5 py-1 rounded-lg">
|
||||
+ Neu anlegen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Inline Berater-Formular */}
|
||||
{showAddInstitutee && (
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-lg p-3 space-y-2">
|
||||
<div className="text-xs font-semibold text-blue-600 mb-1">Neuen Berater anlegen</div>
|
||||
<div className="flex gap-2">
|
||||
<input className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Vorname" value={newFirst}
|
||||
onChange={e => setNewFirst(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && addInstituteeInline()} />
|
||||
<input className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Nachname" value={newLast}
|
||||
onChange={e => setNewLast(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && addInstituteeInline()} />
|
||||
</div>
|
||||
{groups.length > 0 && (
|
||||
<select className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.selectedGroupId || ''}
|
||||
onChange={e => setForm(p => ({ ...p, selectedGroupId: +e.target.value }))}>
|
||||
<option value="">Gruppe wählen (optional)</option>
|
||||
{groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
|
||||
</select>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<button onClick={addInstituteeInline}
|
||||
disabled={!newFirst.trim() || !newLast.trim()}
|
||||
className="flex-1 py-2 rounded-lg text-sm font-medium bg-[#0070AD] text-white disabled:bg-gray-200 disabled:text-gray-400">
|
||||
Hinzufügen
|
||||
</button>
|
||||
<button onClick={() => { setShowAddInstitutee(false); setNewFirst(''); setNewLast('') }}
|
||||
className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-500">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gruppe wählen */}
|
||||
<select className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.selectedGroupId}
|
||||
onChange={e => setForm(p => ({ ...p, selectedGroupId: +e.target.value, instituteeIds: [] }))}>
|
||||
<option value={0}>Gruppe wählen…</option>
|
||||
{groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
|
||||
</select>
|
||||
|
||||
{form.selectedGroupId > 0 && (
|
||||
<div className="space-y-1">
|
||||
{groupConsultants.length === 0 && (
|
||||
<p className="text-sm text-gray-400">Keine Berater in dieser Gruppe. Nutze "+ Neu anlegen".</p>
|
||||
)}
|
||||
{groupConsultants.map(c => (
|
||||
<label key={c.id} className="flex items-center gap-3 py-1.5 cursor-pointer">
|
||||
<input type="checkbox" checked={form.instituteeIds.includes(c.id!)}
|
||||
onChange={() => toggleInstitutee(c.id!)} className="w-4 h-4 accent-[#0070AD]" />
|
||||
<span className="text-sm">{c.firstName} {c.lastName}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gewählte Berater aus anderen Gruppen */}
|
||||
{selectedInstitutees.filter(c => c.groupId !== form.selectedGroupId).map(c => (
|
||||
<div key={c.id} className="flex items-center gap-2 py-1">
|
||||
<span className="w-4 h-4 rounded bg-[#0070AD] flex items-center justify-center">
|
||||
<span className="text-white text-xs">✓</span>
|
||||
</span>
|
||||
<span className="text-sm">{c.firstName} {c.lastName}</span>
|
||||
<button onClick={() => toggleInstitutee(c.id!)} className="text-xs text-red-400 ml-auto">×</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button onClick={create} disabled={!canCreate}
|
||||
className={`w-full py-3 rounded-xl text-sm font-medium shadow transition ${
|
||||
canCreate ? 'bg-[#0070AD] text-white hover:bg-[#005a8e]' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
}`}>
|
||||
Assignment anlegen
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
398
src/pages/AssignmentDetail.tsx
Normal file
398
src/pages/AssignmentDetail.tsx
Normal file
|
|
@ -0,0 +1,398 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { db, type Assignment, type AssignmentType, type PhaseTemplate, type MeetingInstance, type Consultant, type Assessment, type FeedbackRating, type FeedbackCategory, type FeedbackCriterionItem } from '../db'
|
||||
import { exportMeetingAsMarkdown, exportMeetingAsJson, downloadFile } from '../utils/meetingExport'
|
||||
|
||||
const RATING_BG: Record<FeedbackRating, string> = {
|
||||
na: 'bg-gray-400 text-white',
|
||||
not_client_ready: 'bg-red-500 text-white',
|
||||
partially_client_ready: 'bg-orange-500 text-white',
|
||||
nearly_client_ready: 'bg-green-400 text-white',
|
||||
client_ready: 'bg-green-700 text-white',
|
||||
}
|
||||
|
||||
const NUM_MAP: Record<FeedbackRating, number> = { na: 0, not_client_ready: 1, partially_client_ready: 2, nearly_client_ready: 3, client_ready: 4 }
|
||||
const avgToRating = (avg: number): FeedbackRating =>
|
||||
avg < 1.5 ? 'not_client_ready' : avg < 2.5 ? 'partially_client_ready' : avg < 3.5 ? 'nearly_client_ready' : 'client_ready'
|
||||
|
||||
interface PhaseRow {
|
||||
template: PhaseTemplate
|
||||
instances: MeetingInstance[]
|
||||
}
|
||||
|
||||
export default function AssignmentDetail() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const assignmentId = Number(id)
|
||||
|
||||
const [assignment, setAssignment] = useState<Assignment | null>(null)
|
||||
const [assignmentType, setAssignmentType] = useState<AssignmentType | null>(null)
|
||||
const [phaseRows, setPhaseRows] = useState<PhaseRow[]>([])
|
||||
const [allTemplates, setAllTemplates] = useState<PhaseTemplate[]>([])
|
||||
const [institutees, setInstitutees] = useState<Consultant[]>([])
|
||||
const [deletedInstances, setDeletedInstances] = useState<MeetingInstance[]>([])
|
||||
const [showAdHoc, setShowAdHoc] = useState(false)
|
||||
const [showTrash, setShowTrash] = useState(false)
|
||||
const [exportMenuId, setExportMenuId] = useState<number | null>(null)
|
||||
const [confirmSoftDelete, setConfirmSoftDelete] = useState<number | null>(null)
|
||||
const [confirmHardDelete, setConfirmHardDelete] = useState<number | null>(null)
|
||||
const [allAssessments, setAllAssessments] = useState<Assessment[]>([])
|
||||
const [fbCategories, setFbCategories] = useState<FeedbackCategory[]>([])
|
||||
const [fbItems, setFbItems] = useState<FeedbackCriterionItem[]>([])
|
||||
|
||||
const load = async () => {
|
||||
const a = await db.assignments.get(assignmentId)
|
||||
if (!a) return
|
||||
setAssignment(a)
|
||||
|
||||
const [aType, templates, instances, cons] = await Promise.all([
|
||||
db.assignmentTypes.get(a.assignmentTypeId),
|
||||
db.phaseTemplates.where('assignmentTypeId').equals(a.assignmentTypeId).sortBy('order'),
|
||||
db.meetingInstances.where('assignmentId').equals(assignmentId).toArray(),
|
||||
db.consultants.where('id').anyOf(a.instituteeIds).toArray(),
|
||||
])
|
||||
|
||||
setAssignmentType(aType ?? null)
|
||||
setAllTemplates(templates)
|
||||
setInstitutees(a.instituteeIds.map(cid => cons.find(c => c.id === cid)!).filter(Boolean))
|
||||
const active = instances.filter(i => !i.deletedAt)
|
||||
const deleted = instances.filter(i => !!i.deletedAt)
|
||||
setDeletedInstances(deleted)
|
||||
setPhaseRows(templates.map(t => ({
|
||||
template: t,
|
||||
instances: active.filter(i => i.phaseTemplateId === t.id).sort((a, b) => a.phaseIndex - b.phaseIndex),
|
||||
})))
|
||||
const instIds = active.map(i => i.id!)
|
||||
const [asmts, allCats, allItems, aType2] = await Promise.all([
|
||||
instIds.length > 0 ? db.assessments.where('meetingInstanceId').anyOf(instIds).toArray() : Promise.resolve([]),
|
||||
db.feedbackCategories.toArray(),
|
||||
db.feedbackCriterionItems.toArray(),
|
||||
db.assignmentTypes.get(a.assignmentTypeId),
|
||||
])
|
||||
setAllAssessments(asmts)
|
||||
const itemFilter = aType2?.criteriaIds?.length ? new Set(aType2.criteriaIds) : null
|
||||
const filteredItems = itemFilter ? allItems.filter(i => itemFilter.has(i.id!)) : allItems
|
||||
setFbItems(filteredItems)
|
||||
const visibleCatIds = new Set(filteredItems.map(i => i.categoryId))
|
||||
setFbCategories(itemFilter ? allCats.filter(c => visibleCatIds.has(c.id!)) : allCats)
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [assignmentId])
|
||||
|
||||
const startMeeting = async (templateId: number, existingCount: number) => {
|
||||
const mid = await db.meetingInstances.add({
|
||||
assignmentId,
|
||||
phaseTemplateId: templateId,
|
||||
phaseIndex: existingCount + 1,
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
status: 'active',
|
||||
generalNotes: '',
|
||||
})
|
||||
navigate(`/assignment/${assignmentId}/meeting/${mid}`)
|
||||
}
|
||||
|
||||
const buildFilename = (inst: MeetingInstance, ext: string) => {
|
||||
const tmpl = allTemplates.find(t => t.id === inst.phaseTemplateId)
|
||||
const date = new Date(inst.date).toLocaleDateString('de-DE').replace(/\./g, '-')
|
||||
const label = tmpl?.label ?? 'Meeting'
|
||||
const idx = inst.phaseIndex > 1 ? `-${inst.phaseIndex}` : ''
|
||||
const id = assignment?.assignmentNumber ?? assignment?.title ?? 'export'
|
||||
return `${id}_${date}_${label}${idx}.${ext}`
|
||||
}
|
||||
|
||||
const handleExportMd = async (inst: MeetingInstance) => {
|
||||
const md = await exportMeetingAsMarkdown(inst.id!)
|
||||
downloadFile(md, buildFilename(inst, 'md'), 'text/markdown')
|
||||
setExportMenuId(null)
|
||||
}
|
||||
|
||||
const handleExportJson = async (inst: MeetingInstance) => {
|
||||
const json = await exportMeetingAsJson(inst.id!)
|
||||
downloadFile(json, buildFilename(inst, 'json'), 'application/json')
|
||||
setExportMenuId(null)
|
||||
}
|
||||
|
||||
const softDeleteMeeting = async (instId: number) => {
|
||||
await db.meetingInstances.update(instId, { deletedAt: new Date().toISOString() })
|
||||
setConfirmSoftDelete(null)
|
||||
await load()
|
||||
}
|
||||
|
||||
const restoreMeeting = async (instId: number) => {
|
||||
await db.meetingInstances.update(instId, { deletedAt: undefined })
|
||||
await load()
|
||||
}
|
||||
|
||||
const hardDeleteMeeting = async (instId: number) => {
|
||||
await db.conversationSkillScores
|
||||
.where('conversationEntryId')
|
||||
.anyOf((await db.conversationEntries.where('meetingInstanceId').equals(instId).primaryKeys()))
|
||||
.delete()
|
||||
await db.conversationEntries.where('meetingInstanceId').equals(instId).delete()
|
||||
await db.assessments.where('meetingInstanceId').equals(instId).delete()
|
||||
await db.meetingInstances.delete(instId)
|
||||
setConfirmHardDelete(null)
|
||||
await load()
|
||||
}
|
||||
|
||||
const statusBadge = (status: MeetingInstance['status']) => {
|
||||
const map = {
|
||||
planned: 'bg-yellow-100 text-yellow-700',
|
||||
active: 'bg-green-100 text-green-700',
|
||||
done: 'bg-gray-100 text-gray-500',
|
||||
}
|
||||
const label = { planned: 'Geplant', active: 'Aktiv', done: 'Fertig' }
|
||||
return <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${map[status]}`}>{label[status]}</span>
|
||||
}
|
||||
|
||||
if (!assignment) return <div className="text-center py-10 text-gray-400">Lädt…</div>
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<button onClick={() => navigate('/')} className="text-sm text-[#0070AD] mb-2 block">← Zurück</button>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
{assignment.assignmentNumber && (
|
||||
<div className="text-xs font-semibold text-[#0070AD] uppercase tracking-wide">{assignment.assignmentNumber}</div>
|
||||
)}
|
||||
<h1 className="text-xl font-bold text-gray-800 leading-tight">{assignment.title}</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => navigate(`/assignment/${assignmentId}/edit`)}
|
||||
className="flex-shrink-0 text-xs px-3 py-1.5 border border-gray-200 rounded-lg text-gray-500 hover:border-[#0070AD] hover:text-[#0070AD] transition">
|
||||
✏️ Bearbeiten
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{assignment.client} · {assignmentType?.name}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">
|
||||
{institutees.map(c => `${c.firstName} ${c.lastName}`).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ad-hoc Meeting */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-semibold text-gray-700">Ad-hoc Meeting starten</span>
|
||||
<button onClick={() => setShowAdHoc(p => !p)}
|
||||
className="text-xs bg-[#0070AD] text-white px-3 py-1.5 rounded-lg font-medium">
|
||||
{showAdHoc ? 'Abbrechen' : '+ Ad-hoc'}
|
||||
</button>
|
||||
</div>
|
||||
{showAdHoc && (
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
{allTemplates.map(t => (
|
||||
<button key={t.id}
|
||||
onClick={() => {
|
||||
const count = phaseRows.find(r => r.template.id === t.id)?.instances.length ?? 0
|
||||
startMeeting(t.id!, count)
|
||||
}}
|
||||
className="py-2.5 px-3 text-left rounded-lg border border-gray-200 hover:border-[#0070AD] hover:bg-blue-50 transition">
|
||||
<div className="text-sm font-medium text-gray-700">{t.label}</div>
|
||||
<div className={`text-xs mt-0.5 ${t.withWhom === 'client' ? 'text-blue-500' : 'text-purple-500'}`}>
|
||||
{t.withWhom === 'client' ? 'Kundentermin' : 'Lead-intern'}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Feedback-Entwürfe */}
|
||||
{institutees.length > 0 && (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-xl p-3 flex items-center justify-between">
|
||||
<span className="text-sm text-amber-800 font-medium">Feedback-Entwürfe</span>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{institutees.map(c => (
|
||||
<button key={c.id}
|
||||
onClick={() => navigate(`/assignment/${assignmentId}/feedback/${c.id}`)}
|
||||
className="text-xs bg-amber-600 text-white px-3 py-1 rounded-lg">
|
||||
{c.firstName}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Phasen-Flow */}
|
||||
<div className="space-y-3" onClick={() => setExportMenuId(null)}>
|
||||
{phaseRows.map(({ template, instances }) => {
|
||||
const canStart = instances.length === 0 || template.isRepeatable
|
||||
return (
|
||||
<div key={template.id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="font-semibold text-gray-800 text-sm">{template.label}</span>
|
||||
<span className={`ml-2 text-xs px-2 py-0.5 rounded-full ${
|
||||
template.withWhom === 'client' ? 'bg-blue-100 text-blue-600' : 'bg-purple-100 text-purple-600'
|
||||
}`}>
|
||||
{template.withWhom === 'client' ? 'Kunde' : 'Lead'}
|
||||
</span>
|
||||
{template.hasConversation && (
|
||||
<span className="ml-1 text-xs bg-orange-100 text-orange-600 px-2 py-0.5 rounded-full">
|
||||
Protokoll
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => canStart && startMeeting(template.id!, instances.length)}
|
||||
className={`ml-2 flex-shrink-0 text-xs px-3 py-1.5 rounded-lg font-medium ${
|
||||
canStart ? 'bg-[#0070AD] text-white' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
disabled={!canStart}>
|
||||
{instances.length === 0 ? 'Starten' : template.isRepeatable ? '+ Wiederholen' : 'Erledigt'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{instances.map(inst => (
|
||||
<div key={inst.id} className="mt-2 relative">
|
||||
<div
|
||||
onClick={() => { if (confirmSoftDelete !== inst.id) navigate(`/assignment/${assignmentId}/meeting/${inst.id}`) }}
|
||||
className="flex items-start justify-between py-2 px-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm text-gray-700">
|
||||
{template.isRepeatable ? `#${inst.phaseIndex} · ` : ''}
|
||||
{new Date(inst.date).toLocaleDateString('de-DE')}
|
||||
</div>
|
||||
{/* Per-institutee per-category chips */}
|
||||
{institutees.map(c => {
|
||||
const chips = fbCategories.map(cat => {
|
||||
const catItems = fbItems.filter(i => i.categoryId === cat.id)
|
||||
const scored = catItems.map(item => {
|
||||
const asmt = allAssessments.find(a =>
|
||||
a.meetingInstanceId === inst.id &&
|
||||
a.instituteeId === c.id &&
|
||||
a.criteriaId === item.id &&
|
||||
a.score !== null && a.score !== 'na'
|
||||
)
|
||||
return asmt ? { score: asmt.score as FeedbackRating, w: item.weight ?? 1 } : null
|
||||
}).filter(Boolean) as { score: FeedbackRating; w: number }[]
|
||||
if (scored.length === 0) return null
|
||||
const wSum = scored.reduce((s, x) => s + x.w, 0)
|
||||
const avg = scored.reduce((s, x) => s + NUM_MAP[x.score] * x.w, 0) / wSum
|
||||
return { cat, mode: avgToRating(avg) }
|
||||
}).filter(Boolean) as { cat: FeedbackCategory; mode: FeedbackRating }[]
|
||||
|
||||
if (chips.length === 0) return null
|
||||
return (
|
||||
<div key={c.id} className="mt-1">
|
||||
<span className="text-xs text-gray-400 mr-1">{c.firstName}:</span>
|
||||
{chips.map(({ cat, mode }) => (
|
||||
<span key={cat.id} className={`inline-block text-xs px-2 py-0.5 rounded font-medium mr-1 ${RATING_BG[mode]}`}>
|
||||
{cat.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{statusBadge(inst.status)}
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); setExportMenuId(exportMenuId === inst.id ? null : inst.id!); setConfirmSoftDelete(null) }}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 px-1.5 py-1">
|
||||
↓
|
||||
</button>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); setConfirmSoftDelete(confirmSoftDelete === inst.id ? null : inst.id!); setExportMenuId(null) }}
|
||||
className="text-xs text-red-300 hover:text-red-500 px-1.5 py-1">
|
||||
🗑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{exportMenuId === inst.id && (
|
||||
<div className="absolute right-8 top-full mt-0.5 bg-white border border-gray-200 rounded-xl shadow-lg z-10 min-w-[150px] overflow-hidden">
|
||||
<button onClick={() => handleExportMd(inst)}
|
||||
className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50 border-b border-gray-100">
|
||||
📄 Markdown
|
||||
</button>
|
||||
<button onClick={() => handleExportJson(inst)}
|
||||
className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50">
|
||||
🗂 JSON-Backup
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{confirmSoftDelete === inst.id && (
|
||||
<div className="mt-1 bg-red-50 border border-red-200 rounded-lg px-3 py-2.5 flex items-center justify-between gap-2">
|
||||
<span className="text-xs text-red-700">In Papierkorb verschieben?</span>
|
||||
<div className="flex gap-1.5">
|
||||
<button onClick={() => softDeleteMeeting(inst.id!)}
|
||||
className="text-xs bg-red-600 text-white px-2.5 py-1 rounded-lg font-medium">
|
||||
Ja
|
||||
</button>
|
||||
<button onClick={() => setConfirmSoftDelete(null)}
|
||||
className="text-xs border border-gray-200 text-gray-500 px-2.5 py-1 rounded-lg">
|
||||
Nein
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Papierkorb */}
|
||||
{deletedInstances.length > 0 && (
|
||||
<div className="border border-dashed border-gray-200 rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setShowTrash(p => !p)}
|
||||
className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50 transition">
|
||||
<span className="text-sm text-gray-400 font-medium">
|
||||
🗑 Papierkorb ({deletedInstances.length})
|
||||
</span>
|
||||
<span className="text-gray-300 text-xs">{showTrash ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{showTrash && (
|
||||
<div className="border-t border-dashed border-gray-200 divide-y divide-gray-100">
|
||||
{deletedInstances.map(inst => {
|
||||
const tmpl = allTemplates.find(t => t.id === inst.phaseTemplateId)
|
||||
return (
|
||||
<div key={inst.id} className="px-4 py-3 bg-gray-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">{tmpl?.label ?? '—'}</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{new Date(inst.date).toLocaleDateString('de-DE')}
|
||||
{inst.deletedAt && ` · gelöscht ${new Date(inst.deletedAt).toLocaleDateString('de-DE')}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => restoreMeeting(inst.id!)}
|
||||
className="text-xs bg-white border border-gray-200 text-gray-600 px-2.5 py-1 rounded-lg hover:bg-gray-100">
|
||||
↺ Wiederherstellen
|
||||
</button>
|
||||
<button onClick={() => setConfirmHardDelete(inst.id!)}
|
||||
className="text-xs text-red-400 hover:text-red-600 px-2 py-1">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{confirmHardDelete === inst.id && (
|
||||
<div className="mt-2 bg-red-50 border border-red-200 rounded-lg p-3 space-y-2">
|
||||
<div className="text-xs text-red-700 font-medium">Endgültig löschen? Alle Daten dieses Meetings werden unwiderruflich entfernt.</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => hardDeleteMeeting(inst.id!)}
|
||||
className="flex-1 py-1.5 rounded-lg text-xs font-medium bg-red-600 text-white">
|
||||
Endgültig löschen
|
||||
</button>
|
||||
<button onClick={() => setConfirmHardDelete(null)}
|
||||
className="px-3 py-1.5 rounded-lg text-xs border border-gray-200 text-gray-500">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
256
src/pages/AssignmentEdit.tsx
Normal file
256
src/pages/AssignmentEdit.tsx
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { db, type Assignment, type AssignmentType, type Consultant } from '../db'
|
||||
|
||||
export default function AssignmentEdit() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const assignmentId = Number(id)
|
||||
|
||||
const [assignment, setAssignment] = useState<Assignment | null>(null)
|
||||
const [assignmentTypes, setAssignmentTypes] = useState<AssignmentType[]>([])
|
||||
const [allConsultants, setAllConsultants] = useState<Consultant[]>([])
|
||||
|
||||
// Form fields
|
||||
const [assignmentNumber, setAssignmentNumber] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [client, setClient] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [assignmentTypeId, setAssignmentTypeId] = useState(0)
|
||||
const [leadName, setLeadName] = useState('')
|
||||
const [status, setStatus] = useState<'active' | 'done'>('active')
|
||||
const [instituteeIds, setInstituteeIds] = useState<number[]>([])
|
||||
const [instituteeEnrollments, setInstituteeEnrollments] = useState<Array<{ instituteeId: number; from?: string; to?: string }>>([])
|
||||
const [typeChanged, setTypeChanged] = useState(false)
|
||||
const [addInstituteeId, setAddInstituteeId] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
const [a, types, cons] = await Promise.all([
|
||||
db.assignments.get(assignmentId),
|
||||
db.assignmentTypes.toArray(),
|
||||
db.consultants.toArray(),
|
||||
])
|
||||
if (!a) return
|
||||
setAssignment(a)
|
||||
setAssignmentTypes(types)
|
||||
setAllConsultants(cons)
|
||||
|
||||
setAssignmentNumber(a.assignmentNumber ?? '')
|
||||
setTitle(a.title)
|
||||
setClient(a.client)
|
||||
setDescription(a.description ?? '')
|
||||
setAssignmentTypeId(a.assignmentTypeId)
|
||||
setLeadName(a.leadName)
|
||||
setStatus(a.status)
|
||||
setInstituteeIds(a.instituteeIds ?? [])
|
||||
setInstituteeEnrollments(a.instituteeEnrollments ?? [])
|
||||
}
|
||||
loadData()
|
||||
}, [assignmentId])
|
||||
|
||||
const handleSave = async () => {
|
||||
await db.assignments.update(assignmentId, {
|
||||
assignmentNumber: assignmentNumber.trim() || undefined,
|
||||
title,
|
||||
client,
|
||||
description: description.trim() || undefined,
|
||||
assignmentTypeId,
|
||||
leadName,
|
||||
status,
|
||||
instituteeIds,
|
||||
instituteeEnrollments,
|
||||
})
|
||||
navigate(`/assignment/${assignmentId}`)
|
||||
}
|
||||
|
||||
const handleTypeChange = (newTypeId: number) => {
|
||||
if (newTypeId !== assignmentTypeId) setTypeChanged(true)
|
||||
setAssignmentTypeId(newTypeId)
|
||||
}
|
||||
|
||||
const addInstitutee = () => {
|
||||
if (!addInstituteeId || instituteeIds.includes(addInstituteeId)) return
|
||||
setInstituteeIds(prev => [...prev, addInstituteeId])
|
||||
setInstituteeEnrollments(prev => [...prev, { instituteeId: addInstituteeId, from: '', to: '' }])
|
||||
setAddInstituteeId(0)
|
||||
}
|
||||
|
||||
const removeInstitutee = (cid: number) => {
|
||||
setInstituteeIds(prev => prev.filter(id => id !== cid))
|
||||
setInstituteeEnrollments(prev => prev.filter(e => e.instituteeId !== cid))
|
||||
}
|
||||
|
||||
const updateEnrollment = (cid: number, field: 'from' | 'to', value: string) => {
|
||||
setInstituteeEnrollments(prev =>
|
||||
prev.map(e => e.instituteeId === cid ? { ...e, [field]: value } : e)
|
||||
)
|
||||
}
|
||||
|
||||
const availableConsultants = allConsultants.filter(c => !instituteeIds.includes(c.id!))
|
||||
|
||||
if (!assignment) return <div className="text-center py-10 text-gray-400">Lädt…</div>
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<button onClick={() => navigate(`/assignment/${assignmentId}`)}
|
||||
className="text-sm text-[#0070AD] mb-2 block">← Zurück</button>
|
||||
<h1 className="text-xl font-bold text-gray-800">Assignment bearbeiten</h1>
|
||||
</div>
|
||||
|
||||
{/* Formular */}
|
||||
<div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 space-y-3">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-gray-500">Assignment-Nummer</label>
|
||||
<input
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="z. B. CGI-2024-001"
|
||||
value={assignmentNumber}
|
||||
onChange={e => setAssignmentNumber(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-gray-500">Titel</label>
|
||||
<input
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-gray-500">Kunde</label>
|
||||
<input
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
value={client}
|
||||
onChange={e => setClient(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-gray-500">Beschreibung</label>
|
||||
<textarea
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
rows={3}
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-gray-500">Assignment-Typ</label>
|
||||
<select
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
value={assignmentTypeId}
|
||||
onChange={e => handleTypeChange(Number(e.target.value))}>
|
||||
{assignmentTypes.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{typeChanged && (
|
||||
<div className="text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 mt-1">
|
||||
⚠️ Bestehende Meetings bleiben erhalten
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-gray-500">Lead</label>
|
||||
<input
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
value={leadName}
|
||||
onChange={e => setLeadName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-gray-500">Status</label>
|
||||
<select
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
value={status}
|
||||
onChange={e => setStatus(e.target.value as 'active' | 'done')}>
|
||||
<option value="active">Aktiv</option>
|
||||
<option value="done">Abgeschlossen</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Institutees */}
|
||||
<div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 space-y-3">
|
||||
<h2 className="font-semibold text-gray-800">Institutees</h2>
|
||||
|
||||
{instituteeIds.length === 0 && (
|
||||
<p className="text-sm text-gray-400">Noch keine Institutees zugewiesen.</p>
|
||||
)}
|
||||
|
||||
{instituteeIds.map(cid => {
|
||||
const consultant = allConsultants.find(c => c.id === cid)
|
||||
const enrollment = instituteeEnrollments.find(e => e.instituteeId === cid)
|
||||
if (!consultant) return null
|
||||
return (
|
||||
<div key={cid} className="flex items-center gap-2 flex-wrap border border-gray-100 rounded-lg px-3 py-2">
|
||||
<span className="text-sm font-medium text-gray-700 flex-1 min-w-[100px]">
|
||||
{consultant.firstName} {consultant.lastName}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-gray-400">Von</span>
|
||||
<input
|
||||
type="date"
|
||||
className="border border-gray-200 rounded px-2 py-1 text-xs focus:outline-none focus:border-[#0070AD]"
|
||||
value={enrollment?.from ?? ''}
|
||||
onChange={e => updateEnrollment(cid, 'from', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-gray-400">Bis</span>
|
||||
<input
|
||||
type="date"
|
||||
className="border border-gray-200 rounded px-2 py-1 text-xs focus:outline-none focus:border-[#0070AD]"
|
||||
value={enrollment?.to ?? ''}
|
||||
onChange={e => updateEnrollment(cid, 'to', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeInstitutee(cid)}
|
||||
className="text-red-300 hover:text-red-500 text-sm px-1">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Institutee hinzufügen */}
|
||||
{availableConsultants.length > 0 && (
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
value={addInstituteeId}
|
||||
onChange={e => setAddInstituteeId(Number(e.target.value))}>
|
||||
<option value={0}>Institutee auswählen…</option>
|
||||
{availableConsultants.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.firstName} {c.lastName}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={addInstitutee}
|
||||
disabled={!addInstituteeId}
|
||||
className="px-4 py-2 bg-[#0070AD] text-white text-sm rounded-lg font-medium disabled:opacity-40">
|
||||
Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Aktionen */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="flex-1 py-3 bg-[#0070AD] text-white rounded-xl text-sm font-semibold">
|
||||
Speichern
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate(`/assignment/${assignmentId}`)}
|
||||
className="px-5 py-3 border border-gray-200 text-gray-500 rounded-xl text-sm">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
533
src/pages/AssignmentFeedbackPage.tsx
Normal file
533
src/pages/AssignmentFeedbackPage.tsx
Normal file
|
|
@ -0,0 +1,533 @@
|
|||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import {
|
||||
db,
|
||||
type Assignment,
|
||||
type Consultant,
|
||||
type FeedbackDimension,
|
||||
type FeedbackCategory,
|
||||
type FeedbackCriterionItem,
|
||||
type AssignmentFeedback,
|
||||
type FeedbackCategoryRating,
|
||||
type FeedbackDimensionText,
|
||||
type FeedbackRating,
|
||||
} from '../db'
|
||||
|
||||
const ratingToNum = (r: FeedbackRating | null | undefined): number => {
|
||||
const m: Record<FeedbackRating, number> = { na: 0, not_client_ready: 1, partially_client_ready: 2, nearly_client_ready: 3, client_ready: 4 }
|
||||
return r ? (m[r] ?? 0) : 0
|
||||
}
|
||||
|
||||
// ── Rating-Skala ─────────────────────────────────────────────────────────────
|
||||
|
||||
const RATINGS: { value: FeedbackRating; short: string; label: string; color: string }[] = [
|
||||
{ value: 'na', short: 'N/A', label: 'N/A (0)', color: 'bg-gray-100 text-gray-500 border-gray-300' },
|
||||
{ value: 'not_client_ready', short: 'Not', label: 'Not (1)', color: 'bg-red-100 text-red-700 border-red-300' },
|
||||
{ value: 'partially_client_ready', short: 'Partially', label: 'Partially (2)', color: 'bg-orange-100 text-orange-700 border-orange-300' },
|
||||
{ value: 'nearly_client_ready', short: 'Nearly', label: 'Nearly (3)', color: 'bg-green-100 text-green-600 border-green-300' },
|
||||
{ value: 'client_ready', short: 'Fully', label: 'Fully (4)', color: 'bg-green-100 text-green-800 border-green-400' },
|
||||
]
|
||||
|
||||
const ratingColor = (r: FeedbackRating | undefined) =>
|
||||
RATINGS.find(x => x.value === r)?.color ?? 'bg-gray-50 text-gray-400 border-gray-200'
|
||||
|
||||
// ── KI-Einstellungen aus localStorage ────────────────────────────────────────
|
||||
|
||||
const AI_KEY = 'ai_api_key'
|
||||
const AI_MODEL = 'ai_model'
|
||||
|
||||
function getAiSettings() {
|
||||
return {
|
||||
apiKey: localStorage.getItem(AI_KEY) ?? '',
|
||||
model: localStorage.getItem(AI_MODEL) ?? 'openai/gpt-4o-mini',
|
||||
}
|
||||
}
|
||||
|
||||
function saveAiSettings(apiKey: string, model: string) {
|
||||
localStorage.setItem(AI_KEY, apiKey)
|
||||
localStorage.setItem(AI_MODEL, model)
|
||||
}
|
||||
|
||||
// ── Prompt-Builder ────────────────────────────────────────────────────────────
|
||||
|
||||
async function buildAiPrompt(
|
||||
institutee: Consultant,
|
||||
assignment: Assignment,
|
||||
dimensions: FeedbackDimension[],
|
||||
categories: FeedbackCategory[],
|
||||
_items: FeedbackCriterionItem[],
|
||||
ratings: FeedbackCategoryRating[],
|
||||
_feedbackId: number,
|
||||
): Promise<string> {
|
||||
const meetings = await db.meetingInstances.where('assignmentId').equals(assignment.id!).toArray()
|
||||
const meetingIds = meetings.map(m => m.id!)
|
||||
|
||||
const [allAssessments, allEntries] = await Promise.all([
|
||||
db.assessments.where('meetingInstanceId').anyOf(meetingIds).toArray(),
|
||||
db.conversationEntries.where('meetingInstanceId').anyOf(meetingIds).toArray(),
|
||||
])
|
||||
|
||||
const instAssessments = allAssessments.filter(a => a.instituteeId === institutee.id)
|
||||
const instEntries = allEntries.filter(e => e.instituteeId === institutee.id)
|
||||
|
||||
const critIds = [...new Set(instAssessments.map(a => a.criteriaId))]
|
||||
const crits = critIds.length > 0
|
||||
? await db.criteria.where('id').anyOf(critIds).toArray()
|
||||
: []
|
||||
|
||||
const scoreLines = crits.map(c => {
|
||||
const scores = instAssessments.filter(a => a.criteriaId === c.id && a.score !== null)
|
||||
const avg = scores.length > 0
|
||||
? (scores.reduce((s, a) => s + ratingToNum(a.score), 0) / scores.length).toFixed(1)
|
||||
: '—'
|
||||
const notes = instAssessments.filter(a => a.criteriaId === c.id && a.note).map(a => a.note)
|
||||
return ` ${c.name}: ${avg}/5${notes.length > 0 ? ` | Notizen: ${notes.join('; ')}` : ''}`
|
||||
}).join('\n')
|
||||
|
||||
const fillerTotal = instEntries.reduce((s, e) => s + (e.fillerCount ?? 0), 0)
|
||||
const protocolLines = instEntries
|
||||
.filter(e => e.note)
|
||||
.map(e => ` - ${e.note}${(e.fillerCount ?? 0) > 0 ? ` [äh×${e.fillerCount}]` : ''}`)
|
||||
.join('\n')
|
||||
|
||||
// Kategorie-Ratings
|
||||
const ratingLines = dimensions.map(dim => {
|
||||
const dimCats = categories.filter(c => c.dimensionId === dim.id)
|
||||
const lines = dimCats.map(cat => {
|
||||
const r = ratings.find(r => r.feedbackCategoryId === cat.id)
|
||||
const rating = RATINGS.find(x => x.value === r?.rating)?.label ?? 'nicht bewertet'
|
||||
return ` ${cat.name}: ${rating}`
|
||||
}).join('\n')
|
||||
return ` Dimension "${dim.name}":\n${lines}`
|
||||
}).join('\n')
|
||||
|
||||
// Feedback-Struktur für Output
|
||||
const dimStructure = dimensions.map((dim, i) =>
|
||||
`${i + 1}. ${dim.name}`
|
||||
).join('\n')
|
||||
|
||||
return `Du bist Führungskraft und Mentor bei Capgemini. Erstelle ein professionelles, konstruktives Performance-Feedback für einen Berater/Trainee auf Basis der folgenden Beobachtungsdaten aus echten Kundenterminen.
|
||||
|
||||
BERATER: ${institutee.firstName} ${institutee.lastName}
|
||||
ASSIGNMENT: ${assignment.title} | Kunde: ${assignment.client}
|
||||
MEETINGS: ${meetings.length} Kundentermin(e)
|
||||
FÜLLWÖRTER GESAMT: ${fillerTotal}
|
||||
|
||||
BEOBACHTETE KRITERIEN UND SCORES (1-5):
|
||||
${scoreLines || '(keine Scores erfasst)'}
|
||||
|
||||
PROTOKOLL-NOTIZEN (Kurznotizen aus dem Gespräch, Notation: + gut, ! negativ, > Kundeninput):
|
||||
${protocolLines || '(keine Protokolleinträge)'}
|
||||
|
||||
KATEGORIE-BEWERTUNGEN:
|
||||
${ratingLines}
|
||||
|
||||
Generiere für jede der folgenden ${dimensions.length} Dimensionen je einen kurzen Absatz "Achievements" (2-4 Sätze, konkret, anerkennend) und "Development Needs" (2-4 Sätze, konstruktiv, handlungsorientiert). Falls eine Dimension aus den Daten nicht beurteilbar ist, schreibe "n/a".
|
||||
|
||||
Ausgabe als JSON:
|
||||
{
|
||||
"dimensions": [
|
||||
{
|
||||
"name": "<Dimensionsname>",
|
||||
"achievements": "<Text>",
|
||||
"developmentNeeds": "<Text>"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
DIMENSIONEN:
|
||||
${dimStructure}
|
||||
|
||||
Wichtig: Beziehe dich auf konkrete Beobachtungen aus den Daten. Schreibe direkt und persönlich (du-Form). Vermeide generische Phrasen.`
|
||||
}
|
||||
|
||||
// ─── Komponente ───────────────────────────────────────────────────────────────
|
||||
|
||||
export default function AssignmentFeedbackPage() {
|
||||
const { id, instituteeId } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const assignmentId = Number(id)
|
||||
const instId = Number(instituteeId)
|
||||
|
||||
const [assignment, setAssignment] = useState<Assignment | null>(null)
|
||||
const [institutee, setInstitutee] = useState<Consultant | null>(null)
|
||||
const [dimensions, setDimensions] = useState<FeedbackDimension[]>([])
|
||||
const [categories, setCategories] = useState<FeedbackCategory[]>([])
|
||||
const [items, setItems] = useState<FeedbackCriterionItem[]>([])
|
||||
const [feedback, setFeedback] = useState<AssignmentFeedback | null>(null)
|
||||
const [ratings, setRatings] = useState<FeedbackCategoryRating[]>([])
|
||||
const [dimTexts, setDimTexts] = useState<FeedbackDimensionText[]>([])
|
||||
const [expanded, setExpanded] = useState<Set<number>>(new Set())
|
||||
const [showAiSettings, setShowAiSettings] = useState(false)
|
||||
const [aiKey, setAiKey] = useState(getAiSettings().apiKey)
|
||||
const [aiModel, setAiModel] = useState(getAiSettings().model)
|
||||
const [generating, setGenerating] = useState(false)
|
||||
const [aiError, setAiError] = useState('')
|
||||
const saveTimer = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const [a, cons, dims, cats, itms] = await Promise.all([
|
||||
db.assignments.get(assignmentId),
|
||||
db.consultants.get(instId),
|
||||
db.feedbackDimensions.orderBy('order').toArray(),
|
||||
db.feedbackCategories.orderBy('order').toArray(),
|
||||
db.feedbackCriterionItems.orderBy('order').toArray(),
|
||||
])
|
||||
setAssignment(a ?? null)
|
||||
setInstitutee(cons ?? null)
|
||||
setDimensions(dims)
|
||||
setCategories(cats)
|
||||
setItems(itms)
|
||||
|
||||
let fb = await db.assignmentFeedbacks
|
||||
.where('assignmentId').equals(assignmentId)
|
||||
.filter(f => f.instituteeId === instId)
|
||||
.first()
|
||||
if (!fb) {
|
||||
const fbId = await db.assignmentFeedbacks.add({
|
||||
assignmentId, instituteeId: instId,
|
||||
status: 'draft', aiModel: '', updatedAt: new Date().toISOString(),
|
||||
})
|
||||
fb = await db.assignmentFeedbacks.get(fbId)
|
||||
}
|
||||
setFeedback(fb ?? null)
|
||||
|
||||
if (fb?.id) {
|
||||
const [rs, txts] = await Promise.all([
|
||||
db.feedbackCategoryRatings.where('assignmentFeedbackId').equals(fb.id).toArray(),
|
||||
db.feedbackDimensionTexts.where('assignmentFeedbackId').equals(fb.id).toArray(),
|
||||
])
|
||||
setRatings(rs)
|
||||
setDimTexts(txts)
|
||||
}
|
||||
|
||||
// Alle Dimensionen initial expandiert
|
||||
setExpanded(new Set(dims.map(d => d.id!)))
|
||||
}, [assignmentId, instId])
|
||||
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
// ── Rating setzen ─────────────────────────────────────────────────────────
|
||||
|
||||
const setRating = async (categoryId: number, rating: FeedbackRating) => {
|
||||
if (!feedback?.id) return
|
||||
const existing = ratings.find(r => r.feedbackCategoryId === categoryId)
|
||||
if (existing?.id) {
|
||||
await db.feedbackCategoryRatings.update(existing.id, { rating })
|
||||
setRatings(prev => prev.map(r => r.feedbackCategoryId === categoryId ? { ...r, rating } : r))
|
||||
} else {
|
||||
const newId = await db.feedbackCategoryRatings.add({
|
||||
assignmentFeedbackId: feedback.id, feedbackCategoryId: categoryId, rating,
|
||||
})
|
||||
setRatings(prev => [...prev, { id: newId, assignmentFeedbackId: feedback.id!, feedbackCategoryId: categoryId, rating }])
|
||||
}
|
||||
}
|
||||
|
||||
const getRating = (categoryId: number): FeedbackRating | undefined =>
|
||||
ratings.find(r => r.feedbackCategoryId === categoryId)?.rating
|
||||
|
||||
// ── Text speichern (debounced) ────────────────────────────────────────────
|
||||
|
||||
const saveDimText = (dimId: number, field: 'achievements' | 'developmentNeeds', value: string) => {
|
||||
setDimTexts(prev => {
|
||||
const existing = prev.find(t => t.feedbackDimensionId === dimId)
|
||||
if (existing) return prev.map(t => t.feedbackDimensionId === dimId ? { ...t, [field]: value } : t)
|
||||
return [...prev, { assignmentFeedbackId: feedback?.id ?? 0, feedbackDimensionId: dimId, achievements: '', developmentNeeds: '', [field]: value }]
|
||||
})
|
||||
const key = `${dimId}-${field}`
|
||||
const prev = saveTimer.current.get(key)
|
||||
if (prev) clearTimeout(prev)
|
||||
saveTimer.current.set(key, setTimeout(async () => {
|
||||
if (!feedback?.id) return
|
||||
const existing = await db.feedbackDimensionTexts
|
||||
.where('assignmentFeedbackId').equals(feedback.id)
|
||||
.filter(t => t.feedbackDimensionId === dimId)
|
||||
.first()
|
||||
if (existing?.id) {
|
||||
await db.feedbackDimensionTexts.update(existing.id, { [field]: value })
|
||||
} else {
|
||||
await db.feedbackDimensionTexts.add({
|
||||
assignmentFeedbackId: feedback.id,
|
||||
feedbackDimensionId: dimId,
|
||||
achievements: field === 'achievements' ? value : '',
|
||||
developmentNeeds: field === 'developmentNeeds' ? value : '',
|
||||
})
|
||||
}
|
||||
}, 600))
|
||||
}
|
||||
|
||||
const getDimText = (dimId: number) =>
|
||||
dimTexts.find(t => t.feedbackDimensionId === dimId)
|
||||
|
||||
// ── KI-Generierung ────────────────────────────────────────────────────────
|
||||
|
||||
const generateWithAi = async () => {
|
||||
if (!institutee || !assignment || !feedback?.id) return
|
||||
const settings = getAiSettings()
|
||||
if (!settings.apiKey) { setShowAiSettings(true); return }
|
||||
|
||||
setGenerating(true)
|
||||
setAiError('')
|
||||
try {
|
||||
const prompt = await buildAiPrompt(institutee, assignment, dimensions, categories, items, ratings, feedback.id)
|
||||
|
||||
const res = await fetch('https://openrouter.ai/api/v1/chat/completions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${settings.apiKey}`,
|
||||
'Content-Type': 'application/json',
|
||||
'HTTP-Referer': window.location.origin,
|
||||
'X-Title': 'Assignment Monitor',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: settings.model,
|
||||
messages: [{ role: 'user', content: prompt }],
|
||||
response_format: { type: 'json_object' },
|
||||
}),
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error(`API Error: ${res.status} ${res.statusText}`)
|
||||
|
||||
const data = await res.json()
|
||||
const text = data.choices?.[0]?.message?.content ?? ''
|
||||
const parsed = JSON.parse(text) as { dimensions: { name: string; achievements: string; developmentNeeds: string }[] }
|
||||
|
||||
// Texte in DB schreiben
|
||||
for (const item of parsed.dimensions) {
|
||||
const dim = dimensions.find(d => d.name === item.name || item.name.includes(d.name.split(',')[0]))
|
||||
if (!dim?.id) continue
|
||||
const existing = await db.feedbackDimensionTexts
|
||||
.where('assignmentFeedbackId').equals(feedback.id)
|
||||
.filter(t => t.feedbackDimensionId === dim.id)
|
||||
.first()
|
||||
if (existing?.id) {
|
||||
await db.feedbackDimensionTexts.update(existing.id, {
|
||||
achievements: item.achievements,
|
||||
developmentNeeds: item.developmentNeeds,
|
||||
})
|
||||
} else {
|
||||
await db.feedbackDimensionTexts.add({
|
||||
assignmentFeedbackId: feedback.id,
|
||||
feedbackDimensionId: dim.id,
|
||||
achievements: item.achievements,
|
||||
developmentNeeds: item.developmentNeeds,
|
||||
})
|
||||
}
|
||||
}
|
||||
await db.assignmentFeedbacks.update(feedback.id, { aiModel: settings.model, updatedAt: new Date().toISOString() })
|
||||
await load()
|
||||
} catch (e) {
|
||||
setAiError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
||||
} finally {
|
||||
setGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleFinal = async () => {
|
||||
if (!feedback?.id) return
|
||||
const next = feedback.status === 'final' ? 'draft' : 'final'
|
||||
await db.assignmentFeedbacks.update(feedback.id, { status: next, updatedAt: new Date().toISOString() })
|
||||
setFeedback(prev => prev ? { ...prev, status: next } : null)
|
||||
}
|
||||
|
||||
if (!assignment || !institutee) return <div className="text-center py-10 text-gray-400">Lädt…</div>
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<button onClick={() => navigate(`/assignment/${assignmentId}`)}
|
||||
className="text-xs text-[#0070AD] mb-0.5 block">← Assignment</button>
|
||||
<h1 className="text-xl font-bold text-gray-800">
|
||||
Feedback: {institutee.firstName} {institutee.lastName}
|
||||
</h1>
|
||||
<div className="text-sm text-gray-500">{assignment.title} · {assignment.client}</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5 items-end flex-shrink-0">
|
||||
<button onClick={toggleFinal}
|
||||
className={`text-xs px-3 py-1.5 rounded-lg font-medium border ${
|
||||
feedback?.status === 'final'
|
||||
? 'bg-green-600 text-white border-green-600'
|
||||
: 'bg-white text-gray-500 border-gray-200'
|
||||
}`}>
|
||||
{feedback?.status === 'final' ? '✓ Final' : 'Entwurf'}
|
||||
</button>
|
||||
<button onClick={() => setShowAiSettings(p => !p)}
|
||||
className="text-xs text-gray-400 hover:text-gray-600">
|
||||
⚙ KI-Einstellungen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KI-Einstellungen */}
|
||||
{showAiSettings && (
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-xl p-4 space-y-3">
|
||||
<div className="text-sm font-semibold text-blue-700">KI-Einstellungen (OpenRouter)</div>
|
||||
<div className="text-xs text-blue-500">
|
||||
API-Key von <span className="font-mono">openrouter.ai</span> — wird lokal gespeichert, nie übertragen.
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
className="w-full border border-blue-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD] bg-white"
|
||||
placeholder="sk-or-..."
|
||||
value={aiKey}
|
||||
onChange={e => setAiKey(e.target.value)}
|
||||
/>
|
||||
<select
|
||||
className="w-full border border-blue-200 rounded-lg px-3 py-2 text-sm bg-white"
|
||||
value={aiModel}
|
||||
onChange={e => setAiModel(e.target.value)}>
|
||||
<option value="openai/gpt-4o-mini">GPT-4o mini (günstig)</option>
|
||||
<option value="openai/gpt-4o">GPT-4o</option>
|
||||
<option value="anthropic/claude-sonnet-4-5">Claude Sonnet 4.5</option>
|
||||
<option value="anthropic/claude-haiku-4-5">Claude Haiku 4.5 (schnell)</option>
|
||||
<option value="google/gemini-flash-1.5">Gemini Flash 1.5</option>
|
||||
</select>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => { saveAiSettings(aiKey, aiModel); setShowAiSettings(false) }}
|
||||
className="flex-1 py-2 rounded-lg text-sm font-medium bg-[#0070AD] text-white">
|
||||
Speichern
|
||||
</button>
|
||||
<button onClick={() => setShowAiSettings(false)}
|
||||
className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-500">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* KI-Generieren Button */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={generateWithAi}
|
||||
disabled={generating}
|
||||
className={`flex-1 py-3 rounded-xl text-sm font-medium transition ${
|
||||
generating
|
||||
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-[#0070AD] text-white hover:bg-[#005a8e]'
|
||||
}`}>
|
||||
{generating ? 'Generiere Entwurf…' : '✦ KI-Feedback-Entwurf generieren'}
|
||||
</button>
|
||||
</div>
|
||||
{aiError && (
|
||||
<div className="text-xs text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
|
||||
{aiError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dimensionen */}
|
||||
{dimensions.map(dim => {
|
||||
const dimCats = categories.filter(c => c.dimensionId === dim.id)
|
||||
const isOpen = expanded.has(dim.id!)
|
||||
const text = getDimText(dim.id!)
|
||||
|
||||
// Zusammenfassung der Bewertungen
|
||||
const catRatings = dimCats.map(c => getRating(c.id!)).filter(Boolean) as FeedbackRating[]
|
||||
const worstRating = catRatings.includes('not_client_ready') ? 'not_client_ready'
|
||||
: catRatings.includes('partially_client_ready') ? 'partially_client_ready'
|
||||
: catRatings.includes('nearly_client_ready') ? 'nearly_client_ready'
|
||||
: catRatings.includes('client_ready') ? 'client_ready'
|
||||
: catRatings.length > 0 ? 'na' : undefined
|
||||
const summaryColor = ratingColor(worstRating)
|
||||
|
||||
return (
|
||||
<div key={dim.id} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
{/* Dimension-Header */}
|
||||
<button
|
||||
onClick={() => setExpanded(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(dim.id!)) next.delete(dim.id!)
|
||||
else next.add(dim.id!)
|
||||
return next
|
||||
})}
|
||||
className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-gray-800 text-sm">{dim.name}</span>
|
||||
{worstRating && (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full border font-medium ${summaryColor}`}>
|
||||
{RATINGS.find(r => r.value === worstRating)?.short}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-gray-400 text-sm">{isOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="border-t border-gray-100 p-4 space-y-4">
|
||||
{/* Kategorien */}
|
||||
{dimCats.map(cat => {
|
||||
const catItems = items.filter(i => i.categoryId === cat.id)
|
||||
const currentRating = getRating(cat.id!)
|
||||
return (
|
||||
<div key={cat.id} className="space-y-2">
|
||||
<div className="font-medium text-sm text-gray-700">{cat.name}</div>
|
||||
|
||||
{/* Rating-Buttons */}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{RATINGS.map(r => (
|
||||
<button key={r.value}
|
||||
onClick={() => setRating(cat.id!, r.value)}
|
||||
className={`px-2.5 py-1.5 rounded-lg text-xs font-semibold border transition ${
|
||||
currentRating === r.value
|
||||
? r.color + ' ring-2 ring-offset-1 ring-current'
|
||||
: 'bg-gray-50 text-gray-400 border-gray-200 hover:bg-gray-100'
|
||||
}`}>
|
||||
{r.short}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Kriterium-Items als Referenz */}
|
||||
{catItems.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{catItems.map(item => (
|
||||
<span key={item.id}
|
||||
className="text-xs bg-gray-50 text-gray-400 border border-gray-100 px-2 py-0.5 rounded-full">
|
||||
{item.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Textfelder */}
|
||||
<div className="space-y-3 pt-2 border-t border-gray-50">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-green-700 uppercase tracking-wide block mb-1.5">
|
||||
Achievements
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-green-400 min-h-[80px]"
|
||||
placeholder="Konkrete Stärken und positive Beobachtungen…"
|
||||
value={text?.achievements ?? ''}
|
||||
onChange={e => saveDimText(dim.id!, 'achievements', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-amber-700 uppercase tracking-wide block mb-1.5">
|
||||
Development Needs
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-amber-400 min-h-[80px]"
|
||||
placeholder="Entwicklungsfelder und konkrete Handlungsempfehlungen…"
|
||||
value={text?.developmentNeeds ?? ''}
|
||||
onChange={e => saveDimText(dim.id!, 'developmentNeeds', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Hinweis für KI-Nutzung */}
|
||||
<div className="text-xs text-gray-400 text-center pb-4">
|
||||
KI-Entwürfe vor dem Einsatz bitte sorgfältig prüfen und anpassen.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
347
src/pages/AssignmentTypeConfig.tsx
Normal file
347
src/pages/AssignmentTypeConfig.tsx
Normal file
|
|
@ -0,0 +1,347 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { db, type AssignmentType, type PhaseTemplate, type FeedbackDimension, type FeedbackCategory, type FeedbackCriterionItem } from '../db'
|
||||
|
||||
export default function AssignmentTypeConfig() {
|
||||
const [types, setTypes] = useState<AssignmentType[]>([])
|
||||
const [templates, setTemplates] = useState<PhaseTemplate[]>([])
|
||||
const [dimensions, setDimensions] = useState<FeedbackDimension[]>([])
|
||||
const [categories, setCategories] = useState<FeedbackCategory[]>([])
|
||||
const [items, setItems] = useState<FeedbackCriterionItem[]>([])
|
||||
const [expandedDim, setExpandedDim] = useState<Set<number>>(new Set())
|
||||
const [expanded, setExpanded] = useState<number | null>(null)
|
||||
const [activeTab, setActiveTab] = useState<Record<number, 'phases' | 'criteria'>>({})
|
||||
const [newTypeName, setNewTypeName] = useState('')
|
||||
const [typeError, setTypeError] = useState<Record<number, string>>({})
|
||||
const [newPhase, setNewPhase] = useState<Record<number, {
|
||||
label: string; withWhom: 'lead' | 'client'
|
||||
isRepeatable: boolean; hasConversation: boolean; hasAssessment: boolean
|
||||
}>>({})
|
||||
|
||||
const load = async () => {
|
||||
const [t, tmpl, dims, cats, itms] = await Promise.all([
|
||||
db.assignmentTypes.toArray(),
|
||||
db.phaseTemplates.toArray(),
|
||||
db.feedbackDimensions.orderBy('order').toArray(),
|
||||
db.feedbackCategories.orderBy('order').toArray(),
|
||||
db.feedbackCriterionItems.orderBy('order').toArray(),
|
||||
])
|
||||
setTypes(t)
|
||||
setTemplates(tmpl)
|
||||
setDimensions(dims)
|
||||
setCategories(cats)
|
||||
setItems(itms)
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
// ── Assignment-Typen ───────────────────────────────────────────────────────
|
||||
|
||||
const addType = async () => {
|
||||
const name = newTypeName.trim()
|
||||
if (!name) return
|
||||
const id = await db.assignmentTypes.add({ name, defaultPhaseKeys: [], criteriaIds: [] })
|
||||
setNewTypeName('')
|
||||
await load()
|
||||
setExpanded(id)
|
||||
}
|
||||
|
||||
const updateTypeName = async (id: number, name: string) => {
|
||||
await db.assignmentTypes.update(id, { name })
|
||||
setTypes(prev => prev.map(t => t.id === id ? { ...t, name } : t))
|
||||
}
|
||||
|
||||
const deleteType = async (id: number) => {
|
||||
const count = await db.assignments.where('assignmentTypeId').equals(id).count()
|
||||
if (count > 0) {
|
||||
setTypeError(prev => ({ ...prev, [id]: `Kann nicht gelöscht werden — ${count} Assignment(s) verwenden diesen Typ.` }))
|
||||
return
|
||||
}
|
||||
await db.phaseTemplates.where('assignmentTypeId').equals(id).delete()
|
||||
await db.assignmentTypes.delete(id)
|
||||
await load()
|
||||
}
|
||||
|
||||
// ── Kriterien (criteriaIds auf AssignmentType = FeedbackCriterionItem IDs) ──
|
||||
|
||||
const toggleItem = async (type: AssignmentType, itemId: number) => {
|
||||
const current = type.criteriaIds ?? []
|
||||
const next = current.includes(itemId) ? current.filter(id => id !== itemId) : [...current, itemId]
|
||||
await db.assignmentTypes.update(type.id!, { criteriaIds: next })
|
||||
setTypes(prev => prev.map(t => t.id === type.id ? { ...t, criteriaIds: next } : t))
|
||||
}
|
||||
|
||||
const toggleAllInCategory = async (type: AssignmentType, catId: number) => {
|
||||
const catItemIds = items.filter(i => i.categoryId === catId).map(i => i.id!)
|
||||
const current = type.criteriaIds ?? []
|
||||
const allSelected = catItemIds.every(id => current.includes(id))
|
||||
const next = allSelected
|
||||
? current.filter(id => !catItemIds.includes(id))
|
||||
: [...new Set([...current, ...catItemIds])]
|
||||
await db.assignmentTypes.update(type.id!, { criteriaIds: next })
|
||||
setTypes(prev => prev.map(t => t.id === type.id ? { ...t, criteriaIds: next } : t))
|
||||
}
|
||||
|
||||
// ── Phasen-Templates ───────────────────────────────────────────────────────
|
||||
|
||||
const addPhase = async (typeId: number) => {
|
||||
const np = newPhase[typeId]
|
||||
if (!np?.label.trim()) return
|
||||
const existing = templates.filter(t => t.assignmentTypeId === typeId)
|
||||
await db.phaseTemplates.add({
|
||||
assignmentTypeId: typeId,
|
||||
phaseKey: np.label.trim().toLowerCase().replace(/\s+/g, '_'),
|
||||
label: np.label.trim(),
|
||||
withWhom: np.withWhom,
|
||||
isRepeatable: np.isRepeatable,
|
||||
hasConversation: np.hasConversation,
|
||||
hasAssessment: np.hasAssessment,
|
||||
criteriaIds: [],
|
||||
order: existing.length + 1,
|
||||
})
|
||||
setNewPhase(prev => ({ ...prev, [typeId]: { label: '', withWhom: 'lead', isRepeatable: false, hasConversation: false, hasAssessment: false } }))
|
||||
await load()
|
||||
}
|
||||
|
||||
const updatePhase = async (id: number, patch: Partial<PhaseTemplate>) => {
|
||||
await db.phaseTemplates.update(id, patch)
|
||||
setTemplates(prev => prev.map(t => t.id === id ? { ...t, ...patch } : t))
|
||||
}
|
||||
|
||||
const deletePhase = async (id: number) => {
|
||||
await db.phaseTemplates.delete(id)
|
||||
await load()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Neuer Typ */}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Neuer Assignment-Typ…"
|
||||
value={newTypeName}
|
||||
onChange={e => setNewTypeName(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && addType()}
|
||||
/>
|
||||
<button onClick={addType}
|
||||
className="px-4 py-2 bg-[#0070AD] text-white text-sm rounded-lg font-medium">
|
||||
+ Typ
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{types.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400 text-sm">Noch keine Assignment-Typen definiert.</div>
|
||||
)}
|
||||
|
||||
{types.map(type => {
|
||||
const isOpen = expanded === type.id
|
||||
const typPhases = templates.filter(t => t.assignmentTypeId === type.id).sort((a, b) => a.order - b.order)
|
||||
const tab = activeTab[type.id!] ?? 'phases'
|
||||
const np = newPhase[type.id!] ?? { label: '', withWhom: 'lead' as const, isRepeatable: false, hasConversation: false, hasAssessment: false }
|
||||
const selected = type.criteriaIds ?? []
|
||||
|
||||
return (
|
||||
<div key={type.id} className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 bg-gray-50 border-b border-gray-100">
|
||||
<input
|
||||
className="flex-1 bg-transparent text-sm font-semibold text-gray-800 focus:outline-none border-b border-transparent focus:border-[#0070AD] py-0.5"
|
||||
value={type.name}
|
||||
onChange={e => updateTypeName(type.id!, e.target.value)}
|
||||
/>
|
||||
<span className="text-xs text-gray-400">{typPhases.length} Phasen · {selected.length ? `${selected.length} Kriterien` : 'alle Kriterien'}</span>
|
||||
<button onClick={() => setExpanded(isOpen ? null : type.id!)}
|
||||
className="text-xs text-gray-400 px-1">{isOpen ? '▲' : '▼'}</button>
|
||||
<button onClick={() => deleteType(type.id!)}
|
||||
className="text-xs text-red-300 hover:text-red-500 px-1">🗑</button>
|
||||
</div>
|
||||
|
||||
{typeError[type.id!] && (
|
||||
<div className="px-4 py-2 text-xs text-red-600 bg-red-50 border-b border-red-100">
|
||||
{typeError[type.id!]}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isOpen && (
|
||||
<div>
|
||||
{/* Sub-Tab */}
|
||||
<div className="flex border-b border-gray-100">
|
||||
{(['phases', 'criteria'] as const).map(t => (
|
||||
<button key={t}
|
||||
onClick={() => setActiveTab(prev => ({ ...prev, [type.id!]: t }))}
|
||||
className={`flex-1 py-2 text-xs font-medium transition ${
|
||||
tab === t ? 'text-[#0070AD] border-b-2 border-[#0070AD]' : 'text-gray-400'
|
||||
}`}>
|
||||
{t === 'phases' ? `Phasen (${typPhases.length})` : `Kriterien (${selected.length || 'alle'})`}
|
||||
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Phasen-Tab */}
|
||||
{tab === 'phases' && (
|
||||
<div className="p-3 space-y-2">
|
||||
{typPhases.map(phase => (
|
||||
<div key={phase.id} className="border border-gray-100 rounded-lg px-3 py-2 space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
className="flex-1 text-sm text-gray-700 border-b border-transparent focus:border-[#0070AD] focus:outline-none bg-transparent"
|
||||
value={phase.label}
|
||||
onChange={e => updatePhase(phase.id!, { label: e.target.value })}
|
||||
/>
|
||||
<select
|
||||
value={phase.withWhom}
|
||||
onChange={e => updatePhase(phase.id!, { withWhom: e.target.value as 'lead' | 'client' })}
|
||||
className="text-xs border border-gray-200 rounded px-1.5 py-1 focus:outline-none focus:border-[#0070AD]">
|
||||
<option value="lead">Lead</option>
|
||||
<option value="client">Kunde</option>
|
||||
</select>
|
||||
<button onClick={() => deletePhase(phase.id!)}
|
||||
className="text-red-300 hover:text-red-500 text-sm">×</button>
|
||||
</div>
|
||||
<div className="flex gap-4 text-xs text-gray-500">
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" checked={phase.isRepeatable}
|
||||
onChange={e => updatePhase(phase.id!, { isRepeatable: e.target.checked })} />
|
||||
Wiederholbar
|
||||
</label>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" checked={phase.hasConversation}
|
||||
onChange={e => updatePhase(phase.id!, { hasConversation: e.target.checked })} />
|
||||
Protokoll
|
||||
</label>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" checked={phase.hasAssessment}
|
||||
onChange={e => updatePhase(phase.id!, { hasAssessment: e.target.checked })} />
|
||||
Bewertung
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Neue Phase */}
|
||||
<div className="border border-dashed border-gray-200 rounded-lg p-3 space-y-2 bg-gray-50">
|
||||
<div className="text-xs font-medium text-gray-500">Neue Phase</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="flex-1 border border-gray-200 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-[#0070AD] bg-white"
|
||||
placeholder="Phasenname…"
|
||||
value={np.label}
|
||||
onChange={e => setNewPhase(prev => ({ ...prev, [type.id!]: { ...np, label: e.target.value } }))}
|
||||
onKeyDown={e => e.key === 'Enter' && addPhase(type.id!)}
|
||||
/>
|
||||
<select
|
||||
value={np.withWhom}
|
||||
onChange={e => setNewPhase(prev => ({ ...prev, [type.id!]: { ...np, withWhom: e.target.value as 'lead' | 'client' } }))}
|
||||
className="border border-gray-200 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-[#0070AD] bg-white">
|
||||
<option value="lead">Lead</option>
|
||||
<option value="client">Kunde</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex gap-4 text-xs text-gray-600">
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" checked={np.isRepeatable}
|
||||
onChange={e => setNewPhase(prev => ({ ...prev, [type.id!]: { ...np, isRepeatable: e.target.checked } }))} />
|
||||
Wiederholbar
|
||||
</label>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" checked={np.hasConversation}
|
||||
onChange={e => setNewPhase(prev => ({ ...prev, [type.id!]: { ...np, hasConversation: e.target.checked } }))} />
|
||||
Protokoll
|
||||
</label>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" checked={np.hasAssessment}
|
||||
onChange={e => setNewPhase(prev => ({ ...prev, [type.id!]: { ...np, hasAssessment: e.target.checked } }))} />
|
||||
Bewertung
|
||||
</label>
|
||||
</div>
|
||||
<button onClick={() => addPhase(type.id!)}
|
||||
className="px-4 py-1.5 bg-[#0070AD] text-white text-xs rounded-lg font-medium">
|
||||
+ Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Kriterien-Tab */}
|
||||
{tab === 'criteria' && (
|
||||
<div className="p-3 space-y-1">
|
||||
<p className="text-xs text-gray-400 pb-2">
|
||||
Kein Haken = alle Kriterien werden angezeigt.
|
||||
</p>
|
||||
{items.length === 0 && (
|
||||
<div className="text-xs text-gray-400">Keine Kriterien konfiguriert. Erst unter "Feedback" anlegen.</div>
|
||||
)}
|
||||
{dimensions.map(dim => {
|
||||
const dimCats = categories.filter(c => c.dimensionId === dim.id)
|
||||
const dimItems = items.filter(i => dimCats.some(c => c.id === i.categoryId))
|
||||
if (dimItems.length === 0) return null
|
||||
const isDimOpen = expandedDim.has(dim.id!)
|
||||
const dimSelectedCount = dimItems.filter(i => selected.includes(i.id!)).length
|
||||
return (
|
||||
<div key={dim.id} className="border border-gray-100 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => setExpandedDim(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(dim.id!)) next.delete(dim.id!); else next.add(dim.id!)
|
||||
return next
|
||||
})}
|
||||
className="w-full flex items-center justify-between px-3 py-2 bg-gray-50 hover:bg-gray-100 text-left">
|
||||
<span className="text-xs font-semibold text-gray-700">{dim.name}</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{dimSelectedCount > 0 ? `${dimSelectedCount}/${dimItems.length}` : 'alle'} · {isDimOpen ? '▲' : '▼'}
|
||||
</span>
|
||||
</button>
|
||||
{isDimOpen && (
|
||||
<div className="divide-y divide-gray-50">
|
||||
{dimCats.map(cat => {
|
||||
const catItems = items.filter(i => i.categoryId === cat.id)
|
||||
if (catItems.length === 0) return null
|
||||
const allCatSelected = catItems.every(i => selected.includes(i.id!))
|
||||
const someCatSelected = catItems.some(i => selected.includes(i.id!))
|
||||
return (
|
||||
<div key={cat.id} className="px-3 py-2 space-y-1">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allCatSelected}
|
||||
ref={el => { if (el) el.indeterminate = someCatSelected && !allCatSelected }}
|
||||
onChange={() => toggleAllInCategory(type, cat.id!)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
<span className="text-xs font-semibold text-gray-600">{cat.name}</span>
|
||||
</label>
|
||||
<div className="pl-5 space-y-1">
|
||||
{catItems.map(item => (
|
||||
<label key={item.id} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.includes(item.id!)}
|
||||
onChange={() => toggleItem(type, item.id!)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
<span className="text-xs text-gray-600">{item.name}</span>
|
||||
{(item.weight ?? 1) > 1 && (
|
||||
<span className="text-xs text-gray-300">×{item.weight}</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
140
src/pages/Configuration.tsx
Normal file
140
src/pages/Configuration.tsx
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
import { useRef, useState } from 'react'
|
||||
import FeedbackStructureConfig from './FeedbackStructureConfig'
|
||||
import AssignmentTypeConfig from './AssignmentTypeConfig'
|
||||
import { exportFullBackup, importFullBackup } from '../utils/dbBackup'
|
||||
|
||||
export default function Configuration() {
|
||||
const [tab, setTab] = useState<'feedback' | 'types' | 'backup'>('feedback')
|
||||
const [backupStatus, setBackupStatus] = useState<{ type: 'success' | 'error'; msg: string } | null>(null)
|
||||
const [restoreConfirm, setRestoreConfirm] = useState(false)
|
||||
const [importing, setImporting] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
await exportFullBackup()
|
||||
setBackupStatus({ type: 'success', msg: 'Backup erfolgreich heruntergeladen.' })
|
||||
} catch (e) {
|
||||
setBackupStatus({ type: 'error', msg: `Fehler: ${e instanceof Error ? e.message : String(e)}` })
|
||||
}
|
||||
setTimeout(() => setBackupStatus(null), 4000)
|
||||
}
|
||||
|
||||
const handleImportFile = async (file: File) => {
|
||||
setImporting(true)
|
||||
setRestoreConfirm(false)
|
||||
const result = await importFullBackup(file)
|
||||
setImporting(false)
|
||||
if (result.ok) {
|
||||
setBackupStatus({ type: 'success', msg: 'Datenbank erfolgreich wiederhergestellt. Seite wird neu geladen…' })
|
||||
setTimeout(() => window.location.reload(), 1500)
|
||||
} else {
|
||||
setBackupStatus({ type: 'error', msg: `Fehler beim Import: ${result.error}` })
|
||||
}
|
||||
setTimeout(() => setBackupStatus(null), 6000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-xl font-bold text-gray-800">Konfiguration</h1>
|
||||
|
||||
{/* Tab-Switcher */}
|
||||
<div className="flex bg-gray-100 rounded-xl p-1 gap-0.5">
|
||||
<button onClick={() => setTab('feedback')}
|
||||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition ${tab === 'feedback' ? 'bg-white text-[#0070AD] shadow-sm' : 'text-gray-500'}`}>
|
||||
Feedback
|
||||
</button>
|
||||
<button onClick={() => setTab('types')}
|
||||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition ${tab === 'types' ? 'bg-white text-[#0070AD] shadow-sm' : 'text-gray-500'}`}>
|
||||
Ass.-Typen
|
||||
</button>
|
||||
<button onClick={() => setTab('backup')}
|
||||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition ${tab === 'backup' ? 'bg-white text-[#0070AD] shadow-sm' : 'text-gray-500'}`}>
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status-Banner */}
|
||||
{backupStatus && (
|
||||
<div className={`rounded-xl px-4 py-3 text-sm font-medium ${
|
||||
backupStatus.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'
|
||||
}`}>
|
||||
{backupStatus.msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'feedback' && <FeedbackStructureConfig />}
|
||||
{tab === 'types' && <AssignmentTypeConfig />}
|
||||
|
||||
{tab === 'backup' && (
|
||||
<div className="space-y-4">
|
||||
{/* Export */}
|
||||
<div className="bg-white rounded-xl border border-gray-100 shadow-sm p-5 space-y-3">
|
||||
<h2 className="font-semibold text-gray-800">Datenbank exportieren</h2>
|
||||
<p className="text-sm text-gray-500">
|
||||
Exportiert alle Daten (Assignments, Meetings, Protokolle, Bewertungen, Konfiguration) als eine JSON-Datei.
|
||||
Diese Datei kannst du sicher aufbewahren und bei Bedarf wiederherstellen.
|
||||
</p>
|
||||
<button onClick={handleExport}
|
||||
className="w-full py-3 bg-[#0070AD] text-white rounded-xl text-sm font-semibold">
|
||||
↓ Vollständiges Backup herunterladen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Import */}
|
||||
<div className="bg-white rounded-xl border border-gray-100 shadow-sm p-5 space-y-3">
|
||||
<h2 className="font-semibold text-gray-800">Datenbank wiederherstellen</h2>
|
||||
<p className="text-sm text-gray-500">
|
||||
Stellt alle Daten aus einer zuvor exportierten Backup-Datei wieder her.
|
||||
</p>
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg px-3 py-2.5 text-xs text-amber-700">
|
||||
⚠️ Alle aktuellen Daten werden dabei überschrieben. Erstelle vorher ein Backup.
|
||||
</div>
|
||||
|
||||
{!restoreConfirm ? (
|
||||
<button onClick={() => setRestoreConfirm(true)}
|
||||
className="w-full py-3 border-2 border-red-200 text-red-600 rounded-xl text-sm font-semibold hover:bg-red-50 transition">
|
||||
↑ Backup wiederherstellen…
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-red-700">Backup-Datei auswählen um zu bestätigen:</p>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json"
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) handleImportFile(file)
|
||||
e.target.value = ''
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => fileInputRef.current?.click()}
|
||||
disabled={importing}
|
||||
className="flex-1 py-2.5 bg-red-600 text-white rounded-xl text-sm font-semibold disabled:opacity-50">
|
||||
{importing ? 'Wird importiert…' : 'Datei auswählen & importieren'}
|
||||
</button>
|
||||
<button onClick={() => setRestoreConfirm(false)}
|
||||
className="px-4 py-2.5 border border-gray-200 text-gray-500 rounded-xl text-sm">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="bg-gray-50 rounded-xl border border-gray-100 p-4 space-y-1.5">
|
||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Hinweise</div>
|
||||
<div className="text-xs text-gray-500">• Backup-Dateien regelmäßig (z.B. nach jedem Meeting) erstellen</div>
|
||||
<div className="text-xs text-gray-500">• Dateien an einem sicheren Ort speichern (OneDrive, lokaler Ordner)</div>
|
||||
<div className="text-xs text-gray-500">• Backup enthält alle personenbezogenen Daten — vertraulich behandeln</div>
|
||||
<div className="text-xs text-gray-500">• Dateiname: <code className="bg-gray-100 px-1 rounded">assignment-monitor-backup-TT-MM-JJJJ.json</code></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
90
src/pages/Consultants.tsx
Normal file
90
src/pages/Consultants.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { db, type Consultant, type Group } from '../db'
|
||||
|
||||
export default function Consultants() {
|
||||
const [groups, setGroups] = useState<Group[]>([])
|
||||
const [consultants, setConsultants] = useState<Consultant[]>([])
|
||||
const [newGroup, setNewGroup] = useState({ name: '', cohortYear: new Date().getFullYear() })
|
||||
const [newCons, setNewCons] = useState({ groupId: 0, firstName: '', lastName: '' })
|
||||
|
||||
const load = async () => {
|
||||
setGroups(await db.groups.toArray())
|
||||
setConsultants(await db.consultants.toArray())
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
const addGroup = async () => {
|
||||
if (!newGroup.name.trim()) return
|
||||
await db.groups.add({ ...newGroup })
|
||||
setNewGroup({ name: '', cohortYear: new Date().getFullYear() })
|
||||
load()
|
||||
}
|
||||
|
||||
const addConsultant = async () => {
|
||||
if (!newCons.firstName.trim() || !newCons.lastName.trim() || !newCons.groupId) return
|
||||
await db.consultants.add({ ...newCons })
|
||||
setNewCons(p => ({ ...p, firstName: '', lastName: '' }))
|
||||
load()
|
||||
}
|
||||
|
||||
const deleteConsultant = async (id: number) => {
|
||||
await db.consultants.delete(id)
|
||||
load()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-xl font-bold text-gray-800">Berater</h1>
|
||||
|
||||
<section className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 space-y-3">
|
||||
<h2 className="font-semibold text-gray-700">Neue Gruppe / Kohorte</h2>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm"
|
||||
placeholder="Gruppenname (z.B. MC Kohorte 2025)"
|
||||
value={newGroup.name}
|
||||
onChange={e => setNewGroup(p => ({ ...p, name: e.target.value }))}
|
||||
onKeyDown={e => e.key === 'Enter' && addGroup()}
|
||||
/>
|
||||
<button onClick={addGroup} className="bg-[#0070AD] text-white px-4 py-2 rounded-lg text-sm">+</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 space-y-3">
|
||||
<h2 className="font-semibold text-gray-700">Neuer Berater</h2>
|
||||
<select
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
|
||||
value={newCons.groupId}
|
||||
onChange={e => setNewCons(p => ({ ...p, groupId: +e.target.value }))}
|
||||
>
|
||||
<option value={0}>Gruppe wählen…</option>
|
||||
{groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
|
||||
</select>
|
||||
<div className="flex gap-2">
|
||||
<input className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm" placeholder="Vorname"
|
||||
value={newCons.firstName} onChange={e => setNewCons(p => ({ ...p, firstName: e.target.value }))} />
|
||||
<input className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm" placeholder="Nachname"
|
||||
value={newCons.lastName} onChange={e => setNewCons(p => ({ ...p, lastName: e.target.value }))} />
|
||||
</div>
|
||||
<button onClick={addConsultant} className="w-full bg-[#0070AD] text-white py-2 rounded-lg text-sm font-medium">Berater hinzufügen</button>
|
||||
</section>
|
||||
|
||||
{groups.map(g => {
|
||||
const members = consultants.filter(c => c.groupId === g.id)
|
||||
if (members.length === 0) return null
|
||||
return (
|
||||
<div key={g.id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
|
||||
<h3 className="font-semibold text-gray-700 mb-2">{g.name}</h3>
|
||||
{members.map(c => (
|
||||
<div key={c.id} className="flex items-center justify-between py-1 text-sm text-gray-700 border-b border-gray-50 last:border-0">
|
||||
<span>{c.firstName} {c.lastName}</span>
|
||||
<button onClick={() => deleteConsultant(c.id!)} className="text-red-400 text-xs hover:text-red-600">×</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
119
src/pages/Dashboard.tsx
Normal file
119
src/pages/Dashboard.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { db, type Assignment, type AssignmentType, type Consultant } from '../db'
|
||||
|
||||
interface AssignmentRow extends Assignment {
|
||||
typeName: string
|
||||
instituteeNames: string[]
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [assignments, setAssignments] = useState<AssignmentRow[]>([])
|
||||
const [query, setQuery] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'done'>('all')
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
const raw = await db.assignments.orderBy('createdAt').reverse().toArray()
|
||||
const types = await db.assignmentTypes.toArray()
|
||||
const consultants = await db.consultants.toArray()
|
||||
const typeMap = new Map<number, AssignmentType>(types.map(t => [t.id!, t]))
|
||||
const consMap = new Map<number, Consultant>(consultants.map(c => [c.id!, c]))
|
||||
setAssignments(raw.map(a => ({
|
||||
...a,
|
||||
typeName: typeMap.get(a.assignmentTypeId)?.name ?? '—',
|
||||
instituteeNames: a.instituteeIds.map(id => {
|
||||
const c = consMap.get(id)
|
||||
return c ? `${c.firstName} ${c.lastName}` : '?'
|
||||
}),
|
||||
})))
|
||||
}
|
||||
load()
|
||||
}, [])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = query.trim().toLowerCase()
|
||||
return assignments.filter(a => {
|
||||
if (statusFilter !== 'all' && a.status !== statusFilter) return false
|
||||
if (!q) return true
|
||||
return (
|
||||
a.title.toLowerCase().includes(q) ||
|
||||
(a.assignmentNumber ?? '').toLowerCase().includes(q) ||
|
||||
a.client.toLowerCase().includes(q) ||
|
||||
a.instituteeNames.some(n => n.toLowerCase().includes(q))
|
||||
)
|
||||
})
|
||||
}, [assignments, query, statusFilter])
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-bold text-gray-800">Assignments</h1>
|
||||
<button
|
||||
onClick={() => navigate('/assignment/new')}
|
||||
className="bg-[#0070AD] text-white px-4 py-2 rounded-lg text-sm font-medium"
|
||||
>
|
||||
+ Neues
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Suche + Status-Filter */}
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Suche nach Nummer, Titel, Kunde, Berater…"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
className="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD] bg-white"
|
||||
/>
|
||||
<div className="flex bg-gray-100 rounded-xl p-1 gap-0.5">
|
||||
{([['all', 'Alle'], ['active', 'Aktiv'], ['done', 'Abgeschlossen']] as const).map(([val, label]) => (
|
||||
<button key={val} onClick={() => setStatusFilter(val)}
|
||||
className={`flex-1 py-1.5 rounded-lg text-xs font-medium transition ${
|
||||
statusFilter === val ? 'bg-white text-[#0070AD] shadow-sm' : 'text-gray-500'
|
||||
}`}>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste */}
|
||||
{filtered.length === 0 && (
|
||||
<p className="text-gray-400 text-sm text-center py-8">
|
||||
{assignments.length === 0 ? 'Noch keine Assignments angelegt.' : 'Keine Treffer.'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{filtered.map(a => (
|
||||
<div
|
||||
key={a.id}
|
||||
onClick={() => navigate(`/assignment/${a.id}`)}
|
||||
className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 cursor-pointer hover:shadow-md transition"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
{a.assignmentNumber && (
|
||||
<div className="text-xs font-semibold text-[#0070AD] uppercase tracking-wide leading-none mb-0.5">
|
||||
{a.assignmentNumber}
|
||||
</div>
|
||||
)}
|
||||
<div className="font-semibold text-gray-800 truncate">{a.title}</div>
|
||||
<div className="text-sm text-gray-500">{a.client}</div>
|
||||
<div className="text-xs text-gray-400 mt-0.5">
|
||||
{a.typeName} · {a.instituteeNames.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`flex-shrink-0 text-xs px-2 py-1 rounded-full font-medium ${
|
||||
a.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
|
||||
}`}>
|
||||
{a.status === 'active' ? 'Aktiv' : 'Fertig'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
136
src/pages/Evaluation.tsx
Normal file
136
src/pages/Evaluation.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { db, type Assignment, type Consultant, type Category, type Criterion, type FeedbackRating } from '../db'
|
||||
|
||||
const ratingToNum = (r: FeedbackRating | null | undefined): number => {
|
||||
const m: Record<FeedbackRating, number> = { na: 0, not_client_ready: 1, partially_client_ready: 2, nearly_client_ready: 3, client_ready: 4 }
|
||||
return r ? (m[r] ?? 0) : 0
|
||||
}
|
||||
|
||||
interface InstScore {
|
||||
institutee: Consultant
|
||||
assignment: Assignment
|
||||
scores: { criterion: Criterion; avg: number | null }[]
|
||||
weightedTotal: number | null
|
||||
}
|
||||
|
||||
export default function Evaluation() {
|
||||
const [data, setData] = useState<InstScore[]>([])
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [selected, setSelected] = useState<string | null>(null)
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
const [assignments, consultants, criteria, cats, assessments] = await Promise.all([
|
||||
db.assignments.toArray(),
|
||||
db.consultants.toArray(),
|
||||
db.criteria.orderBy('order').toArray(),
|
||||
db.categories.orderBy('order').toArray(),
|
||||
db.assessments.toArray(),
|
||||
])
|
||||
setCategories(cats)
|
||||
|
||||
const rows: InstScore[] = []
|
||||
for (const a of assignments) {
|
||||
for (const instId of a.instituteeIds) {
|
||||
const inst = consultants.find(c => c.id === instId)
|
||||
if (!inst) continue
|
||||
|
||||
// Nur Meetings dieses Assignments
|
||||
const meetingIds = (await db.meetingInstances.where('assignmentId').equals(a.id!).toArray()).map(m => m.id!)
|
||||
const instAssessments = assessments.filter(
|
||||
as => as.instituteeId === instId && meetingIds.includes(as.meetingInstanceId)
|
||||
)
|
||||
if (instAssessments.length === 0) continue
|
||||
|
||||
const usedCritIds = [...new Set(instAssessments.map(a => a.criteriaId))]
|
||||
const usedCrit = criteria.filter(c => usedCritIds.includes(c.id!))
|
||||
|
||||
const scores = usedCrit.map(crit => {
|
||||
const relevant = instAssessments.filter(a => a.criteriaId === crit.id && a.score !== null)
|
||||
const avg = relevant.length > 0
|
||||
? relevant.reduce((s, a) => s + ratingToNum(a.score), 0) / relevant.length
|
||||
: null
|
||||
return { criterion: crit, avg }
|
||||
})
|
||||
|
||||
const rated = scores.filter(s => s.avg !== null)
|
||||
const weightedTotal = rated.length > 0
|
||||
? rated.reduce((s, x) => s + x.avg! * x.criterion.weight, 0) /
|
||||
rated.reduce((s, x) => s + x.criterion.weight, 0)
|
||||
: null
|
||||
|
||||
rows.push({ institutee: inst, assignment: a, scores, weightedTotal })
|
||||
}
|
||||
}
|
||||
setData(rows)
|
||||
}
|
||||
load()
|
||||
}, [])
|
||||
|
||||
const scoreColor = (avg: number | null) => {
|
||||
if (avg === null) return 'bg-gray-100 text-gray-400'
|
||||
if (avg >= 4) return 'bg-green-100 text-green-700'
|
||||
if (avg >= 3) return 'bg-yellow-100 text-yellow-700'
|
||||
return 'bg-red-100 text-red-700'
|
||||
}
|
||||
|
||||
const rowKey = (r: InstScore) => `${r.assignment.id}-${r.institutee.id}`
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-xl font-bold text-gray-800">Auswertung</h1>
|
||||
{data.length === 0 && (
|
||||
<p className="text-gray-500 text-sm">Noch keine Bewertungen vorhanden.</p>
|
||||
)}
|
||||
{data.map(row => (
|
||||
<div key={rowKey(row)} className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
|
||||
<div
|
||||
className="flex items-start justify-between cursor-pointer"
|
||||
onClick={() => setSelected(selected === rowKey(row) ? null : rowKey(row))}
|
||||
>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-800">
|
||||
{row.institutee.firstName} {row.institutee.lastName}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{row.assignment.title} · {row.assignment.client}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`px-3 py-1 rounded-full text-sm font-bold ${scoreColor(row.weightedTotal)}`}>
|
||||
{row.weightedTotal !== null ? row.weightedTotal.toFixed(1) : '—'} / 5
|
||||
</div>
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); navigate(`/assignment/${row.assignment.id}/feedback/${row.institutee.id}`) }}
|
||||
className="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded-lg">
|
||||
Feedback
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selected === rowKey(row) && (
|
||||
<div className="mt-4 space-y-3">
|
||||
{categories.map(cat => {
|
||||
const catScores = row.scores.filter(s => s.criterion.categoryId === cat.id)
|
||||
if (catScores.every(s => s.avg === null)) return null
|
||||
return (
|
||||
<div key={cat.id}>
|
||||
<div className="text-xs font-semibold uppercase text-gray-400 tracking-wide mb-2">{cat.name}</div>
|
||||
{catScores.map(({ criterion, avg }) => (
|
||||
<div key={criterion.id} className="flex items-center justify-between py-1.5 border-b border-gray-50 last:border-0">
|
||||
<span className="text-sm text-gray-700">{criterion.name}</span>
|
||||
<span className={`text-sm font-semibold px-2 py-0.5 rounded min-w-[36px] text-center ${scoreColor(avg)}`}>
|
||||
{avg !== null ? avg.toFixed(1) : '—'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
213
src/pages/FeedbackDraftPage.tsx
Normal file
213
src/pages/FeedbackDraftPage.tsx
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import {
|
||||
db,
|
||||
type Assignment,
|
||||
type Consultant,
|
||||
type Category,
|
||||
type Criterion,
|
||||
type FeedbackDraft,
|
||||
type FeedbackRating,
|
||||
} from '../db'
|
||||
|
||||
const ratingToNum = (r: FeedbackRating | null | undefined): number => {
|
||||
const m: Record<FeedbackRating, number> = { na: 0, not_client_ready: 1, partially_client_ready: 2, nearly_client_ready: 3, client_ready: 4 }
|
||||
return r ? (m[r] ?? 0) : 0
|
||||
}
|
||||
|
||||
interface CriterionSummary {
|
||||
criterion: Criterion
|
||||
avg: number | null
|
||||
notes: string[]
|
||||
}
|
||||
|
||||
export default function FeedbackDraftPage() {
|
||||
const { id, instituteeId } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const assignmentId = Number(id)
|
||||
const instId = Number(instituteeId)
|
||||
|
||||
const [assignment, setAssignment] = useState<Assignment | null>(null)
|
||||
const [institutee, setInstitutee] = useState<Consultant | null>(null)
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [summary, setSummary] = useState<CriterionSummary[]>([])
|
||||
const [draft, setDraft] = useState<FeedbackDraft | null>(null)
|
||||
const [content, setContent] = useState('')
|
||||
const [generated, setGenerated] = useState(false)
|
||||
const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const [a, cons, cats] = await Promise.all([
|
||||
db.assignments.get(assignmentId),
|
||||
db.consultants.get(instId),
|
||||
db.categories.orderBy('order').toArray(),
|
||||
])
|
||||
setAssignment(a ?? null)
|
||||
setInstitutee(cons ?? null)
|
||||
setCategories(cats)
|
||||
|
||||
const meetings = await db.meetingInstances.where('assignmentId').equals(assignmentId).toArray()
|
||||
const meetingIds = meetings.map(m => m.id!)
|
||||
|
||||
const [allAssessments, allEntries] = await Promise.all([
|
||||
db.assessments.where('meetingInstanceId').anyOf(meetingIds).toArray(),
|
||||
db.conversationEntries.where('meetingInstanceId').anyOf(meetingIds).toArray(),
|
||||
])
|
||||
|
||||
const instAssessments = allAssessments.filter(a => a.instituteeId === instId)
|
||||
const instEntries = allEntries.filter(e => e.instituteeId === instId)
|
||||
|
||||
const criteriaIds = [...new Set(instAssessments.map(a => a.criteriaId))]
|
||||
const crits = criteriaIds.length > 0
|
||||
? await db.criteria.where('id').anyOf(criteriaIds).toArray()
|
||||
: []
|
||||
|
||||
const sum: CriterionSummary[] = crits.map(crit => {
|
||||
const relevant = instAssessments.filter(a => a.criteriaId === crit.id && a.score !== null)
|
||||
const avg = relevant.length > 0
|
||||
? relevant.reduce((s, a) => s + ratingToNum(a.score), 0) / relevant.length
|
||||
: null
|
||||
const notes = [
|
||||
...instAssessments.filter(a => a.criteriaId === crit.id && a.note).map(a => a.note),
|
||||
...instEntries.filter(e => e.note).map(e => e.note),
|
||||
].filter(Boolean)
|
||||
return { criterion: crit, avg, notes }
|
||||
})
|
||||
setSummary(sum)
|
||||
|
||||
const existing = await db.feedbackDrafts
|
||||
.where('assignmentId').equals(assignmentId)
|
||||
.filter(d => d.instituteeId === instId)
|
||||
.first()
|
||||
if (existing) {
|
||||
setDraft(existing)
|
||||
setContent(existing.content)
|
||||
setGenerated(true)
|
||||
}
|
||||
}, [assignmentId, instId])
|
||||
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
const generateDraft = async () => {
|
||||
if (!institutee || !assignment) return
|
||||
const catMap = new Map(categories.map(c => [c.id!, c.name]))
|
||||
let text = `Feedback: ${institutee.firstName} ${institutee.lastName}\n`
|
||||
text += `Assignment: ${assignment.title} | Kunde: ${assignment.client}\n\n`
|
||||
|
||||
const grouped = new Map<number, CriterionSummary[]>()
|
||||
for (const s of summary) {
|
||||
const cid = s.criterion.categoryId
|
||||
if (!grouped.has(cid)) grouped.set(cid, [])
|
||||
grouped.get(cid)!.push(s)
|
||||
}
|
||||
|
||||
for (const [catId, items] of grouped) {
|
||||
text += `## ${catMap.get(catId) ?? 'Sonstige'}\n`
|
||||
for (const item of items) {
|
||||
const avgStr = item.avg !== null ? item.avg.toFixed(1) : '—'
|
||||
text += `${item.criterion.name}: ${avgStr}/5\n`
|
||||
if (item.notes.length > 0) {
|
||||
const uniqueNotes = [...new Set(item.notes)]
|
||||
text += uniqueNotes.map(n => ` • ${n}`).join('\n') + '\n'
|
||||
}
|
||||
}
|
||||
text += '\n'
|
||||
}
|
||||
text += '---\nZusätzliche Anmerkungen:\n'
|
||||
|
||||
setContent(text)
|
||||
setGenerated(true)
|
||||
|
||||
const now = new Date().toISOString()
|
||||
if (draft?.id) {
|
||||
await db.feedbackDrafts.update(draft.id, { content: text, updatedAt: now })
|
||||
setDraft(prev => prev ? { ...prev, content: text, updatedAt: now } : null)
|
||||
} else {
|
||||
const newId = await db.feedbackDrafts.add({
|
||||
assignmentId, instituteeId: instId, content: text, updatedAt: now,
|
||||
})
|
||||
setDraft({ id: newId, assignmentId, instituteeId: instId, content: text, updatedAt: now })
|
||||
}
|
||||
}
|
||||
|
||||
const saveContent = (val: string) => {
|
||||
setContent(val)
|
||||
if (saveTimer.current) clearTimeout(saveTimer.current)
|
||||
saveTimer.current = setTimeout(async () => {
|
||||
const now = new Date().toISOString()
|
||||
if (draft?.id) {
|
||||
await db.feedbackDrafts.update(draft.id, { content: val, updatedAt: now })
|
||||
} else {
|
||||
const newId = await db.feedbackDrafts.add({
|
||||
assignmentId, instituteeId: instId, content: val, updatedAt: now,
|
||||
})
|
||||
setDraft({ id: newId, assignmentId, instituteeId: instId, content: val, updatedAt: now })
|
||||
}
|
||||
}, 600)
|
||||
}
|
||||
|
||||
const scoreColor = (avg: number | null) => {
|
||||
if (avg === null) return 'bg-gray-100 text-gray-400'
|
||||
if (avg >= 4) return 'bg-green-100 text-green-700'
|
||||
if (avg >= 3) return 'bg-yellow-100 text-yellow-700'
|
||||
return 'bg-red-100 text-red-700'
|
||||
}
|
||||
|
||||
if (!assignment || !institutee) return <div className="text-center py-10 text-gray-400">Lädt…</div>
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<button onClick={() => navigate(`/assignment/${assignmentId}`)}
|
||||
className="text-sm text-[#0070AD] mb-2 block">
|
||||
← Assignment
|
||||
</button>
|
||||
<h1 className="text-xl font-bold text-gray-800">
|
||||
Feedback: {institutee.firstName} {institutee.lastName}
|
||||
</h1>
|
||||
<div className="text-sm text-gray-500">{assignment.title} · {assignment.client}</div>
|
||||
</div>
|
||||
|
||||
{/* Bewertungsübersicht */}
|
||||
{summary.length > 0 && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 space-y-1">
|
||||
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">
|
||||
Bewertungsübersicht (alle Meetings)
|
||||
</div>
|
||||
{summary.map(s => (
|
||||
<div key={s.criterion.id}
|
||||
className="flex items-center justify-between py-1.5 border-b border-gray-50 last:border-0">
|
||||
<span className="text-sm text-gray-700">{s.criterion.name}</span>
|
||||
<span className={`text-sm font-semibold px-2 py-0.5 rounded min-w-[40px] text-center ${scoreColor(s.avg)}`}>
|
||||
{s.avg !== null ? s.avg.toFixed(1) : '—'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Feedback-Entwurf */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wide">Feedback-Entwurf</div>
|
||||
<button onClick={generateDraft}
|
||||
className="text-xs bg-[#0070AD] text-white px-3 py-1.5 rounded-lg font-medium">
|
||||
{generated ? 'Neu generieren' : 'Automatisch generieren'}
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-[#0070AD]"
|
||||
rows={18}
|
||||
placeholder="Tippe deinen Feedback-Entwurf hier, oder nutze 'Automatisch generieren'…"
|
||||
value={content}
|
||||
onChange={e => saveContent(e.target.value)}
|
||||
/>
|
||||
{draft && (
|
||||
<div className="text-xs text-gray-400">
|
||||
Gespeichert: {new Date(draft.updatedAt).toLocaleString('de-DE')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
324
src/pages/FeedbackStructureConfig.tsx
Normal file
324
src/pages/FeedbackStructureConfig.tsx
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { db, type FeedbackDimension, type FeedbackCategory, type FeedbackCriterionItem, type AssignmentType, type PhaseTemplate } from '../db'
|
||||
|
||||
export default function FeedbackStructureConfig() {
|
||||
const [dimensions, setDimensions] = useState<FeedbackDimension[]>([])
|
||||
const [categories, setCategories] = useState<FeedbackCategory[]>([])
|
||||
const [items, setItems] = useState<FeedbackCriterionItem[]>([])
|
||||
const [assignmentTypes, setAssignmentTypes] = useState<AssignmentType[]>([])
|
||||
const [expanded, setExpanded] = useState<Set<number>>(new Set())
|
||||
const [expandedCat, setExpandedCat] = useState<Set<number>>(new Set())
|
||||
const [showCatalogs, setShowCatalogs] = useState(false)
|
||||
const [phaseTemplates, setPhaseTemplates] = useState<PhaseTemplate[]>([])
|
||||
const [showTypeConfig, setShowTypeConfig] = useState(false)
|
||||
const [expandedType, setExpandedType] = useState<number | null>(null)
|
||||
const [newTypeName, setNewTypeName] = useState('')
|
||||
const [newPhase, setNewPhase] = useState<Record<number, { label: string; withWhom: 'lead'|'client'; isRepeatable: boolean; hasConversation: boolean; hasAssessment: boolean }>>({})
|
||||
const [typeError, setTypeError] = useState<Record<number, string>>({})
|
||||
|
||||
// Neue Einträge
|
||||
const [newDimName, setNewDimName] = useState('')
|
||||
const [newCatName, setNewCatName] = useState<Record<number, string>>({})
|
||||
const [newItemName, setNewItemName] = useState<Record<number, string>>({})
|
||||
|
||||
const load = async () => {
|
||||
const [dims, cats, itms, types, phases] = await Promise.all([
|
||||
db.feedbackDimensions.orderBy('order').toArray(),
|
||||
db.feedbackCategories.orderBy('order').toArray(),
|
||||
db.feedbackCriterionItems.orderBy('order').toArray(),
|
||||
db.assignmentTypes.toArray(),
|
||||
db.phaseTemplates.toArray(),
|
||||
])
|
||||
setDimensions(dims)
|
||||
setCategories(cats)
|
||||
setItems(itms)
|
||||
setAssignmentTypes(types)
|
||||
setPhaseTemplates(phases)
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
// ── Dimensionen ───────────────────────────────────────────────────────────
|
||||
|
||||
const addDimension = async () => {
|
||||
if (!newDimName.trim()) return
|
||||
const maxOrder = dimensions.reduce((m, d) => Math.max(m, d.order), 0)
|
||||
const id = await db.feedbackDimensions.add({ name: newDimName.trim(), order: maxOrder + 1 })
|
||||
setNewDimName('')
|
||||
await load()
|
||||
setExpanded(prev => new Set([...prev, id]))
|
||||
}
|
||||
|
||||
const updateDimension = async (id: number, name: string) => {
|
||||
await db.feedbackDimensions.update(id, { name })
|
||||
setDimensions(prev => prev.map(d => d.id === id ? { ...d, name } : d))
|
||||
}
|
||||
|
||||
const deleteDimension = async (id: number) => {
|
||||
const cats = await db.feedbackCategories.where('dimensionId').equals(id).toArray()
|
||||
for (const cat of cats) {
|
||||
await db.feedbackCriterionItems.where('categoryId').equals(cat.id!).delete()
|
||||
}
|
||||
await db.feedbackCategories.where('dimensionId').equals(id).delete()
|
||||
await db.feedbackDimensions.delete(id)
|
||||
await load()
|
||||
}
|
||||
|
||||
const moveDim = async (dim: FeedbackDimension, dir: -1 | 1) => {
|
||||
const sorted = [...dimensions].sort((a, b) => a.order - b.order)
|
||||
const idx = sorted.findIndex(d => d.id === dim.id)
|
||||
const other = sorted[idx + dir]
|
||||
if (!other) return
|
||||
await db.feedbackDimensions.update(dim.id!, { order: other.order })
|
||||
await db.feedbackDimensions.update(other.id!, { order: dim.order })
|
||||
await load()
|
||||
}
|
||||
|
||||
// ── Kategorien ────────────────────────────────────────────────────────────
|
||||
|
||||
const addCategory = async (dimId: number) => {
|
||||
const name = newCatName[dimId]?.trim()
|
||||
if (!name) return
|
||||
const dimCats = categories.filter(c => c.dimensionId === dimId)
|
||||
const maxOrder = dimCats.reduce((m, c) => Math.max(m, c.order), 0)
|
||||
const id = await db.feedbackCategories.add({ dimensionId: dimId, name, order: maxOrder + 1 })
|
||||
setNewCatName(prev => ({ ...prev, [dimId]: '' }))
|
||||
await load()
|
||||
setExpandedCat(prev => new Set([...prev, id]))
|
||||
}
|
||||
|
||||
const updateCategory = async (id: number, name: string) => {
|
||||
await db.feedbackCategories.update(id, { name })
|
||||
setCategories(prev => prev.map(c => c.id === id ? { ...c, name } : c))
|
||||
}
|
||||
|
||||
const deleteCategory = async (id: number) => {
|
||||
await db.feedbackCriterionItems.where('categoryId').equals(id).delete()
|
||||
await db.feedbackCategories.delete(id)
|
||||
await load()
|
||||
}
|
||||
|
||||
// ── Kriterium-Items ───────────────────────────────────────────────────────
|
||||
|
||||
const addItem = async (catId: number) => {
|
||||
const name = newItemName[catId]?.trim()
|
||||
if (!name) return
|
||||
const catItems = items.filter(i => i.categoryId === catId)
|
||||
const maxOrder = catItems.reduce((m, i) => Math.max(m, i.order), 0)
|
||||
await db.feedbackCriterionItems.add({ categoryId: catId, name, order: maxOrder + 1 })
|
||||
setNewItemName(prev => ({ ...prev, [catId]: '' }))
|
||||
await load()
|
||||
}
|
||||
|
||||
const updateItem = async (id: number, name: string) => {
|
||||
await db.feedbackCriterionItems.update(id, { name })
|
||||
setItems(prev => prev.map(i => i.id === id ? { ...i, name } : i))
|
||||
}
|
||||
|
||||
const deleteItem = async (id: number) => {
|
||||
await db.feedbackCriterionItems.delete(id)
|
||||
setItems(prev => prev.filter(i => i.id !== id))
|
||||
}
|
||||
|
||||
const updateItemWeight = async (id: number, weight: number) => {
|
||||
await db.feedbackCriterionItems.update(id, { weight })
|
||||
setItems(prev => prev.map(i => i.id === id ? { ...i, weight } : i))
|
||||
}
|
||||
|
||||
const toggleCatalogCategory = async (type: AssignmentType, catId: number) => {
|
||||
const current = type.criteriaIds ?? []
|
||||
const next = current.includes(catId) ? current.filter(id => id !== catId) : [...current, catId]
|
||||
await db.assignmentTypes.update(type.id!, { criteriaIds: next })
|
||||
setAssignmentTypes(prev => prev.map(t => t.id === type.id ? { ...t, criteriaIds: next } : t))
|
||||
}
|
||||
|
||||
// ── AssignmentType CRUD ───────────────────────────────────────────────────
|
||||
|
||||
const addAssignmentType = async () => {
|
||||
if (!newTypeName.trim()) return
|
||||
await db.assignmentTypes.add({ name: newTypeName.trim(), defaultPhaseKeys: [] })
|
||||
setNewTypeName('')
|
||||
await load()
|
||||
}
|
||||
|
||||
const updateAssignmentTypeName = async (id: number, name: string) => {
|
||||
await db.assignmentTypes.update(id, { name })
|
||||
setAssignmentTypes(prev => prev.map(t => t.id === id ? { ...t, name } : t))
|
||||
}
|
||||
|
||||
const deleteAssignmentType = async (id: number) => {
|
||||
const count = await db.assignments.where('assignmentTypeId').equals(id).count()
|
||||
if (count > 0) {
|
||||
setTypeError(prev => ({ ...prev, [id]: `Kann nicht gelöscht werden – ${count} Assignment(s) verwenden diesen Typ.` }))
|
||||
return
|
||||
}
|
||||
await db.phaseTemplates.where('assignmentTypeId').equals(id).delete()
|
||||
await db.assignmentTypes.delete(id)
|
||||
setTypeError(prev => { const n = { ...prev }; delete n[id]; return n })
|
||||
await load()
|
||||
}
|
||||
|
||||
// ── PhaseTemplate CRUD ────────────────────────────────────────────────────
|
||||
|
||||
const addPhaseTemplate = async (typeId: number) => {
|
||||
const p = newPhase[typeId]
|
||||
if (!p?.label.trim()) return
|
||||
const existing = phaseTemplates.filter(t => t.assignmentTypeId === typeId)
|
||||
await db.phaseTemplates.add({
|
||||
assignmentTypeId: typeId,
|
||||
phaseKey: p.label.trim().toLowerCase().replace(/\s+/g, '_'),
|
||||
label: p.label.trim(),
|
||||
withWhom: p.withWhom,
|
||||
isRepeatable: p.isRepeatable,
|
||||
hasConversation: p.hasConversation,
|
||||
hasAssessment: p.hasAssessment,
|
||||
criteriaIds: [],
|
||||
order: existing.length + 1,
|
||||
})
|
||||
setNewPhase(prev => ({ ...prev, [typeId]: { label: '', withWhom: 'lead', isRepeatable: false, hasConversation: false, hasAssessment: false } }))
|
||||
await load()
|
||||
}
|
||||
|
||||
const updatePhaseTemplate = async (id: number, fields: Partial<PhaseTemplate>) => {
|
||||
await db.phaseTemplates.update(id, fields)
|
||||
setPhaseTemplates(prev => prev.map(t => t.id === id ? { ...t, ...fields } : t))
|
||||
}
|
||||
|
||||
const deletePhaseTemplate = async (id: number) => {
|
||||
await db.phaseTemplates.delete(id)
|
||||
setPhaseTemplates(prev => prev.filter(t => t.id !== id))
|
||||
}
|
||||
|
||||
const sorted = [...dimensions].sort((a, b) => a.order - b.order)
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-bold text-gray-800">Feedback-Dimensionen & Kategorien</h2>
|
||||
|
||||
{/* Neue Dimension */}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Neue Dimension…"
|
||||
value={newDimName}
|
||||
onChange={e => setNewDimName(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && addDimension()}
|
||||
/>
|
||||
<button onClick={addDimension}
|
||||
className="px-4 py-2 bg-[#0070AD] text-white text-sm rounded-lg font-medium">
|
||||
+ Dimension
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Dimensionen */}
|
||||
{sorted.map((dim, di) => {
|
||||
const isOpen = expanded.has(dim.id!)
|
||||
const dimCats = [...categories].filter(c => c.dimensionId === dim.id).sort((a, b) => a.order - b.order)
|
||||
|
||||
return (
|
||||
<div key={dim.id} className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
||||
{/* Dimension-Header */}
|
||||
<div className="flex items-center gap-2 p-3 bg-gray-50 border-b border-gray-100">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<button onClick={() => moveDim(dim, -1)} disabled={di === 0}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 leading-none disabled:opacity-30">▲</button>
|
||||
<button onClick={() => moveDim(dim, 1)} disabled={di === sorted.length - 1}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 leading-none disabled:opacity-30">▼</button>
|
||||
</div>
|
||||
<input
|
||||
className="flex-1 bg-transparent font-semibold text-sm text-gray-800 focus:outline-none border-b border-transparent focus:border-[#0070AD]"
|
||||
value={dim.name}
|
||||
onChange={e => updateDimension(dim.id!, e.target.value)}
|
||||
/>
|
||||
<button onClick={() => setExpanded(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(dim.id!)) next.delete(dim.id!); else next.add(dim.id!)
|
||||
return next
|
||||
})} className="text-xs text-gray-400 px-1">{isOpen ? '▲' : '▼'}</button>
|
||||
<button onClick={() => deleteDimension(dim.id!)}
|
||||
className="text-xs text-red-300 hover:text-red-500 px-1">🗑</button>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div className="p-3 space-y-3">
|
||||
{dimCats.map(cat => {
|
||||
const isCatOpen = expandedCat.has(cat.id!)
|
||||
const catItems = [...items].filter(i => i.categoryId === cat.id).sort((a, b) => a.order - b.order)
|
||||
return (
|
||||
<div key={cat.id} className="border border-gray-100 rounded-lg overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-gray-50">
|
||||
<input
|
||||
className="flex-1 bg-transparent text-sm text-gray-700 focus:outline-none"
|
||||
value={cat.name}
|
||||
onChange={e => updateCategory(cat.id!, e.target.value)}
|
||||
/>
|
||||
<button onClick={() => setExpandedCat(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(cat.id!)) next.delete(cat.id!); else next.add(cat.id!)
|
||||
return next
|
||||
})} className="text-xs text-gray-400">{isCatOpen ? '▲' : '▼'}</button>
|
||||
<button onClick={() => deleteCategory(cat.id!)}
|
||||
className="text-xs text-red-300 hover:text-red-500">🗑</button>
|
||||
</div>
|
||||
|
||||
{isCatOpen && (
|
||||
<div className="p-2 space-y-1.5">
|
||||
{catItems.map(item => (
|
||||
<div key={item.id} className="flex items-center gap-2">
|
||||
<span className="text-gray-300 text-xs">·</span>
|
||||
<input
|
||||
className="flex-1 text-xs text-gray-600 border-b border-transparent focus:border-gray-300 focus:outline-none bg-transparent py-0.5"
|
||||
value={item.name}
|
||||
onChange={e => updateItem(item.id!, e.target.value)}
|
||||
/>
|
||||
<select
|
||||
value={item.weight ?? 1}
|
||||
onChange={e => updateItemWeight(item.id!, Number(e.target.value))}
|
||||
title="Gewichtung"
|
||||
className="text-xs border border-gray-200 rounded px-1 py-0.5 text-gray-500 bg-white focus:outline-none focus:border-[#0070AD]">
|
||||
{[1,2,3,4,5].map(w => <option key={w} value={w}>×{w}</option>)}
|
||||
</select>
|
||||
<button onClick={() => deleteItem(item.id!)}
|
||||
className="text-xs text-red-200 hover:text-red-400">×</button>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-1.5 mt-1">
|
||||
<input
|
||||
className="flex-1 border border-gray-200 rounded px-2 py-1 text-xs focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Neues Kriterium…"
|
||||
value={newItemName[cat.id!] ?? ''}
|
||||
onChange={e => setNewItemName(p => ({ ...p, [cat.id!]: e.target.value }))}
|
||||
onKeyDown={e => e.key === 'Enter' && addItem(cat.id!)}
|
||||
/>
|
||||
<button onClick={() => addItem(cat.id!)}
|
||||
className="px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs rounded">+</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Neue Kategorie */}
|
||||
<div className="flex gap-1.5">
|
||||
<input
|
||||
className="flex-1 border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
placeholder="Neue Kategorie…"
|
||||
value={newCatName[dim.id!] ?? ''}
|
||||
onChange={e => setNewCatName(p => ({ ...p, [dim.id!]: e.target.value }))}
|
||||
onKeyDown={e => e.key === 'Enter' && addCategory(dim.id!)}
|
||||
/>
|
||||
<button onClick={() => addCategory(dim.id!)}
|
||||
className="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm rounded-lg">
|
||||
+ Kat.
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
759
src/pages/MeetingView.tsx
Normal file
759
src/pages/MeetingView.tsx
Normal file
|
|
@ -0,0 +1,759 @@
|
|||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import {
|
||||
db,
|
||||
type Assignment,
|
||||
type MeetingInstance,
|
||||
type PhaseTemplate,
|
||||
type FeedbackCategory,
|
||||
type FeedbackCriterionItem,
|
||||
type FeedbackRating,
|
||||
type Consultant,
|
||||
type ConversationEntry,
|
||||
type ConversationSkillScore,
|
||||
type Assessment,
|
||||
} from '../db'
|
||||
import { exportMeetingAsMarkdown, exportMeetingAsJson, downloadFile } from '../utils/meetingExport'
|
||||
import { NotationText } from '../utils/notationParser'
|
||||
|
||||
const INST_COLORS = [
|
||||
{ bg: 'bg-blue-50', border: 'border-blue-300', tag: 'bg-blue-500', text: 'text-blue-700' },
|
||||
{ bg: 'bg-purple-50', border: 'border-purple-300', tag: 'bg-purple-500', text: 'text-purple-700' },
|
||||
{ bg: 'bg-emerald-50', border: 'border-emerald-300', tag: 'bg-emerald-500', text: 'text-emerald-700' },
|
||||
{ bg: 'bg-orange-50', border: 'border-orange-300', tag: 'bg-orange-500', text: 'text-orange-700' },
|
||||
]
|
||||
|
||||
const NOTATIONS = [
|
||||
{ sym: '+', tip: 'Gut' },
|
||||
{ sym: '(+)', tip: 'Gut mit Abstrichen' },
|
||||
{ sym: '!', tip: 'Negativ' },
|
||||
{ sym: '(!)', tip: 'Negativ mit Abstrichen' },
|
||||
{ sym: '>', tip: 'Einwand / Kundeninput' },
|
||||
{ sym: '[…]', tip: 'Slide-Referenz' },
|
||||
]
|
||||
|
||||
const RATING_OPTIONS: { value: FeedbackRating; short: string; color: string; active: string }[] = [
|
||||
{ value: 'na', short: 'N/A', color: 'bg-gray-50 text-gray-400 border-gray-200', active: 'bg-gray-400 text-white border-gray-400' },
|
||||
{ value: 'not_client_ready', short: 'Not', color: 'bg-red-50 text-red-400 border-red-200', active: 'bg-red-500 text-white border-red-500' },
|
||||
{ value: 'partially_client_ready', short: 'Partially', color: 'bg-orange-50 text-orange-400 border-orange-200', active: 'bg-orange-500 text-white border-orange-500' },
|
||||
{ value: 'nearly_client_ready', short: 'Nearly', color: 'bg-green-50 text-green-500 border-green-200', active: 'bg-green-400 text-white border-green-400' },
|
||||
{ value: 'client_ready', short: 'Fully', color: 'bg-green-50 text-green-800 border-green-300', active: 'bg-green-700 text-white border-green-700' },
|
||||
]
|
||||
|
||||
type Tab = 'conversation' | 'assessment'
|
||||
|
||||
export default function MeetingView() {
|
||||
const { id, meetingId: meetingIdParam } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const meetingId = Number(meetingIdParam ?? id)
|
||||
|
||||
const [meeting, setMeeting] = useState<MeetingInstance | null>(null)
|
||||
const [assignment, setAssignment] = useState<Assignment | null>(null)
|
||||
const [template, setTemplate] = useState<PhaseTemplate | null>(null)
|
||||
const [institutees, setInstitutees] = useState<Consultant[]>([])
|
||||
const [fbCategories, setFbCategories] = useState<FeedbackCategory[]>([])
|
||||
const [fbItems, setFbItems] = useState<FeedbackCriterionItem[]>([])
|
||||
const [entries, setEntries] = useState<ConversationEntry[]>([])
|
||||
const [scores, setScores] = useState<ConversationSkillScore[]>([])
|
||||
const [assessments, setAssessments] = useState<Assessment[]>([])
|
||||
const [tab, setTab] = useState<Tab>('conversation')
|
||||
const [activeInstId, setActiveInstId] = useState<number | null>(null)
|
||||
const [activeEntryId, setActiveEntryId] = useState<number | null>(null)
|
||||
const [entryNote, setEntryNote] = useState('')
|
||||
const [generalNotes, setGeneralNotes] = useState('')
|
||||
const [editingGeneralNotes, setEditingGeneralNotes] = useState(false)
|
||||
const [editingId, setEditingId] = useState<number | null>(null)
|
||||
const [editNote, setEditNote] = useState('')
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||||
const [showExportMenu, setShowExportMenu] = useState(false)
|
||||
// accordion: per instituteeId → expanded categoryId
|
||||
const [expandedCat, setExpandedCat] = useState<Record<number, number | null>>({})
|
||||
const noteRef = useRef<HTMLTextAreaElement>(null)
|
||||
const notesTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
// Vollständiger Vorname, bei Duplikaten + erster Buchstabe Nachname
|
||||
const displayName = (inst: Consultant) => {
|
||||
const dup = institutees.filter(c => c.firstName === inst.firstName && c.id !== inst.id).length > 0
|
||||
return dup ? `${inst.firstName} ${inst.lastName.charAt(0)}.` : inst.firstName
|
||||
}
|
||||
|
||||
// Tag-Label für farbige Badges im Protokoll
|
||||
const tagLabel = (inst: Consultant) => {
|
||||
const dup = institutees.filter(c => c.firstName === inst.firstName && c.id !== inst.id).length > 0
|
||||
return dup ? `${inst.firstName} ${inst.lastName.charAt(0)}.` : inst.firstName
|
||||
}
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
const m = await db.meetingInstances.get(meetingId)
|
||||
if (!m) return
|
||||
setMeeting(m)
|
||||
setGeneralNotes(m.generalNotes ?? '')
|
||||
|
||||
const [tmpl, a] = await Promise.all([
|
||||
db.phaseTemplates.get(m.phaseTemplateId),
|
||||
db.assignments.get(m.assignmentId),
|
||||
])
|
||||
setTemplate(tmpl ?? null)
|
||||
setAssignment(a ?? null)
|
||||
|
||||
if (a) {
|
||||
const cons = await db.consultants.where('id').anyOf(a.instituteeIds).toArray()
|
||||
setInstitutees(a.instituteeIds.map(cid => cons.find(c => c.id === cid)!).filter(Boolean))
|
||||
}
|
||||
|
||||
const [allCats, allItems, aType] = await Promise.all([
|
||||
db.feedbackCategories.toArray(),
|
||||
db.feedbackCriterionItems.toArray(),
|
||||
a ? db.assignmentTypes.get(a.assignmentTypeId) : Promise.resolve(undefined),
|
||||
])
|
||||
const itemFilter = aType?.criteriaIds?.length ? new Set(aType.criteriaIds) : null
|
||||
const filteredItems = itemFilter ? allItems.filter(i => itemFilter.has(i.id!)) : allItems
|
||||
setFbItems(filteredItems)
|
||||
const visibleCatIds = new Set(filteredItems.map(i => i.categoryId))
|
||||
setFbCategories(itemFilter ? allCats.filter(c => visibleCatIds.has(c.id!)) : allCats)
|
||||
|
||||
const [convEntries, convScores, asmts] = await Promise.all([
|
||||
db.conversationEntries.where('meetingInstanceId').equals(meetingId).sortBy('sequenceIndex'),
|
||||
db.conversationSkillScores.toArray(),
|
||||
db.assessments.where('meetingInstanceId').equals(meetingId).toArray(),
|
||||
])
|
||||
setEntries(convEntries)
|
||||
setScores(convScores)
|
||||
setAssessments(asmts)
|
||||
}, [meetingId])
|
||||
|
||||
useEffect(() => { loadData() }, [loadData])
|
||||
|
||||
// ── Sprecher ──────────────────────────────────────────────────────────────
|
||||
|
||||
const activateInstitutee = async (instId: number) => {
|
||||
if (activeEntryId !== null) {
|
||||
await db.conversationEntries.update(activeEntryId, { note: entryNote, updatedAt: new Date().toISOString() })
|
||||
}
|
||||
const maxSeq = entries.reduce((m, e) => Math.max(m, e.sequenceIndex), 0)
|
||||
const eid = await db.conversationEntries.add({
|
||||
meetingInstanceId: meetingId,
|
||||
instituteeId: instId,
|
||||
sequenceIndex: maxSeq + 1,
|
||||
note: '',
|
||||
fillerCount: 0,
|
||||
updatedAt: new Date().toISOString(),
|
||||
})
|
||||
setActiveInstId(instId)
|
||||
setActiveEntryId(eid)
|
||||
setEntryNote('')
|
||||
await loadData()
|
||||
setTimeout(() => noteRef.current?.focus(), 50)
|
||||
}
|
||||
|
||||
const insertNotation = (sym: string) => {
|
||||
const el = noteRef.current
|
||||
if (!el) { setEntryNote(p => p + sym + ' '); return }
|
||||
const start = el.selectionStart ?? entryNote.length
|
||||
const end = el.selectionEnd ?? entryNote.length
|
||||
const next = entryNote.slice(0, start) + sym + ' ' + entryNote.slice(end)
|
||||
setEntryNote(next)
|
||||
setTimeout(() => {
|
||||
el.selectionStart = el.selectionEnd = start + sym.length + 1
|
||||
el.focus()
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const saveEntryNote = async () => {
|
||||
if (activeEntryId === null) return
|
||||
await db.conversationEntries.update(activeEntryId, { note: entryNote, updatedAt: new Date().toISOString() })
|
||||
setEntries(prev => prev.map(e => e.id === activeEntryId ? { ...e, note: entryNote } : e))
|
||||
}
|
||||
|
||||
const incrementFiller = async () => {
|
||||
if (activeEntryId === null) return
|
||||
const entry = entries.find(e => e.id === activeEntryId)
|
||||
const newCount = (entry?.fillerCount ?? 0) + 1
|
||||
await db.conversationEntries.update(activeEntryId, { fillerCount: newCount })
|
||||
setEntries(prev => prev.map(e => e.id === activeEntryId ? { ...e, fillerCount: newCount } : e))
|
||||
}
|
||||
|
||||
const closeActiveEntry = async () => {
|
||||
await saveEntryNote()
|
||||
setActiveInstId(null)
|
||||
setActiveEntryId(null)
|
||||
setEntryNote('')
|
||||
await loadData()
|
||||
}
|
||||
|
||||
// ── Edit / Delete ─────────────────────────────────────────────────────────
|
||||
|
||||
const startEdit = (entry: ConversationEntry) => {
|
||||
setEditingId(entry.id!)
|
||||
setEditNote(entry.note)
|
||||
}
|
||||
|
||||
const saveEdit = async (entryId: number) => {
|
||||
await db.conversationEntries.update(entryId, { note: editNote, updatedAt: new Date().toISOString() })
|
||||
setEntries(prev => prev.map(e => e.id === entryId ? { ...e, note: editNote } : e))
|
||||
setEditingId(null)
|
||||
}
|
||||
|
||||
const deleteEntry = async (entryId: number) => {
|
||||
await db.conversationSkillScores.where('conversationEntryId').equals(entryId).delete()
|
||||
await db.conversationEntries.delete(entryId)
|
||||
setEntries(prev => prev.filter(e => e.id !== entryId))
|
||||
}
|
||||
|
||||
const adjustFiller = async (entry: ConversationEntry, delta: number) => {
|
||||
const newCount = Math.max(0, (entry.fillerCount ?? 0) + delta)
|
||||
await db.conversationEntries.update(entry.id!, { fillerCount: newCount })
|
||||
setEntries(prev => prev.map(e => e.id === entry.id ? { ...e, fillerCount: newCount } : e))
|
||||
}
|
||||
|
||||
// ── Scores ────────────────────────────────────────────────────────────────
|
||||
|
||||
const setEntryScore = async (entryId: number, categoryId: number, score: FeedbackRating) => {
|
||||
const existing = scores.find(s => s.conversationEntryId === entryId && s.criteriaId === categoryId)
|
||||
if (existing?.id) {
|
||||
await db.conversationSkillScores.update(existing.id, { score })
|
||||
} else {
|
||||
await db.conversationSkillScores.add({ conversationEntryId: entryId, criteriaId: categoryId, score })
|
||||
}
|
||||
setScores(await db.conversationSkillScores.toArray())
|
||||
}
|
||||
|
||||
const getEntryScore = (entryId: number, categoryId: number): FeedbackRating | null =>
|
||||
scores.find(s => s.conversationEntryId === entryId && s.criteriaId === categoryId)?.score ?? null
|
||||
|
||||
// ── Gesamtbewertung ───────────────────────────────────────────────────────
|
||||
|
||||
// Assessment scored per FeedbackCriterionItem.id
|
||||
const setAssessmentScore = async (instituteeId: number, itemId: number, score: FeedbackRating) => {
|
||||
const existing = assessments.find(a => a.instituteeId === instituteeId && a.criteriaId === itemId)
|
||||
const now = new Date().toISOString()
|
||||
if (existing?.id) {
|
||||
await db.assessments.update(existing.id, { score, updatedAt: now })
|
||||
} else {
|
||||
await db.assessments.add({ meetingInstanceId: meetingId, instituteeId, criteriaId: itemId, score, note: '', updatedAt: now })
|
||||
}
|
||||
setAssessments(await db.assessments.where('meetingInstanceId').equals(meetingId).toArray())
|
||||
}
|
||||
|
||||
const getAssessmentScore = (instituteeId: number, itemId: number): FeedbackRating | null =>
|
||||
assessments.find(a => a.instituteeId === instituteeId && a.criteriaId === itemId)?.score ?? null
|
||||
|
||||
const saveAssessmentNote = async (instituteeId: number, itemId: number, note: string) => {
|
||||
const existing = assessments.find(a => a.instituteeId === instituteeId && a.criteriaId === itemId)
|
||||
const now = new Date().toISOString()
|
||||
if (existing?.id) {
|
||||
await db.assessments.update(existing.id, { note, updatedAt: now })
|
||||
} else {
|
||||
await db.assessments.add({ meetingInstanceId: meetingId, instituteeId, criteriaId: itemId, score: null, note, updatedAt: now })
|
||||
}
|
||||
setAssessments(await db.assessments.where('meetingInstanceId').equals(meetingId).toArray())
|
||||
}
|
||||
|
||||
// Aus Protokoll: Kategorie-Durchschnitt → alle Items der Kategorie setzen
|
||||
const autoCalcAssessment = async (instituteeId: number) => {
|
||||
const numMap: Record<FeedbackRating, number> = { na: 0, not_client_ready: 1, partially_client_ready: 2, nearly_client_ready: 3, client_ready: 4 }
|
||||
const instEntries = entries.filter(e => e.instituteeId === instituteeId)
|
||||
for (const cat of fbCategories) {
|
||||
const vals = instEntries
|
||||
.map(e => getEntryScore(e.id!, cat.id!))
|
||||
.filter((s): s is FeedbackRating => s !== null && s !== 'na')
|
||||
if (vals.length === 0) continue
|
||||
const avg = vals.reduce((s, v) => s + numMap[v], 0) / vals.length
|
||||
const rating: FeedbackRating = avg < 1.5 ? 'not_client_ready' : avg < 2.5 ? 'partially_client_ready' : avg < 3.5 ? 'nearly_client_ready' : 'client_ready'
|
||||
for (const item of fbItems.filter(i => i.categoryId === cat.id)) {
|
||||
await setAssessmentScore(instituteeId, item.id!, rating)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const buildFilename = (ext: string) => {
|
||||
const date = new Date(meeting?.date ?? '').toLocaleDateString('de-DE').replace(/\./g, '-')
|
||||
const label = template?.label ?? 'Meeting'
|
||||
const idx = (meeting?.phaseIndex ?? 1) > 1 ? `-${meeting!.phaseIndex}` : ''
|
||||
const id = assignment?.assignmentNumber ?? assignment?.title ?? 'export'
|
||||
return `${id}_${date}_${label}${idx}.${ext}`
|
||||
}
|
||||
|
||||
const handleExportMd = async () => {
|
||||
try {
|
||||
const md = await exportMeetingAsMarkdown(meetingId)
|
||||
downloadFile(md, buildFilename('md'), 'text/markdown')
|
||||
} catch (e) { console.error(e) }
|
||||
setShowExportMenu(false)
|
||||
}
|
||||
|
||||
const handleExportJson = async () => {
|
||||
try {
|
||||
const json = await exportMeetingAsJson(meetingId)
|
||||
downloadFile(json, buildFilename('json'), 'application/json')
|
||||
} catch (e) { console.error(e) }
|
||||
setShowExportMenu(false)
|
||||
}
|
||||
|
||||
const handleDeleteMeeting = async () => {
|
||||
await saveEntryNote()
|
||||
await db.meetingInstances.update(meetingId, { deletedAt: new Date().toISOString() })
|
||||
navigate(`/assignment/${assignment?.id}`)
|
||||
}
|
||||
|
||||
const saveGeneralNotes = (val: string) => {
|
||||
setGeneralNotes(val)
|
||||
if (notesTimer.current) clearTimeout(notesTimer.current)
|
||||
notesTimer.current = setTimeout(() => {
|
||||
db.meetingInstances.update(meetingId, { generalNotes: val })
|
||||
}, 600)
|
||||
}
|
||||
|
||||
const finishMeeting = async () => {
|
||||
await saveEntryNote()
|
||||
await db.meetingInstances.update(meetingId, { status: 'done' })
|
||||
navigate(`/assignment/${assignment?.id}`)
|
||||
}
|
||||
|
||||
const fillerTotal = (instId: number) =>
|
||||
entries.filter(e => e.instituteeId === instId).reduce((s, e) => s + (e.fillerCount ?? 0), 0)
|
||||
|
||||
if (!meeting || !template) return <div className="text-center py-10 text-gray-400">Lädt…</div>
|
||||
|
||||
const hasConv = template.hasConversation
|
||||
const hasAssess = template.hasAssessment
|
||||
const activeInstIdx = institutees.findIndex(c => c.id === activeInstId)
|
||||
const activeColor = INST_COLORS[activeInstIdx % INST_COLORS.length]
|
||||
const pastEntries = [...entries].filter(e => e.id !== activeEntryId).reverse()
|
||||
const activeEntry = entries.find(e => e.id === activeEntryId)
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<button onClick={() => navigate(`/assignment/${assignment?.id}`)}
|
||||
className="text-xs text-[#0070AD] mb-0.5 block">← Assignment</button>
|
||||
{assignment?.assignmentNumber && (
|
||||
<div className="text-xs font-semibold text-[#0070AD] uppercase tracking-wide leading-none mb-0.5">{assignment.assignmentNumber}</div>
|
||||
)}
|
||||
<div className="text-sm font-semibold text-gray-600 truncate">{assignment?.title}</div>
|
||||
<div className="font-bold text-gray-800 truncate">{template.label}</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{assignment?.client} · {new Date(meeting.date).toLocaleDateString('de-DE')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1.5 flex-shrink-0 items-start">
|
||||
{/* Export-Menü */}
|
||||
<div className="relative">
|
||||
<button onClick={() => setShowExportMenu(p => !p)}
|
||||
className="text-sm bg-white border border-gray-200 text-gray-600 px-2.5 py-1.5 rounded-lg font-medium">
|
||||
↓ Export
|
||||
</button>
|
||||
{showExportMenu && (
|
||||
<div className="absolute right-0 top-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg z-10 min-w-[160px] overflow-hidden">
|
||||
<button onClick={handleExportMd}
|
||||
className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50 border-b border-gray-100">
|
||||
📄 Markdown
|
||||
</button>
|
||||
<button onClick={handleExportJson}
|
||||
className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50">
|
||||
🗂 JSON-Backup
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button onClick={() => setShowDeleteConfirm(p => !p)}
|
||||
title="Meeting löschen"
|
||||
className="text-sm bg-white border border-red-200 text-red-400 hover:text-red-600 px-2.5 py-1.5 rounded-lg font-medium">
|
||||
🗑
|
||||
</button>
|
||||
<button onClick={finishMeeting}
|
||||
className="text-sm bg-green-600 text-white px-3 py-1.5 rounded-lg font-medium">
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Löschen-Bestätigung */}
|
||||
{showDeleteConfirm && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 space-y-3">
|
||||
<div className="text-sm font-semibold text-red-700">Meeting in den Papierkorb verschieben?</div>
|
||||
<div className="text-xs text-red-500">Das Meeting wird in den Papierkorb verschoben und kann dort wiederhergestellt oder endgültig gelöscht werden.</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleDeleteMeeting}
|
||||
className="flex-1 py-2 rounded-lg text-sm font-medium bg-red-600 text-white">
|
||||
Ja, in Papierkorb
|
||||
</button>
|
||||
<button onClick={() => setShowDeleteConfirm(false)}
|
||||
className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-500">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Allgemeine Notizen */}
|
||||
{editingGeneralNotes ? (
|
||||
<textarea
|
||||
autoFocus
|
||||
className="w-full border border-[#0070AD] rounded-xl px-3 py-2 text-sm bg-white focus:outline-none resize-none"
|
||||
style={{ minHeight: '4rem', fieldSizing: 'content' } as React.CSSProperties}
|
||||
placeholder="Allgemeine Notizen zum Meeting… (+ gut, ! negativ, > Kundeninput)"
|
||||
value={generalNotes}
|
||||
onChange={e => saveGeneralNotes(e.target.value)}
|
||||
onBlur={() => setEditingGeneralNotes(false)}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onClick={() => setEditingGeneralNotes(true)}
|
||||
className="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm bg-white cursor-text min-h-[2.5rem]">
|
||||
{generalNotes.trim()
|
||||
? <NotationText text={generalNotes} />
|
||||
: <span className="text-gray-300">Allgemeine Notizen zum Meeting…</span>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
{(hasConv || hasAssess) && (
|
||||
<div className="flex bg-gray-100 rounded-xl p-1">
|
||||
{hasConv && (
|
||||
<button onClick={() => setTab('conversation')}
|
||||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition ${
|
||||
tab === 'conversation' ? 'bg-white text-[#0070AD] shadow-sm' : 'text-gray-500'
|
||||
}`}>
|
||||
Gesprächsprotokoll
|
||||
</button>
|
||||
)}
|
||||
{hasAssess && (
|
||||
<button onClick={() => setTab('assessment')}
|
||||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition ${
|
||||
tab === 'assessment' ? 'bg-white text-[#0070AD] shadow-sm' : 'text-gray-500'
|
||||
}`}>
|
||||
Gesamtbewertung
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── GESPRÄCHSPROTOKOLL ───────────────────────────────────────────── */}
|
||||
{tab === 'conversation' && hasConv && (
|
||||
<div className="space-y-3">
|
||||
|
||||
{/* Aktiver Sprecher-Bereich */}
|
||||
<div className={`bg-white rounded-xl shadow-sm border-2 p-4 space-y-3 ${
|
||||
activeInstId !== null ? (activeColor?.border ?? 'border-[#0070AD]') : 'border-gray-200'
|
||||
}`}>
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Wer spricht?</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{institutees.map((c, idx) => {
|
||||
const color = INST_COLORS[idx % INST_COLORS.length]
|
||||
const isActive = activeInstId === c.id
|
||||
const filler = fillerTotal(c.id!)
|
||||
return (
|
||||
<button key={c.id}
|
||||
onClick={() => activateInstitutee(c.id!)}
|
||||
className={`px-3 py-2 rounded-lg text-sm font-semibold border-2 transition ${
|
||||
isActive
|
||||
? `${color.tag} text-white border-transparent`
|
||||
: `bg-white ${color.text} border-current`
|
||||
}`}>
|
||||
{displayName(c)}
|
||||
{filler > 0 && (
|
||||
<span className={`ml-1.5 text-xs font-normal ${isActive ? 'text-white/80' : 'text-gray-400'}`}>
|
||||
äh×{filler}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{activeInstId !== null && (
|
||||
<button onClick={closeActiveEntry}
|
||||
className="px-3 py-2 rounded-lg text-sm border border-gray-200 text-gray-500">
|
||||
✓ Schließen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeInstId !== null && (
|
||||
<>
|
||||
{/* Notation + Äh-Counter */}
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="flex gap-1.5 flex-wrap flex-1">
|
||||
{NOTATIONS.map(({ sym, tip }) => (
|
||||
<button key={sym}
|
||||
onClick={() => insertNotation(sym)}
|
||||
title={tip}
|
||||
className="px-2.5 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-mono rounded-lg transition">
|
||||
{sym}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={incrementFiller}
|
||||
className={`flex-shrink-0 flex flex-col items-center justify-center w-14 h-14 rounded-xl border-2 border-dashed font-bold transition active:scale-95
|
||||
${activeColor?.text ?? 'text-blue-700'} ${activeColor?.border ?? 'border-blue-300'}
|
||||
hover:bg-gray-50`}>
|
||||
<span className="text-lg leading-none">äh</span>
|
||||
<span className="text-base font-bold leading-none mt-0.5">
|
||||
{activeEntry?.fillerCount ?? 0}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Notiz */}
|
||||
<textarea
|
||||
ref={noteRef}
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[#0070AD]"
|
||||
rows={4}
|
||||
placeholder="Notizen… (+ gut, (!) negativ mit Abstrichen, > Kundeninput, [Slide 3])"
|
||||
value={entryNote}
|
||||
onChange={e => setEntryNote(e.target.value)}
|
||||
onBlur={saveEntryNote}
|
||||
/>
|
||||
|
||||
{/* Bewertungen per Kategorie (optional) */}
|
||||
{fbCategories.length > 0 && activeEntryId !== null && (
|
||||
<details>
|
||||
<summary className="text-xs text-gray-400 cursor-pointer select-none hover:text-gray-600">
|
||||
Kategorie-Bewertung für diesen Beitrag (optional)
|
||||
</summary>
|
||||
<div className="mt-2 space-y-3">
|
||||
{fbCategories.map(cat => {
|
||||
const catItems = fbItems.filter(i => i.categoryId === cat.id)
|
||||
const current = getEntryScore(activeEntryId, cat.id!)
|
||||
return (
|
||||
<div key={cat.id}>
|
||||
<div className="text-xs font-medium text-gray-600 mb-1">{cat.name}</div>
|
||||
{catItems.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mb-1.5">
|
||||
{catItems.map(i => (
|
||||
<span key={i.id} className="text-xs text-gray-400 bg-gray-50 border border-gray-100 px-1.5 py-0.5 rounded-full">{i.name}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-1">
|
||||
{RATING_OPTIONS.map(r => (
|
||||
<button key={r.value}
|
||||
onClick={() => setEntryScore(activeEntryId, cat.id!, r.value)}
|
||||
className={`flex-1 py-1.5 rounded text-xs font-bold border transition ${
|
||||
current === r.value ? r.active : r.color
|
||||
}`}>
|
||||
{r.short}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Protokoll-Zeitleiste */}
|
||||
{pastEntries.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wide px-1">Protokoll</div>
|
||||
{pastEntries.map(entry => {
|
||||
const instIdx = institutees.findIndex(c => c.id === entry.instituteeId)
|
||||
const inst = institutees[instIdx]
|
||||
const color = INST_COLORS[instIdx % INST_COLORS.length]
|
||||
const scoreChips = fbCategories
|
||||
.map(c => ({ name: c.name, s: getEntryScore(entry.id!, c.id!) }))
|
||||
.filter(x => x.s !== null)
|
||||
const isEditing = editingId === entry.id
|
||||
|
||||
return (
|
||||
<div key={entry.id}
|
||||
className={`rounded-xl border px-3 py-2.5 ${color?.bg ?? 'bg-gray-50'} ${color?.border ?? 'border-gray-200'}`}>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className={`flex-shrink-0 text-xs font-bold text-white px-2 py-0.5 rounded mt-0.5 ${color?.tag ?? 'bg-gray-400'}`}>
|
||||
{inst ? tagLabel(inst) : '?'}
|
||||
</span>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
{isEditing ? (
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
className="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:border-[#0070AD] bg-white"
|
||||
rows={3}
|
||||
value={editNote}
|
||||
onChange={e => setEditNote(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500">Füllwörter:</span>
|
||||
<button onClick={() => adjustFiller(entry, -1)}
|
||||
className="w-7 h-7 rounded-full border border-gray-300 text-gray-600 flex items-center justify-center">−</button>
|
||||
<span className="text-sm font-semibold w-6 text-center">{entry.fillerCount ?? 0}</span>
|
||||
<button onClick={() => adjustFiller(entry, +1)}
|
||||
className="w-7 h-7 rounded-full border border-gray-300 text-gray-600 flex items-center justify-center">+</button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => saveEdit(entry.id!)}
|
||||
className="text-xs bg-[#0070AD] text-white px-3 py-1.5 rounded-lg">Speichern</button>
|
||||
<button onClick={() => setEditingId(null)}
|
||||
className="text-xs border border-gray-200 text-gray-500 px-3 py-1.5 rounded-lg">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{entry.note && (
|
||||
<NotationText text={entry.note} />
|
||||
)}
|
||||
<div className="flex gap-1 flex-wrap mt-1">
|
||||
{(entry.fillerCount ?? 0) > 0 && (
|
||||
<span className="text-xs bg-red-50 text-red-500 border border-red-200 px-1.5 py-0.5 rounded font-medium">
|
||||
äh×{entry.fillerCount}
|
||||
</span>
|
||||
)}
|
||||
{scoreChips.map(({ name, s }) => {
|
||||
const ro = RATING_OPTIONS.find(r => r.value === s)
|
||||
return (
|
||||
<span key={name} className={`text-xs px-1.5 py-0.5 rounded border font-medium ${ro?.active ?? 'bg-gray-100 text-gray-500 border-gray-200'}`}>
|
||||
{name.slice(0, 8)}: {ro?.short ?? s}
|
||||
</span>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isEditing && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1 flex-shrink-0">
|
||||
<button onClick={() => startEdit(entry)}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 px-1.5 py-1 rounded leading-none">✏️</button>
|
||||
<button onClick={() => deleteEntry(entry.id!)}
|
||||
className="text-xs text-red-300 hover:text-red-500 px-1.5 py-1 rounded leading-none">🗑</button>
|
||||
</div>
|
||||
<span className="text-xs text-gray-300 flex-shrink-0 self-start">#{entry.sequenceIndex}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── GESAMTBEWERTUNG ────────────────────────────────────────────────── */}
|
||||
{tab === 'assessment' && hasAssess && (
|
||||
<div className="space-y-4">
|
||||
{institutees.map((inst, idx) => {
|
||||
const color = INST_COLORS[idx % INST_COLORS.length]
|
||||
const filler = fillerTotal(inst.id!)
|
||||
|
||||
// Helper: weighted average rating for a category (N/A excluded, scale 1-4)
|
||||
const catMode = (cat: FeedbackCategory): FeedbackRating | null => {
|
||||
const numMap: Record<FeedbackRating, number> = { na: 0, not_client_ready: 1, partially_client_ready: 2, nearly_client_ready: 3, client_ready: 4 }
|
||||
const scored = fbItems
|
||||
.filter(i => i.categoryId === cat.id)
|
||||
.map(i => ({ score: getAssessmentScore(inst.id!, i.id!), w: i.weight ?? 1 }))
|
||||
.filter((x): x is { score: FeedbackRating; w: number } => x.score !== null && x.score !== 'na')
|
||||
if (scored.length === 0) return null
|
||||
const wSum = scored.reduce((s, x) => s + x.w, 0)
|
||||
const avg = scored.reduce((s, x) => s + numMap[x.score] * x.w, 0) / wSum
|
||||
if (avg < 1.5) return 'not_client_ready'
|
||||
if (avg < 2.5) return 'partially_client_ready'
|
||||
if (avg < 3.5) return 'nearly_client_ready'
|
||||
return 'client_ready'
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={inst.id} className={`rounded-xl border-2 ${color.border} p-4 space-y-3 bg-white`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className={`text-xs font-bold text-white px-2 py-1 rounded ${color.tag}`}>
|
||||
{tagLabel(inst)}
|
||||
</span>
|
||||
<h3 className={`font-semibold ${color.text}`}>{inst.firstName} {inst.lastName}</h3>
|
||||
{filler > 0 && (
|
||||
<span className="text-xs bg-red-50 text-red-500 border border-red-200 px-2 py-0.5 rounded">
|
||||
äh×{filler}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{hasConv && (
|
||||
<button onClick={() => autoCalcAssessment(inst.id!)}
|
||||
className="text-xs bg-gray-100 text-gray-600 border border-gray-200 px-3 py-1 rounded-lg">
|
||||
Aus Protokoll
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{fbCategories.map(cat => {
|
||||
const catItems = fbItems.filter(i => i.categoryId === cat.id)
|
||||
if (catItems.length === 0) return null
|
||||
const ratedCount = catItems.filter(i => { const s = getAssessmentScore(inst.id!, i.id!); return s !== null && s !== 'na' }).length
|
||||
const isOpen = expandedCat[inst.id!] === cat.id
|
||||
const mode = catMode(cat)
|
||||
const headerRo = mode ? RATING_OPTIONS.find(r => r.value === mode) : null
|
||||
return (
|
||||
<div key={cat.id} className="rounded-xl overflow-hidden border border-gray-100">
|
||||
{/* Category header — colored when rated */}
|
||||
<button
|
||||
onClick={() => setExpandedCat(prev => ({
|
||||
...prev,
|
||||
[inst.id!]: prev[inst.id!] === cat.id ? null : cat.id!,
|
||||
}))}
|
||||
className={`w-full flex items-center justify-between px-3 py-2.5 text-left transition ${
|
||||
headerRo ? headerRo.active : 'bg-white hover:bg-gray-50'
|
||||
}`}>
|
||||
<span className={`text-sm font-medium ${headerRo ? 'text-white' : 'text-gray-700'}`}>{cat.name}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{!headerRo && ratedCount > 0 && (
|
||||
<span className="text-xs text-[#0070AD] font-medium">{ratedCount}/{catItems.length}</span>
|
||||
)}
|
||||
<span className={`text-xs ${headerRo ? 'text-white/70' : 'text-gray-300'}`}>{isOpen ? '▲' : '▼'}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Criterion items */}
|
||||
{isOpen && (
|
||||
<div className="border-t border-gray-100 divide-y divide-gray-50">
|
||||
{catItems.map(item => {
|
||||
const current = getAssessmentScore(inst.id!, item.id!)
|
||||
return (
|
||||
<div key={item.id} className="px-3 py-2.5 space-y-1.5">
|
||||
<div className="text-xs text-gray-600 font-medium">{item.name}</div>
|
||||
<div className="flex gap-1">
|
||||
{RATING_OPTIONS.map(r => (
|
||||
<button key={r.value}
|
||||
onClick={() => setAssessmentScore(inst.id!, item.id!, r.value)}
|
||||
className={`flex-1 py-1.5 rounded-lg text-xs font-semibold border transition ${
|
||||
current === r.value ? r.active : r.color
|
||||
}`}>
|
||||
{r.short}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div className="px-3 py-2 bg-gray-50">
|
||||
<textarea
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-[#0070AD] bg-white"
|
||||
rows={1}
|
||||
placeholder="Kommentar zur Kategorie"
|
||||
defaultValue={assessments.find(a => a.instituteeId === inst.id && a.criteriaId === cat.id)?.note ?? ''}
|
||||
onBlur={e => saveAssessmentNote(inst.id!, cat.id!, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
74
src/utils/dbBackup.ts
Normal file
74
src/utils/dbBackup.ts
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import { db } from '../db'
|
||||
import { downloadFile } from './meetingExport'
|
||||
|
||||
const TABLE_NAMES = [
|
||||
'categories',
|
||||
'criteria',
|
||||
'assignmentTypes',
|
||||
'phaseTemplates',
|
||||
'groups',
|
||||
'consultants',
|
||||
'assignments',
|
||||
'meetingInstances',
|
||||
'conversationEntries',
|
||||
'conversationSkillScores',
|
||||
'assessments',
|
||||
'feedbackDrafts',
|
||||
'feedbackDimensions',
|
||||
'feedbackCategories',
|
||||
'feedbackCriterionItems',
|
||||
'assignmentFeedbacks',
|
||||
'feedbackCategoryRatings',
|
||||
'feedbackDimensionTexts',
|
||||
'criterionCategoryMappings',
|
||||
'criterionLevelDescriptions',
|
||||
] as const
|
||||
|
||||
export interface DbBackup {
|
||||
version: number
|
||||
exportedAt: string
|
||||
tables: Record<string, unknown[]>
|
||||
}
|
||||
|
||||
export async function exportFullBackup(): Promise<void> {
|
||||
const tables: Record<string, unknown[]> = {}
|
||||
for (const name of TABLE_NAMES) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
tables[name] = await (db as any)[name].toArray()
|
||||
}
|
||||
const backup: DbBackup = {
|
||||
version: 1,
|
||||
exportedAt: new Date().toISOString(),
|
||||
tables,
|
||||
}
|
||||
const date = new Date().toLocaleDateString('de-DE').replace(/\./g, '-')
|
||||
downloadFile(JSON.stringify(backup, null, 2), `assignment-monitor-backup-${date}.json`, 'application/json')
|
||||
}
|
||||
|
||||
export async function importFullBackup(file: File): Promise<{ ok: boolean; error?: string }> {
|
||||
try {
|
||||
const text = await file.text()
|
||||
const backup: DbBackup = JSON.parse(text)
|
||||
|
||||
if (!backup.tables || typeof backup.tables !== 'object') {
|
||||
return { ok: false, error: 'Ungültiges Backup-Format' }
|
||||
}
|
||||
|
||||
// Clear all tables and reimport in dependency order
|
||||
await db.transaction('rw', TABLE_NAMES.map(n => (db as any)[n]), async () => {
|
||||
for (const name of [...TABLE_NAMES].reverse()) {
|
||||
await (db as any)[name].clear()
|
||||
}
|
||||
for (const name of TABLE_NAMES) {
|
||||
const rows = backup.tables[name]
|
||||
if (Array.isArray(rows) && rows.length > 0) {
|
||||
await (db as any)[name].bulkAdd(rows)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return { ok: true }
|
||||
} catch (e) {
|
||||
return { ok: false, error: e instanceof Error ? e.message : String(e) }
|
||||
}
|
||||
}
|
||||
171
src/utils/meetingExport.ts
Normal file
171
src/utils/meetingExport.ts
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
import { db } from '../db'
|
||||
|
||||
export async function exportMeetingAsMarkdown(meetingId: number): Promise<string> {
|
||||
const meeting = await db.meetingInstances.get(meetingId)
|
||||
if (!meeting) throw new Error('Meeting nicht gefunden')
|
||||
|
||||
const [template, assignment] = await Promise.all([
|
||||
db.phaseTemplates.get(meeting.phaseTemplateId),
|
||||
db.assignments.get(meeting.assignmentId),
|
||||
])
|
||||
|
||||
const instituteeIds = assignment?.instituteeIds ?? []
|
||||
const [consultants, entries, allScores, assessments] = await Promise.all([
|
||||
instituteeIds.length > 0
|
||||
? db.consultants.where('id').anyOf(instituteeIds).toArray()
|
||||
: Promise.resolve([]),
|
||||
db.conversationEntries.where('meetingInstanceId').equals(meetingId).sortBy('sequenceIndex'),
|
||||
db.conversationSkillScores.toArray(),
|
||||
db.assessments.where('meetingInstanceId').equals(meetingId).toArray(),
|
||||
])
|
||||
|
||||
const critIds = [
|
||||
...new Set([
|
||||
...(template?.criteriaIds ?? []),
|
||||
...assessments.map(a => a.criteriaId),
|
||||
]),
|
||||
]
|
||||
const criteria = critIds.length > 0
|
||||
? await db.criteria.where('id').anyOf(critIds).toArray()
|
||||
: []
|
||||
|
||||
const institutees = instituteeIds
|
||||
.map(id => consultants.find(c => c.id === id))
|
||||
.filter(Boolean) as typeof consultants
|
||||
|
||||
const date = new Date(meeting.date).toLocaleDateString('de-DE', {
|
||||
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
|
||||
})
|
||||
|
||||
const lines: string[] = []
|
||||
|
||||
lines.push(`# ${template?.label ?? 'Meeting'}`)
|
||||
lines.push(`**Assignment:** ${assignment?.title ?? '—'} | **Kunde:** ${assignment?.client ?? '—'}`)
|
||||
lines.push(`**Datum:** ${date}`)
|
||||
lines.push(`**Institutees:** ${institutees.map(c => `${c.firstName} ${c.lastName}`).join(', ')}`)
|
||||
if (assignment?.leadName) lines.push(`**Lead:** ${assignment.leadName}`)
|
||||
lines.push('')
|
||||
|
||||
if (meeting.generalNotes?.trim()) {
|
||||
lines.push('## Allgemeine Notizen')
|
||||
lines.push(meeting.generalNotes.trim())
|
||||
lines.push('')
|
||||
}
|
||||
|
||||
if (entries.length > 0) {
|
||||
lines.push('## Gesprächsprotokoll')
|
||||
lines.push('')
|
||||
|
||||
for (const entry of entries) {
|
||||
const inst = institutees.find(c => c.id === entry.instituteeId)
|
||||
const name = inst ? `${inst.firstName} ${inst.lastName}` : 'Unbekannt'
|
||||
lines.push(`**[${entry.sequenceIndex}] ${name}**`)
|
||||
|
||||
if (entry.note?.trim()) {
|
||||
for (const noteLine of entry.note.trim().split('\n')) {
|
||||
lines.push(`> ${noteLine}`)
|
||||
}
|
||||
}
|
||||
|
||||
if ((entry.fillerCount ?? 0) > 0) {
|
||||
lines.push(`> _Füllwörter: ${entry.fillerCount}_`)
|
||||
}
|
||||
|
||||
const entryScores = allScores.filter(s => s.conversationEntryId === entry.id)
|
||||
if (entryScores.length > 0) {
|
||||
const scoreStr = entryScores
|
||||
.map(s => {
|
||||
const crit = criteria.find(c => c.id === s.criteriaId)
|
||||
return crit ? `${crit.name}: ${s.score}` : null
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join(' | ')
|
||||
if (scoreStr) lines.push(`> _Scores: ${scoreStr}_`)
|
||||
}
|
||||
|
||||
lines.push('')
|
||||
}
|
||||
}
|
||||
|
||||
if (assessments.length > 0) {
|
||||
lines.push('## Gesamtbewertung')
|
||||
lines.push('')
|
||||
|
||||
for (const inst of institutees) {
|
||||
const instAssessments = assessments.filter(a => a.instituteeId === inst.id)
|
||||
if (instAssessments.length === 0) continue
|
||||
|
||||
lines.push(`### ${inst.firstName} ${inst.lastName}`)
|
||||
|
||||
for (const a of instAssessments) {
|
||||
const crit = criteria.find(c => c.id === a.criteriaId)
|
||||
if (!crit) continue
|
||||
const scoreStr = a.score !== null ? `${a.score}/5` : '—'
|
||||
const noteStr = a.note?.trim() ? ` — ${a.note.trim()}` : ''
|
||||
lines.push(`- **${crit.name}:** ${scoreStr}${noteStr}`)
|
||||
}
|
||||
|
||||
const totalFiller = entries
|
||||
.filter(e => e.instituteeId === inst.id)
|
||||
.reduce((s, e) => s + (e.fillerCount ?? 0), 0)
|
||||
if (totalFiller > 0) lines.push(`- _Füllwörter gesamt: ${totalFiller}_`)
|
||||
|
||||
lines.push('')
|
||||
}
|
||||
}
|
||||
|
||||
lines.push('---')
|
||||
lines.push(`_Export: ${new Date().toLocaleString('de-DE')}_`)
|
||||
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
export async function exportMeetingAsJson(meetingId: number): Promise<string> {
|
||||
const meeting = await db.meetingInstances.get(meetingId)
|
||||
if (!meeting) throw new Error('Meeting nicht gefunden')
|
||||
|
||||
const [template, assignment] = await Promise.all([
|
||||
db.phaseTemplates.get(meeting.phaseTemplateId),
|
||||
db.assignments.get(meeting.assignmentId),
|
||||
])
|
||||
|
||||
const instituteeIds = assignment?.instituteeIds ?? []
|
||||
const [consultants, entries, allScores, assessments] = await Promise.all([
|
||||
instituteeIds.length > 0
|
||||
? db.consultants.where('id').anyOf(instituteeIds).toArray()
|
||||
: Promise.resolve([]),
|
||||
db.conversationEntries.where('meetingInstanceId').equals(meetingId).sortBy('sequenceIndex'),
|
||||
db.conversationSkillScores.toArray(),
|
||||
db.assessments.where('meetingInstanceId').equals(meetingId).toArray(),
|
||||
])
|
||||
|
||||
const entryIds = entries.map(e => e.id!)
|
||||
const entryScores = allScores.filter(s => entryIds.includes(s.conversationEntryId))
|
||||
|
||||
const payload = {
|
||||
exportedAt: new Date().toISOString(),
|
||||
meeting,
|
||||
template,
|
||||
assignment,
|
||||
consultants,
|
||||
entries: entries.map(e => ({
|
||||
...e,
|
||||
scores: entryScores.filter(s => s.conversationEntryId === e.id),
|
||||
})),
|
||||
assessments,
|
||||
}
|
||||
|
||||
return JSON.stringify(payload, null, 2)
|
||||
}
|
||||
|
||||
export function downloadFile(content: string, filename: string, mime: string) {
|
||||
const blob = new Blob([content], { type: mime })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = filename
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
70
src/utils/notationParser.tsx
Normal file
70
src/utils/notationParser.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import React from 'react'
|
||||
|
||||
// Notations-Regeln (Reihenfolge wichtig: längere Symbole zuerst)
|
||||
const NOTATION_RULES = [
|
||||
{ prefix: '(+)', className: 'text-green-600', icon: '✓~', bg: 'bg-green-50', indent: false },
|
||||
{ prefix: '(!)', className: 'text-red-500', icon: '✗~', bg: 'bg-red-50', indent: false },
|
||||
{ prefix: '+', className: 'text-green-700 font-semibold', icon: '✓', bg: 'bg-green-50', indent: false },
|
||||
{ prefix: '!', className: 'text-red-600 font-semibold', icon: '✗', bg: 'bg-red-50', indent: false },
|
||||
{ prefix: '>', className: 'text-blue-600 italic', icon: '›', bg: 'bg-blue-50', indent: true },
|
||||
] as const
|
||||
|
||||
// Erkennt [Slide 3] oder […] am Anfang einer Zeile
|
||||
const SLIDE_RE = /^\[([^\]]*)\]/
|
||||
|
||||
function parseLine(line: string, key: number): React.ReactElement {
|
||||
const trimmed = line.trim()
|
||||
if (!trimmed) return <div key={key} className="h-1" />
|
||||
|
||||
// Slide-Referenz [Titel…]
|
||||
const slideMatch = trimmed.match(SLIDE_RE)
|
||||
if (slideMatch) {
|
||||
const rest = trimmed.slice(slideMatch[0].length).trim()
|
||||
return (
|
||||
<div key={key} className="flex items-start gap-2 py-0.5">
|
||||
<span className="flex-shrink-0 text-xs font-bold text-blue-700 bg-blue-100 border border-blue-200 px-1.5 py-0.5 rounded mt-0.5">
|
||||
{slideMatch[1] || '…'}
|
||||
</span>
|
||||
{rest && <span className="text-sm text-gray-700">{rest}</span>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Notations-Präfixe
|
||||
for (const rule of NOTATION_RULES) {
|
||||
if (trimmed.startsWith(rule.prefix)) {
|
||||
const rest = trimmed.slice(rule.prefix.length).trim()
|
||||
return (
|
||||
<div key={key}
|
||||
className={`flex items-start gap-2 py-0.5 px-2 rounded ${rule.bg} ${rule.indent ? 'ml-2' : ''}`}>
|
||||
<span className={`flex-shrink-0 text-xs font-bold mt-0.5 ${rule.className}`}>
|
||||
{rule.icon}
|
||||
</span>
|
||||
<span className={`text-sm ${rule.className}`}>{rest}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Normaler Text
|
||||
return (
|
||||
<div key={key} className="py-0.5 text-sm text-gray-800">
|
||||
{trimmed}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface Props {
|
||||
text: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function NotationText({ text, className }: Props) {
|
||||
if (!text?.trim()) return null
|
||||
const lines = text.split('\n')
|
||||
return (
|
||||
<div className={className}>
|
||||
{lines.map((line, i) => parseLine(line, i))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
22
tsconfig.app.json
Normal file
22
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
20
tsconfig.node.json
Normal file
20
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
26
vite.config.ts
Normal file
26
vite.config.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
tailwindcss(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
manifest: {
|
||||
name: 'Assignment Monitor',
|
||||
short_name: 'AssignMonitor',
|
||||
description: 'Trainee-Bewertungs-App für Capgemini Management Consultants',
|
||||
theme_color: '#0070AD',
|
||||
background_color: '#ffffff',
|
||||
display: 'standalone',
|
||||
icons: [
|
||||
{ src: 'pwa-192.png', sizes: '192x192', type: 'image/png' },
|
||||
{ src: 'pwa-512.png', sizes: '512x512', type: 'image/png' },
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user