feat: admin evaluation editing, ranking improvements, status transition fix
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m26s
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:
305
src/components/admin/evaluation-edit-sheet.tsx
Normal file
305
src/components/admin/evaluation-edit-sheet.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user