Admin dashboard & round management UX overhaul
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m43s
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m43s
- Extract round detail monolith (2900→600 lines) into 13 standalone components - Add shared round/status config (round-config.ts) replacing 4 local copies - Delete 12 legacy competition-scoped pages, merge project pool into projects page - Add round-type-specific dashboard stat panels (submission, mentoring, live final, deliberation, summary) - Add contextual header quick actions based on active round type - Improve pipeline visualization: progress bars, checkmarks, chevron connectors, overflow fix - Add config tab completion dots (green/amber/red) and inline validation warnings - Enhance juries page with round assignments, member avatars, and cap mode badges - Add context-aware project list (recent submissions vs active evaluations) - Move competition settings into Manage Editions page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
64
src/components/admin/round/score-distribution.tsx
Normal file
64
src/components/admin/round/score-distribution.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
'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>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Score Distribution</CardTitle>
|
||||
<CardDescription>
|
||||
{dist ? `${dist.totalEvaluations} evaluations \u2014 avg ${dist.averageGlobalScore.toFixed(1)}` : 'Loading...'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="flex items-end gap-1 h-32">
|
||||
{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 h-32">
|
||||
{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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user