feat: admin evaluation editing, ranking improvements, status transition fix
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m26s

- Add adminEditEvaluation mutation and getJurorEvaluations query
- Create shared EvaluationEditSheet component with inline feedback editing
- Add Evaluations tab to member detail page (grouped by round)
- Make jury group member names clickable (link to member detail)
- Replace inline EvaluationDetailSheet on project page with shared component
- Fix project status transition validation (skip when status unchanged)
- Fix frontend to not send status when unchanged on project edit
- Ranking dashboard improvements and boolean decision converter fixes
- Backfill script updates for binary decisions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-02 10:46:52 +01:00
parent 49e706f2cf
commit c6ebd169dd
11 changed files with 857 additions and 245 deletions

View File

@@ -0,0 +1,305 @@
'use client'
import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet'
import { UserAvatar } from '@/components/shared/user-avatar'
import { toast } from 'sonner'
import { formatDate } from '@/lib/utils'
import {
BarChart3,
ThumbsUp,
ThumbsDown,
MessageSquare,
Pencil,
Loader2,
Check,
X,
} from 'lucide-react'
type EvaluationEditSheetProps = {
/** The assignment object with user, evaluation, and roundId */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
assignment: any
open: boolean
onOpenChange: (open: boolean) => void
/** Called after a successful feedback edit */
onSaved?: () => void
}
export function EvaluationEditSheet({
assignment,
open,
onOpenChange,
onSaved,
}: EvaluationEditSheetProps) {
const [isEditing, setIsEditing] = useState(false)
const [editedFeedback, setEditedFeedback] = useState('')
const editMutation = trpc.evaluation.adminEditEvaluation.useMutation({
onSuccess: () => {
toast.success('Feedback updated')
setIsEditing(false)
onSaved?.()
},
onError: (err) => toast.error(err.message),
})
if (!assignment?.evaluation) return null
const ev = assignment.evaluation
const criterionScores = (ev.criterionScoresJson || {}) as Record<string, number | boolean | string>
const hasScores = Object.keys(criterionScores).length > 0
const roundId = assignment.roundId as string | undefined
return (
<Sheet open={open} onOpenChange={(v) => {
if (!v) setIsEditing(false)
onOpenChange(v)
}}>
<SheetContent className="sm:max-w-lg overflow-y-auto">
<SheetHeader>
<SheetTitle className="flex items-center gap-2">
{assignment.user && (
<UserAvatar user={assignment.user} avatarUrl={assignment.user.avatarUrl} size="sm" />
)}
{assignment.user?.name || assignment.user?.email || 'Juror'}
</SheetTitle>
<SheetDescription>
{ev.submittedAt
? `Submitted ${formatDate(ev.submittedAt)}`
: 'Evaluation details'}
</SheetDescription>
</SheetHeader>
<div className="space-y-6 mt-6">
{/* Global stats */}
<div className="grid grid-cols-2 gap-3">
<div className="p-3 rounded-lg bg-muted">
<p className="text-xs text-muted-foreground">Score</p>
<p className="text-2xl font-bold">
{ev.globalScore !== null && ev.globalScore !== undefined ? `${ev.globalScore}/10` : '-'}
</p>
</div>
<div className="p-3 rounded-lg bg-muted">
<p className="text-xs text-muted-foreground">Decision</p>
<div className="mt-1">
{ev.binaryDecision !== null && ev.binaryDecision !== undefined ? (
ev.binaryDecision ? (
<div className="flex items-center gap-1.5 text-emerald-600">
<ThumbsUp className="h-5 w-5" />
<span className="font-semibold">Yes</span>
</div>
) : (
<div className="flex items-center gap-1.5 text-red-600">
<ThumbsDown className="h-5 w-5" />
<span className="font-semibold">No</span>
</div>
)
) : (
<span className="text-2xl font-bold">-</span>
)}
</div>
</div>
</div>
{/* Criterion Scores */}
{hasScores && (
<CriterionScoresSection criterionScores={criterionScores} roundId={roundId} />
)}
{/* Feedback Text — editable */}
<FeedbackSection
evaluationId={ev.id}
feedbackText={ev.feedbackText}
isEditing={isEditing}
editedFeedback={editedFeedback}
onStartEdit={() => {
setEditedFeedback(ev.feedbackText || '')
setIsEditing(true)
}}
onCancelEdit={() => setIsEditing(false)}
onSave={() => {
editMutation.mutate({
evaluationId: ev.id,
feedbackText: editedFeedback,
})
}}
onChangeFeedback={setEditedFeedback}
isSaving={editMutation.isPending}
/>
</div>
</SheetContent>
</Sheet>
)
}
function CriterionScoresSection({
criterionScores,
roundId,
}: {
criterionScores: Record<string, number | boolean | string>
roundId?: string
}) {
const { data: activeForm } = trpc.evaluation.getStageForm.useQuery(
{ roundId: roundId ?? '' },
{ enabled: !!roundId }
)
const criteriaMap = new Map<string, { label: string; type: string; trueLabel?: string; falseLabel?: string }>()
if (activeForm?.criteriaJson) {
for (const c of activeForm.criteriaJson as Array<{ id: string; label: string; type?: string; trueLabel?: string; falseLabel?: string }>) {
criteriaMap.set(c.id, {
label: c.label,
type: c.type || 'numeric',
trueLabel: c.trueLabel,
falseLabel: c.falseLabel,
})
}
}
return (
<div>
<h4 className="text-sm font-medium mb-3 flex items-center gap-2">
<BarChart3 className="h-4 w-4" />
Criterion Scores
</h4>
<div className="space-y-2.5">
{Object.entries(criterionScores).map(([key, value]) => {
const meta = criteriaMap.get(key)
const label = meta?.label || key
const type = meta?.type || (typeof value === 'boolean' ? 'boolean' : typeof value === 'string' ? 'text' : 'numeric')
if (type === 'section_header') return null
if (type === 'boolean' || type === 'advance') {
return (
<div key={key} className="flex items-center justify-between p-2.5 rounded-lg border">
<span className="text-sm">{label}</span>
{value === true ? (
<Badge className="bg-emerald-100 text-emerald-700 border-emerald-200" variant="outline">
<ThumbsUp className="mr-1 h-3 w-3" />
{meta?.trueLabel || 'Yes'}
</Badge>
) : (
<Badge className="bg-red-100 text-red-700 border-red-200" variant="outline">
<ThumbsDown className="mr-1 h-3 w-3" />
{meta?.falseLabel || 'No'}
</Badge>
)}
</div>
)
}
if (type === 'text') {
return (
<div key={key} className="space-y-1">
<span className="text-sm font-medium">{label}</span>
<div className="text-sm text-muted-foreground p-2.5 rounded-lg border bg-muted/50 whitespace-pre-wrap">
{typeof value === 'string' ? value : String(value)}
</div>
</div>
)
}
// Numeric
return (
<div key={key} className="flex items-center gap-3 p-2.5 rounded-lg border">
<span className="text-sm flex-1 truncate">{label}</span>
<div className="flex items-center gap-2 shrink-0">
<div className="w-20 h-2 rounded-full bg-muted overflow-hidden">
<div
className="h-full rounded-full bg-primary"
style={{ width: `${(Number(value) / 10) * 100}%` }}
/>
</div>
<span className="text-sm font-bold tabular-nums w-8 text-right">
{typeof value === 'number' ? value : '-'}
</span>
</div>
</div>
)
})}
</div>
</div>
)
}
function FeedbackSection({
evaluationId,
feedbackText,
isEditing,
editedFeedback,
onStartEdit,
onCancelEdit,
onSave,
onChangeFeedback,
isSaving,
}: {
evaluationId: string
feedbackText: string | null
isEditing: boolean
editedFeedback: string
onStartEdit: () => void
onCancelEdit: () => void
onSave: () => void
onChangeFeedback: (v: string) => void
isSaving: boolean
}) {
return (
<div>
<div className="flex items-center justify-between mb-2">
<h4 className="text-sm font-medium flex items-center gap-2">
<MessageSquare className="h-4 w-4" />
Feedback
</h4>
{!isEditing && evaluationId && (
<Button variant="ghost" size="sm" onClick={onStartEdit}>
<Pencil className="h-3 w-3 mr-1" />
Edit
</Button>
)}
</div>
{isEditing ? (
<div className="space-y-2">
<Textarea
value={editedFeedback}
onChange={(e) => onChangeFeedback(e.target.value)}
rows={8}
className="text-sm"
/>
<div className="flex justify-end gap-2">
<Button variant="outline" size="sm" onClick={onCancelEdit} disabled={isSaving}>
<X className="h-3 w-3 mr-1" />
Cancel
</Button>
<Button size="sm" onClick={onSave} disabled={isSaving}>
{isSaving ? (
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
) : (
<Check className="h-3 w-3 mr-1" />
)}
Save
</Button>
</div>
</div>
) : feedbackText ? (
<div className="text-sm text-muted-foreground p-3 rounded-lg border bg-muted/30 whitespace-pre-wrap leading-relaxed">
{feedbackText}
</div>
) : (
<p className="text-sm text-muted-foreground italic">No feedback provided</p>
)}
</div>
)
}

View File

@@ -66,11 +66,18 @@ type ProjectInfo = {
country: string | null
}
type JurorScore = {
jurorName: string
globalScore: number | null
decision: boolean | null
}
type SortableProjectRowProps = {
projectId: string
currentRank: number
entry: RankedProjectEntry | undefined
projectInfo: ProjectInfo | undefined
jurorScores: JurorScore[] | undefined
onSelect: () => void
isSelected: boolean
}
@@ -82,6 +89,7 @@ function SortableProjectRow({
currentRank,
entry,
projectInfo,
jurorScores,
onSelect,
isSelected,
}: SortableProjectRowProps) {
@@ -102,6 +110,10 @@ function SortableProjectRow({
// isOverridden: current position differs from AI-assigned rank
const isOverridden = entry !== undefined && currentRank !== entry.rank
// Compute yes count from juror scores
const yesCount = jurorScores?.filter((j) => j.decision === true).length ?? 0
const totalJurors = jurorScores?.length ?? entry?.evaluatorCount ?? 0
return (
<div
ref={setNodeRef}
@@ -150,26 +162,57 @@ function SortableProjectRow({
)}
</div>
{/* Stats */}
{entry && (
<div className="flex items-center gap-4 flex-shrink-0 text-xs text-muted-foreground">
<span title="Composite score">
<BarChart3 className="inline h-3 w-3 mr-0.5" />
{Math.round(entry.compositeScore * 100)}%
{/* Juror scores + advance decision */}
<div className="flex items-center gap-3 flex-shrink-0">
{/* Individual juror score pills */}
{jurorScores && jurorScores.length > 0 ? (
<div className="flex items-center gap-1" title={jurorScores.map((j) => `${j.jurorName}: ${j.globalScore ?? '—'}/10`).join('\n')}>
{jurorScores.map((j, i) => (
<span
key={i}
className={cn(
'inline-flex items-center justify-center rounded-md px-1.5 py-0.5 text-xs font-medium border',
j.globalScore != null && j.globalScore >= 8
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
: j.globalScore != null && j.globalScore >= 6
? 'bg-blue-50 text-blue-700 border-blue-200'
: j.globalScore != null && j.globalScore >= 4
? 'bg-amber-50 text-amber-700 border-amber-200'
: 'bg-red-50 text-red-700 border-red-200',
)}
title={`${j.jurorName}: ${j.globalScore ?? '—'}/10`}
>
{j.globalScore ?? '—'}
</span>
))}
</div>
) : entry?.avgGlobalScore !== null && entry?.avgGlobalScore !== undefined ? (
<span className="text-xs text-muted-foreground">
Avg {entry.avgGlobalScore.toFixed(1)}
</span>
{entry.avgGlobalScore !== null && (
<span title="Average global score">
Avg {entry.avgGlobalScore.toFixed(1)}
</span>
) : null}
{/* Average score */}
{entry?.avgGlobalScore !== null && entry?.avgGlobalScore !== undefined && jurorScores && jurorScores.length > 1 && (
<span className="text-xs font-medium text-muted-foreground" title="Average score">
= {entry.avgGlobalScore.toFixed(1)}
</span>
)}
{/* Advance decision indicator */}
<div className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
yesCount > 0
? 'bg-emerald-100 text-emerald-700'
: 'bg-gray-100 text-gray-500',
)}>
{yesCount > 0 ? (
<>{yesCount}/{totalJurors} Yes</>
) : (
<>{totalJurors} juror{totalJurors !== 1 ? 's' : ''}</>
)}
<span title="Yes/No vote rate">
Yes {Math.round(entry.passRate * 100)}%
</span>
<span title="Evaluator count">
{entry.evaluatorCount} juror{entry.evaluatorCount !== 1 ? 's' : ''}
</span>
</div>
)}
</div>
</div>
)
}
@@ -226,6 +269,10 @@ export function RankingDashboard({ competitionId: _competitionId, roundId }: Ran
const { data: roundData } = trpc.round.getById.useQuery({ id: roundId })
const { data: evalScores } = trpc.ranking.roundEvaluationScores.useQuery(
{ roundId },
)
// ─── tRPC mutations ───────────────────────────────────────────────────────
const utils = trpc.useUtils()
@@ -236,13 +283,21 @@ export function RankingDashboard({ competitionId: _competitionId, roundId }: Ran
// Do NOT invalidate getSnapshot — would reset localOrder
})
const [rankingInProgress, setRankingInProgress] = useState(false)
const triggerRankMutation = trpc.ranking.triggerAutoRank.useMutation({
onMutate: () => setRankingInProgress(true),
onSuccess: () => {
toast.success('Ranking complete. Reload to see results.')
toast.success('Ranking complete!')
initialized.current = false // allow re-init on next snapshot load
void utils.ranking.listSnapshots.invalidate({ roundId })
void utils.ranking.getSnapshot.invalidate()
setRankingInProgress(false)
},
onError: (err) => {
toast.error(err.message)
setRankingInProgress(false)
},
onError: (err) => toast.error(err.message),
})
const advanceMutation = trpc.round.advanceProjects.useMutation({
@@ -379,28 +434,43 @@ export function RankingDashboard({ competitionId: _competitionId, roundId }: Ran
// ─── Empty state ──────────────────────────────────────────────────────────
if (!latestSnapshotId) {
return (
<Card>
<CardContent className="flex flex-col items-center justify-center gap-4 py-12 text-center">
<BarChart3 className="h-10 w-10 text-muted-foreground" />
<div>
<p className="font-medium">No ranking available yet</p>
<p className="mt-1 text-sm text-muted-foreground">
Run ranking from the Config tab to generate results, or trigger it now.
</p>
</div>
<Button
onClick={() => triggerRankMutation.mutate({ roundId })}
disabled={triggerRankMutation.isPending}
>
{triggerRankMutation.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
<div className="space-y-4">
<Card>
<CardContent className="flex flex-col items-center justify-center gap-4 py-12 text-center">
{rankingInProgress ? (
<>
<Loader2 className="h-10 w-10 text-blue-500 animate-spin" />
<div>
<p className="font-medium">AI ranking in progress&hellip;</p>
<p className="mt-1 text-sm text-muted-foreground">
This may take a minute. You can continue working results will appear automatically.
</p>
</div>
<div className="h-2 w-48 rounded-full bg-blue-100 dark:bg-blue-900 overflow-hidden">
<div className="h-full w-full rounded-full bg-blue-500 animate-pulse" />
</div>
</>
) : (
<RefreshCw className="mr-2 h-4 w-4" />
<>
<BarChart3 className="h-10 w-10 text-muted-foreground" />
<div>
<p className="font-medium">No ranking available yet</p>
<p className="mt-1 text-sm text-muted-foreground">
Run ranking from the Config tab to generate results, or trigger it now.
</p>
</div>
<Button
onClick={() => triggerRankMutation.mutate({ roundId })}
disabled={triggerRankMutation.isPending}
>
<RefreshCw className="mr-2 h-4 w-4" />
Run Ranking Now
</Button>
</>
)}
Run Ranking Now
</Button>
</CardContent>
</Card>
</CardContent>
</Card>
</div>
)
}
@@ -444,14 +514,19 @@ export function RankingDashboard({ competitionId: _competitionId, roundId }: Ran
size="sm"
variant="outline"
onClick={() => triggerRankMutation.mutate({ roundId })}
disabled={triggerRankMutation.isPending}
disabled={rankingInProgress}
>
{triggerRankMutation.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{rankingInProgress ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Ranking&hellip;
</>
) : (
<RefreshCw className="mr-2 h-4 w-4" />
<>
<RefreshCw className="mr-2 h-4 w-4" />
Run Ranking
</>
)}
Run Ranking
</Button>
<Button
size="sm"
@@ -469,6 +544,26 @@ export function RankingDashboard({ competitionId: _competitionId, roundId }: Ran
</CardHeader>
</Card>
{/* Ranking in-progress banner */}
{rankingInProgress && (
<Card className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/30">
<CardContent className="flex items-center gap-3 py-4">
<Loader2 className="h-5 w-5 animate-spin text-blue-600 dark:text-blue-400 flex-shrink-0" />
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-blue-900 dark:text-blue-200">
AI ranking in progress&hellip;
</p>
<p className="text-xs text-blue-700 dark:text-blue-400">
This may take a minute. You can continue working results will appear automatically.
</p>
</div>
<div className="h-1.5 w-32 rounded-full bg-blue-200 dark:bg-blue-800 overflow-hidden flex-shrink-0">
<div className="h-full w-full rounded-full bg-blue-500 animate-pulse" />
</div>
</CardContent>
</Card>
)}
{/* Per-category sections */}
{(['STARTUP', 'BUSINESS_CONCEPT'] as const).map((category) => (
<Card key={category}>
@@ -520,6 +615,7 @@ export function RankingDashboard({ competitionId: _competitionId, roundId }: Ran
currentRank={index + 1}
entry={rankingMap.get(projectId)}
projectInfo={projectInfoMap.get(projectId)}
jurorScores={evalScores?.[projectId]}
onSelect={() => setSelectedProjectId(projectId)}
isSelected={selectedProjectId === projectId}
/>