Files
MOPC-Portal/src/components/admin/assignment/coverage-report.tsx
Matt ef1bf24388
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m5s
Fix evaluation criteria, jury preferences, assignment config, and dashboard stats
- Fix criteria not showing for jurors: fetch active form independently via
  getStageForm query instead of relying on existing evaluation record
- Fix scoringMode default from 'global' to 'criteria' (matching schema)
- Parse scale string format ("1-10") into minScore/maxScore for criteria display
- Fix COI dialog dismissal: prevent outside click on evaluate page Dialog
- Fix requiredReviews hardcoded to 3: read from round configJson in 4 locations
- Add jury preferences banner for unconfirmed caps on jury dashboard
- Add updateJuryPreferences tRPC procedure for self-service cap/ratio
- Simplify onboarding: always show jury step, allow cap up to 50
- Add role/ratio/availability fields to jury member invite dialog
- Simplify jury group settings (keep only defaultMaxAssignments)
- Enforce deliberation showCollectiveRankings flag for non-admin users
- Redesign dashboard stat cards: editorial data strip on mobile,
  clean grid layout on desktop (no more generic card pattern)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 12:33:20 +01:00

100 lines
3.6 KiB
TypeScript

'use client'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { AlertCircle, CheckCircle2, Users } from 'lucide-react'
interface CoverageReportProps {
roundId: string
requiredReviews?: number
}
export function CoverageReport({ roundId, requiredReviews = 3 }: CoverageReportProps) {
const { data: coverage, isLoading } = trpc.roundAssignment.coverageReport.useQuery(
{ roundId, requiredReviews },
{ refetchInterval: 15_000 },
)
if (isLoading) {
return (
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
{[1, 2, 3].map((i) => (
<Skeleton key={i} className="h-32" />
))}
</div>
)
}
if (!coverage) {
return <p className="text-muted-foreground">No coverage data available</p>
}
const totalAssigned = coverage.fullyAssigned || 0
const totalProjects = coverage.totalProjects || 0
const avgPerJuror = coverage.avgReviewsPerProject?.toFixed(1) || '0'
const unassignedCount = coverage.unassigned || 0
return (
<div className="space-y-4">
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Assigned</CardTitle>
<CheckCircle2 className="h-4 w-4 text-green-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalAssigned}</div>
<p className="text-xs text-muted-foreground">
{totalProjects > 0
? `${((totalAssigned / totalProjects) * 100).toFixed(1)}% coverage`
: 'No projects'}
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Avg Per Juror</CardTitle>
<Users className="h-4 w-4 text-blue-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{avgPerJuror}</div>
<p className="text-xs text-muted-foreground">Assignments per juror</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Unassigned</CardTitle>
<AlertCircle className="h-4 w-4 text-amber-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{unassignedCount}</div>
<p className="text-xs text-muted-foreground">
Projects below {requiredReviews} reviews
</p>
</CardContent>
</Card>
</div>
{coverage.unassigned > 0 && (
<Card className="border-amber-500">
<CardHeader>
<CardTitle className="text-sm">Coverage Warnings</CardTitle>
<CardDescription>Issues detected in assignment coverage</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-1 text-sm">
<li className="flex items-start gap-2">
<AlertCircle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
<span>{coverage.unassigned} projects have insufficient coverage</span>
</li>
</ul>
</CardContent>
</Card>
)}
</div>
)
}