534 lines
23 KiB
TypeScript
534 lines
23 KiB
TypeScript
|
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>
|
|||
|
|
)
|
|||
|
|
}
|