Add round-type-specific observer reports with dynamic tabs
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m44s
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m44s
Refactor the observer reports page from a static 3-tab layout to a dynamic tab system that adapts to each round type (INTAKE, FILTERING, EVALUATION, SUBMISSION, MENTORING, LIVE_FINAL, DELIBERATION). Adds a persistent Global tab for edition-wide analytics, juror score heatmap, expandable juror assignment rows, filtering screening bar, and deliberation results with tie detection. - Add 5 observer proxy procedures to analytics router - Create JurorScoreHeatmap, ExpandableJurorTable, FilteringScreeningBar - Create 8 round-type tab components + GlobalAnalyticsTab - Reduce reports page from 914 to ~190 lines (thin dispatcher) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,26 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, Suspense, useCallback } from 'react'
|
||||
import { useState, useEffect, Suspense } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -29,32 +12,28 @@ import {
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
FileSpreadsheet,
|
||||
BarChart3,
|
||||
Users,
|
||||
Globe,
|
||||
LayoutDashboard,
|
||||
Filter,
|
||||
FolderOpen,
|
||||
TrendingUp,
|
||||
Download,
|
||||
Clock,
|
||||
Users,
|
||||
BarChart3,
|
||||
Upload,
|
||||
Presentation,
|
||||
Vote,
|
||||
} from 'lucide-react'
|
||||
import { formatDateOnly } from '@/lib/utils'
|
||||
import {
|
||||
ScoreDistributionChart,
|
||||
EvaluationTimelineChart,
|
||||
StatusBreakdownChart,
|
||||
CriteriaScoresChart,
|
||||
} from '@/components/charts'
|
||||
import { BarChart } from '@tremor/react'
|
||||
import { CsvExportDialog } from '@/components/shared/csv-export-dialog'
|
||||
import { ExportPdfButton } from '@/components/shared/export-pdf-button'
|
||||
import { AnimatedCard } from '@/components/shared/animated-container'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
|
||||
function parseSelection(value: string | null): { roundId?: string; programId?: string } {
|
||||
if (!value) return {}
|
||||
if (value.startsWith('all:')) return { programId: value.slice(4) }
|
||||
return { roundId: value }
|
||||
}
|
||||
import { GlobalAnalyticsTab } from '@/components/observer/reports/global-analytics-tab'
|
||||
import { IntakeReportTabs } from '@/components/observer/reports/intake-report-tabs'
|
||||
import { FilteringReportTabs } from '@/components/observer/reports/filtering-report-tabs'
|
||||
import { EvaluationReportTabs } from '@/components/observer/reports/evaluation-report-tabs'
|
||||
import { SubmissionReportTabs } from '@/components/observer/reports/submission-report-tabs'
|
||||
import { MentoringReportTabs } from '@/components/observer/reports/mentoring-report-tabs'
|
||||
import { LiveFinalReportTabs } from '@/components/observer/reports/live-final-report-tabs'
|
||||
import { DeliberationReportTabs } from '@/components/observer/reports/deliberation-report-tabs'
|
||||
|
||||
const ROUND_TYPE_LABELS: Record<string, string> = {
|
||||
INTAKE: 'Intake',
|
||||
@@ -77,707 +56,80 @@ type Stage = {
|
||||
programName: string
|
||||
}
|
||||
|
||||
function roundStatusLabel(status: string): string {
|
||||
if (status === 'ROUND_ACTIVE') return 'Active'
|
||||
if (status === 'ROUND_CLOSED') return 'Closed'
|
||||
if (status === 'ROUND_DRAFT') return 'Draft'
|
||||
if (status === 'ROUND_ARCHIVED') return 'Archived'
|
||||
return status
|
||||
}
|
||||
type TabDef = { value: string; label: string; icon: LucideIcon }
|
||||
|
||||
function roundStatusVariant(status: string): 'default' | 'secondary' | 'outline' {
|
||||
if (status === 'ROUND_ACTIVE') return 'default'
|
||||
if (status === 'ROUND_CLOSED') return 'secondary'
|
||||
return 'outline'
|
||||
}
|
||||
|
||||
function ProgressTab({ selectedValue, stages, stagesLoading, selectedRound }: {
|
||||
selectedValue: string | null
|
||||
stages: Stage[]
|
||||
stagesLoading: boolean
|
||||
selectedRound: Stage | undefined
|
||||
}) {
|
||||
const queryInput = parseSelection(selectedValue)
|
||||
const hasSelection = !!queryInput.roundId || !!queryInput.programId
|
||||
|
||||
const { data: overviewStats, isLoading: statsLoading } =
|
||||
trpc.analytics.getOverviewStats.useQuery(queryInput, { enabled: hasSelection })
|
||||
|
||||
const { data: timeline, isLoading: timelineLoading } =
|
||||
trpc.analytics.getEvaluationTimeline.useQuery(queryInput, { enabled: hasSelection })
|
||||
|
||||
const [csvOpen, setCsvOpen] = useState(false)
|
||||
const [csvData, setCsvData] = useState<{ data: Record<string, unknown>[]; columns: string[] } | undefined>()
|
||||
const [csvLoading, setCsvLoading] = useState(false)
|
||||
|
||||
const handleRequestCsvData = useCallback(async () => {
|
||||
setCsvLoading(true)
|
||||
const columns = ['roundName', 'roundType', 'status', 'projects', 'assignments', 'completionRate']
|
||||
const data = stages.map((s) => {
|
||||
const assigned = s._count.assignments
|
||||
const projects = s._count.projects
|
||||
const rate = assigned > 0 && projects > 0 ? Math.round((assigned / projects) * 100) : 0
|
||||
return {
|
||||
roundName: s.name,
|
||||
roundType: ROUND_TYPE_LABELS[s.roundType] || s.roundType,
|
||||
status: roundStatusLabel(s.status),
|
||||
projects,
|
||||
assignments: assigned,
|
||||
completionRate: rate,
|
||||
}
|
||||
})
|
||||
const result = { data, columns }
|
||||
setCsvData(result)
|
||||
setCsvLoading(false)
|
||||
return result
|
||||
}, [stages])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold">Progress Overview</h2>
|
||||
<p className="text-sm text-muted-foreground">Evaluation progress across rounds</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedValue && !selectedValue.startsWith('all:') && (
|
||||
<ExportPdfButton
|
||||
roundId={selectedValue}
|
||||
roundName={selectedRound?.name}
|
||||
programName={selectedRound?.programName}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCsvOpen(true)}
|
||||
disabled={stagesLoading || stages.length === 0}
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Export CSV
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CsvExportDialog
|
||||
open={csvOpen}
|
||||
onOpenChange={setCsvOpen}
|
||||
exportData={csvData}
|
||||
isLoading={csvLoading}
|
||||
filename="round-progress"
|
||||
onRequestData={handleRequestCsvData}
|
||||
/>
|
||||
|
||||
{/* Stats tiles */}
|
||||
{hasSelection && (
|
||||
<>
|
||||
{statsLoading ? (
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="space-y-0 pb-2">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-8 w-16" />
|
||||
<Skeleton className="mt-2 h-3 w-24" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : overviewStats ? (
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<AnimatedCard index={0}>
|
||||
<Card className="border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Project Count</p>
|
||||
<p className="text-2xl font-bold mt-1">{overviewStats.projectCount}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">In selection</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-blue-50 p-3">
|
||||
<FileSpreadsheet className="h-5 w-5 text-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
<AnimatedCard index={1}>
|
||||
<Card className="border-l-4 border-l-emerald-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Evaluation Count</p>
|
||||
<p className="text-2xl font-bold mt-1">{overviewStats.evaluationCount}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">Submitted</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-emerald-50 p-3">
|
||||
<TrendingUp className="h-5 w-5 text-emerald-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
<AnimatedCard index={2}>
|
||||
<Card className="border-l-4 border-l-violet-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
|
||||
<CardContent className="p-5">
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Completion Rate</p>
|
||||
<p className="text-2xl font-bold mt-1">{overviewStats.completionRate}%</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-violet-50 p-3">
|
||||
<BarChart3 className="h-5 w-5 text-violet-600" />
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={overviewStats.completionRate} className="mt-3 h-2" gradient />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Completion Timeline */}
|
||||
{hasSelection && (
|
||||
<>
|
||||
{timelineLoading ? (
|
||||
<Skeleton className="h-[320px]" />
|
||||
) : timeline?.length ? (
|
||||
<EvaluationTimelineChart data={timeline} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center py-12">
|
||||
<p className="text-muted-foreground text-sm">No evaluation timeline data available yet</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Round Breakdown Table - Desktop */}
|
||||
{stagesLoading ? (
|
||||
<Skeleton className="h-[300px]" />
|
||||
) : (
|
||||
<>
|
||||
<Card className="hidden md:block">
|
||||
<CardHeader>
|
||||
<CardTitle>Round Breakdown</CardTitle>
|
||||
<CardDescription>Progress overview for each round</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Round</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right">Projects</TableHead>
|
||||
<TableHead className="text-right">Assignments</TableHead>
|
||||
<TableHead className="min-w-[140px]">Completion</TableHead>
|
||||
<TableHead className="text-right">Avg Days</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{stages.map((stage) => {
|
||||
const projects = stage._count.projects
|
||||
const assignments = stage._count.assignments
|
||||
const evaluations = stage._count.evaluations
|
||||
const isClosed = stage.status === 'ROUND_CLOSED' || stage.status === 'ROUND_ARCHIVED'
|
||||
const rate = isClosed
|
||||
? 100
|
||||
: assignments > 0
|
||||
? Math.min(100, Math.round((evaluations / assignments) * 100))
|
||||
: 0
|
||||
return (
|
||||
<TableRow key={stage.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{stage.name}</p>
|
||||
{stage.windowCloseAt && (
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDateOnly(stage.windowCloseAt)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">
|
||||
{ROUND_TYPE_LABELS[stage.roundType] || stage.roundType}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={roundStatusVariant(stage.status)}>
|
||||
{roundStatusLabel(stage.status)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">{projects}</TableCell>
|
||||
<TableCell className="text-right">{assignments}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={rate} className="h-2 w-20" />
|
||||
<span className="text-sm tabular-nums">{rate}%</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right text-muted-foreground">-</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Round Breakdown Cards - Mobile */}
|
||||
<div className="space-y-3 md:hidden">
|
||||
<h2 className="text-base font-semibold">Round Breakdown</h2>
|
||||
{stages.map((stage) => {
|
||||
const projects = stage._count.projects
|
||||
const assignments = stage._count.assignments
|
||||
const evaluations = stage._count.evaluations
|
||||
const isClosed = stage.status === 'ROUND_CLOSED' || stage.status === 'ROUND_ARCHIVED'
|
||||
const rate = isClosed
|
||||
? 100
|
||||
: assignments > 0
|
||||
? Math.min(100, Math.round((evaluations / assignments) * 100))
|
||||
: 0
|
||||
return (
|
||||
<Card key={stage.id}>
|
||||
<CardContent className="pt-4 space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="font-medium leading-tight">{stage.name}</p>
|
||||
<Badge variant={roundStatusVariant(stage.status)} className="shrink-0">
|
||||
{roundStatusLabel(stage.status)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">
|
||||
{ROUND_TYPE_LABELS[stage.roundType] || stage.roundType}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Projects</p>
|
||||
<p className="font-medium">{projects}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs">Assignments</p>
|
||||
<p className="font-medium">{assignments}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span className="text-muted-foreground text-xs">Completion</span>
|
||||
<span className="font-medium">{rate}%</span>
|
||||
</div>
|
||||
<Progress value={rate} className="h-2" />
|
||||
</div>
|
||||
{stage.windowCloseAt && (
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
Closes: {formatDateOnly(stage.windowCloseAt)}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function JurorsTab({ selectedValue }: { selectedValue: string }) {
|
||||
const queryInput = parseSelection(selectedValue)
|
||||
const hasSelection = !!queryInput.roundId || !!queryInput.programId
|
||||
|
||||
const { data: workload, isLoading: workloadLoading } =
|
||||
trpc.analytics.getJurorWorkload.useQuery(queryInput, { enabled: hasSelection })
|
||||
|
||||
const { data: consistency, isLoading: consistencyLoading } =
|
||||
trpc.analytics.getJurorConsistency.useQuery(queryInput, { enabled: hasSelection })
|
||||
|
||||
const [csvOpen, setCsvOpen] = useState(false)
|
||||
const [csvData, setCsvData] = useState<{ data: Record<string, unknown>[]; columns: string[] } | undefined>()
|
||||
const [csvLoading, setCsvLoading] = useState(false)
|
||||
|
||||
type WorkloadItem = { id: string; name: string; assigned: number; completed: number; completionRate: number }
|
||||
type ConsistencyJuror = { userId: string; name: string; evaluationCount: number; averageScore: number; stddev: number; isOutlier: boolean }
|
||||
|
||||
const handleRequestCsvData = useCallback(async () => {
|
||||
setCsvLoading(true)
|
||||
const columns = ['name', 'assigned', 'completed', 'completionRate', 'avgScore', 'stddev', 'isOutlier']
|
||||
|
||||
const workloadMap = new Map<string, WorkloadItem>()
|
||||
if (workload) {
|
||||
for (const w of (workload as unknown as WorkloadItem[])) {
|
||||
workloadMap.set(w.id, w)
|
||||
}
|
||||
}
|
||||
|
||||
const jurors = (consistency as { overallAverage: number; jurors: ConsistencyJuror[] } | undefined)?.jurors ?? []
|
||||
const data = jurors.map((j) => {
|
||||
const w = workloadMap.get(j.userId)
|
||||
return {
|
||||
name: j.name,
|
||||
assigned: w?.assigned ?? '-',
|
||||
completed: w?.completed ?? '-',
|
||||
completionRate: w ? `${w.completionRate}%` : '-',
|
||||
avgScore: j.averageScore,
|
||||
stddev: j.stddev,
|
||||
isOutlier: j.isOutlier ? 'Yes' : 'No',
|
||||
}
|
||||
})
|
||||
|
||||
const result = { data, columns }
|
||||
setCsvData(result)
|
||||
setCsvLoading(false)
|
||||
return result
|
||||
}, [workload, consistency])
|
||||
|
||||
const isLoading = workloadLoading || consistencyLoading
|
||||
|
||||
type JurorRow = {
|
||||
userId: string
|
||||
name: string
|
||||
assigned: number
|
||||
completed: number
|
||||
completionRate: number
|
||||
averageScore: number
|
||||
stddev: number
|
||||
isOutlier: boolean
|
||||
function getRoundTabs(roundType: string): TabDef[] {
|
||||
switch (roundType) {
|
||||
case 'INTAKE':
|
||||
return [{ value: 'overview', label: 'Overview', icon: LayoutDashboard }]
|
||||
case 'FILTERING':
|
||||
return [
|
||||
{ value: 'screening', label: 'Screening', icon: Filter },
|
||||
]
|
||||
case 'EVALUATION':
|
||||
return [
|
||||
{ value: 'evaluation', label: 'Evaluation', icon: TrendingUp },
|
||||
]
|
||||
case 'SUBMISSION':
|
||||
return [{ value: 'overview', label: 'Overview', icon: Upload }]
|
||||
case 'MENTORING':
|
||||
return [{ value: 'overview', label: 'Overview', icon: Users }]
|
||||
case 'LIVE_FINAL':
|
||||
return [{ value: 'session', label: 'Session', icon: Presentation }]
|
||||
case 'DELIBERATION':
|
||||
return [
|
||||
{ value: 'deliberation', label: 'Deliberation', icon: Vote },
|
||||
]
|
||||
default:
|
||||
return []
|
||||
}
|
||||
|
||||
const jurors: JurorRow[] = (() => {
|
||||
if (!consistency) return []
|
||||
const workloadMap = new Map<string, WorkloadItem>()
|
||||
if (workload) {
|
||||
for (const w of (workload as unknown as WorkloadItem[])) {
|
||||
workloadMap.set(w.id, w)
|
||||
}
|
||||
}
|
||||
const jurorList = (consistency as { overallAverage: number; jurors: ConsistencyJuror[] }).jurors ?? []
|
||||
return jurorList
|
||||
.map((j) => {
|
||||
const w = workloadMap.get(j.userId)
|
||||
return {
|
||||
userId: j.userId,
|
||||
name: j.name,
|
||||
assigned: w?.assigned ?? 0,
|
||||
completed: w?.completed ?? 0,
|
||||
completionRate: w?.completionRate ?? 0,
|
||||
averageScore: j.averageScore,
|
||||
stddev: j.stddev,
|
||||
isOutlier: j.isOutlier,
|
||||
}
|
||||
})
|
||||
.sort((a, b) => b.assigned - a.assigned)
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold">Juror Performance</h2>
|
||||
<p className="text-sm text-muted-foreground">Workload and scoring consistency per juror</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCsvOpen(true)}
|
||||
disabled={!hasSelection || isLoading}
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Export CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<CsvExportDialog
|
||||
open={csvOpen}
|
||||
onOpenChange={setCsvOpen}
|
||||
exportData={csvData}
|
||||
isLoading={csvLoading}
|
||||
filename="juror-performance"
|
||||
onRequestData={handleRequestCsvData}
|
||||
/>
|
||||
|
||||
{/* Juror Performance Table */}
|
||||
{isLoading ? (
|
||||
<Skeleton className="h-[400px]" />
|
||||
) : jurors.length > 0 ? (
|
||||
<>
|
||||
{/* Desktop Table */}
|
||||
<Card className="hidden md:block">
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Juror</TableHead>
|
||||
<TableHead className="text-right">Assigned</TableHead>
|
||||
<TableHead className="text-right">Completed</TableHead>
|
||||
<TableHead className="min-w-[140px]">Rate</TableHead>
|
||||
<TableHead className="text-right">Avg Score</TableHead>
|
||||
<TableHead className="text-right">Std Dev</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{jurors.map((j) => (
|
||||
<TableRow key={j.userId}>
|
||||
<TableCell className="font-medium">{j.name}</TableCell>
|
||||
<TableCell className="text-right">{j.assigned}</TableCell>
|
||||
<TableCell className="text-right">{j.completed}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={j.completionRate} className="h-2 w-20" />
|
||||
<span className="text-sm tabular-nums">{j.completionRate}%</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{j.averageScore.toFixed(2)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{j.stddev.toFixed(2)}</TableCell>
|
||||
<TableCell>
|
||||
{j.isOutlier ? (
|
||||
<Badge variant="destructive">Outlier</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">Normal</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Mobile Cards */}
|
||||
<div className="space-y-3 md:hidden">
|
||||
{jurors.map((j) => (
|
||||
<Card key={j.userId}>
|
||||
<CardContent className="pt-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium text-sm truncate">{j.name}</p>
|
||||
{j.isOutlier ? (
|
||||
<Badge variant="destructive" className="shrink-0">Outlier</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="shrink-0">Normal</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={j.completionRate} className="h-2 flex-1" />
|
||||
<span className="text-sm tabular-nums shrink-0">{j.completionRate}%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Assigned</span>
|
||||
<span className="tabular-nums">{j.assigned}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Completed</span>
|
||||
<span className="tabular-nums">{j.completed}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Avg Score</span>
|
||||
<span className="tabular-nums">{j.averageScore.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Std Dev</span>
|
||||
<span className="tabular-nums">{j.stddev.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : hasSelection ? (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center py-12">
|
||||
<p className="text-sm text-muted-foreground">No juror data available for this selection</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{/* Heatmap placeholder */}
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Users className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm font-medium text-muted-foreground">Juror scoring heatmap</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">Coming soon</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ScoresTab({ selectedValue, programId }: { selectedValue: string; programId: string | undefined }) {
|
||||
const queryInput = parseSelection(selectedValue)
|
||||
const hasSelection = !!queryInput.roundId || !!queryInput.programId
|
||||
|
||||
const { data: scoreDistribution, isLoading: scoreLoading } =
|
||||
trpc.analytics.getScoreDistribution.useQuery(queryInput, { enabled: hasSelection })
|
||||
|
||||
const { data: statusBreakdown, isLoading: statusLoading } =
|
||||
trpc.analytics.getStatusBreakdown.useQuery(queryInput, { enabled: hasSelection })
|
||||
|
||||
const { data: criteriaScores, isLoading: criteriaLoading } =
|
||||
trpc.analytics.getCriteriaScores.useQuery(queryInput, { enabled: hasSelection })
|
||||
|
||||
const geoProgramId = queryInput.programId || programId
|
||||
const { data: geoData, isLoading: geoLoading } =
|
||||
trpc.analytics.getGeographicDistribution.useQuery(
|
||||
{ programId: geoProgramId!, roundId: queryInput.roundId },
|
||||
{ enabled: !!geoProgramId }
|
||||
)
|
||||
|
||||
const [csvOpen, setCsvOpen] = useState(false)
|
||||
const [csvData, setCsvData] = useState<{ data: Record<string, unknown>[]; columns: string[] } | undefined>()
|
||||
const [csvLoading, setCsvLoading] = useState(false)
|
||||
|
||||
type CriterionItem = { criterionName: string; averageScore: number; count: number }
|
||||
|
||||
const handleRequestCsvData = useCallback(async () => {
|
||||
setCsvLoading(true)
|
||||
const columns = ['criterionName', 'averageScore', 'count']
|
||||
const data = ((criteriaScores as CriterionItem[] | undefined) ?? []).map((c) => ({
|
||||
criterionName: c.criterionName,
|
||||
averageScore: c.averageScore,
|
||||
count: c.count,
|
||||
}))
|
||||
const result = { data, columns }
|
||||
setCsvData(result)
|
||||
setCsvLoading(false)
|
||||
return result
|
||||
}, [criteriaScores])
|
||||
|
||||
// Country chart data
|
||||
const countryChartData = (() => {
|
||||
if (!geoData?.length) return []
|
||||
const sorted = [...geoData].sort((a, b) => b.count - a.count)
|
||||
return sorted.slice(0, 15).map((d) => {
|
||||
let name = d.countryCode
|
||||
try {
|
||||
const displayNames = new Intl.DisplayNames(['en'], { type: 'region' })
|
||||
name = displayNames.of(d.countryCode.toUpperCase()) || d.countryCode
|
||||
} catch { /* keep code */ }
|
||||
return { country: name, Projects: d.count }
|
||||
})
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold">Scores & Analytics</h2>
|
||||
<p className="text-sm text-muted-foreground">Score distributions, criteria breakdown and geographic data</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCsvOpen(true)}
|
||||
disabled={!hasSelection || criteriaLoading}
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Export CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<CsvExportDialog
|
||||
open={csvOpen}
|
||||
onOpenChange={setCsvOpen}
|
||||
exportData={csvData}
|
||||
isLoading={csvLoading}
|
||||
filename="scores-criteria"
|
||||
onRequestData={handleRequestCsvData}
|
||||
/>
|
||||
|
||||
{/* Score Distribution & Status Breakdown */}
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{scoreLoading ? (
|
||||
<Skeleton className="h-[350px]" />
|
||||
) : scoreDistribution ? (
|
||||
<ScoreDistributionChart
|
||||
data={scoreDistribution.distribution ?? []}
|
||||
averageScore={scoreDistribution.averageScore ?? 0}
|
||||
totalScores={scoreDistribution.totalScores ?? 0}
|
||||
/>
|
||||
) : hasSelection ? (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center py-12">
|
||||
<p className="text-sm text-muted-foreground">No score data available yet</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{statusLoading ? (
|
||||
<Skeleton className="h-[350px]" />
|
||||
) : statusBreakdown ? (
|
||||
<StatusBreakdownChart data={statusBreakdown} />
|
||||
) : hasSelection ? (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center py-12">
|
||||
<p className="text-sm text-muted-foreground">No status data available yet</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Criteria Breakdown */}
|
||||
{criteriaLoading ? (
|
||||
<Skeleton className="h-[350px]" />
|
||||
) : criteriaScores?.length ? (
|
||||
<CriteriaScoresChart data={criteriaScores} />
|
||||
) : hasSelection ? (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center py-12">
|
||||
<p className="text-sm text-muted-foreground">No criteria score data available yet</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{/* Country Distribution */}
|
||||
{geoLoading ? (
|
||||
<Skeleton className="h-[400px]" />
|
||||
) : countryChartData.length > 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>Top Countries</span>
|
||||
<span className="text-sm font-normal text-muted-foreground">
|
||||
{geoData?.length ?? 0} countries represented
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BarChart
|
||||
data={countryChartData}
|
||||
index="country"
|
||||
categories={['Projects']}
|
||||
colors={['blue']}
|
||||
layout="vertical"
|
||||
yAxisWidth={140}
|
||||
showLegend={false}
|
||||
className="h-[400px]"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
function RoundTypeContent({
|
||||
roundType,
|
||||
roundId,
|
||||
programId,
|
||||
stages,
|
||||
selectedValue,
|
||||
}: {
|
||||
roundType: string
|
||||
roundId: string
|
||||
programId: string
|
||||
stages: Stage[]
|
||||
selectedValue: string | null
|
||||
}) {
|
||||
switch (roundType) {
|
||||
case 'INTAKE':
|
||||
return <IntakeReportTabs roundId={roundId} programId={programId} />
|
||||
case 'FILTERING':
|
||||
return <FilteringReportTabs roundId={roundId} programId={programId} />
|
||||
case 'EVALUATION':
|
||||
return (
|
||||
<EvaluationReportTabs
|
||||
roundId={roundId}
|
||||
programId={programId}
|
||||
stages={stages}
|
||||
selectedValue={selectedValue}
|
||||
/>
|
||||
)
|
||||
case 'SUBMISSION':
|
||||
return <SubmissionReportTabs roundId={roundId} programId={programId} />
|
||||
case 'MENTORING':
|
||||
return <MentoringReportTabs roundId={roundId} programId={programId} />
|
||||
case 'LIVE_FINAL':
|
||||
return <LiveFinalReportTabs roundId={roundId} programId={programId} />
|
||||
case 'DELIBERATION':
|
||||
return <DeliberationReportTabs roundId={roundId} programId={programId} />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function ReportsPageContent() {
|
||||
const searchParams = useSearchParams()
|
||||
const roundFromUrl = searchParams.get('round')
|
||||
const [selectedValue, setSelectedValue] = useState<string | null>(roundFromUrl)
|
||||
const [activeTab, setActiveTab] = useState('global')
|
||||
|
||||
const { data: programs, isLoading: stagesLoading } = trpc.program.list.useQuery({ includeStages: true })
|
||||
|
||||
@@ -789,6 +141,8 @@ function ReportsPageContent() {
|
||||
}))
|
||||
) ?? []
|
||||
|
||||
const allRoundIds = stages.map((s) => s.id)
|
||||
|
||||
useEffect(() => {
|
||||
if (stages.length && !selectedValue) {
|
||||
const active = stages.find((s) => s.status === 'ROUND_ACTIVE')
|
||||
@@ -796,7 +150,26 @@ function ReportsPageContent() {
|
||||
}
|
||||
}, [stages.length, selectedValue])
|
||||
|
||||
// Reset to global tab when round selection changes
|
||||
useEffect(() => {
|
||||
setActiveTab('global')
|
||||
}, [selectedValue])
|
||||
|
||||
const isAllRounds = selectedValue?.startsWith('all:')
|
||||
const selectedRound = stages.find((s) => s.id === selectedValue)
|
||||
const roundType = selectedRound?.roundType ?? ''
|
||||
const programId = isAllRounds
|
||||
? selectedValue!.slice(4)
|
||||
: selectedRound?.programId ?? programs?.[0]?.id ?? ''
|
||||
|
||||
const roundSpecificTabs = isAllRounds
|
||||
? [{ value: 'progress', label: 'Progress', icon: TrendingUp }]
|
||||
: getRoundTabs(roundType)
|
||||
|
||||
const allTabs: TabDef[] = [
|
||||
{ value: 'global', label: 'Global', icon: Globe },
|
||||
...roundSpecificTabs,
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -832,63 +205,47 @@ function ReportsPageContent() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="progress" className="space-y-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="progress" className="gap-2">
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
Progress
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="jurors" className="gap-2" disabled={!selectedValue}>
|
||||
<Users className="h-4 w-4" />
|
||||
Jurors
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="scores" className="gap-2" disabled={!selectedValue}>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
Scores & Analytics
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
{selectedValue && (
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||
<TabsList>
|
||||
{allTabs.map((tab) => (
|
||||
<TabsTrigger key={tab.value} value={tab.value} className="gap-2">
|
||||
<tab.icon className="h-4 w-4" />
|
||||
{tab.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="progress">
|
||||
<ProgressTab
|
||||
selectedValue={selectedValue}
|
||||
stages={stages}
|
||||
stagesLoading={stagesLoading}
|
||||
selectedRound={selectedRound}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="global">
|
||||
<GlobalAnalyticsTab
|
||||
programId={programId}
|
||||
roundIds={allRoundIds.length >= 2 ? allRoundIds : undefined}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="jurors">
|
||||
{selectedValue ? (
|
||||
<JurorsTab selectedValue={selectedValue} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Users className="h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="mt-2 font-medium">Select a round</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Choose a round or edition from the dropdown above to view juror data
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="scores">
|
||||
{selectedValue ? (
|
||||
<ScoresTab selectedValue={selectedValue} programId={selectedRound?.programId ?? programs?.[0]?.id} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<BarChart3 className="h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="mt-2 font-medium">Select a round</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Choose a round or edition from the dropdown above to view scores and analytics
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
{/* Round-type-specific or "All Rounds" progress tab */}
|
||||
{roundSpecificTabs.map((tab) => (
|
||||
<TabsContent key={tab.value} value={tab.value}>
|
||||
{isAllRounds ? (
|
||||
<EvaluationReportTabs
|
||||
roundId=""
|
||||
programId={programId}
|
||||
stages={stages}
|
||||
selectedValue={selectedValue}
|
||||
/>
|
||||
) : selectedRound ? (
|
||||
<RoundTypeContent
|
||||
roundType={roundType}
|
||||
roundId={selectedRound.id}
|
||||
programId={programId}
|
||||
stages={stages}
|
||||
selectedValue={selectedValue}
|
||||
/>
|
||||
) : null}
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user