320 lines
9.7 KiB
TypeScript
320 lines
9.7 KiB
TypeScript
|
import type { Metadata } from 'next'
|
||
|
|
import { Suspense } from 'react'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { auth } from '@/lib/auth'
|
||
|
|
import { prisma } from '@/lib/prisma'
|
||
|
|
|
||
|
|
export const metadata: Metadata = { title: 'Jury Dashboard' }
|
||
|
|
export const dynamic = 'force-dynamic'
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} 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 {
|
||
|
|
ClipboardList,
|
||
|
|
CheckCircle2,
|
||
|
|
Clock,
|
||
|
|
AlertCircle,
|
||
|
|
ArrowRight,
|
||
|
|
} from 'lucide-react'
|
||
|
|
import { formatDateOnly } from '@/lib/utils'
|
||
|
|
|
||
|
|
async function JuryDashboardContent() {
|
||
|
|
const session = await auth()
|
||
|
|
const userId = session?.user?.id
|
||
|
|
|
||
|
|
if (!userId) {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
// Get all assignments for this jury member
|
||
|
|
const assignments = await prisma.assignment.findMany({
|
||
|
|
where: {
|
||
|
|
userId,
|
||
|
|
},
|
||
|
|
include: {
|
||
|
|
project: {
|
||
|
|
select: {
|
||
|
|
id: true,
|
||
|
|
title: true,
|
||
|
|
teamName: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
round: {
|
||
|
|
select: {
|
||
|
|
id: true,
|
||
|
|
name: true,
|
||
|
|
status: true,
|
||
|
|
votingStartAt: true,
|
||
|
|
votingEndAt: true,
|
||
|
|
program: {
|
||
|
|
select: {
|
||
|
|
name: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
evaluation: {
|
||
|
|
select: {
|
||
|
|
id: true,
|
||
|
|
status: true,
|
||
|
|
submittedAt: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
orderBy: [
|
||
|
|
{ round: { votingEndAt: 'asc' } },
|
||
|
|
{ createdAt: 'asc' },
|
||
|
|
],
|
||
|
|
})
|
||
|
|
|
||
|
|
// Calculate stats
|
||
|
|
const totalAssignments = assignments.length
|
||
|
|
const completedAssignments = assignments.filter(
|
||
|
|
(a) => a.evaluation?.status === 'SUBMITTED'
|
||
|
|
).length
|
||
|
|
const inProgressAssignments = assignments.filter(
|
||
|
|
(a) => a.evaluation?.status === 'DRAFT'
|
||
|
|
).length
|
||
|
|
const pendingAssignments =
|
||
|
|
totalAssignments - completedAssignments - inProgressAssignments
|
||
|
|
|
||
|
|
const completionRate =
|
||
|
|
totalAssignments > 0 ? (completedAssignments / totalAssignments) * 100 : 0
|
||
|
|
|
||
|
|
// Group assignments by round
|
||
|
|
const assignmentsByRound = assignments.reduce(
|
||
|
|
(acc, assignment) => {
|
||
|
|
const roundId = assignment.round.id
|
||
|
|
if (!acc[roundId]) {
|
||
|
|
acc[roundId] = {
|
||
|
|
round: assignment.round,
|
||
|
|
assignments: [],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
acc[roundId].assignments.push(assignment)
|
||
|
|
return acc
|
||
|
|
},
|
||
|
|
{} as Record<string, { round: (typeof assignments)[0]['round']; assignments: typeof assignments }>
|
||
|
|
)
|
||
|
|
|
||
|
|
// Get active rounds (voting window is open)
|
||
|
|
const now = new Date()
|
||
|
|
const activeRounds = Object.values(assignmentsByRound).filter(
|
||
|
|
({ round }) =>
|
||
|
|
round.status === 'ACTIVE' &&
|
||
|
|
round.votingStartAt &&
|
||
|
|
round.votingEndAt &&
|
||
|
|
new Date(round.votingStartAt) <= now &&
|
||
|
|
new Date(round.votingEndAt) >= now
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{/* Stats */}
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium">
|
||
|
|
Total Assignments
|
||
|
|
</CardTitle>
|
||
|
|
<ClipboardList className="h-4 w-4 text-muted-foreground" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-2xl font-bold">{totalAssignments}</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium">Completed</CardTitle>
|
||
|
|
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-2xl font-bold">{completedAssignments}</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium">In Progress</CardTitle>
|
||
|
|
<Clock className="h-4 w-4 text-amber-600" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-2xl font-bold">{inProgressAssignments}</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium">Pending</CardTitle>
|
||
|
|
<AlertCircle className="h-4 w-4 text-muted-foreground" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-2xl font-bold">{pendingAssignments}</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Progress */}
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-lg">Overall Progress</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<Progress value={completionRate} className="h-3" />
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
||
|
|
{completedAssignments} of {totalAssignments} evaluations completed (
|
||
|
|
{completionRate.toFixed(0)}%)
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Active Rounds */}
|
||
|
|
{activeRounds.length > 0 && (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-lg">Active Voting Rounds</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
These rounds are 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
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={round.id}
|
||
|
|
className="rounded-lg border p-4 space-y-3"
|
||
|
|
>
|
||
|
|
<div className="flex items-start justify-between">
|
||
|
|
<div>
|
||
|
|
<h3 className="font-medium">{round.name}</h3>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
{round.program.name}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Badge variant="default">Active</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-1">
|
||
|
|
<div className="flex justify-between text-sm">
|
||
|
|
<span>Progress</span>
|
||
|
|
<span>
|
||
|
|
{roundCompleted}/{roundTotal}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Progress value={roundProgress} className="h-2" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{round.votingEndAt && (
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
Deadline: {formatDateOnly(round.votingEndAt)}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Button asChild size="sm" className="w-full sm:w-auto">
|
||
|
|
<Link href={`/jury/assignments?round=${round.id}`}>
|
||
|
|
View Assignments
|
||
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||
|
|
</Link>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* No active rounds message */}
|
||
|
|
{activeRounds.length === 0 && totalAssignments > 0 && (
|
||
|
|
<Card>
|
||
|
|
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
|
||
|
|
<Clock className="h-12 w-12 text-muted-foreground/50" />
|
||
|
|
<p className="mt-2 font-medium">No active voting rounds</p>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
Check back later when a voting window opens
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* No assignments message */}
|
||
|
|
{totalAssignments === 0 && (
|
||
|
|
<Card>
|
||
|
|
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
|
||
|
|
<ClipboardList className="h-12 w-12 text-muted-foreground/50" />
|
||
|
|
<p className="mt-2 font-medium">No assignments yet</p>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
You'll see your project assignments here once they're
|
||
|
|
assigned
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function DashboardSkeleton() {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||
|
|
{[...Array(4)].map((_, i) => (
|
||
|
|
<Card key={i}>
|
||
|
|
<CardHeader className="space-y-0 pb-2">
|
||
|
|
<Skeleton className="h-4 w-24" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<Skeleton className="h-8 w-12" />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<Skeleton className="h-5 w-32" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<Skeleton className="h-3 w-full" />
|
||
|
|
<Skeleton className="mt-2 h-4 w-48" />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default async function JuryDashboardPage() {
|
||
|
|
const session = await auth()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
{/* Header */}
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
Welcome back, {session?.user?.name || 'Juror'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<Suspense fallback={<DashboardSkeleton />}>
|
||
|
|
<JuryDashboardContent />
|
||
|
|
</Suspense>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|