99 lines
3.5 KiB
TypeScript
99 lines
3.5 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
|
|
}
|
|
|
|
export function CoverageReport({ roundId }: CoverageReportProps) {
|
|
const { data: coverage, isLoading } = trpc.roundAssignment.coverageReport.useQuery(
|
|
{ roundId, requiredReviews: 3 },
|
|
{ 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 3 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>
|
|
)
|
|
}
|