refactor: MeetingView in 3 Dateien aufgeteilt (meeting/ Unterordner)
This commit is contained in:
Lars
parent
068c4cdcfd
commit
594a643068
|
|
@ -6,7 +6,7 @@ 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 MeetingView from './pages/meeting/MeetingView'
|
||||
import FeedbackDraftPage from './pages/FeedbackDraftPage'
|
||||
import AssignmentFeedbackPage from './pages/AssignmentFeedbackPage'
|
||||
import Evaluation from './pages/Evaluation'
|
||||
|
|
|
|||
|
|
@ -1,745 +0,0 @@
|
|||
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'
|
||||
import { INST_COLORS, RATING_OPTIONS } from '../config/constants'
|
||||
|
||||
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' },
|
||||
]
|
||||
|
||||
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-brand mb-0.5 block">← Assignment</button>
|
||||
{assignment?.assignmentNumber && (
|
||||
<div className="text-xs font-semibold text-brand 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-brand 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-brand 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-brand 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-brand') : '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-brand"
|
||||
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-brand 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-brand 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-brand 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-brand 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>
|
||||
)
|
||||
}
|
||||
145
src/pages/meeting/AssessmentTab.tsx
Normal file
145
src/pages/meeting/AssessmentTab.tsx
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
import { useState } from 'react'
|
||||
import type {
|
||||
Consultant, FeedbackCategory, FeedbackCriterionItem,
|
||||
Assessment, FeedbackRating,
|
||||
} from '../../db'
|
||||
import { INST_COLORS, RATING_OPTIONS, RATING_NUM_MAP } from '../../config/constants'
|
||||
|
||||
interface Props {
|
||||
institutees: Consultant[]
|
||||
fbCategories: FeedbackCategory[]
|
||||
fbItems: FeedbackCriterionItem[]
|
||||
assessments: Assessment[]
|
||||
hasConv: boolean
|
||||
tagLabel: (inst: Consultant) => string
|
||||
fillerTotal: (instId: number) => number
|
||||
getAssessmentScore: (instituteeId: number, itemId: number) => FeedbackRating | null
|
||||
onSetAssessmentScore: (instituteeId: number, itemId: number, score: FeedbackRating) => void
|
||||
onSaveAssessmentNote: (instituteeId: number, itemId: number, note: string) => void
|
||||
onAutoCalc: (instituteeId: number) => void
|
||||
}
|
||||
|
||||
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 + RATING_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 function AssessmentTab({
|
||||
institutees, fbCategories, fbItems, assessments, hasConv,
|
||||
tagLabel, fillerTotal,
|
||||
getAssessmentScore, onSetAssessmentScore, onSaveAssessmentNote, onAutoCalc,
|
||||
}: Props) {
|
||||
const [expandedCat, setExpandedCat] = useState<Record<number, number | null>>({})
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{institutees.map((inst, idx) => {
|
||||
const color = INST_COLORS[idx % INST_COLORS.length]
|
||||
const filler = fillerTotal(inst.id!)
|
||||
|
||||
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={() => onAutoCalc(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, fbItems, itemId => getAssessmentScore(inst.id!, itemId))
|
||||
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">
|
||||
<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-brand font-medium">{ratedCount}/{catItems.length}</span>
|
||||
)}
|
||||
<span className={`text-xs ${headerRo ? 'text-white/70' : 'text-gray-300'}`}>{isOpen ? '▲' : '▼'}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{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={() => onSetAssessmentScore(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-brand bg-white"
|
||||
rows={1}
|
||||
placeholder="Kommentar zur Kategorie"
|
||||
defaultValue={assessments.find(a => a.instituteeId === inst.id && a.criteriaId === cat.id)?.note ?? ''}
|
||||
onBlur={e => onSaveAssessmentNote(inst.id!, cat.id!, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
265
src/pages/meeting/ConversationTab.tsx
Normal file
265
src/pages/meeting/ConversationTab.tsx
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
import type React from 'react'
|
||||
import type {
|
||||
Consultant, FeedbackCategory, FeedbackCriterionItem,
|
||||
ConversationEntry, FeedbackRating,
|
||||
} from '../../db'
|
||||
import { NotationText } from '../../utils/notationParser'
|
||||
import { INST_COLORS, RATING_OPTIONS } from '../../config/constants'
|
||||
|
||||
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' },
|
||||
]
|
||||
|
||||
interface Props {
|
||||
institutees: Consultant[]
|
||||
fbCategories: FeedbackCategory[]
|
||||
fbItems: FeedbackCriterionItem[]
|
||||
entries: ConversationEntry[]
|
||||
activeInstId: number | null
|
||||
activeEntryId: number | null
|
||||
entryNote: string
|
||||
editingId: number | null
|
||||
editNote: string
|
||||
noteRef: React.RefObject<HTMLTextAreaElement | null>
|
||||
displayName: (inst: Consultant) => string
|
||||
tagLabel: (inst: Consultant) => string
|
||||
fillerTotal: (instId: number) => number
|
||||
getEntryScore: (entryId: number, categoryId: number) => FeedbackRating | null
|
||||
onActivateInstitutee: (id: number) => void
|
||||
onCloseActiveEntry: () => void
|
||||
onInsertNotation: (sym: string) => void
|
||||
onEntryNoteChange: (note: string) => void
|
||||
onSaveEntryNote: () => void
|
||||
onIncrementFiller: () => void
|
||||
onSetEntryScore: (entryId: number, categoryId: number, score: FeedbackRating) => void
|
||||
onStartEdit: (entry: ConversationEntry) => void
|
||||
onSaveEdit: (entryId: number) => void
|
||||
onCancelEdit: () => void
|
||||
onEditNoteChange: (note: string) => void
|
||||
onDeleteEntry: (entryId: number) => void
|
||||
onAdjustFiller: (entry: ConversationEntry, delta: number) => void
|
||||
}
|
||||
|
||||
export function ConversationTab({
|
||||
institutees, fbCategories, fbItems, entries,
|
||||
activeInstId, activeEntryId, entryNote, editingId, editNote, noteRef,
|
||||
displayName, tagLabel, fillerTotal, getEntryScore,
|
||||
onActivateInstitutee, onCloseActiveEntry, onInsertNotation,
|
||||
onEntryNoteChange, onSaveEntryNote, onIncrementFiller, onSetEntryScore,
|
||||
onStartEdit, onSaveEdit, onCancelEdit, onEditNoteChange, onDeleteEntry, onAdjustFiller,
|
||||
}: Props) {
|
||||
const activeInstIdx = institutees.findIndex(c => c.id === activeInstId)
|
||||
const activeColor = INST_COLORS[activeInstIdx % INST_COLORS.length]
|
||||
const activeEntry = entries.find(e => e.id === activeEntryId)
|
||||
const pastEntries = [...entries].filter(e => e.id !== activeEntryId).reverse()
|
||||
|
||||
return (
|
||||
<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-brand') : '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={() => onActivateInstitutee(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={onCloseActiveEntry}
|
||||
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={() => onInsertNotation(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={onIncrementFiller}
|
||||
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-brand"
|
||||
rows={4}
|
||||
placeholder="Notizen… (+ gut, (!) negativ mit Abstrichen, > Kundeninput, [Slide 3])"
|
||||
value={entryNote}
|
||||
onChange={e => onEntryNoteChange(e.target.value)}
|
||||
onBlur={onSaveEntryNote}
|
||||
/>
|
||||
|
||||
{/* Kategorie-Bewertung (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={() => onSetEntryScore(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-brand bg-white"
|
||||
rows={3}
|
||||
value={editNote}
|
||||
onChange={e => onEditNoteChange(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500">Füllwörter:</span>
|
||||
<button onClick={() => onAdjustFiller(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={() => onAdjustFiller(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={() => onSaveEdit(entry.id!)}
|
||||
className="text-xs bg-brand text-white px-3 py-1.5 rounded-lg">Speichern</button>
|
||||
<button onClick={onCancelEdit}
|
||||
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={() => onStartEdit(entry)}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 px-1.5 py-1 rounded leading-none">✏️</button>
|
||||
<button onClick={() => onDeleteEntry(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>
|
||||
)
|
||||
}
|
||||
422
src/pages/meeting/MeetingView.tsx
Normal file
422
src/pages/meeting/MeetingView.tsx
Normal file
|
|
@ -0,0 +1,422 @@
|
|||
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'
|
||||
import { RATING_NUM_MAP } from '../../config/constants'
|
||||
import { ConversationTab } from './ConversationTab'
|
||||
import { AssessmentTab } from './AssessmentTab'
|
||||
|
||||
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)
|
||||
const noteRef = useRef<HTMLTextAreaElement>(null)
|
||||
const notesTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
const tagLabel = (inst: Consultant) => displayName(inst)
|
||||
|
||||
const fillerTotal = (instId: number) =>
|
||||
entries.filter(e => e.instituteeId === instId).reduce((s, e) => s + (e.fillerCount ?? 0), 0)
|
||||
|
||||
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
|
||||
const visibleCatIds = new Set(filteredItems.map(i => i.categoryId))
|
||||
setFbItems(filteredItems)
|
||||
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])
|
||||
|
||||
// ── Conversation handlers ─────────────────────────────────────────────────
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
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))
|
||||
}
|
||||
|
||||
const getEntryScore = (entryId: number, categoryId: number): FeedbackRating | null =>
|
||||
scores.find(s => s.conversationEntryId === entryId && s.criteriaId === categoryId)?.score ?? null
|
||||
|
||||
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())
|
||||
}
|
||||
|
||||
// ── Assessment handlers ───────────────────────────────────────────────────
|
||||
|
||||
const getAssessmentScore = (instituteeId: number, itemId: number): FeedbackRating | null =>
|
||||
assessments.find(a => a.instituteeId === instituteeId && a.criteriaId === itemId)?.score ?? null
|
||||
|
||||
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 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())
|
||||
}
|
||||
|
||||
const autoCalcAssessment = async (instituteeId: number) => {
|
||||
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 + RATING_NUM_MAP[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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Meeting-level handlers ────────────────────────────────────────────────
|
||||
|
||||
const saveGeneralNotes = (val: string) => {
|
||||
setGeneralNotes(val)
|
||||
if (notesTimer.current) clearTimeout(notesTimer.current)
|
||||
notesTimer.current = setTimeout(() => db.meetingInstances.update(meetingId, { generalNotes: val }), 600)
|
||||
}
|
||||
|
||||
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 name = assignment?.assignmentNumber ?? assignment?.title ?? 'export'
|
||||
return `${name}_${date}_${label}${idx}.${ext}`
|
||||
}
|
||||
|
||||
const handleExportMd = async () => {
|
||||
try { downloadFile(await exportMeetingAsMarkdown(meetingId), buildFilename('md'), 'text/markdown') }
|
||||
catch (e) { console.error(e) }
|
||||
setShowExportMenu(false)
|
||||
}
|
||||
|
||||
const handleExportJson = async () => {
|
||||
try { downloadFile(await exportMeetingAsJson(meetingId), 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 finishMeeting = async () => {
|
||||
await saveEntryNote()
|
||||
await db.meetingInstances.update(meetingId, { status: 'done' })
|
||||
navigate(`/assignment/${assignment?.id}`)
|
||||
}
|
||||
|
||||
if (!meeting || !template) return <div className="text-center py-10 text-gray-400">Lädt…</div>
|
||||
|
||||
const hasConv = template.hasConversation
|
||||
const hasAssess = template.hasAssessment
|
||||
|
||||
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-brand mb-0.5 block">← Assignment</button>
|
||||
{assignment?.assignmentNumber && (
|
||||
<div className="text-xs font-semibold text-brand 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">
|
||||
<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-brand 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-brand 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-brand shadow-sm' : 'text-gray-500'
|
||||
}`}>
|
||||
Gesamtbewertung
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'conversation' && hasConv && (
|
||||
<ConversationTab
|
||||
institutees={institutees}
|
||||
fbCategories={fbCategories}
|
||||
fbItems={fbItems}
|
||||
entries={entries}
|
||||
activeInstId={activeInstId}
|
||||
activeEntryId={activeEntryId}
|
||||
entryNote={entryNote}
|
||||
editingId={editingId}
|
||||
editNote={editNote}
|
||||
noteRef={noteRef}
|
||||
displayName={displayName}
|
||||
tagLabel={tagLabel}
|
||||
fillerTotal={fillerTotal}
|
||||
getEntryScore={getEntryScore}
|
||||
onActivateInstitutee={activateInstitutee}
|
||||
onCloseActiveEntry={closeActiveEntry}
|
||||
onInsertNotation={insertNotation}
|
||||
onEntryNoteChange={setEntryNote}
|
||||
onSaveEntryNote={saveEntryNote}
|
||||
onIncrementFiller={incrementFiller}
|
||||
onSetEntryScore={setEntryScore}
|
||||
onStartEdit={startEdit}
|
||||
onSaveEdit={saveEdit}
|
||||
onCancelEdit={() => setEditingId(null)}
|
||||
onEditNoteChange={setEditNote}
|
||||
onDeleteEntry={deleteEntry}
|
||||
onAdjustFiller={adjustFiller}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tab === 'assessment' && hasAssess && (
|
||||
<AssessmentTab
|
||||
institutees={institutees}
|
||||
fbCategories={fbCategories}
|
||||
fbItems={fbItems}
|
||||
assessments={assessments}
|
||||
hasConv={hasConv}
|
||||
tagLabel={tagLabel}
|
||||
fillerTotal={fillerTotal}
|
||||
getAssessmentScore={getAssessmentScore}
|
||||
onSetAssessmentScore={setAssessmentScore}
|
||||
onSaveAssessmentNote={saveAssessmentNote}
|
||||
onAutoCalc={autoCalcAssessment}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user