Initial commit: MOPC platform with Docker deployment setup
Full Next.js 15 platform with tRPC, Prisma, PostgreSQL, NextAuth. Includes production Dockerfile (multi-stage, port 7600), docker-compose with registry-based image pull, Gitea Actions CI workflow, nginx config for portal.monaco-opc.com, deployment scripts, and DEPLOYMENT.md guide. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
318
src/app/(jury)/jury/projects/[id]/evaluate/page.tsx
Normal file
318
src/app/(jury)/jury/projects/[id]/evaluate/page.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
import { Suspense } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { notFound, redirect } from 'next/navigation'
|
||||
import { auth } from '@/lib/auth'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { EvaluationForm } from '@/components/forms/evaluation-form'
|
||||
import { ArrowLeft, AlertCircle, Clock, FileText, Users } from 'lucide-react'
|
||||
import { isFuture, isPast } from 'date-fns'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
// Define the criterion type for the evaluation form
|
||||
interface Criterion {
|
||||
id: string
|
||||
label: string
|
||||
description?: string
|
||||
scale: number
|
||||
weight?: number
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
async function EvaluateContent({ projectId }: { projectId: string }) {
|
||||
const session = await auth()
|
||||
const userId = session?.user?.id
|
||||
|
||||
if (!userId) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
// Get project with assignment info for this user
|
||||
const project = await prisma.project.findUnique({
|
||||
where: { id: projectId },
|
||||
include: {
|
||||
files: true,
|
||||
round: {
|
||||
include: {
|
||||
program: {
|
||||
select: { name: true },
|
||||
},
|
||||
evaluationForms: {
|
||||
where: { isActive: true },
|
||||
take: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (!project) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
// Check if user is assigned to this project
|
||||
const assignment = await prisma.assignment.findFirst({
|
||||
where: {
|
||||
projectId,
|
||||
userId,
|
||||
},
|
||||
include: {
|
||||
evaluation: {
|
||||
include: {
|
||||
form: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (!assignment) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href="/jury/assignments">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Assignments
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-destructive/50" />
|
||||
<p className="mt-2 font-medium text-destructive">Access Denied</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You are not assigned to evaluate this project
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const round = project.round
|
||||
const now = new Date()
|
||||
|
||||
// Check voting window
|
||||
const isVotingOpen =
|
||||
round.status === 'ACTIVE' &&
|
||||
round.votingStartAt &&
|
||||
round.votingEndAt &&
|
||||
new Date(round.votingStartAt) <= now &&
|
||||
new Date(round.votingEndAt) >= now
|
||||
|
||||
const isVotingUpcoming =
|
||||
round.votingStartAt && isFuture(new Date(round.votingStartAt))
|
||||
|
||||
const isVotingClosed = round.votingEndAt && isPast(new Date(round.votingEndAt))
|
||||
|
||||
// Check for grace period
|
||||
const gracePeriod = await prisma.gracePeriod.findFirst({
|
||||
where: {
|
||||
roundId: round.id,
|
||||
userId,
|
||||
OR: [{ projectId: null }, { projectId }],
|
||||
extendedUntil: { gte: now },
|
||||
},
|
||||
})
|
||||
|
||||
const hasGracePeriod = !!gracePeriod
|
||||
const effectiveVotingOpen = isVotingOpen || hasGracePeriod
|
||||
|
||||
// Check if already submitted
|
||||
const evaluation = assignment.evaluation
|
||||
const isSubmitted =
|
||||
evaluation?.status === 'SUBMITTED' || evaluation?.status === 'LOCKED'
|
||||
|
||||
if (isSubmitted) {
|
||||
redirect(`/jury/projects/${projectId}/evaluation`)
|
||||
}
|
||||
|
||||
// Get evaluation form criteria
|
||||
const evaluationForm = round.evaluationForms[0]
|
||||
if (!evaluationForm) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href={`/jury/projects/${projectId}`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Project
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-amber-500/50" />
|
||||
<p className="mt-2 font-medium">Evaluation Form Not Available</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The evaluation criteria for this round have not been configured yet.
|
||||
Please check back later.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Parse criteria from JSON
|
||||
const criteria: Criterion[] = (evaluationForm.criteriaJson as unknown as Criterion[]) || []
|
||||
|
||||
// Handle voting not open
|
||||
if (!effectiveVotingOpen) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href={`/jury/projects/${projectId}`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Project
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Clock className="h-12 w-12 text-amber-500/50" />
|
||||
<p className="mt-2 font-medium">
|
||||
{isVotingUpcoming ? 'Voting Not Yet Open' : 'Voting Period Closed'}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{isVotingUpcoming
|
||||
? 'The voting window for this round has not started yet.'
|
||||
: 'The voting window for this round has ended.'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back button and project summary */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div>
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href={`/jury/projects/${projectId}`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Project
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div className="mt-2 space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>{round.program.name}</span>
|
||||
<span>/</span>
|
||||
<span>{round.name}</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold">Evaluate: {project.title}</h1>
|
||||
{project.teamName && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{project.teamName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick file access */}
|
||||
{project.files.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{project.files.length} file{project.files.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href={`/jury/projects/${projectId}`}>View Files</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Grace period notice */}
|
||||
{hasGracePeriod && gracePeriod && (
|
||||
<Card className="border-amber-500 bg-amber-500/5">
|
||||
<CardContent className="py-3">
|
||||
<div className="flex items-center gap-2 text-amber-600">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">
|
||||
You have a grace period extension until{' '}
|
||||
{new Date(gracePeriod.extendedUntil).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Evaluation Form */}
|
||||
<EvaluationForm
|
||||
assignmentId={assignment.id}
|
||||
evaluationId={evaluation?.id || null}
|
||||
projectTitle={project.title}
|
||||
criteria={criteria}
|
||||
initialData={
|
||||
evaluation
|
||||
? {
|
||||
criterionScoresJson: evaluation.criterionScoresJson as Record<
|
||||
string,
|
||||
number
|
||||
> | null,
|
||||
globalScore: evaluation.globalScore,
|
||||
binaryDecision: evaluation.binaryDecision,
|
||||
feedbackText: evaluation.feedbackText,
|
||||
status: evaluation.status,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
isVotingOpen={effectiveVotingOpen}
|
||||
deadline={round.votingEndAt}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EvaluateSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-9 w-36" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-6 w-80" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="space-y-3">
|
||||
<Skeleton className="h-5 w-48" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<Skeleton className="h-12 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function EvaluatePage({ params }: PageProps) {
|
||||
const { id } = await params
|
||||
|
||||
return (
|
||||
<Suspense fallback={<EvaluateSkeleton />}>
|
||||
<EvaluateContent projectId={id} />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
394
src/app/(jury)/jury/projects/[id]/evaluation/page.tsx
Normal file
394
src/app/(jury)/jury/projects/[id]/evaluation/page.tsx
Normal file
@@ -0,0 +1,394 @@
|
||||
import { Suspense } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { notFound, redirect } from 'next/navigation'
|
||||
import { auth } from '@/lib/auth'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
|
||||
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 { Separator } from '@/components/ui/separator'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
ThumbsUp,
|
||||
ThumbsDown,
|
||||
Calendar,
|
||||
Users,
|
||||
Star,
|
||||
AlertCircle,
|
||||
} from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
interface Criterion {
|
||||
id: string
|
||||
label: string
|
||||
description?: string
|
||||
scale: number
|
||||
weight?: number
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
async function EvaluationContent({ projectId }: { projectId: string }) {
|
||||
const session = await auth()
|
||||
const userId = session?.user?.id
|
||||
|
||||
if (!userId) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
// Get project with assignment info for this user
|
||||
const project = await prisma.project.findUnique({
|
||||
where: { id: projectId },
|
||||
include: {
|
||||
round: {
|
||||
include: {
|
||||
program: {
|
||||
select: { name: true },
|
||||
},
|
||||
evaluationForms: {
|
||||
where: { isActive: true },
|
||||
take: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (!project) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
// Check if user is assigned to this project
|
||||
const assignment = await prisma.assignment.findFirst({
|
||||
where: {
|
||||
projectId,
|
||||
userId,
|
||||
},
|
||||
include: {
|
||||
evaluation: {
|
||||
include: {
|
||||
form: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (!assignment) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href="/jury/assignments">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Assignments
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-destructive/50" />
|
||||
<p className="mt-2 font-medium text-destructive">Access Denied</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You are not assigned to evaluate this project
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const evaluation = assignment.evaluation
|
||||
|
||||
if (!evaluation || evaluation.status === 'NOT_STARTED') {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href={`/jury/projects/${projectId}`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Project
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Star className="h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="mt-2 font-medium">No Evaluation Found</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You haven't submitted an evaluation for this project yet.
|
||||
</p>
|
||||
<Button asChild className="mt-4">
|
||||
<Link href={`/jury/projects/${projectId}/evaluate`}>
|
||||
Start Evaluation
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Parse criteria from the evaluation form
|
||||
const criteria: Criterion[] =
|
||||
(evaluation.form.criteriaJson as unknown as Criterion[]) || []
|
||||
const criterionScores =
|
||||
(evaluation.criterionScoresJson as unknown as Record<string, number>) || {}
|
||||
|
||||
const round = project.round
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back button */}
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href="/jury/assignments">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Assignments
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
{/* Header */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>{round.program.name}</span>
|
||||
<span>/</span>
|
||||
<span>{round.name}</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
My Evaluation: {project.title}
|
||||
</h1>
|
||||
{project.teamName && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{project.teamName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
variant="default"
|
||||
className="w-fit bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||||
{evaluation.status === 'LOCKED' ? 'Locked' : 'Submitted'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{evaluation.submittedAt && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="h-4 w-4" />
|
||||
Submitted on {format(new Date(evaluation.submittedAt), 'PPP')} at{' '}
|
||||
{format(new Date(evaluation.submittedAt), 'p')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Criteria scores */}
|
||||
{criteria.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Criteria Scores</CardTitle>
|
||||
<CardDescription>
|
||||
Your ratings for each evaluation criterion
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{criteria.map((criterion) => {
|
||||
const score = criterionScores[criterion.id]
|
||||
return (
|
||||
<div key={criterion.id} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium">{criterion.label}</p>
|
||||
{criterion.description && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{criterion.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl font-bold">{score}</span>
|
||||
<span className="text-muted-foreground">
|
||||
/ {criterion.scale}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Visual score bar */}
|
||||
<div className="flex gap-1">
|
||||
{Array.from(
|
||||
{ length: criterion.scale },
|
||||
(_, i) => i + 1
|
||||
).map((num) => (
|
||||
<div
|
||||
key={num}
|
||||
className={`h-2 flex-1 rounded-full ${
|
||||
num <= score
|
||||
? 'bg-primary'
|
||||
: 'bg-muted'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Global score */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Overall Score</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-primary/10">
|
||||
<span className="text-3xl font-bold text-primary">
|
||||
{evaluation.globalScore}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-medium">out of 10</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{evaluation.globalScore && evaluation.globalScore >= 8
|
||||
? 'Excellent'
|
||||
: evaluation.globalScore && evaluation.globalScore >= 6
|
||||
? 'Good'
|
||||
: evaluation.globalScore && evaluation.globalScore >= 4
|
||||
? 'Average'
|
||||
: 'Below Average'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recommendation */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Recommendation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className={`flex items-center gap-3 rounded-lg p-4 ${
|
||||
evaluation.binaryDecision
|
||||
? 'bg-green-500/10 text-green-700 dark:text-green-400'
|
||||
: 'bg-red-500/10 text-red-700 dark:text-red-400'
|
||||
}`}
|
||||
>
|
||||
{evaluation.binaryDecision ? (
|
||||
<>
|
||||
<ThumbsUp className="h-8 w-8" />
|
||||
<div>
|
||||
<p className="font-semibold">Recommended to Advance</p>
|
||||
<p className="text-sm opacity-80">
|
||||
You voted YES for this project to advance to the next round
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ThumbsDown className="h-8 w-8" />
|
||||
<div>
|
||||
<p className="font-semibold">Not Recommended</p>
|
||||
<p className="text-sm opacity-80">
|
||||
You voted NO for this project to advance
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feedback */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Written Feedback</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg bg-muted p-4">
|
||||
<p className="whitespace-pre-wrap">{evaluation.feedbackText}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" asChild>
|
||||
<Link href={`/jury/projects/${projectId}`}>View Project Details</Link>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<Link href="/jury/assignments">Back to All Assignments</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EvaluationSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-9 w-36" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-8 w-96" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
|
||||
<Skeleton className="h-px w-full" />
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
<Skeleton className="h-8 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-2 w-full" />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-20 w-32 rounded-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function EvaluationViewPage({ params }: PageProps) {
|
||||
const { id } = await params
|
||||
|
||||
return (
|
||||
<Suspense fallback={<EvaluationSkeleton />}>
|
||||
<EvaluationContent projectId={id} />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
489
src/app/(jury)/jury/projects/[id]/page.tsx
Normal file
489
src/app/(jury)/jury/projects/[id]/page.tsx
Normal file
@@ -0,0 +1,489 @@
|
||||
import { Suspense } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { notFound, redirect } from 'next/navigation'
|
||||
import { auth } from '@/lib/auth'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
|
||||
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 { Separator } from '@/components/ui/separator'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { FileViewer, FileViewerSkeleton } from '@/components/shared/file-viewer'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Users,
|
||||
Calendar,
|
||||
Clock,
|
||||
CheckCircle2,
|
||||
Edit3,
|
||||
Tag,
|
||||
FileText,
|
||||
AlertCircle,
|
||||
} from 'lucide-react'
|
||||
import { formatDistanceToNow, format, isPast, isFuture } from 'date-fns'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
async function ProjectContent({ projectId }: { projectId: string }) {
|
||||
const session = await auth()
|
||||
const userId = session?.user?.id
|
||||
|
||||
if (!userId) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
// Get project with assignment info for this user
|
||||
const project = await prisma.project.findUnique({
|
||||
where: { id: projectId },
|
||||
include: {
|
||||
files: true,
|
||||
round: {
|
||||
include: {
|
||||
program: {
|
||||
select: { name: true },
|
||||
},
|
||||
evaluationForms: {
|
||||
where: { isActive: true },
|
||||
take: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (!project) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
// Check if user is assigned to this project
|
||||
const assignment = await prisma.assignment.findFirst({
|
||||
where: {
|
||||
projectId,
|
||||
userId,
|
||||
},
|
||||
include: {
|
||||
evaluation: true,
|
||||
},
|
||||
})
|
||||
|
||||
if (!assignment) {
|
||||
// User is not assigned to this project
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-destructive/50" />
|
||||
<p className="mt-2 font-medium text-destructive">Access Denied</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You are not assigned to evaluate this project
|
||||
</p>
|
||||
<Button asChild className="mt-4">
|
||||
<Link href="/jury/assignments">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Assignments
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const evaluation = assignment.evaluation
|
||||
const round = project.round
|
||||
const now = new Date()
|
||||
|
||||
// Check voting window
|
||||
const isVotingOpen =
|
||||
round.status === 'ACTIVE' &&
|
||||
round.votingStartAt &&
|
||||
round.votingEndAt &&
|
||||
new Date(round.votingStartAt) <= now &&
|
||||
new Date(round.votingEndAt) >= now
|
||||
|
||||
const isVotingUpcoming =
|
||||
round.votingStartAt && isFuture(new Date(round.votingStartAt))
|
||||
|
||||
const isVotingClosed =
|
||||
round.votingEndAt && isPast(new Date(round.votingEndAt))
|
||||
|
||||
// Determine evaluation status
|
||||
const getEvaluationStatus = () => {
|
||||
if (!evaluation)
|
||||
return { label: 'Not Started', variant: 'outline' as const, icon: Clock }
|
||||
switch (evaluation.status) {
|
||||
case 'DRAFT':
|
||||
return { label: 'In Progress', variant: 'secondary' as const, icon: Edit3 }
|
||||
case 'SUBMITTED':
|
||||
return { label: 'Submitted', variant: 'default' as const, icon: CheckCircle2 }
|
||||
case 'LOCKED':
|
||||
return { label: 'Locked', variant: 'default' as const, icon: CheckCircle2 }
|
||||
default:
|
||||
return { label: 'Not Started', variant: 'outline' as const, icon: Clock }
|
||||
}
|
||||
}
|
||||
|
||||
const status = getEvaluationStatus()
|
||||
const StatusIcon = status.icon
|
||||
|
||||
const canEvaluate =
|
||||
isVotingOpen &&
|
||||
evaluation?.status !== 'SUBMITTED' &&
|
||||
evaluation?.status !== 'LOCKED'
|
||||
|
||||
const canViewEvaluation =
|
||||
evaluation?.status === 'SUBMITTED' || evaluation?.status === 'LOCKED'
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back button */}
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href="/jury/assignments">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Assignments
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
{/* Project Header */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>{round.program.name}</span>
|
||||
<span>/</span>
|
||||
<span>{round.name}</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
|
||||
{project.title}
|
||||
</h1>
|
||||
{project.teamName && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{project.teamName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:items-end">
|
||||
<Badge variant={status.variant} className="w-fit">
|
||||
<StatusIcon className="mr-1 h-3 w-3" />
|
||||
{status.label}
|
||||
</Badge>
|
||||
{round.votingEndAt && (
|
||||
<DeadlineDisplay
|
||||
votingStartAt={round.votingStartAt}
|
||||
votingEndAt={round.votingEndAt}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{project.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((tag) => (
|
||||
<Badge key={tag} variant="outline">
|
||||
<Tag className="mr-1 h-3 w-3" />
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{canEvaluate && (
|
||||
<Button asChild>
|
||||
<Link href={`/jury/projects/${project.id}/evaluate`}>
|
||||
{evaluation?.status === 'DRAFT' ? 'Continue Evaluation' : 'Start Evaluation'}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canViewEvaluation && (
|
||||
<Button variant="secondary" asChild>
|
||||
<Link href={`/jury/projects/${project.id}/evaluation`}>
|
||||
View My Evaluation
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!isVotingOpen && !canViewEvaluation && (
|
||||
<Button disabled>
|
||||
{isVotingUpcoming
|
||||
? 'Voting Not Yet Open'
|
||||
: isVotingClosed
|
||||
? 'Voting Closed'
|
||||
: 'Evaluation Unavailable'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Main content grid */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Description - takes 2 columns on large screens */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Description */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Project Description</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{project.description ? (
|
||||
<div className="prose prose-sm max-w-none dark:prose-invert">
|
||||
<p className="whitespace-pre-wrap">{project.description}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground italic">
|
||||
No description provided
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Files */}
|
||||
<FileViewer files={project.files} />
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Round Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Round Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Round</span>
|
||||
<span className="text-sm font-medium">{round.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Program</span>
|
||||
<span className="text-sm font-medium">{round.program.name}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
{round.votingStartAt && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Voting Opens</span>
|
||||
<span className="text-sm">
|
||||
{format(new Date(round.votingStartAt), 'PPp')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{round.votingEndAt && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Voting Closes</span>
|
||||
<span className="text-sm">
|
||||
{format(new Date(round.votingEndAt), 'PPp')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Status</span>
|
||||
<RoundStatusBadge
|
||||
status={round.status}
|
||||
votingStartAt={round.votingStartAt}
|
||||
votingEndAt={round.votingEndAt}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Evaluation Progress */}
|
||||
{evaluation && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Your Evaluation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Status</span>
|
||||
<Badge variant={status.variant}>
|
||||
<StatusIcon className="mr-1 h-3 w-3" />
|
||||
{status.label}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{evaluation.status === 'DRAFT' && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Last saved{' '}
|
||||
{formatDistanceToNow(new Date(evaluation.updatedAt), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{evaluation.status === 'SUBMITTED' && evaluation.submittedAt && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Submitted{' '}
|
||||
{formatDistanceToNow(new Date(evaluation.submittedAt), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DeadlineDisplay({
|
||||
votingStartAt,
|
||||
votingEndAt,
|
||||
}: {
|
||||
votingStartAt: Date | null
|
||||
votingEndAt: Date
|
||||
}) {
|
||||
const now = new Date()
|
||||
const endDate = new Date(votingEndAt)
|
||||
const startDate = votingStartAt ? new Date(votingStartAt) : null
|
||||
|
||||
if (startDate && isFuture(startDate)) {
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<Calendar className="h-3 w-3" />
|
||||
Opens {format(startDate, 'PPp')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isPast(endDate)) {
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<Clock className="h-3 w-3" />
|
||||
Closed {formatDistanceToNow(endDate, { addSuffix: true })}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const daysRemaining = Math.ceil(
|
||||
(endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
|
||||
)
|
||||
const isUrgent = daysRemaining <= 3
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center gap-1 text-sm ${
|
||||
isUrgent ? 'text-amber-600 font-medium' : 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
<Clock className="h-3 w-3" />
|
||||
{daysRemaining <= 0
|
||||
? `Due ${formatDistanceToNow(endDate, { addSuffix: true })}`
|
||||
: `${daysRemaining} day${daysRemaining !== 1 ? 's' : ''} remaining`}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RoundStatusBadge({
|
||||
status,
|
||||
votingStartAt,
|
||||
votingEndAt,
|
||||
}: {
|
||||
status: string
|
||||
votingStartAt: Date | null
|
||||
votingEndAt: Date | null
|
||||
}) {
|
||||
const now = new Date()
|
||||
const isVotingOpen =
|
||||
status === 'ACTIVE' &&
|
||||
votingStartAt &&
|
||||
votingEndAt &&
|
||||
new Date(votingStartAt) <= now &&
|
||||
new Date(votingEndAt) >= now
|
||||
|
||||
if (isVotingOpen) {
|
||||
return <Badge variant="default">Voting Open</Badge>
|
||||
}
|
||||
|
||||
if (status === 'ACTIVE' && votingStartAt && isFuture(new Date(votingStartAt))) {
|
||||
return <Badge variant="secondary">Upcoming</Badge>
|
||||
}
|
||||
|
||||
if (status === 'ACTIVE' && votingEndAt && isPast(new Date(votingEndAt))) {
|
||||
return <Badge variant="outline">Voting Closed</Badge>
|
||||
}
|
||||
|
||||
return <Badge variant="secondary">{status}</Badge>
|
||||
}
|
||||
|
||||
function ProjectSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-9 w-36" />
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-8 w-96" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
<div className="space-y-2 sm:items-end">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Skeleton className="h-10 w-40" />
|
||||
<Skeleton className="h-px w-full" />
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<FileViewerSkeleton />
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-28" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function ProjectDetailPage({ params }: PageProps) {
|
||||
const { id } = await params
|
||||
|
||||
return (
|
||||
<Suspense fallback={<ProjectSkeleton />}>
|
||||
<ProjectContent projectId={id} />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user