Jury evaluation UX overhaul + admin review features
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m53s
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m53s
- Fix project documents not displaying on jury project page (rewrote MultiWindowDocViewer to use file.listByProject) - Add working download/preview for project files via presigned URLs - Display project tags on jury project detail page - Add autosave for evaluation drafts (debounced 3s + save on unmount/beforeunload) - Support mixed criterion types: numeric scores, yes/no booleans, text responses, section headers - Replace inline criteria editor with rich EvaluationFormBuilder on admin round page - Remove COI dialog from evaluation page - Update AI summary service to handle boolean/text criteria (yes/no counts, text synthesis) - Update EvaluationSummaryCard to show boolean criteria bars and text responses - Add evaluation detail sheet on admin project page (click juror row to view full scores + feedback) - Add Recent Evaluations dashboard widget showing latest jury reviews Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { Suspense, use } from 'react'
|
||||
import { Suspense, use, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import type { Route } from 'next'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
@@ -28,6 +28,13 @@ import { FileUpload } from '@/components/shared/file-upload'
|
||||
import { ProjectLogoWithUrl } from '@/components/shared/project-logo-with-url'
|
||||
import { UserAvatar } from '@/components/shared/user-avatar'
|
||||
import { EvaluationSummaryCard } from '@/components/admin/evaluation-summary-card'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet'
|
||||
import { AnimatedCard } from '@/components/shared/animated-container'
|
||||
import {
|
||||
ArrowLeft,
|
||||
@@ -51,6 +58,8 @@ import {
|
||||
UserPlus,
|
||||
Loader2,
|
||||
ScanSearch,
|
||||
Eye,
|
||||
MessageSquare,
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { formatDate, formatDateOnly } from '@/lib/utils'
|
||||
@@ -117,6 +126,10 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
|
||||
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
// State for evaluation detail sheet
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [selectedEvalAssignment, setSelectedEvalAssignment] = useState<any>(null)
|
||||
|
||||
if (isLoading) {
|
||||
return <ProjectDetailSkeleton />
|
||||
}
|
||||
@@ -728,11 +741,20 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Score</TableHead>
|
||||
<TableHead>Decision</TableHead>
|
||||
<TableHead className="w-10"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{assignments.map((assignment) => (
|
||||
<TableRow key={assignment.id}>
|
||||
<TableRow
|
||||
key={assignment.id}
|
||||
className={assignment.evaluation?.status === 'SUBMITTED' ? 'cursor-pointer hover:bg-muted/50' : ''}
|
||||
onClick={() => {
|
||||
if (assignment.evaluation?.status === 'SUBMITTED') {
|
||||
setSelectedEvalAssignment(assignment)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<UserAvatar
|
||||
@@ -806,6 +828,11 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{assignment.evaluation?.status === 'SUBMITTED' && (
|
||||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
@@ -815,6 +842,13 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
|
||||
</AnimatedCard>
|
||||
)}
|
||||
|
||||
{/* Evaluation Detail Sheet */}
|
||||
<EvaluationDetailSheet
|
||||
assignment={selectedEvalAssignment}
|
||||
open={!!selectedEvalAssignment}
|
||||
onOpenChange={(open) => { if (!open) setSelectedEvalAssignment(null) }}
|
||||
/>
|
||||
|
||||
{/* AI Evaluation Summary */}
|
||||
{assignments && assignments.length > 0 && stats && stats.totalEvaluations > 0 && (
|
||||
<EvaluationSummaryCard
|
||||
@@ -897,6 +931,173 @@ function AnalyzeDocumentsButton({ projectId, onComplete }: { projectId: string;
|
||||
)
|
||||
}
|
||||
|
||||
function EvaluationDetailSheet({
|
||||
assignment,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
assignment: any
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}) {
|
||||
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
|
||||
|
||||
// Try to get the evaluation form for labels
|
||||
const roundId = assignment.roundId as string | undefined
|
||||
const { data: activeForm } = trpc.evaluation.getStageForm.useQuery(
|
||||
{ roundId: roundId ?? '' },
|
||||
{ enabled: !!roundId }
|
||||
)
|
||||
|
||||
// Build label lookup from form criteria
|
||||
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 (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="sm:max-w-lg overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-2">
|
||||
<UserAvatar user={assignment.user} avatarUrl={assignment.user.avatarUrl} size="sm" />
|
||||
{assignment.user.name || assignment.user.email}
|
||||
</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}/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 ? (
|
||||
<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 && (
|
||||
<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') {
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* Feedback Text */}
|
||||
{ev.feedbackText && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2 flex items-center gap-2">
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
Feedback
|
||||
</h4>
|
||||
<div className="text-sm text-muted-foreground p-3 rounded-lg border bg-muted/30 whitespace-pre-wrap leading-relaxed">
|
||||
{ev.feedbackText}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ProjectDetailPage({ params }: PageProps) {
|
||||
const { id } = use(params)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user