Files
MOPC-Portal/src/components/admin/evaluation-summary-card.tsx
Matt 1308c3ba87
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m23s
Admin platform audit: fix bugs, harden backend, add auto-refresh, clean dead code
Phase 1 — Critical bugs:
- Fix deliberation participant selection (wire jury group query)
- Fix reports "By Round" tab (inline content instead of 404 route)
- Fix messages "Sent History" (add message.sent procedure, wire tab)
- Add missing fields to competition award form (criteriaText, maxRankedPicks)
- Wire LiveControlPanel buttons (cursor, voting, scores)
- Fix ResultLockControls empty snapshot (fetch actual data before lock)
- Fix SubmissionWindowManager losing fields on edit

Phase 2 — Backend fixes:
- Remove write-in-query from specialAward.get
- Fix award eligibility job overwriting manual shortlist overrides
- Fix filtering startJob deleting all prior results (defer cleanup to post-success)
- Tighten access control: protectedProcedure → adminProcedure on 8 procedures
- Add audit logging to deliberation mutations
- Add FINALIST/SEMIFINALIST delete guard on project.delete/bulkDelete

Phase 3 — Auto-refresh:
- Add refetchInterval to 15+ admin pages/components (10s–30s)
- Fix AI job polling: derive speed from job status for all viewers

Phase 4 — Dead code cleanup:
- Delete unused command-palette, pdf-report, admin-page-transition
- Remove dead subItems sidebar code, unused GripVertical import
- Replace redundant isGenerating state with mutation.isPending
- Add Role column to jury members table
- Remove misleading manual mentor assignment stub

Phase 5 — UX improvements:
- Fix rounds page single-competition assumption (add selector)
- Remove raw UUID fallback in deliberation config
- Fix programs page "Stage" → "Round" terminology

Phase 6 — Backend hardening:
- Complete logAudit calls (add prisma, ipAddress, userAgent)
- Batch analytics queries (fix N+1 in getCrossRoundComparison, getYearOverYear)
- Batch user.bulkCreate writes (assignments, jury memberships, intents)
- Remove any casts from deliberation service (typed PrismaClient + TransactionClient)
- Fix stale DeliberationStatus enum values blocking build

40 files changed, 1010 insertions(+), 612 deletions(-)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-19 08:20:13 +01:00

411 lines
14 KiB
TypeScript

'use client'
import { trpc } from '@/lib/trpc/client'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import {
Bot,
FileText,
RefreshCw,
Loader2,
CheckCircle2,
AlertTriangle,
Clock,
Users,
Target,
} from 'lucide-react'
import { toast } from 'sonner'
import { formatDistanceToNow } from 'date-fns'
interface EvaluationSummaryCardProps {
projectId: string
roundId: string
}
interface BooleanStats {
yesCount: number
noCount: number
total: number
yesPercent: number
trueLabel: string
falseLabel: string
}
interface ScoringPatterns {
averageGlobalScore: number | null
consensus: number
criterionAverages: Record<string, number>
booleanCriteria?: Record<string, BooleanStats>
textResponses?: Record<string, string[]>
evaluatorCount: number
}
interface ThemeItem {
theme: string
sentiment: 'positive' | 'negative' | 'mixed'
frequency: number
}
interface SummaryJson {
overallAssessment: string
strengths: string[]
weaknesses: string[]
themes: ThemeItem[]
recommendation: string
scoringPatterns: ScoringPatterns
}
const sentimentColors: Record<string, { badge: 'default' | 'secondary' | 'destructive'; bg: string }> = {
positive: { badge: 'default', bg: 'bg-green-500/10 text-green-700' },
negative: { badge: 'destructive', bg: 'bg-red-500/10 text-red-700' },
mixed: { badge: 'secondary', bg: 'bg-amber-500/10 text-amber-700' },
}
export function EvaluationSummaryCard({
projectId,
roundId,
}: EvaluationSummaryCardProps) {
const {
data: summary,
isLoading,
refetch,
} = trpc.evaluation.getSummary.useQuery({ projectId, roundId })
const generateMutation = trpc.evaluation.generateSummary.useMutation({
onSuccess: () => {
toast.success('AI summary generated successfully')
refetch()
},
onError: (error) => {
toast.error(error.message || 'Failed to generate summary')
},
})
const handleGenerate = () => {
generateMutation.mutate({ projectId, roundId })
}
const isGenerating = generateMutation.isPending
if (isLoading) {
return (
<Card>
<CardHeader>
<Skeleton className="h-5 w-48" />
<Skeleton className="h-4 w-64" />
</CardHeader>
<CardContent className="space-y-4">
<Skeleton className="h-20 w-full" />
<Skeleton className="h-16 w-full" />
</CardContent>
</Card>
)
}
// No summary exists yet
if (!summary) {
return (
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<FileText className="h-5 w-5" />
AI Evaluation Summary
</CardTitle>
<CardDescription>
Generate an AI-powered analysis of jury evaluations
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-6 text-center">
<FileText className="h-10 w-10 text-muted-foreground/50 mb-3" />
<p className="text-sm text-muted-foreground mb-4">
No summary generated yet. Click below to analyze submitted evaluations.
</p>
<Button onClick={handleGenerate} disabled={isGenerating}>
{isGenerating ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<FileText className="mr-2 h-4 w-4" />
)}
{isGenerating ? 'Generating...' : 'Generate Summary'}
</Button>
</div>
</CardContent>
</Card>
)
}
const summaryData = summary.summaryJson as unknown as SummaryJson
const patterns = summaryData.scoringPatterns
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle className="text-lg flex items-center gap-2">
<FileText className="h-5 w-5" />
AI Evaluation Summary
<Badge variant="outline" className="text-xs gap-1 shrink-0 ml-1">
<Bot className="h-3 w-3" />
AI Generated
</Badge>
</CardTitle>
<CardDescription className="flex items-center gap-2 mt-1">
<Clock className="h-3 w-3" />
Generated {formatDistanceToNow(new Date(summary.generatedAt), { addSuffix: true })}
{' '}using {summary.model}
</CardDescription>
</div>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline" size="sm" disabled={isGenerating}>
{isGenerating ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<RefreshCw className="mr-2 h-4 w-4" />
)}
Regenerate
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Regenerate Summary</AlertDialogTitle>
<AlertDialogDescription>
This will replace the existing AI summary with a new one.
This uses your OpenAI API quota.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleGenerate}>
Regenerate
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</CardHeader>
<CardContent className="space-y-6">
{/* Scoring Stats */}
<div className="grid gap-3 sm:grid-cols-3">
<div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
<Target className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-2xl font-bold">
{patterns.averageGlobalScore !== null
? patterns.averageGlobalScore.toFixed(1)
: '-'}
</p>
<p className="text-xs text-muted-foreground">Avg Score</p>
</div>
</div>
<div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
<CheckCircle2 className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-2xl font-bold">
{Math.round(patterns.consensus * 100)}%
</p>
<p className="text-xs text-muted-foreground">Consensus</p>
</div>
</div>
<div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
<Users className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-2xl font-bold">{patterns.evaluatorCount}</p>
<p className="text-xs text-muted-foreground">Evaluators</p>
</div>
</div>
</div>
{/* Overall Assessment */}
<div>
<p className="text-sm font-medium mb-2">Overall Assessment</p>
<p className="text-sm text-muted-foreground leading-relaxed">
{summaryData.overallAssessment}
</p>
</div>
{/* Strengths & Weaknesses */}
<div className="grid gap-4 sm:grid-cols-2">
{summaryData.strengths.length > 0 && (
<div>
<p className="text-sm font-medium mb-2 text-green-700">Strengths</p>
<ul className="space-y-1">
{summaryData.strengths.map((s, i) => (
<li key={i} className="flex items-start gap-2 text-sm">
<span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-green-500 flex-shrink-0" />
{s}
</li>
))}
</ul>
</div>
)}
{summaryData.weaknesses.length > 0 && (
<div>
<p className="text-sm font-medium mb-2 text-amber-700">Weaknesses</p>
<ul className="space-y-1">
{summaryData.weaknesses.map((w, i) => (
<li key={i} className="flex items-start gap-2 text-sm">
<span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-amber-500 flex-shrink-0" />
{w}
</li>
))}
</ul>
</div>
)}
</div>
{/* Themes */}
{summaryData.themes.length > 0 && (
<div>
<p className="text-sm font-medium mb-2">Key Themes</p>
<div className="space-y-2">
{summaryData.themes.map((theme, i) => (
<div
key={i}
className="flex items-center justify-between p-2 rounded-lg border"
>
<div className="flex items-center gap-2">
<Badge
className={sentimentColors[theme.sentiment]?.bg}
variant="outline"
>
{theme.sentiment}
</Badge>
<span className="text-sm">{theme.theme}</span>
</div>
<span className="text-xs text-muted-foreground">
{theme.frequency} mention{theme.frequency !== 1 ? 's' : ''}
</span>
</div>
))}
</div>
</div>
)}
{/* Criterion Averages (Numeric) */}
{Object.keys(patterns.criterionAverages).length > 0 && (
<div>
<p className="text-sm font-medium mb-2">Score Averages</p>
<div className="space-y-2">
{Object.entries(patterns.criterionAverages).map(([label, avg]) => (
<div key={label} className="flex items-center gap-3">
<span className="text-sm text-muted-foreground flex-1 min-w-0 truncate">
{label}
</span>
<div className="flex items-center gap-2 flex-shrink-0">
<div className="w-24 h-2 rounded-full bg-muted overflow-hidden">
<div
className="h-full rounded-full bg-primary"
style={{ width: `${(avg / 10) * 100}%` }}
/>
</div>
<span className="text-sm font-medium w-8 text-right">
{avg.toFixed(1)}
</span>
</div>
</div>
))}
</div>
</div>
)}
{/* Boolean Criteria (Yes/No) */}
{patterns.booleanCriteria && Object.keys(patterns.booleanCriteria).length > 0 && (
<div>
<p className="text-sm font-medium mb-2">Yes/No Decisions</p>
<div className="space-y-3">
{Object.entries(patterns.booleanCriteria).map(([label, stats]) => (
<div key={label} className="space-y-1">
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground truncate">
{label}
</span>
<span className="text-xs text-muted-foreground flex-shrink-0 ml-2">
{stats.yesCount} {stats.trueLabel} / {stats.noCount} {stats.falseLabel}
</span>
</div>
<div className="flex h-2 rounded-full overflow-hidden bg-muted">
{stats.yesCount > 0 && (
<div
className="h-full bg-emerald-500 transition-all"
style={{ width: `${stats.yesPercent}%` }}
/>
)}
{stats.noCount > 0 && (
<div
className="h-full bg-red-400 transition-all"
style={{ width: `${100 - stats.yesPercent}%` }}
/>
)}
</div>
<div className="flex justify-between text-xs">
<span className="text-emerald-600">{stats.yesPercent}% {stats.trueLabel}</span>
<span className="text-red-500">{100 - stats.yesPercent}% {stats.falseLabel}</span>
</div>
</div>
))}
</div>
</div>
)}
{/* Text Responses */}
{patterns.textResponses && Object.keys(patterns.textResponses).length > 0 && (
<div>
<p className="text-sm font-medium mb-2">Text Responses</p>
<div className="space-y-3">
{Object.entries(patterns.textResponses).map(([label, responses]) => (
<div key={label} className="space-y-1.5">
<p className="text-sm text-muted-foreground">{label}</p>
<div className="space-y-1.5">
{responses.map((text, i) => (
<div
key={i}
className="text-sm p-2 rounded border bg-muted/50 whitespace-pre-wrap"
>
{text}
</div>
))}
</div>
</div>
))}
</div>
</div>
)}
{/* Recommendation */}
{summaryData.recommendation && (
<div className="p-3 rounded-lg bg-blue-500/10 border border-blue-200">
<p className="text-sm font-medium text-blue-900 mb-1">
Recommendation
</p>
<p className="text-sm text-blue-700">
{summaryData.recommendation}
</p>
</div>
)}
</CardContent>
</Card>
)
}