MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Observer platform: mobile fixes, data/UX overhaul, animated nav
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m41s
Details

Browse Source 
- Fix dashboard default round selection to target active round instead of R1
- Move edition selector from dashboard header to hamburger menu via shared context
- Add observer-friendly status labels (Not Reviewed / Under Review / Reviewed)
- Fix pipeline completion: closed rounds show 100%, cap all rates at 100%
- Round badge on projects list shows furthest round reached
- Hide scores/evals for projects with zero evaluations
- Enhance project detail round history with pass/reject indicators from ProjectRoundState
- Remove irrelevant fields (Org Type, Budget, Duration) from project detail
- Clickable juror workload with expandable project assignments
- Humanize activity feed with icons and readable messages
- Fix jurors table: responsive card layout on mobile
- Fix criteria chart: horizontal bars for readable labels on mobile
- Animate hamburger menu open/close with CSS grid transition

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-20 22:45:56 +01:00
parent 5eea430ebd
commit 213efdba87
11 changed files with 576 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/(observer)/layout.tsx
View File

@@ -1,5 +1,6 @@
import { requireRole } from '@/lib/auth-redirect'
import { ObserverNav } from '@/components/layouts/observer-nav'
import { EditionProvider } from '@/components/observer/observer-edition-context'
export default async function ObserverLayout({
children,
@@ -10,13 +11,15 @@ export default async function ObserverLayout({
return (
<div className="min-h-screen bg-background">
<ObserverNav
user={{
name: session.user.name,
email: session.user.email,
}}
/>
<main className="container-app py-6">{children}</main>
<EditionProvider>
<ObserverNav
user={{
name: session.user.name,
email: session.user.email,
}}
/>
<main className="container-app py-6">{children}</main>
</EditionProvider>
</div>
)
}

123
src/app/(observer)/observer/reports/page.tsx
View File

@@ -504,47 +504,90 @@ function JurorsTab({ selectedValue }: { selectedValue: string }) {
{isLoading ? (
<Skeleton className="h-[400px]" />
) : jurors.length > 0 ? (
<Card>
<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>
<>
{/* 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>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</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">

8
src/components/charts/criteria-scores.tsx
View File

@@ -25,14 +25,14 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
const chartData = data.map((d) => ({
criterion:
d.name.length > 25 ? d.name.substring(0, 25) + '...' : d.name,
d.name.length > 40 ? d.name.substring(0, 40) + '...' : d.name,
'Avg Score': parseFloat(d.averageScore.toFixed(2)),
}))
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center justify-between">
<CardTitle className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<span>Score by Evaluation Criteria</span>
<span className="text-sm font-normal text-muted-foreground">
Overall Avg: {overallAverage.toFixed(2)}
@@ -46,10 +46,10 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
categories={['Avg Score']}
colors={[BRAND_TEAL] as string[]}
maxValue={10}
yAxisWidth={40}
layout="vertical"
yAxisWidth={160}
showLegend={false}
className="h-[300px]"
rotateLabelX={{ angle: -45, xAxisHeight: 60 }}
/>
</CardContent>
</Card>

30
src/components/layouts/observer-nav.tsx
View File

@@ -2,11 +2,40 @@
import { BarChart3, Home, FolderKanban } from 'lucide-react'
import { RoleNav, type NavItem, type RoleNavUser } from '@/components/layouts/role-nav'
import { useEditionContext } from '@/components/observer/observer-edition-context'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
interface ObserverNavProps {
user: RoleNavUser
}
function EditionSelector() {
const { programs, selectedProgramId, setSelectedProgramId } = useEditionContext()
if (programs.length <= 1) return null
return (
<Select value={selectedProgramId} onValueChange={setSelectedProgramId}>
<SelectTrigger className="w-full md:w-[180px]">
<SelectValue placeholder="Select edition" />
</SelectTrigger>
<SelectContent>
{programs.map((p) => (
<SelectItem key={p.id} value={p.id}>
{p.year ? `${p.year} Edition` : p.name ?? p.id}
</SelectItem>
))}
</SelectContent>
</Select>
)
}
export function ObserverNav({ user }: ObserverNavProps) {
const navigation: NavItem[] = [
{
@@ -32,6 +61,7 @@ export function ObserverNav({ user }: ObserverNavProps) {
roleName="Observer"
user={user}
basePath="/observer"
editionSelector={<EditionSelector />}
/>
)
}

85
src/components/layouts/role-nav.tsx
View File

@@ -41,13 +41,15 @@ type RoleNavProps = {
basePath: string
/** Optional status badge displayed next to the logo (e.g., remaining evaluations count) */
statusBadge?: React.ReactNode
/** Optional slot rendered in the mobile hamburger menu (between nav links and sign out) and desktop header */
editionSelector?: React.ReactNode
}
function isNavItemActive(pathname: string, href: string, basePath: string): boolean {
return pathname === href || (href !== basePath && pathname.startsWith(href))
}
export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: RoleNavProps) {
export function RoleNav({ navigation, roleName, user, basePath, statusBadge, editionSelector }: RoleNavProps) {
const pathname = usePathname()
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const { status: sessionStatus } = useSession()
@@ -93,6 +95,7 @@ export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: R
{/* User menu & mobile toggle */}
<div className="flex items-center gap-2">
{editionSelector && <div className="hidden md:block">{editionSelector}</div>}
{mounted && (
<Button
variant="ghost"
@@ -161,42 +164,54 @@ export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: R
</div>
</div>
{/* Mobile menu */}
{isMobileMenuOpen && (
<div className="border-t md:hidden">
<nav className="container-app py-4 space-y-1">
{navigation.map((item) => {
const isActive = isNavItemActive(pathname, item.href, basePath)
return (
<Link
key={item.name}
href={item.href as Route}
onClick={() => setIsMobileMenuOpen(false)}
className={cn(
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
isActive
? 'bg-primary/10 text-primary'
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
)}
{/* Mobile menu — animated with CSS grid */}
<div
className={cn(
'grid md:hidden transition-[grid-template-rows] duration-200 ease-out',
isMobileMenuOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
)}
>
<div className="overflow-hidden">
<div className={cn('border-t', !isMobileMenuOpen && 'border-transparent')}>
<nav className="container-app py-4 space-y-1">
{navigation.map((item) => {
const isActive = isNavItemActive(pathname, item.href, basePath)
return (
<Link
key={item.name}
href={item.href as Route}
onClick={() => setIsMobileMenuOpen(false)}
className={cn(
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
isActive
? 'bg-primary/10 text-primary'
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
)}
>
<item.icon className="h-4 w-4" />
{item.name}
</Link>
)
})}
{editionSelector && (
<div className="border-t pt-4 mt-4 px-3">
{editionSelector}
</div>
)}
<div className="border-t pt-4 mt-4">
<Button
variant="ghost"
className="w-full justify-start text-destructive hover:text-destructive"
onClick={() => signOut({ callbackUrl: '/login' })}
>
<item.icon className="h-4 w-4" />
{item.name}
</Link>
)
})}
<div className="border-t pt-4 mt-4">
<Button
variant="ghost"
className="w-full justify-start text-destructive hover:text-destructive"
onClick={() => signOut({ callbackUrl: '/login' })}
>
<LogOut className="mr-2 h-4 w-4" />
Sign Out
</Button>
</div>
</nav>
<LogOut className="mr-2 h-4 w-4" />
Sign Out
</Button>
</div>
</nav>
</div>
</div>
)}
</div>
</header>
)
}

240
src/components/observer/observer-dashboard-content.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { useState, useEffect } from 'react'
import { useState, Fragment } from 'react'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
@@ -14,13 +14,6 @@ import {
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { Skeleton } from '@/components/ui/skeleton'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import {
Table,
TableBody,
@@ -32,6 +25,7 @@ import {
import { StatusBadge } from '@/components/shared/status-badge'
import { AnimatedCard } from '@/components/shared/animated-container'
import { GeographicSummaryCard } from '@/components/charts/geographic-summary-card'
import { useEditionContext } from '@/components/observer/observer-edition-context'
import {
ClipboardList,
BarChart3,
@@ -41,7 +35,13 @@ import {
Globe,
ChevronRight,
Activity,
RefreshCw,
ChevronDown,
ChevronUp,
ArrowRight,
Lock,
Clock,
CheckCircle,
XCircle,
} from 'lucide-react'
import { cn } from '@/lib/utils'
@@ -76,14 +76,50 @@ function computeAvgScore(scoreDistribution: { label: string; count: number }[]):
return (weightedSum / total).toFixed(1)
}
const ACTIVITY_DOT_COLORS: Record<string, string> = {
ROUND_ACTIVATED: 'bg-emerald-500',
ROUND_CLOSED: 'bg-slate-500',
EVALUATION_SUBMITTED: 'bg-blue-500',
ASSIGNMENT_CREATED: 'bg-violet-500',
PROJECT_ADVANCED: 'bg-teal-500',
PROJECT_REJECTED: 'bg-rose-500',
RESULT_LOCKED: 'bg-amber-500',
const ACTIVITY_ICONS: Record<string, { icon: typeof CheckCircle; color: string }> = {
ROUND_ACTIVATED: { icon: Clock, color: 'text-emerald-500' },
ROUND_CLOSED: { icon: Lock, color: 'text-slate-500' },
'round.reopened': { icon: Clock, color: 'text-emerald-500' },
'round.closed': { icon: Lock, color: 'text-slate-500' },
EVALUATION_SUBMITTED: { icon: CheckCircle, color: 'text-blue-500' },
ASSIGNMENT_CREATED: { icon: ArrowRight, color: 'text-violet-500' },
PROJECT_ADVANCED: { icon: ArrowRight, color: 'text-teal-500' },
PROJECT_REJECTED: { icon: XCircle, color: 'text-rose-500' },
RESULT_LOCKED: { icon: Lock, color: 'text-amber-500' },
}
function humanizeActivity(item: { eventType: string; actorName?: string | null; details?: Record<string, unknown> | null }): string {
const actor = item.actorName ?? 'System'
const details = item.details ?? {}
const projectName = (details.projectTitle ?? details.projectName ?? '') as string
const roundName = (details.roundName ?? '') as string
switch (item.eventType) {
case 'EVALUATION_SUBMITTED':
return projectName
? `${actor} submitted a review for ${projectName}`
: `${actor} submitted a review`
case 'ROUND_ACTIVATED':
case 'round.reopened':
return roundName ? `${roundName} was opened` : 'A round was opened'
case 'ROUND_CLOSED':
case 'round.closed':
return roundName ? `${roundName} was closed` : 'A round was closed'
case 'ASSIGNMENT_CREATED':
return projectName
? `${projectName} was assigned to a juror`
: 'A project was assigned'
case 'PROJECT_ADVANCED':
return projectName
? `${projectName} advanced${roundName ? ` to ${roundName}` : ''}`
: 'A project advanced'
case 'PROJECT_REJECTED':
return projectName ? `${projectName} was rejected` : 'A project was rejected'
case 'RESULT_LOCKED':
return roundName ? `Results locked for ${roundName}` : 'Results were locked'
default:
return `${actor}: ${item.eventType.replace(/_/g, ' ').toLowerCase()}`
}
}
const STATUS_BADGE_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
@@ -94,31 +130,17 @@ const STATUS_BADGE_VARIANT: Record<string, 'default' | 'secondary' | 'outline'>
}
export function ObserverDashboardContent({ userName }: { userName?: string }) {
const [selectedProgramId, setSelectedProgramId] = useState<string>('')
const [selectedRoundId, setSelectedRoundId] = useState<string>('')
const { programs, selectedProgramId, activeRoundId } = useEditionContext()
const [expandedJurorId, setExpandedJurorId] = useState<string | null>(null)
const { data: programs } = trpc.program.list.useQuery(
{ includeStages: true },
{ refetchInterval: 30_000 },
)
useEffect(() => {
if (programs && programs.length > 0 && !selectedProgramId) {
const firstProgram = programs[0]
setSelectedProgramId(firstProgram.id)
const firstRound = (firstProgram.rounds ?? [])[0]
if (firstRound) setSelectedRoundId(firstRound.id)
}
}, [programs, selectedProgramId])
const roundIdParam = selectedRoundId || undefined
const roundIdParam = activeRoundId || undefined
const { data: stats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery(
{ roundId: roundIdParam },
{ refetchInterval: 30_000 },
)
const selectedProgram = programs?.find((p) => p.id === selectedProgramId)
const selectedProgram = programs.find((p) => p.id === selectedProgramId)
const competitionId = (selectedProgram?.rounds ?? [])[0]?.competitionId as string | undefined
const { data: roundOverview, isLoading: overviewLoading } = trpc.analytics.getRoundCompletionOverview.useQuery(
@@ -167,37 +189,9 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
return (
<div className="space-y-6">
{/* Header */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
<p className="text-muted-foreground">Welcome, {userName || 'Observer'}</p>
</div>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
<div className="flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700">
<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
Auto-refresh
</div>
<Select
value={selectedProgramId}
onValueChange={(val) => {
setSelectedProgramId(val)
const prog = programs?.find((p) => p.id === val)
const firstRound = (prog?.rounds ?? [])[0]
setSelectedRoundId(firstRound?.id ?? '')
}}
>
<SelectTrigger className="w-full sm:w-[220px]">
<SelectValue placeholder="Select edition" />
</SelectTrigger>
<SelectContent>
{(programs ?? []).map((p) => (
<SelectItem key={p.id} value={p.id}>
{(p as { year?: number }).year ? `${(p as { year?: number }).year} Edition` : p.name ?? p.id}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
<p className="text-muted-foreground">Welcome, {userName || 'Observer'}</p>
</div>
{/* Six Stat Tiles */}
@@ -411,23 +405,53 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
</CardHeader>
<CardContent>
{topJurors.length > 0 ? (
<div className="space-y-4">
{topJurors.map((juror) => (
<div key={juror.id} className="space-y-1">
<div className="flex items-center justify-between text-sm">
<span className="truncate font-medium" title={juror.name ?? ''}>
{juror.name ?? 'Unknown'}
</span>
<span className="ml-2 shrink-0 text-xs tabular-nums text-muted-foreground">
{juror.completionRate}%
</span>
<div className="space-y-3">
{topJurors.map((juror) => {
const isExpanded = expandedJurorId === juror.id
return (
<div key={juror.id}>
<button
type="button"
className="w-full text-left space-y-1 rounded-md px-1 -mx-1 py-1 hover:bg-muted/50 transition-colors"
onClick={() => setExpandedJurorId(isExpanded ? null : juror.id)}
>
<div className="flex items-center justify-between text-sm">
<span className="truncate font-medium" title={juror.name ?? ''}>
{juror.name ?? 'Unknown'}
</span>
<div className="ml-2 flex shrink-0 items-center gap-1.5">
<span className="text-xs tabular-nums text-muted-foreground">
{juror.completionRate}%
</span>
{isExpanded ? (
<ChevronUp className="h-3 w-3 text-muted-foreground" />
) : (
<ChevronDown className="h-3 w-3 text-muted-foreground" />
)}
</div>
</div>
<Progress value={juror.completionRate} className="h-1.5" />
<p className="text-[11px] text-muted-foreground">
{juror.completed} / {juror.assigned} evaluations
</p>
</button>
{isExpanded && juror.projects && (
<div className="ml-1 mt-1 space-y-1 border-l-2 border-muted pl-3">
{juror.projects.map((proj: { id: string; title: string; evalStatus: string }) => (
<Link
key={proj.id}
href={`/observer/projects/${proj.id}` as Route}
className="flex items-center justify-between gap-2 rounded py-1 text-xs hover:underline"
>
<span className="truncate">{proj.title}</span>
<StatusBadge status={proj.evalStatus} size="sm" />
</Link>
))}
</div>
)}
</div>
<Progress value={juror.completionRate} className="h-1.5" />
<p className="text-[11px] text-muted-foreground">
{juror.completed} / {juror.assigned} evaluations
</p>
</div>
))}
)
})}
</div>
) : (
<div className="space-y-4">
@@ -474,9 +498,9 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
<div className="rounded-lg bg-emerald-500/10 p-1.5">
<ClipboardList className="h-4 w-4 text-emerald-500" />
</div>
Recent Projects
Recently Reviewed
</CardTitle>
<CardDescription>Latest project activity</CardDescription>
<CardDescription>Latest project reviews</CardDescription>
</CardHeader>
<CardContent className="p-0">
{projectsData && projectsData.projects.length > 0 ? (
@@ -486,7 +510,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
<TableRow>
<TableHead>Project</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Score</TableHead>
<TableHead className="text-right whitespace-nowrap">Score</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -505,10 +529,12 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
)}
</TableCell>
<TableCell>
<StatusBadge status={project.status} />
<StatusBadge status={project.observerStatus ?? project.status} />
</TableCell>
<TableCell className="text-right tabular-nums text-sm">
{project.averageScore !== null ? project.averageScore.toFixed(1) : '—'}
<TableCell className="text-right tabular-nums text-sm whitespace-nowrap">
{project.evaluationCount > 0 && project.averageScore !== null
? project.averageScore.toFixed(1)
: '—'}
</TableCell>
</TableRow>
))}
@@ -549,32 +575,22 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
<CardContent>
{activityFeed && activityFeed.length > 0 ? (
<div className="space-y-3">
{activityFeed.map((item) => (
<div key={item.id} className="flex items-start gap-3">
<span
className={cn(
'mt-1.5 h-2 w-2 shrink-0 rounded-full',
ACTIVITY_DOT_COLORS[item.eventType] ?? 'bg-slate-400',
)}
/>
<div className="min-w-0 flex-1">
<p className="text-sm leading-snug">
<span className="font-medium">
{item.eventType.replace(/_/g, ' ').toLowerCase().replace(/^\w/, (c) => c.toUpperCase())}
</span>
{item.entityType && (
<span className="text-muted-foreground"> — {item.entityType.replace(/_/g, ' ').toLowerCase()}</span>
)}
{activityFeed.slice(0, 5).map((item) => {
const iconDef = ACTIVITY_ICONS[item.eventType]
const IconComponent = iconDef?.icon ?? Activity
const iconColor = iconDef?.color ?? 'text-slate-400'
return (
<div key={item.id} className="flex items-start gap-3">
<IconComponent className={cn('mt-0.5 h-4 w-4 shrink-0', iconColor)} />
<p className="min-w-0 flex-1 text-sm leading-snug">
{humanizeActivity(item)}
</p>
{item.actorName && (
<p className="text-[11px] text-muted-foreground">by {item.actorName}</p>
)}
<span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
{relativeTime(item.createdAt)}
</span>
</div>
<span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
{relativeTime(item.createdAt)}
</span>
</div>
))}
)
})}
</div>
) : (
<div className="space-y-3">

67
src/components/observer/observer-edition-context.tsx Normal file
View File

@@ -0,0 +1,67 @@
'use client'
import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
import { trpc } from '@/lib/trpc/client'
type Program = {
id: string
name: string | null
year?: number
rounds?: Array<{ id: string; name: string; status: string; competitionId?: string }>
}
type EditionContextValue = {
programs: Program[]
selectedProgramId: string
setSelectedProgramId: (id: string) => void
activeRoundId: string
}
const EditionContext = createContext<EditionContextValue | null>(null)
export function useEditionContext() {
const ctx = useContext(EditionContext)
if (!ctx) throw new Error('useEditionContext must be used within EditionProvider')
return ctx
}
function findBestRound(rounds: Array<{ id: string; status: string }>): string {
const active = rounds.find(r => r.status === 'ROUND_ACTIVE')
if (active) return active.id
const closed = [...rounds].filter(r => r.status === 'ROUND_CLOSED').pop()
if (closed) return closed.id
return rounds[0]?.id ?? ''
}
export function EditionProvider({ children }: { children: ReactNode }) {
const [selectedProgramId, setSelectedProgramId] = useState<string>('')
const { data: programs } = trpc.program.list.useQuery(
{ includeStages: true },
{ refetchInterval: 30_000 },
)
useEffect(() => {
if (programs && programs.length > 0 && !selectedProgramId) {
setSelectedProgramId(programs[0].id)
}
}, [programs, selectedProgramId])
const typedPrograms = (programs ?? []) as Program[]
const selectedProgram = typedPrograms.find(p => p.id === selectedProgramId)
const rounds = (selectedProgram?.rounds ?? []) as Array<{ id: string; status: string }>
const activeRoundId = findBestRound(rounds)
return (
<EditionContext.Provider
value={{
programs: typedPrograms,
selectedProgramId,
setSelectedProgramId,
activeRoundId,
}}
>
{children}
</EditionContext.Provider>
)
}

172
src/components/observer/observer-project-detail.tsx
View File

@@ -39,7 +39,7 @@ import {
Sparkles,
MessageSquare,
} from 'lucide-react'
import { formatDate, formatDateOnly } from '@/lib/utils'
import { cn, formatDate, formatDateOnly } from '@/lib/utils'
export function ObserverProjectDetail({ projectId }: { projectId: string }) {
const { data, isLoading } = trpc.analytics.getProjectDetail.useQuery(
@@ -85,9 +85,13 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
)
}
const { project, assignments, stats, competitionRounds, allRequirements } =
const { project, assignments, stats, competitionRounds, projectRoundStates, allRequirements } =
data
const roundStateMap = new Map(
(projectRoundStates ?? []).map((s) => [s.roundId, s]),
)
const criteriaMap = new Map<
string,
{ label: string; type: string; trueLabel?: string; falseLabel?: string }
@@ -338,26 +342,12 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
: '-'}
</p>
</div>
<div>
<p className="text-xs text-muted-foreground">Org Type</p>
<p className="text-sm font-medium">
{project.institution || '-'}
</p>
</div>
<div>
<p className="text-xs text-muted-foreground">Country</p>
<p className="text-sm font-medium">
{project.country || project.geographicZone || '-'}
</p>
</div>
<div>
<p className="text-xs text-muted-foreground">Budget</p>
<p className="text-sm font-medium">-</p>
</div>
<div>
<p className="text-xs text-muted-foreground">Duration</p>
<p className="text-sm font-medium">-</p>
</div>
<div>
<p className="text-xs text-muted-foreground">AI Score</p>
<p className="text-sm font-medium">-</p>
@@ -421,72 +411,102 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
</AnimatedCard>
{/* Round History */}
{competitionRounds.length > 0 && (
<AnimatedCard index={3}>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2.5 text-lg">
<div className="rounded-lg bg-violet-500/10 p-1.5">
<Calendar className="h-4 w-4 text-violet-500" />
</div>
Round History
</CardTitle>
</CardHeader>
<CardContent>
<ol className="space-y-4">
{competitionRounds.map((round, idx) => {
// Determine round status from assignments
const roundAssignments = assignments.filter(
(a) => a.roundId === round.id,
)
const hasInProgressAssignments = roundAssignments.some(
(a) => a.evaluation?.status === 'DRAFT',
)
const allSubmitted =
roundAssignments.length > 0 &&
roundAssignments.every(
(a) => a.evaluation?.status === 'SUBMITTED',
{competitionRounds.length > 0 && (() => {
const passedCount = competitionRounds.filter((r) => {
const s = roundStateMap.get(r.id)
return s && (s.state === 'PASSED' || s.state === 'COMPLETED')
}).length
const rejectedRound = competitionRounds.find((r) => {
const s = roundStateMap.get(r.id)
return s?.state === 'REJECTED'
})
return (
<AnimatedCard index={3}>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2.5 text-lg">
<div className="rounded-lg bg-violet-500/10 p-1.5">
<Calendar className="h-4 w-4 text-violet-500" />
</div>
Round History
</CardTitle>
<CardDescription>
{rejectedRound
? `Rejected at ${rejectedRound.name}`
: `Passed ${passedCount} of ${competitionRounds.length} rounds`}
</CardDescription>
</CardHeader>
<CardContent>
<ol className="space-y-4">
{competitionRounds.map((round) => {
const roundState = roundStateMap.get(round.id)
const state = roundState?.state
const roundAssignments = assignments.filter(
(a) => a.roundId === round.id,
)
const isPast = idx < competitionRounds.length - 1 && allSubmitted
const isActive = hasInProgressAssignments || (!isPast && roundAssignments.length > 0 && !allSubmitted)
return (
<li key={round.id} className="flex items-start gap-3">
{isPast || allSubmitted ? (
<CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
) : isActive ? (
let icon: React.ReactNode
let statusLabel: string | null = null
if (state === 'PASSED' || state === 'COMPLETED') {
icon = <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
statusLabel = 'Passed'
} else if (state === 'REJECTED') {
icon = <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
statusLabel = 'Rejected at this round'
} else if (state === 'IN_PROGRESS') {
icon = (
<span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center">
<span className="relative flex h-3 w-3">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75" />
<span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500" />
</span>
</span>
) : (
<Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/40" />
)}
<div className="min-w-0">
<p className="text-sm font-medium">{round.name}</p>
{roundAssignments.length > 0 && (
<p className="text-xs text-muted-foreground">
{roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length}/{roundAssignments.length} evaluations
</p>
)
statusLabel = 'Active'
} else if (state === 'PENDING') {
icon = <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/40" />
statusLabel = 'Pending'
} else {
icon = <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/20" />
}
return (
<li key={round.id} className="flex items-start gap-3">
{icon}
<div className="min-w-0 flex-1">
<p className="text-sm font-medium">{round.name}</p>
{statusLabel && (
<p className={cn(
'text-xs',
state === 'REJECTED' ? 'text-destructive' : 'text-muted-foreground',
)}>
{statusLabel}
</p>
)}
{roundAssignments.length > 0 && (
<p className="text-xs text-muted-foreground">
{roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length}/{roundAssignments.length} evaluations
</p>
)}
</div>
{state === 'IN_PROGRESS' && (
<Badge
variant="outline"
className="ml-auto shrink-0 border-blue-200 bg-blue-50 text-blue-600 text-xs"
>
Active
</Badge>
)}
</div>
{isActive && (
<Badge
variant="outline"
className="ml-auto shrink-0 border-blue-200 bg-blue-50 text-blue-600 text-xs"
>
Active
</Badge>
)}
</li>
)
})}
</ol>
</CardContent>
</Card>
</AnimatedCard>
)}
</li>
)
})}
</ol>
</CardContent>
</Card>
</AnimatedCard>
)
})()}
</TabsContent>
{/* ── Evaluations Tab ── */}
@@ -496,7 +516,9 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<Users className="h-10 w-10 text-muted-foreground/40" />
<p className="mt-2 text-sm text-muted-foreground">
No jury assignments yet
{project.status === 'ASSIGNED'
? 'Awaiting jury evaluation — assigned and pending review'
: 'No jury assignments yet'}
</p>
</CardContent>
</Card>

37
src/components/observer/observer-projects-content.tsx
View File

@@ -251,8 +251,9 @@ export function ObserverProjectsContent() {
<SelectContent>
<SelectItem value="all">All Statuses</SelectItem>
<SelectItem value="SUBMITTED">Submitted</SelectItem>
<SelectItem value="ELIGIBLE">Eligible</SelectItem>
<SelectItem value="ASSIGNED">Assigned</SelectItem>
<SelectItem value="NOT_REVIEWED">Not Reviewed</SelectItem>
<SelectItem value="UNDER_REVIEW">Under Review</SelectItem>
<SelectItem value="REVIEWED">Reviewed</SelectItem>
<SelectItem value="SEMIFINALIST">Semi-finalist</SelectItem>
<SelectItem value="FINALIST">Finalist</SelectItem>
<SelectItem value="REJECTED">Rejected</SelectItem>
@@ -344,10 +345,10 @@ export function ObserverProjectsContent() {
</Badge>
</TableCell>
<TableCell>
<StatusBadge status={project.status} />
<StatusBadge status={project.observerStatus ?? project.status} />
</TableCell>
<TableCell>
{project.averageScore !== null ? (
{project.evaluationCount > 0 && project.averageScore !== null ? (
<div className="flex items-center gap-2">
<span className="tabular-nums w-8 text-sm">
{project.averageScore.toFixed(1)}
@@ -404,24 +405,26 @@ export function ObserverProjectsContent() {
</p>
)}
</div>
<StatusBadge status={project.status} />
<StatusBadge status={project.observerStatus ?? project.status} />
</div>
<div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
<Badge variant="outline" className="text-xs">
{project.roundName}
</Badge>
<div className="flex gap-3">
<span>
Score:{' '}
{project.averageScore !== null
? project.averageScore.toFixed(1)
: '-'}
</span>
<span>
{project.evaluationCount} eval
{project.evaluationCount !== 1 ? 's' : ''}
</span>
</div>
{project.evaluationCount > 0 && (
<div className="flex gap-3">
<span>
Score:{' '}
{project.averageScore !== null
? project.averageScore.toFixed(1)
: '-'}
</span>
<span>
{project.evaluationCount} eval
{project.evaluationCount !== 1 ? 's' : ''}
</span>
</div>
)}
</div>
</CardContent>
</Card>

13
src/components/shared/status-badge.tsx
View File

@@ -24,6 +24,10 @@ const STATUS_STYLES: Record<string, { variant: BadgeProps['variant']; className?
REJECTED: { variant: 'destructive' },
WITHDRAWN: { variant: 'secondary' },
// Observer-derived statuses
NOT_REVIEWED: { variant: 'secondary', className: 'bg-slate-500/10 text-slate-600 border-slate-200 dark:text-slate-400' },
REVIEWED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
// Evaluation statuses
IN_PROGRESS: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
COMPLETED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
@@ -43,7 +47,14 @@ type StatusBadgeProps = {
export function StatusBadge({ status, className, size = 'default' }: StatusBadgeProps) {
const style = STATUS_STYLES[status] || { variant: 'secondary' as const }
const label = status === 'NONE' ? 'NOT INVITED' : status.replace(/_/g, ' ')
const LABEL_OVERRIDES: Record<string, string> = {
NONE: 'NOT INVITED',
NOT_REVIEWED: 'Not Reviewed',
UNDER_REVIEW: 'Under Review',
REVIEWED: 'Reviewed',
SEMIFINALIST: 'Semi-finalist',
}
const label = LABEL_OVERRIDES[status] ?? status.replace(/_/g, ' ')
return (
<Badge

97
src/server/routers/analytics.ts
View File

@@ -123,6 +123,7 @@ export const analyticsRouter = router({
where: assignmentWhere(input),
include: {
user: { select: { name: true } },
project: { select: { id: true, title: true } },
evaluation: {
select: { id: true, status: true },
},
@@ -132,7 +133,7 @@ export const analyticsRouter = router({
// Group by user
const byUser: Record<
string,
{ name: string; assigned: number; completed: number }
{ name: string; assigned: number; completed: number; projects: { id: string; title: string; evalStatus: string }[] }
> = {}
assignments.forEach((assignment) => {
@@ -142,12 +143,19 @@ export const analyticsRouter = router({
name: assignment.user.name || 'Unknown',
assigned: 0,
completed: 0,
projects: [],
}
}
byUser[userId].assigned++
if (assignment.evaluation?.status === 'SUBMITTED') {
const evalStatus = assignment.evaluation?.status
if (evalStatus === 'SUBMITTED') {
byUser[userId].completed++
}
byUser[userId].projects.push({
id: assignment.project.id,
title: assignment.project.title,
evalStatus: evalStatus === 'SUBMITTED' ? 'REVIEWED' : evalStatus === 'DRAFT' ? 'UNDER_REVIEW' : 'NOT_REVIEWED',
})
})
return Object.entries(byUser)
@@ -676,7 +684,7 @@ export const analyticsRouter = router({
])
const completionRate = totalAssignments > 0
? Math.round((submittedEvaluations / totalAssignments) * 100)
? Math.min(100, Math.round((submittedEvaluations / totalAssignments) * 100))
: 0
const scores = evaluationScores.map((e) => e.globalScore!).filter((s) => s != null)
@@ -850,9 +858,11 @@ export const analyticsRouter = router({
const totalProjects = stateBreakdown.reduce((sum, ps) => sum + ps.count, 0)
const totalAssignments = assignmentCountByRound.get(round.id) || 0
const completedEvaluations = completedEvalsByRound.get(round.id) || 0
const completionRate = totalAssignments > 0
? Math.round((completedEvaluations / totalAssignments) * 100)
: 0
const completionRate = (round.status === 'ROUND_CLOSED' || round.status === 'ROUND_ARCHIVED')
? 100
: totalAssignments > 0
? Math.min(100, Math.round((completedEvaluations / totalAssignments) * 100))
: 0
return {
roundId: round.id,
@@ -914,7 +924,8 @@ export const analyticsRouter = router({
where.projectRoundStates = { some: { roundId: input.roundId } }
}
if (input.status) {
const OBSERVER_DERIVED_STATUSES = ['NOT_REVIEWED', 'UNDER_REVIEW', 'REVIEWED']
if (input.status && !OBSERVER_DERIVED_STATUSES.includes(input.status)) {
where.status = input.status
}
@@ -942,16 +953,25 @@ export const analyticsRouter = router({
assignments: {
select: {
roundId: true,
round: { select: { id: true, name: true } },
round: { select: { id: true, name: true, sortOrder: true } },
evaluation: {
select: { globalScore: true, status: true },
},
},
},
projectRoundStates: {
select: {
roundId: true,
state: true,
round: { select: { id: true, name: true, sortOrder: true } },
},
orderBy: { round: { sortOrder: 'desc' } },
take: 1,
},
},
orderBy: prismaOrderBy,
// When sorting by computed fields, fetch all then slice in JS
...(input.sortBy === 'title'
// When sorting by computed fields or filtering by observer-derived status, fetch all then slice in JS
...(input.sortBy === 'title' && !OBSERVER_DERIVED_STATUSES.includes(input.status ?? '')
? { skip: (input.page - 1) * input.perPage, take: input.perPage }
: {}),
}),
@@ -962,6 +982,9 @@ export const analyticsRouter = router({
const submitted = p.assignments
.map((a) => a.evaluation)
.filter((e) => e?.status === 'SUBMITTED')
const drafts = p.assignments
.map((a) => a.evaluation)
.filter((e) => e?.status === 'DRAFT')
const scores = submitted
.map((e) => e?.globalScore)
.filter((s): s is number => s !== null)
@@ -970,51 +993,74 @@ export const analyticsRouter = router({
? scores.reduce((a, b) => a + b, 0) / scores.length
: null
// Filter assignments to the queried round so we show the correct round name
// Show the furthest round the project reached (from projectRoundStates, ordered by sortOrder desc)
const furthestRoundState = p.projectRoundStates[0]
// Fallback to assignment round if no round states
const roundAssignment = input.roundId
? p.assignments.find((a) => a.roundId === input.roundId)
: p.assignments[0]
// Derive observer-friendly status
let observerStatus: string
if (p.status === 'REJECTED') observerStatus = 'REJECTED'
else if (p.status === 'SEMIFINALIST') observerStatus = 'SEMIFINALIST'
else if (p.status === 'FINALIST') observerStatus = 'FINALIST'
else if (p.status === 'SUBMITTED') observerStatus = 'SUBMITTED'
else if (submitted.length > 0) observerStatus = 'REVIEWED'
else if (drafts.length > 0) observerStatus = 'UNDER_REVIEW'
else observerStatus = 'NOT_REVIEWED'
return {
id: p.id,
title: p.title,
teamName: p.teamName,
status: p.status,
observerStatus,
country: p.country,
roundId: roundAssignment?.round?.id ?? '',
roundName: roundAssignment?.round?.name ?? '',
roundId: furthestRoundState?.round?.id ?? roundAssignment?.round?.id ?? '',
roundName: furthestRoundState?.round?.name ?? roundAssignment?.round?.name ?? '',
averageScore,
evaluationCount: submitted.length,
}
})
// Filter by observer-derived status in JS
const observerStatusFilter = input.status && OBSERVER_DERIVED_STATUSES.includes(input.status)
? input.status
: null
const filtered = observerStatusFilter
? mapped.filter((p) => p.observerStatus === observerStatusFilter)
: mapped
const filteredTotal = observerStatusFilter ? filtered.length : total
// Sort by computed fields (score, evaluations) in JS
let sorted = mapped
let sorted = filtered
if (input.sortBy === 'score') {
sorted = mapped.sort((a, b) => {
sorted = filtered.sort((a, b) => {
const sa = a.averageScore ?? -1
const sb = b.averageScore ?? -1
return input.sortDir === 'asc' ? sa - sb : sb - sa
})
} else if (input.sortBy === 'evaluations') {
sorted = mapped.sort((a, b) =>
sorted = filtered.sort((a, b) =>
input.sortDir === 'asc'
? a.evaluationCount - b.evaluationCount
: b.evaluationCount - a.evaluationCount
)
}
// Paginate in JS for computed-field sorts
const paginated = input.sortBy !== 'title'
// Paginate in JS for computed-field sorts or observer status filter
const needsJsPagination = input.sortBy !== 'title' || observerStatusFilter
const paginated = needsJsPagination
? sorted.slice((input.page - 1) * input.perPage, input.page * input.perPage)
: sorted
return {
projects: paginated,
total,
total: filteredTotal,
page: input.page,
perPage: input.perPage,
totalPages: Math.ceil(total / input.perPage),
totalPages: Math.ceil(filteredTotal / input.perPage),
}
}),
@@ -1256,15 +1302,21 @@ export const analyticsRouter = router({
}
// Get competition rounds for file grouping
let competitionRounds: { id: string; name: string }[] = []
let competitionRounds: { id: string; name: string; roundType: string }[] = []
const competition = await ctx.prisma.competition.findFirst({
where: { programId: projectRaw.programId },
include: { rounds: { select: { id: true, name: true }, orderBy: { sortOrder: 'asc' } } },
include: { rounds: { select: { id: true, name: true, roundType: true }, orderBy: { sortOrder: 'asc' } } },
})
if (competition) {
competitionRounds = competition.rounds
}
// Get project round states for round history
const projectRoundStates = await ctx.prisma.projectRoundState.findMany({
where: { projectId: input.id },
select: { roundId: true, state: true, enteredAt: true, exitedAt: true },
})
// Get file requirements for all rounds
let allRequirements: { id: string; roundId: string; name: string; description: string | null; isRequired: boolean; acceptedMimeTypes: string[]; maxSizeMB: number | null }[] = []
if (competitionRounds.length > 0) {
@@ -1306,6 +1358,7 @@ export const analyticsRouter = router({
assignments: assignmentsWithAvatars,
stats,
competitionRounds,
projectRoundStates,
allRequirements,
}
}),