Matt
f3fd9eebee
Some checks failed
Build and Push Docker Image / build (push) Has been cancelled
- Add roles UserRole[] to User model with migration + backfill from existing role column - Update auth JWT/session to propagate roles array with [role] fallback for stale tokens - Update tRPC hasRole() middleware and add userHasRole() helper for inline role checks - Update ~15 router inline checks and ~13 DB queries to use roles array - Add updateRoles admin mutation with SUPER_ADMIN guard and priority-based primary role - Add role switcher UI in admin sidebar and role-nav for multi-role users - Remove redundant stats cards from round detail, add window dates to header banner - Merge Members section into JuryProgressTable with inline cap editor and remove buttons - Reorder round detail assignments tab: Progress > Score Dist > Assignments > Coverage > Jury Group - Make score distribution fill full vertical height, reassignment history always open - Add per-juror progress bars to admin dashboard ActiveRoundPanel for EVALUATION rounds - Fix evaluation submit bug: use isSubmitting state instead of startMutation.isPending Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
import { trpc } from '@/lib/trpc/client'
|
|
import { cn } from '@/lib/utils'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
export type ScoreDistributionProps = {
|
|
roundId: string
|
|
}
|
|
|
|
export function ScoreDistribution({ roundId }: ScoreDistributionProps) {
|
|
const { data: dist, isLoading } = trpc.analytics.getRoundScoreDistribution.useQuery(
|
|
{ roundId },
|
|
{ refetchInterval: 15_000 },
|
|
)
|
|
|
|
const maxCount = useMemo(() =>
|
|
dist ? Math.max(...dist.globalDistribution.map((b) => b.count), 1) : 1,
|
|
[dist])
|
|
|
|
return (
|
|
<Card className="flex flex-col">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Score Distribution</CardTitle>
|
|
<CardDescription>
|
|
{dist ? `${dist.totalEvaluations} evaluations \u2014 avg ${dist.averageGlobalScore.toFixed(1)}` : 'Loading...'}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col flex-1 pb-4">
|
|
{isLoading ? (
|
|
<div className="flex items-end gap-1 flex-1 min-h-[120px]">
|
|
{Array.from({ length: 10 }).map((_, i) => <Skeleton key={i} className="flex-1 h-full" />)}
|
|
</div>
|
|
) : !dist || dist.totalEvaluations === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-6">
|
|
No evaluations submitted yet
|
|
</p>
|
|
) : (
|
|
<div className="flex gap-1 flex-1 min-h-[120px]">
|
|
{dist.globalDistribution.map((bucket) => {
|
|
const heightPct = (bucket.count / maxCount) * 100
|
|
return (
|
|
<div key={bucket.score} className="flex-1 flex flex-col items-center gap-1 h-full">
|
|
<span className="text-[9px] text-muted-foreground">{bucket.count || ''}</span>
|
|
<div className="w-full flex-1 relative">
|
|
<div className={cn(
|
|
'absolute inset-x-0 bottom-0 rounded-t transition-all',
|
|
bucket.score <= 3 ? 'bg-red-400' :
|
|
bucket.score <= 6 ? 'bg-amber-400' :
|
|
'bg-emerald-400',
|
|
)} style={{ height: `${Math.max(heightPct, 4)}%` }} />
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground">{bucket.score}</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|