Observer dashboard extraction, PDF reports, jury UX overhaul, and miscellaneous improvements
- Extract observer dashboard to client component, add PDF export button - Add PDF report generator with jsPDF for analytics reports - Overhaul jury evaluation page with improved layout and UX - Add new analytics endpoints for observer/admin reports - Improve round creation/edit forms with better settings - Fix filtering rules page, CSV export dialog, notification bell - Update auth, prisma schema, and various type fixes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -15,22 +15,21 @@ import {
|
||||
} from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
ClipboardList,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
ArrowRight,
|
||||
GitCompare,
|
||||
Zap,
|
||||
BarChart3,
|
||||
Target,
|
||||
Waves,
|
||||
} from 'lucide-react'
|
||||
import { formatDateOnly } from '@/lib/utils'
|
||||
import { CountdownTimer } from '@/components/shared/countdown-timer'
|
||||
import { AnimatedCard } from '@/components/shared/animated-container'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function getGreeting(): string {
|
||||
@@ -186,29 +185,33 @@ async function JuryDashboardContent() {
|
||||
label: 'Total Assignments',
|
||||
value: totalAssignments,
|
||||
icon: ClipboardList,
|
||||
iconBg: 'bg-blue-100 dark:bg-blue-900/30',
|
||||
accentColor: 'border-l-blue-500',
|
||||
iconBg: 'bg-blue-50 dark:bg-blue-950/40',
|
||||
iconColor: 'text-blue-600 dark:text-blue-400',
|
||||
},
|
||||
{
|
||||
label: 'Completed',
|
||||
value: completedAssignments,
|
||||
icon: CheckCircle2,
|
||||
iconBg: 'bg-green-100 dark:bg-green-900/30',
|
||||
iconColor: 'text-green-600 dark:text-green-400',
|
||||
accentColor: 'border-l-emerald-500',
|
||||
iconBg: 'bg-emerald-50 dark:bg-emerald-950/40',
|
||||
iconColor: 'text-emerald-600 dark:text-emerald-400',
|
||||
},
|
||||
{
|
||||
label: 'In Progress',
|
||||
value: inProgressAssignments,
|
||||
icon: Clock,
|
||||
iconBg: 'bg-amber-100 dark:bg-amber-900/30',
|
||||
accentColor: 'border-l-amber-500',
|
||||
iconBg: 'bg-amber-50 dark:bg-amber-950/40',
|
||||
iconColor: 'text-amber-600 dark:text-amber-400',
|
||||
},
|
||||
{
|
||||
label: 'Pending',
|
||||
value: pendingAssignments,
|
||||
icon: Target,
|
||||
iconBg: 'bg-slate-100 dark:bg-slate-800',
|
||||
iconColor: 'text-slate-500',
|
||||
accentColor: 'border-l-slate-400',
|
||||
iconBg: 'bg-slate-50 dark:bg-slate-800/50',
|
||||
iconColor: 'text-slate-500 dark:text-slate-400',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -216,334 +219,422 @@ async function JuryDashboardContent() {
|
||||
<>
|
||||
{/* Hero CTA - Jump to next evaluation */}
|
||||
{nextUnevaluated && activeRemaining > 0 && (
|
||||
<Card className="border-primary/20 bg-gradient-to-r from-primary/5 to-accent/5">
|
||||
<CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 py-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-full bg-primary/10 p-2.5">
|
||||
<Zap className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold">
|
||||
{activeRemaining} evaluation{activeRemaining > 1 ? 's' : ''} remaining
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Continue with "{nextUnevaluated.project.title}"
|
||||
</p>
|
||||
</div>
|
||||
<AnimatedCard index={0}>
|
||||
<Card className="overflow-hidden border-0 shadow-lg">
|
||||
<div className="bg-gradient-to-r from-brand-blue to-brand-teal p-[1px] rounded-lg">
|
||||
<CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 py-5 px-6 rounded-[7px] bg-background">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-xl bg-gradient-to-br from-brand-blue to-brand-teal p-3 shadow-sm">
|
||||
<Zap className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-base">
|
||||
{activeRemaining} evaluation{activeRemaining > 1 ? 's' : ''} remaining
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Continue with "{nextUnevaluated.project.title}"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button asChild size="lg" className="bg-brand-blue hover:bg-brand-blue-light shadow-md">
|
||||
<Link href={`/jury/projects/${nextUnevaluated.project.id}/evaluate`}>
|
||||
{nextUnevaluated.evaluation?.status === 'DRAFT' ? 'Continue Evaluation' : 'Start Evaluation'}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<Link href={`/jury/projects/${nextUnevaluated.project.id}/evaluate`}>
|
||||
{nextUnevaluated.evaluation?.status === 'DRAFT' ? 'Continue Evaluation' : 'Start Evaluation'}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((stat) => (
|
||||
<Card key={stat.label} className="transition-all hover:shadow-md">
|
||||
<CardContent className="flex items-center gap-4 py-4">
|
||||
<div className={cn('rounded-full p-2.5', stat.iconBg)}>
|
||||
<stat.icon className={cn('h-5 w-5', stat.iconColor)} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold tabular-nums">{stat.value}</p>
|
||||
<p className="text-sm text-muted-foreground">{stat.label}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{stats.map((stat, i) => (
|
||||
<AnimatedCard key={stat.label} index={i + 1}>
|
||||
<Card className={cn(
|
||||
'border-l-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
|
||||
stat.accentColor,
|
||||
)}>
|
||||
<CardContent className="flex items-center gap-4 py-5 px-5">
|
||||
<div className={cn('rounded-xl p-3', stat.iconBg)}>
|
||||
<stat.icon className={cn('h-5 w-5', stat.iconColor)} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold tabular-nums tracking-tight">{stat.value}</p>
|
||||
<p className="text-sm text-muted-foreground font-medium">{stat.label}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Overall Progress */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">Overall Completion</span>
|
||||
<AnimatedCard index={5}>
|
||||
<Card className="overflow-hidden">
|
||||
<div className="h-1 w-full bg-gradient-to-r from-brand-teal via-brand-blue to-brand-teal" />
|
||||
<CardContent className="py-5 px-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="rounded-lg bg-brand-blue/10 p-2 dark:bg-brand-blue/20">
|
||||
<BarChart3 className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
|
||||
</div>
|
||||
<span className="text-sm font-semibold">Overall Completion</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-2xl font-bold tabular-nums text-brand-blue dark:text-brand-teal">
|
||||
{completionRate.toFixed(0)}%
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground ml-1">
|
||||
({completedAssignments}/{totalAssignments})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm font-semibold tabular-nums">
|
||||
{completedAssignments}/{totalAssignments} ({completionRate.toFixed(0)}%)
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={completionRate} className="h-2.5" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="relative h-3 w-full overflow-hidden rounded-full bg-muted/60">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
|
||||
style={{ width: `${completionRate}%` }}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
{/* Main content — two column layout */}
|
||||
{/* Main content -- two column layout */}
|
||||
<div className="grid gap-6 lg:grid-cols-12">
|
||||
{/* Left column */}
|
||||
<div className="lg:col-span-7 space-y-6">
|
||||
{/* Recent Assignments */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">My Assignments</CardTitle>
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href="/jury/assignments">
|
||||
View all
|
||||
<ArrowRight className="ml-1 h-3 w-3" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{recentAssignments.length > 0 ? (
|
||||
<div className="divide-y">
|
||||
{recentAssignments.map((assignment) => {
|
||||
const evaluation = assignment.evaluation
|
||||
const isCompleted = evaluation?.status === 'SUBMITTED'
|
||||
const isDraft = evaluation?.status === 'DRAFT'
|
||||
const isVotingOpen =
|
||||
assignment.round.status === 'ACTIVE' &&
|
||||
assignment.round.votingStartAt &&
|
||||
assignment.round.votingEndAt &&
|
||||
new Date(assignment.round.votingStartAt) <= now &&
|
||||
new Date(assignment.round.votingEndAt) >= now
|
||||
<AnimatedCard index={6}>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="rounded-lg bg-brand-blue/10 p-1.5 dark:bg-brand-blue/20">
|
||||
<ClipboardList className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">My Assignments</CardTitle>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" asChild className="text-brand-teal hover:text-brand-blue">
|
||||
<Link href="/jury/assignments">
|
||||
View all
|
||||
<ArrowRight className="ml-1 h-3 w-3" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{recentAssignments.length > 0 ? (
|
||||
<div className="space-y-1">
|
||||
{recentAssignments.map((assignment, idx) => {
|
||||
const evaluation = assignment.evaluation
|
||||
const isCompleted = evaluation?.status === 'SUBMITTED'
|
||||
const isDraft = evaluation?.status === 'DRAFT'
|
||||
const isVotingOpen =
|
||||
assignment.round.status === 'ACTIVE' &&
|
||||
assignment.round.votingStartAt &&
|
||||
assignment.round.votingEndAt &&
|
||||
new Date(assignment.round.votingStartAt) <= now &&
|
||||
new Date(assignment.round.votingEndAt) >= now
|
||||
|
||||
return (
|
||||
<div
|
||||
key={assignment.id}
|
||||
className="flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0"
|
||||
>
|
||||
<Link
|
||||
href={`/jury/projects/${assignment.project.id}`}
|
||||
className="flex-1 min-w-0 group"
|
||||
return (
|
||||
<div
|
||||
key={assignment.id}
|
||||
className={cn(
|
||||
'flex items-center justify-between gap-3 py-3 px-3 -mx-3 rounded-lg transition-colors duration-150',
|
||||
'hover:bg-muted/50',
|
||||
idx !== recentAssignments.length - 1 && 'border-b border-border/50',
|
||||
)}
|
||||
>
|
||||
<p className="text-sm font-medium truncate group-hover:text-primary group-hover:underline transition-colors">
|
||||
{assignment.project.title}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{assignment.project.teamName}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] px-1.5 py-0">
|
||||
{assignment.round.name}
|
||||
</Badge>
|
||||
<Link
|
||||
href={`/jury/projects/${assignment.project.id}`}
|
||||
className="flex-1 min-w-0 group"
|
||||
>
|
||||
<p className="text-sm font-medium truncate group-hover:text-brand-blue dark:group-hover:text-brand-teal transition-colors">
|
||||
{assignment.project.title}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{assignment.project.teamName}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] px-1.5 py-0 bg-brand-blue/5 text-brand-blue/80 dark:bg-brand-teal/10 dark:text-brand-teal/80 border-0">
|
||||
{assignment.round.name}
|
||||
</Badge>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{isCompleted ? (
|
||||
<Badge variant="success" className="text-xs">
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||||
Done
|
||||
</Badge>
|
||||
) : isDraft ? (
|
||||
<Badge variant="warning" className="text-xs">
|
||||
<Clock className="mr-1 h-3 w-3" />
|
||||
Draft
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary" className="text-xs">Pending</Badge>
|
||||
)}
|
||||
{isCompleted ? (
|
||||
<Button variant="ghost" size="sm" asChild className="h-7 px-2">
|
||||
<Link href={`/jury/projects/${assignment.project.id}/evaluation`}>
|
||||
View
|
||||
</Link>
|
||||
</Button>
|
||||
) : isVotingOpen ? (
|
||||
<Button size="sm" asChild className="h-7 px-3 bg-brand-blue hover:bg-brand-blue-light shadow-sm">
|
||||
<Link href={`/jury/projects/${assignment.project.id}/evaluate`}>
|
||||
{isDraft ? 'Continue' : 'Evaluate'}
|
||||
</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="ghost" size="sm" asChild className="h-7 px-2">
|
||||
<Link href={`/jury/projects/${assignment.project.id}`}>
|
||||
View
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{isCompleted ? (
|
||||
<Badge variant="success" className="text-xs">
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||||
Done
|
||||
</Badge>
|
||||
) : isDraft ? (
|
||||
<Badge variant="warning" className="text-xs">
|
||||
<Clock className="mr-1 h-3 w-3" />
|
||||
Draft
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary" className="text-xs">Pending</Badge>
|
||||
)}
|
||||
{isCompleted ? (
|
||||
<Button variant="ghost" size="sm" asChild className="h-7 px-2">
|
||||
<Link href={`/jury/projects/${assignment.project.id}/evaluation`}>
|
||||
View
|
||||
</Link>
|
||||
</Button>
|
||||
) : isVotingOpen ? (
|
||||
<Button size="sm" asChild className="h-7 px-2">
|
||||
<Link href={`/jury/projects/${assignment.project.id}/evaluate`}>
|
||||
{isDraft ? 'Continue' : 'Evaluate'}
|
||||
</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="ghost" size="sm" asChild className="h-7 px-2">
|
||||
<Link href={`/jury/projects/${assignment.project.id}`}>
|
||||
View
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<ClipboardList className="h-10 w-10 text-muted-foreground/30" />
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
No assignments yet
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-center">
|
||||
<div className="rounded-2xl bg-brand-teal/10 p-4 mb-3">
|
||||
<ClipboardList className="h-8 w-8 text-brand-teal/60" />
|
||||
</div>
|
||||
<p className="font-medium text-muted-foreground">
|
||||
No assignments yet
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground/70 mt-1 max-w-[240px]">
|
||||
Assignments will appear here once an administrator assigns projects to you.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg">Quick Actions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Button variant="outline" className="justify-start h-auto py-3" asChild>
|
||||
<Link href="/jury/assignments">
|
||||
<ClipboardList className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<AnimatedCard index={7}>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="rounded-lg bg-brand-teal/10 p-1.5 dark:bg-brand-teal/20">
|
||||
<Zap className="h-4 w-4 text-brand-teal" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">Quick Actions</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Link
|
||||
href="/jury/assignments"
|
||||
className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5"
|
||||
>
|
||||
<div className="rounded-xl bg-blue-50 p-3 transition-colors group-hover:bg-blue-100 dark:bg-blue-950/40 dark:group-hover:bg-blue-950/60">
|
||||
<ClipboardList className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="font-medium">All Assignments</p>
|
||||
<p className="text-xs text-muted-foreground">View and manage evaluations</p>
|
||||
<p className="font-semibold text-sm group-hover:text-brand-blue dark:group-hover:text-brand-teal transition-colors">All Assignments</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">View and manage evaluations</p>
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" className="justify-start h-auto py-3" asChild>
|
||||
<Link href="/jury/compare">
|
||||
<GitCompare className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<Link
|
||||
href="/jury/compare"
|
||||
className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md"
|
||||
>
|
||||
<div className="rounded-xl bg-teal-50 p-3 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40 dark:group-hover:bg-teal-950/60">
|
||||
<GitCompare className="h-5 w-5 text-brand-teal" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="font-medium">Compare Projects</p>
|
||||
<p className="text-xs text-muted-foreground">Side-by-side comparison</p>
|
||||
<p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Side-by-side comparison</p>
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
</div>
|
||||
|
||||
{/* Right column */}
|
||||
<div className="lg:col-span-5 space-y-6">
|
||||
{/* Active Rounds */}
|
||||
{activeRounds.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg">Active Voting Rounds</CardTitle>
|
||||
<CardDescription>
|
||||
Rounds currently open for evaluation
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{activeRounds.map(({ round, assignments: roundAssignments }) => {
|
||||
const roundCompleted = roundAssignments.filter(
|
||||
(a) => a.evaluation?.status === 'SUBMITTED'
|
||||
).length
|
||||
const roundTotal = roundAssignments.length
|
||||
const roundProgress =
|
||||
roundTotal > 0 ? (roundCompleted / roundTotal) * 100 : 0
|
||||
const isAlmostDone = roundProgress >= 80
|
||||
const deadline = graceByRound.get(round.id) ?? (round.votingEndAt ? new Date(round.votingEndAt) : null)
|
||||
const isUrgent = deadline && (deadline.getTime() - now.getTime()) < 24 * 60 * 60 * 1000
|
||||
<AnimatedCard index={8}>
|
||||
<Card className="overflow-hidden">
|
||||
<div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="rounded-lg bg-brand-blue/10 p-1.5 dark:bg-brand-blue/20">
|
||||
<Waves className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">Active Voting Rounds</CardTitle>
|
||||
<CardDescription className="mt-0.5">
|
||||
Rounds currently open for evaluation
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{activeRounds.map(({ round, assignments: roundAssignments }) => {
|
||||
const roundCompleted = roundAssignments.filter(
|
||||
(a) => a.evaluation?.status === 'SUBMITTED'
|
||||
).length
|
||||
const roundTotal = roundAssignments.length
|
||||
const roundProgress =
|
||||
roundTotal > 0 ? (roundCompleted / roundTotal) * 100 : 0
|
||||
const isAlmostDone = roundProgress >= 80
|
||||
const deadline = graceByRound.get(round.id) ?? (round.votingEndAt ? new Date(round.votingEndAt) : null)
|
||||
const isUrgent = deadline && (deadline.getTime() - now.getTime()) < 24 * 60 * 60 * 1000
|
||||
|
||||
return (
|
||||
<div
|
||||
key={round.id}
|
||||
className={cn(
|
||||
'rounded-lg border p-4 space-y-3 transition-all hover:-translate-y-0.5 hover:shadow-md',
|
||||
isUrgent && 'border-red-200 bg-red-50/50 dark:border-red-900 dark:bg-red-950/20'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium">{round.name}</h3>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{round.program.name} · {round.program.year}
|
||||
</p>
|
||||
</div>
|
||||
{isAlmostDone ? (
|
||||
<Badge variant="success">Almost done</Badge>
|
||||
) : (
|
||||
<Badge variant="default">Active</Badge>
|
||||
return (
|
||||
<div
|
||||
key={round.id}
|
||||
className={cn(
|
||||
'rounded-xl border p-4 space-y-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
|
||||
isUrgent
|
||||
? 'border-red-200 bg-red-50/50 dark:border-red-900 dark:bg-red-950/20'
|
||||
: 'border-border/60 bg-muted/20 dark:bg-muted/10'
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">Progress</span>
|
||||
<span className="font-medium tabular-nums">
|
||||
{roundCompleted}/{roundTotal}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={roundProgress} className="h-2" />
|
||||
</div>
|
||||
|
||||
{deadline && (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<CountdownTimer
|
||||
deadline={deadline}
|
||||
label="Deadline:"
|
||||
/>
|
||||
{round.votingEndAt && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({formatDateOnly(round.votingEndAt)})
|
||||
</span>
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold text-brand-blue dark:text-brand-teal">{round.name}</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{round.program.name} · {round.program.year}
|
||||
</p>
|
||||
</div>
|
||||
{isAlmostDone ? (
|
||||
<Badge variant="success">Almost done</Badge>
|
||||
) : (
|
||||
<Badge variant="info">Active</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button asChild size="sm" className="w-full">
|
||||
<Link href={`/jury/assignments?round=${round.id}`}>
|
||||
View Assignments
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">Progress</span>
|
||||
<span className="font-semibold tabular-nums">
|
||||
{roundCompleted}/{roundTotal}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative h-2.5 w-full overflow-hidden rounded-full bg-muted/60">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
|
||||
style={{ width: `${roundProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{deadline && (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<CountdownTimer
|
||||
deadline={deadline}
|
||||
label="Deadline:"
|
||||
/>
|
||||
{round.votingEndAt && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({formatDateOnly(round.votingEndAt)})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button asChild size="sm" className="w-full bg-brand-blue hover:bg-brand-blue-light shadow-sm">
|
||||
<Link href={`/jury/assignments?round=${round.id}`}>
|
||||
View Assignments
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
)}
|
||||
|
||||
{/* No active rounds */}
|
||||
{activeRounds.length === 0 && totalAssignments > 0 && (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<div className="rounded-full bg-muted p-3 mb-3">
|
||||
<Clock className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<p className="font-medium">No active voting rounds</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Check back later when a voting window opens
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<AnimatedCard index={8}>
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-10 text-center">
|
||||
<div className="rounded-2xl bg-brand-teal/10 p-4 mb-3 dark:bg-brand-teal/20">
|
||||
<Clock className="h-7 w-7 text-brand-teal/70" />
|
||||
</div>
|
||||
<p className="font-semibold text-sm">No active voting rounds</p>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-[220px]">
|
||||
Check back later when a voting window opens
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
)}
|
||||
|
||||
{/* Completion Summary by Round */}
|
||||
{Object.keys(assignmentsByRound).length > 0 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg">Round Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{Object.values(assignmentsByRound).map(({ round, assignments: roundAssignments }) => {
|
||||
const done = roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length
|
||||
const total = roundAssignments.length
|
||||
const pct = total > 0 ? Math.round((done / total) * 100) : 0
|
||||
return (
|
||||
<div key={round.id} className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium truncate">{round.name}</span>
|
||||
<span className="text-muted-foreground tabular-nums shrink-0 ml-2">
|
||||
{done}/{total} ({pct}%)
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={pct} className="h-1.5" />
|
||||
<AnimatedCard index={9}>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="rounded-lg bg-brand-teal/10 p-1.5 dark:bg-brand-teal/20">
|
||||
<BarChart3 className="h-4 w-4 text-brand-teal" />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<CardTitle className="text-lg">Round Summary</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{Object.values(assignmentsByRound).map(({ round, assignments: roundAssignments }) => {
|
||||
const done = roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length
|
||||
const total = roundAssignments.length
|
||||
const pct = total > 0 ? Math.round((done / total) * 100) : 0
|
||||
return (
|
||||
<div key={round.id} className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium truncate">{round.name}</span>
|
||||
<div className="flex items-baseline gap-1 shrink-0 ml-2">
|
||||
<span className="font-bold tabular-nums text-brand-blue dark:text-brand-teal">{pct}%</span>
|
||||
<span className="text-xs text-muted-foreground">({done}/{total})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-2 w-full overflow-hidden rounded-full bg-muted/60">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* No assignments at all */}
|
||||
{totalAssignments === 0 && (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div className="rounded-full bg-muted p-4 mb-4">
|
||||
<ClipboardList className="h-8 w-8 text-muted-foreground" />
|
||||
</div>
|
||||
<p className="text-lg font-medium">No assignments yet</p>
|
||||
<p className="text-sm text-muted-foreground mt-1 max-w-sm">
|
||||
You'll see your project assignments here once they're assigned to you by an administrator.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<AnimatedCard index={1}>
|
||||
<Card className="overflow-hidden">
|
||||
<div className="h-1 w-full bg-gradient-to-r from-brand-teal/40 via-brand-blue/40 to-brand-teal/40" />
|
||||
<CardContent className="flex flex-col items-center justify-center py-14 text-center">
|
||||
<div className="rounded-2xl bg-gradient-to-br from-brand-teal/10 to-brand-blue/10 p-5 mb-4 dark:from-brand-teal/20 dark:to-brand-blue/20">
|
||||
<ClipboardList className="h-10 w-10 text-brand-teal/60" />
|
||||
</div>
|
||||
<p className="text-lg font-semibold">No assignments yet</p>
|
||||
<p className="text-sm text-muted-foreground mt-1.5 max-w-sm">
|
||||
You'll see your project assignments here once they're assigned to you by an administrator.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
@@ -552,34 +643,42 @@ async function JuryDashboardContent() {
|
||||
function DashboardSkeleton() {
|
||||
return (
|
||||
<>
|
||||
{/* Stats skeleton */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="flex items-center gap-4 py-4">
|
||||
<Skeleton className="h-10 w-10 rounded-full" />
|
||||
<Card key={i} className="border-l-4 border-l-muted">
|
||||
<CardContent className="flex items-center gap-4 py-5 px-5">
|
||||
<Skeleton className="h-11 w-11 rounded-xl" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-12" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-7 w-12" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<Skeleton className="h-2.5 w-full" />
|
||||
{/* Progress bar skeleton */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="h-1 w-full bg-muted" />
|
||||
<CardContent className="py-5 px-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-7 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-full rounded-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Two-column skeleton */}
|
||||
<div className="grid gap-6 lg:grid-cols-12">
|
||||
<div className="lg:col-span-7">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<CardHeader className="pb-3">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="space-y-1.5">
|
||||
<div key={i} className="flex items-center justify-between py-2">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
@@ -589,13 +688,27 @@ function DashboardSkeleton() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="lg:col-span-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-40" />
|
||||
<div className="lg:col-span-5 space-y-6">
|
||||
<Card className="overflow-hidden">
|
||||
<div className="h-1 w-full bg-muted" />
|
||||
<CardHeader className="pb-3">
|
||||
<Skeleton className="h-5 w-44" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-24 w-full rounded-lg" />
|
||||
<Skeleton className="h-28 w-full rounded-xl" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<Skeleton className="h-5 w-36" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{[...Array(2)].map((_, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-2 w-full rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -610,13 +723,16 @@ export default async function JuryDashboardPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
{getGreeting()}, {session?.user?.name || 'Juror'}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Here's an overview of your evaluation progress
|
||||
</p>
|
||||
<div className="relative">
|
||||
<div className="absolute -top-6 -left-6 -right-6 h-32 bg-gradient-to-b from-brand-blue/[0.03] to-transparent dark:from-brand-blue/[0.06] pointer-events-none rounded-xl" />
|
||||
<div className="relative">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-brand-blue dark:text-foreground">
|
||||
{getGreeting()}, {session?.user?.name || 'Juror'}
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-0.5">
|
||||
Here's an overview of your evaluation progress
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
|
||||
Reference in New Issue
Block a user