Competition/Round architecture: full platform rewrite (Phases 1-9)
All checks were successful
Build and Push Docker Image / build (push) Successful in 7m45s

Replace Pipeline/Stage system with Competition/Round architecture.
New schema: Competition, Round (7 types), JuryGroup, AssignmentPolicy,
ProjectRoundState, DeliberationSession, ResultLock, SubmissionWindow.
New services: round-engine, round-assignment, deliberation, result-lock,
submission-manager, competition-context, ai-prompt-guard.
Full admin/jury/applicant/mentor UI rewrite. AI prompt hardening with
structured prompts, retry logic, and injection detection. All legacy
pipeline/stage code removed. 4 new migrations + seed aligned.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-15 23:04:15 +01:00
parent 9ab4717f96
commit 6ca39c976b
349 changed files with 69938 additions and 28767 deletions

View File

@@ -0,0 +1,180 @@
'use client'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { FileUploadSlot } from '@/components/applicant/file-upload-slot'
import { ArrowLeft, Lock, Clock, Calendar, AlertCircle } from 'lucide-react'
import { toast } from 'sonner'
import { useState } from 'react'
export default function ApplicantSubmissionWindowPage() {
const params = useParams()
const router = useRouter()
const windowId = params.windowId as string
const [uploadedFiles, setUploadedFiles] = useState<Record<string, File>>({})
const { data: window, isLoading } = trpc.round.getById.useQuery(
{ id: windowId },
{ enabled: !!windowId }
)
const { data: deadlineStatus } = trpc.round.checkDeadline.useQuery(
{ windowId },
{
enabled: !!windowId,
refetchInterval: 60000, // Refresh every minute
}
)
const handleUpload = (requirementId: string, file: File) => {
setUploadedFiles(prev => ({ ...prev, [requirementId]: file }))
toast.success(`File "${file.name}" selected for upload`)
// In a real implementation, this would trigger file upload
}
if (isLoading) {
return (
<div className="space-y-6">
<Skeleton className="h-8 w-64" />
<Skeleton className="h-96" />
</div>
)
}
if (!window) {
return (
<div className="space-y-6">
<Button variant="ghost" size="sm" asChild>
<Link href={'/applicant/competitions' as Route}>
<ArrowLeft className="mr-2 h-4 w-4" />
Back
</Link>
</Button>
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<AlertCircle className="h-12 w-12 text-muted-foreground/50 mb-3" />
<p className="font-medium">Submission window not found</p>
</CardContent>
</Card>
</div>
)
}
const isLocked = deadlineStatus?.status === 'LOCKED' || deadlineStatus?.status === 'CLOSED'
const deadline = window.windowCloseAt
? new Date(window.windowCloseAt)
: null
const timeRemaining = deadline ? deadline.getTime() - Date.now() : null
const daysRemaining = timeRemaining ? Math.floor(timeRemaining / (1000 * 60 * 60 * 24)) : null
return (
<div className="space-y-6">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" asChild>
<Link href={'/applicant/competitions' as Route}>
<ArrowLeft className="mr-2 h-4 w-4" />
Back
</Link>
</Button>
<div>
<h1 className="text-2xl font-bold tracking-tight">{window.name}</h1>
<p className="text-muted-foreground mt-1">
Upload required documents for this submission window
</p>
</div>
</div>
{/* Deadline card */}
{deadline && (
<Card className={isLocked ? 'border-red-200 bg-red-50/50' : 'border-l-4 border-l-amber-500'}>
<CardContent className="flex items-start gap-3 p-4">
{isLocked ? (
<>
<Lock className="h-5 w-5 text-red-600 shrink-0 mt-0.5" />
<div className="flex-1">
<p className="font-medium text-sm text-red-900">Submission Window Closed</p>
<p className="text-sm text-red-700 mt-1">
This submission window closed on {deadline.toLocaleDateString()}. No further
uploads are allowed.
</p>
</div>
</>
) : (
<>
<Clock className="h-5 w-5 text-amber-600 shrink-0 mt-0.5" />
<div className="flex-1">
<p className="font-medium text-sm">Deadline Countdown</p>
<div className="flex items-baseline gap-2 mt-1">
<span className="text-2xl font-bold tabular-nums text-amber-600">
{daysRemaining !== null ? daysRemaining : '—'}
</span>
<span className="text-sm text-muted-foreground">
day{daysRemaining !== 1 ? 's' : ''} remaining
</span>
</div>
<p className="text-xs text-muted-foreground mt-1">
Due: {deadline.toLocaleString()}
</p>
</div>
</>
)}
</CardContent>
</Card>
)}
{/* File requirements */}
<Card>
<CardHeader>
<CardTitle>File Requirements</CardTitle>
<CardDescription>
Upload the required files below. {isLocked && 'Viewing only - window is closed.'}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{/* File requirements would be fetched separately in a real implementation */}
{false ? (
[].map((req: any) => (
<FileUploadSlot
key={req.id}
requirement={{
id: req.id,
label: req.label,
description: req.description,
mimeTypes: req.mimeTypes || [],
maxSizeMb: req.maxSizeMb,
required: req.required || false,
}}
isLocked={isLocked}
onUpload={(file) => handleUpload(req.id, file)}
/>
))
) : (
<div className="text-center py-8">
<Calendar className="h-12 w-12 text-muted-foreground/50 mx-auto mb-3" />
<p className="text-sm text-muted-foreground">
No file requirements defined for this window
</p>
</div>
)}
</CardContent>
</Card>
{!isLocked && (
<div className="flex justify-end gap-3">
<Button variant="outline">Save Draft</Button>
<Button className="bg-brand-blue hover:bg-brand-blue-light">
Submit All Files
</Button>
</div>
)}
</div>
)
}

View File

@@ -0,0 +1,124 @@
'use client'
import { useSession } from 'next-auth/react'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { ApplicantCompetitionTimeline } from '@/components/applicant/competition-timeline'
import { ArrowLeft, FileText, Calendar } from 'lucide-react'
import { toast } from 'sonner'
export default function ApplicantCompetitionsPage() {
const { data: session } = useSession()
const { data: myProject, isLoading } = trpc.applicant.getMyDashboard.useQuery(undefined, {
enabled: !!session,
})
if (isLoading) {
return (
<div className="space-y-6">
<Skeleton className="h-8 w-64" />
<Skeleton className="h-96" />
</div>
)
}
const competitionId = myProject?.project?.programId
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold tracking-tight">Competition Timeline</h1>
<p className="text-muted-foreground mt-1">
Track your progress through competition rounds
</p>
</div>
<Button variant="ghost" size="sm" asChild>
<Link href={'/applicant' as Route} aria-label="Back to applicant dashboard">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Dashboard
</Link>
</Button>
</div>
{!competitionId ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<FileText className="h-12 w-12 text-muted-foreground/50 mb-4" />
<h2 className="text-xl font-semibold mb-2">No Active Competition</h2>
<p className="text-muted-foreground text-center max-w-md">
You don&apos;t have an active project in any competition yet. Submit your application
when a competition opens.
</p>
</CardContent>
</Card>
) : (
<div className="grid gap-6 lg:grid-cols-3">
<div className="lg:col-span-2">
<ApplicantCompetitionTimeline competitionId={competitionId} />
</div>
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Calendar className="h-5 w-5" />
Quick Actions
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-start" asChild>
<Link href={'/applicant/documents' as Route}>
<FileText className="mr-2 h-4 w-4" />
View Documents
</Link>
</Button>
{myProject?.openRounds && myProject.openRounds.length > 0 && (
<p className="text-sm text-muted-foreground px-3 py-2 bg-muted/50 rounded-md">
{myProject.openRounds.length} submission window
{myProject.openRounds.length !== 1 ? 's' : ''} currently open
</p>
)}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Timeline Info</CardTitle>
</CardHeader>
<CardContent className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-muted-foreground">Current Status:</span>
<span className="font-medium">
{myProject?.currentStatus || 'Unknown'}
</span>
</div>
{myProject?.project && (
<>
<div className="flex justify-between">
<span className="text-muted-foreground">Project:</span>
<span className="font-medium truncate ml-2" title={myProject.project.title}>
{myProject.project.title}
</span>
</div>
{myProject.project.submittedAt && (
<div className="flex justify-between">
<span className="text-muted-foreground">Submitted:</span>
<span className="font-medium">
{new Date(myProject.project.submittedAt).toLocaleDateString()}
</span>
</div>
)}
</>
)}
</CardContent>
</Card>
</div>
</div>
)}
</div>
)
}

View File

@@ -82,7 +82,7 @@ export default function ApplicantDocumentsPage() {
)
}
const { project, openStages } = data
const { project, openRounds } = data
const isDraft = !project.submittedAt
return (
@@ -98,23 +98,23 @@ export default function ApplicantDocumentsPage() {
</p>
</div>
{/* Per-stage upload sections */}
{openStages.length > 0 && (
{/* Per-round upload sections */}
{openRounds.length > 0 && (
<div className="space-y-6">
{openStages.map((stage) => {
{openRounds.map((round: { id: string; name: string; windowCloseAt?: string | Date | null }) => {
const now = new Date()
const hasDeadline = !!stage.windowCloseAt
const deadlinePassed = hasDeadline && now > new Date(stage.windowCloseAt!)
const hasDeadline = !!round.windowCloseAt
const deadlinePassed = hasDeadline && now > new Date(round.windowCloseAt!)
const isLate = deadlinePassed
return (
<Card key={stage.id}>
<Card key={round.id}>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle className="text-lg">{stage.name}</CardTitle>
<CardTitle className="text-lg">{round.name}</CardTitle>
<CardDescription>
Upload documents for this stage
Upload documents for this round
</CardDescription>
</div>
<div className="flex items-center gap-2">
@@ -127,7 +127,7 @@ export default function ApplicantDocumentsPage() {
{hasDeadline && !deadlinePassed && (
<Badge variant="outline" className="gap-1">
<Clock className="h-3 w-3" />
Due {new Date(stage.windowCloseAt!).toLocaleDateString()}
Due {new Date(round.windowCloseAt!).toLocaleDateString()}
</Badge>
)}
</div>
@@ -136,7 +136,7 @@ export default function ApplicantDocumentsPage() {
<CardContent>
<RequirementUploadList
projectId={project.id}
stageId={stage.id}
roundId={round.id}
disabled={false}
/>
</CardContent>
@@ -163,7 +163,7 @@ export default function ApplicantDocumentsPage() {
<div className="space-y-2">
{project.files.map((file) => {
const Icon = fileTypeIcons[file.fileType] || File
const fileRecord = file as typeof file & { isLate?: boolean; stageId?: string | null }
const fileRecord = file as typeof file & { isLate?: boolean; roundId?: string | null }
return (
<div
@@ -197,13 +197,13 @@ export default function ApplicantDocumentsPage() {
</CardContent>
</Card>
{/* No open stages message */}
{openStages.length === 0 && project.files.length === 0 && (
{/* No open rounds message */}
{openRounds.length === 0 && project.files.length === 0 && (
<Card className="bg-muted/50">
<CardContent className="p-6 text-center">
<Clock className="h-10 w-10 mx-auto text-muted-foreground/50 mb-3" />
<p className="text-muted-foreground">
No stages are currently open for document submissions.
No rounds are currently open for document submissions.
</p>
</CardContent>
</Card>

View File

@@ -98,7 +98,7 @@ export default function ApplicantDashboardPage() {
)
}
const { project, timeline, currentStatus, openStages } = data
const { project, timeline, currentStatus, openRounds } = data
const isDraft = !project.submittedAt
const programYear = project.program?.year
const programName = project.program?.name
@@ -221,7 +221,7 @@ export default function ApplicantDashboardPage() {
<div className="flex-1 min-w-0">
<p className="text-sm font-medium">Documents</p>
<p className="text-xs text-muted-foreground">
{openStages.length > 0 ? `${openStages.length} stage(s) open` : 'View uploads'}
{openRounds.length > 0 ? `${openRounds.length} round(s) open` : 'View uploads'}
</p>
</div>
<ArrowRight className="h-4 w-4 text-muted-foreground" />
@@ -347,10 +347,10 @@ export default function ApplicantDashboardPage() {
<span className="text-muted-foreground">Last Updated</span>
<span>{new Date(project.updatedAt).toLocaleDateString()}</span>
</div>
{openStages.length > 0 && openStages[0].windowCloseAt && (
{openRounds.length > 0 && openRounds[0].windowCloseAt && (
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Deadline</span>
<span>{new Date(openStages[0].windowCloseAt).toLocaleDateString()}</span>
<span>{new Date(openRounds[0].windowCloseAt).toLocaleDateString()}</span>
</div>
)}
</CardContent>

View File

@@ -1,167 +0,0 @@
'use client'
import { use } from 'react'
import { trpc } from '@/lib/trpc/client'
import Link from 'next/link'
import type { Route } from 'next'
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import {
ArrowLeft,
AlertCircle,
Clock,
FileText,
Upload,
} from 'lucide-react'
import { StageBreadcrumb } from '@/components/shared/stage-breadcrumb'
import { StageWindowBadge } from '@/components/shared/stage-window-badge'
import { CountdownTimer } from '@/components/shared/countdown-timer'
import { RequirementUploadList } from '@/components/shared/requirement-upload-slot'
export default function StageDocumentsPage({
params,
}: {
params: Promise<{ stageId: string }>
}) {
const { stageId } = use(params)
// Get applicant's project via dashboard endpoint
const { data: dashboard } = trpc.applicant.getMyDashboard.useQuery()
const project = dashboard?.project
const projectId = project?.id ?? ''
const { data: requirements, isLoading: reqLoading } =
trpc.stage.getRequirements.useQuery(
{ stageId, projectId },
{ enabled: !!projectId }
)
const isWindowOpen = requirements?.windowStatus?.isOpen ?? false
const isLate = requirements?.windowStatus?.isLate ?? false
const closeAt = requirements?.windowStatus?.closesAt
? new Date(requirements.windowStatus.closesAt)
: null
if (reqLoading) {
return (
<div className="space-y-4">
<Skeleton className="h-6 w-64" />
<Skeleton className="h-8 w-48" />
<Skeleton className="h-64 w-full" />
</div>
)
}
return (
<div className="space-y-4">
{/* Back */}
<div className="flex items-center gap-3">
<Button variant="ghost" size="icon" asChild className="h-8 w-8">
<Link href={"/applicant/pipeline" as Route}>
<ArrowLeft className="h-4 w-4" />
</Link>
</Button>
<span className="text-sm text-muted-foreground">Back to Pipeline</span>
</div>
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div>
<h1 className="text-2xl font-bold tracking-tight">Stage Documents</h1>
<p className="text-sm text-muted-foreground mt-0.5">
Upload required documents for this stage
</p>
</div>
<StageWindowBadge
windowOpenAt={requirements?.deadlineInfo?.windowOpenAt}
windowCloseAt={requirements?.deadlineInfo?.windowCloseAt}
/>
</div>
{/* Deadline info */}
{closeAt && isWindowOpen && (
<Card>
<CardContent className="flex items-center justify-between py-3">
<div className="flex items-center gap-2">
<Clock className="h-4 w-4 text-muted-foreground" />
<span className="text-sm">Submission deadline</span>
</div>
<CountdownTimer deadline={closeAt} label="Closes in" />
</CardContent>
</Card>
)}
{/* Late submission warning */}
{isLate && (
<Card className="border-amber-200 bg-amber-50/50 dark:border-amber-900 dark:bg-amber-950/20">
<CardContent className="flex items-center gap-3 py-3">
<AlertCircle className="h-5 w-5 text-amber-600 shrink-0" />
<p className="text-sm text-amber-800 dark:text-amber-200">
The submission window has passed. Late submissions may be accepted at the discretion of the administrators.
</p>
</CardContent>
</Card>
)}
{/* Window closed */}
{!isWindowOpen && !isLate && (
<Card className="border-destructive/50 bg-destructive/5">
<CardContent className="flex items-center gap-3 py-3">
<AlertCircle className="h-5 w-5 text-destructive shrink-0" />
<p className="text-sm text-destructive">
The document submission window for this stage is closed.
</p>
</CardContent>
</Card>
)}
{/* File requirements */}
{requirements?.fileRequirements && requirements.fileRequirements.length > 0 ? (
<RequirementUploadList
projectId={projectId}
stageId={stageId}
disabled={!isWindowOpen && !isLate}
/>
) : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<FileText className="h-12 w-12 text-muted-foreground/50 mb-3" />
<p className="font-medium">No document requirements</p>
<p className="text-sm text-muted-foreground mt-1">
There are no specific document requirements for this stage.
</p>
</CardContent>
</Card>
)}
{/* Uploaded files summary */}
{requirements?.uploadedFiles && requirements.uploadedFiles.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="text-lg">Uploaded Files</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-2">
{requirements.uploadedFiles.map((file: { id: string; fileName: string; size: number; createdAt: string | Date }) => (
<div key={file.id} className="flex items-center gap-3 text-sm">
<FileText className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate">{file.fileName}</span>
<span className="text-xs text-muted-foreground shrink-0">
{(file.size / (1024 * 1024)).toFixed(1)}MB
</span>
</div>
))}
</div>
</CardContent>
</Card>
)}
</div>
)
}

View File

@@ -1,278 +0,0 @@
'use client'
import { use } from 'react'
import { trpc } from '@/lib/trpc/client'
import Link from 'next/link'
import type { Route } from 'next'
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import {
ArrowLeft,
CheckCircle2,
XCircle,
Clock,
ArrowRight,
AlertCircle,
} from 'lucide-react'
const stateLabels: Record<string, string> = {
PENDING: 'Pending',
IN_PROGRESS: 'In Progress',
PASSED: 'Passed',
REJECTED: 'Not Selected',
COMPLETED: 'Completed',
WAITING: 'Waiting',
}
const stateColors: Record<string, string> = {
PASSED: 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-950/30 dark:border-emerald-900',
COMPLETED: 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-950/30 dark:border-emerald-900',
REJECTED: 'text-destructive bg-destructive/5 border-destructive/30',
IN_PROGRESS: 'text-blue-600 bg-blue-50 border-blue-200 dark:text-blue-400 dark:bg-blue-950/30 dark:border-blue-900',
PENDING: 'text-muted-foreground bg-muted border-muted',
WAITING: 'text-amber-600 bg-amber-50 border-amber-200 dark:text-amber-400 dark:bg-amber-950/30 dark:border-amber-900',
}
export default function StageStatusPage({
params,
}: {
params: Promise<{ stageId: string }>
}) {
const { stageId } = use(params)
// Get applicant's project via dashboard endpoint
const { data: dashboard } = trpc.applicant.getMyDashboard.useQuery()
const project = dashboard?.project
const projectId = project?.id ?? ''
const programId = project?.program?.id ?? ''
const { data: pipelineView } =
trpc.pipeline.getApplicantView.useQuery(
{ programId, projectId },
{ enabled: !!programId && !!projectId }
)
const { data: timeline, isLoading } =
trpc.stage.getApplicantTimeline.useQuery(
{ projectId, pipelineId: pipelineView?.pipelineId ?? '' },
{ enabled: !!projectId && !!pipelineView?.pipelineId }
)
// Find the specific stage
const stageData = timeline?.find((item) => item.stageId === stageId)
if (isLoading) {
return (
<div className="space-y-4">
<Skeleton className="h-6 w-64" />
<Skeleton className="h-48 w-full" />
</div>
)
}
return (
<div className="space-y-4">
{/* Back */}
<div className="flex items-center gap-3">
<Button variant="ghost" size="icon" asChild className="h-8 w-8">
<Link href={"/applicant/pipeline" as Route}>
<ArrowLeft className="h-4 w-4" />
</Link>
</Button>
<span className="text-sm text-muted-foreground">Back to Pipeline</span>
</div>
{stageData ? (
<>
{/* Stage state card */}
<Card className={`border ${stateColors[stageData.state] ?? ''}`}>
<CardContent className="py-8 text-center">
<div className="flex flex-col items-center gap-3">
{stageData.state === 'PASSED' || stageData.state === 'COMPLETED' ? (
<CheckCircle2 className="h-12 w-12 text-emerald-600" />
) : stageData.state === 'REJECTED' ? (
<XCircle className="h-12 w-12 text-destructive" />
) : (
<Clock className="h-12 w-12 text-blue-600" />
)}
<div>
<h2 className="text-xl font-bold">{stageData.stageName}</h2>
<Badge className="mt-2 text-sm">
{stateLabels[stageData.state] ?? stageData.state}
</Badge>
</div>
</div>
</CardContent>
</Card>
{/* Decision details */}
<Card>
<CardHeader>
<CardTitle className="text-lg">Stage Details</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="grid gap-3 sm:grid-cols-2">
<div>
<p className="text-xs text-muted-foreground uppercase tracking-wide">Stage Type</p>
<p className="text-sm font-medium capitalize">
{stageData.stageType.toLowerCase().replace(/_/g, ' ')}
</p>
</div>
{stageData.enteredAt && (
<div>
<p className="text-xs text-muted-foreground uppercase tracking-wide">Entered</p>
<p className="text-sm font-medium">
{new Date(stageData.enteredAt).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
})}
</p>
</div>
)}
{stageData.exitedAt && (
<div>
<p className="text-xs text-muted-foreground uppercase tracking-wide">Exited</p>
<p className="text-sm font-medium">
{new Date(stageData.exitedAt).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
})}
</p>
</div>
)}
</div>
</CardContent>
</Card>
{/* Next steps */}
{(stageData.state === 'IN_PROGRESS' || stageData.state === 'PENDING') && (
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<ArrowRight className="h-4 w-4" />
Next Steps
</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm text-muted-foreground">
{stageData.stageType === 'INTAKE' && (
<>
<li className="flex items-start gap-2">
<CheckCircle2 className="h-4 w-4 text-brand-teal shrink-0 mt-0.5" />
Make sure all required documents are uploaded before the deadline.
</li>
<li className="flex items-start gap-2">
<CheckCircle2 className="h-4 w-4 text-brand-teal shrink-0 mt-0.5" />
You will be notified once reviewers complete their evaluation.
</li>
</>
)}
{stageData.stageType === 'EVALUATION' && (
<li className="flex items-start gap-2">
<CheckCircle2 className="h-4 w-4 text-brand-teal shrink-0 mt-0.5" />
Your project is being reviewed by jury members. Results will be shared once evaluation is complete.
</li>
)}
{stageData.stageType === 'LIVE_FINAL' && (
<li className="flex items-start gap-2">
<CheckCircle2 className="h-4 w-4 text-brand-teal shrink-0 mt-0.5" />
Prepare for the live presentation. Check your email for schedule and logistics details.
</li>
)}
{!['INTAKE', 'EVALUATION', 'LIVE_FINAL'].includes(stageData.stageType) && (
<li className="flex items-start gap-2">
<CheckCircle2 className="h-4 w-4 text-brand-teal shrink-0 mt-0.5" />
Your project is progressing through this stage. Updates will appear here.
</li>
)}
</ul>
</CardContent>
</Card>
)}
{/* Full timeline */}
{timeline && timeline.length > 1 && (
<Card>
<CardHeader>
<CardTitle className="text-lg">Full Timeline</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-0">
{timeline.map((item, index) => (
<div key={item.stageId} className="relative flex gap-4">
{index < timeline.length - 1 && (
<div className={`absolute left-[11px] top-[24px] h-full w-0.5 ${
item.state === 'PASSED' || item.state === 'COMPLETED'
? 'bg-emerald-500'
: 'bg-muted'
}`} />
)}
<div className="relative z-10 flex h-6 w-6 shrink-0 items-center justify-center">
<div className={`h-3 w-3 rounded-full ${
item.stageId === stageId
? 'ring-2 ring-brand-blue ring-offset-2 bg-brand-blue'
: item.state === 'PASSED' || item.state === 'COMPLETED'
? 'bg-emerald-500'
: item.state === 'REJECTED'
? 'bg-destructive'
: item.isCurrent
? 'bg-blue-500'
: 'bg-muted-foreground/30'
}`} />
</div>
<div className="flex-1 pb-6">
<div className="flex items-center gap-2">
<p className={`text-sm font-medium ${
item.stageId === stageId ? 'text-brand-blue dark:text-brand-teal' : ''
}`}>
{item.stageName}
</p>
<Badge
variant={
item.state === 'PASSED' || item.state === 'COMPLETED'
? 'success'
: item.state === 'REJECTED'
? 'destructive'
: 'secondary'
}
className="text-xs"
>
{stateLabels[item.state] ?? item.state}
</Badge>
</div>
{item.enteredAt && (
<p className="text-xs text-muted-foreground mt-0.5">
{new Date(item.enteredAt).toLocaleDateString()}
</p>
)}
</div>
</div>
))}
</div>
</CardContent>
</Card>
)}
</>
) : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<AlertCircle className="h-12 w-12 text-muted-foreground/50 mb-3" />
<p className="font-medium">Stage not found</p>
<p className="text-sm text-muted-foreground mt-1">
Your project has not entered this stage yet.
</p>
</CardContent>
</Card>
)}
</div>
)
}

View File

@@ -1,267 +0,0 @@
'use client'
import { trpc } from '@/lib/trpc/client'
import Link from 'next/link'
import type { Route } from 'next'
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import {
Upload,
Users,
MessageSquare,
ArrowRight,
FileText,
Clock,
CheckCircle2,
XCircle,
Layers,
} from 'lucide-react'
import { StageTimeline } from '@/components/shared/stage-timeline'
import { StageWindowBadge } from '@/components/shared/stage-window-badge'
import { cn } from '@/lib/utils'
const stateLabels: Record<string, string> = {
PENDING: 'Pending',
IN_PROGRESS: 'In Progress',
PASSED: 'Passed',
REJECTED: 'Not Selected',
COMPLETED: 'Completed',
WAITING: 'Waiting',
}
const stateVariants: Record<string, 'success' | 'destructive' | 'warning' | 'secondary' | 'info'> = {
PENDING: 'secondary',
IN_PROGRESS: 'info',
PASSED: 'success',
REJECTED: 'destructive',
COMPLETED: 'success',
WAITING: 'warning',
}
export default function ApplicantPipelinePage() {
// Get applicant's project via dashboard endpoint
const { data: dashboard } = trpc.applicant.getMyDashboard.useQuery()
const project = dashboard?.project
const projectId = project?.id ?? ''
const programId = project?.program?.id ?? ''
const { data: pipelineView, isLoading: pipelineLoading } =
trpc.pipeline.getApplicantView.useQuery(
{ programId, projectId },
{ enabled: !!programId && !!projectId }
)
const { data: timeline, isLoading: timelineLoading } =
trpc.stage.getApplicantTimeline.useQuery(
{ projectId, pipelineId: pipelineView?.pipelineId ?? '' },
{ enabled: !!projectId && !!pipelineView?.pipelineId }
)
const isLoading = pipelineLoading || timelineLoading
if (!project && !isLoading) {
return (
<div className="space-y-4">
<div>
<h1 className="text-2xl font-bold tracking-tight">Pipeline Progress</h1>
<p className="text-muted-foreground mt-0.5">Track your project through the selection pipeline</p>
</div>
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<Layers className="h-12 w-12 text-muted-foreground/50 mb-3" />
<p className="font-medium">No project found</p>
<p className="text-sm text-muted-foreground mt-1">
You don&apos;t have a project in the current edition yet.
</p>
</CardContent>
</Card>
</div>
)
}
if (isLoading) {
return (
<div className="space-y-4">
<div>
<h1 className="text-2xl font-bold tracking-tight">Pipeline Progress</h1>
<p className="text-muted-foreground mt-0.5">Track your project through the selection pipeline</p>
</div>
<Skeleton className="h-8 w-64" />
<Skeleton className="h-16 w-full" />
<Skeleton className="h-48 w-full" />
</div>
)
}
// Build timeline items for StageTimeline
const timelineItems = timeline?.map((item) => ({
id: item.stageId,
name: item.stageName,
stageType: item.stageType,
isCurrent: item.isCurrent,
state: item.state,
enteredAt: item.enteredAt,
})) ?? []
// Find current stage
const currentStage = timeline?.find((item) => item.isCurrent)
return (
<div className="space-y-4">
<div>
<h1 className="text-2xl font-bold tracking-tight">Pipeline Progress</h1>
<p className="text-muted-foreground mt-0.5">Track your project through the selection pipeline</p>
</div>
{/* Project title + status */}
<Card>
<CardContent className="py-5">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div>
<h2 className="text-lg font-semibold">{project?.title}</h2>
<p className="text-sm text-muted-foreground">{(project as { teamName?: string } | undefined)?.teamName}</p>
</div>
{currentStage && (
<Badge variant={stateVariants[currentStage.state] ?? 'secondary'}>
{stateLabels[currentStage.state] ?? currentStage.state}
</Badge>
)}
</div>
</CardContent>
</Card>
{/* Stage Timeline visualization */}
{timelineItems.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="text-lg">Pipeline Progress</CardTitle>
</CardHeader>
<CardContent>
<StageTimeline stages={timelineItems} orientation="horizontal" />
</CardContent>
</Card>
)}
{/* Current stage details */}
{currentStage && (
<Card className="border-brand-blue/30 dark:border-brand-teal/30">
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle className="text-lg">Current Stage</CardTitle>
</div>
</CardHeader>
<CardContent className="space-y-3">
<div>
<h3 className="font-semibold">{currentStage.stageName}</h3>
<p className="text-sm text-muted-foreground capitalize">
{currentStage.stageType.toLowerCase().replace(/_/g, ' ')}
</p>
</div>
{currentStage.enteredAt && (
<p className="text-xs text-muted-foreground">
Entered {new Date(currentStage.enteredAt).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
})}
</p>
)}
</CardContent>
</Card>
)}
{/* Decision history */}
{timeline && timeline.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="text-lg">Stage History</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{timeline.map((item) => (
<div
key={item.stageId}
className="flex items-center justify-between py-2 border-b last:border-0"
>
<div className="flex items-center gap-3">
<div className={cn(
'h-2 w-2 rounded-full',
item.state === 'PASSED' || item.state === 'COMPLETED'
? 'bg-emerald-500'
: item.state === 'REJECTED'
? 'bg-destructive'
: item.isCurrent
? 'bg-blue-500'
: 'bg-muted-foreground'
)} />
<div>
<p className="text-sm font-medium">{item.stageName}</p>
{item.enteredAt && (
<p className="text-xs text-muted-foreground">
{new Date(item.enteredAt).toLocaleDateString()}
</p>
)}
</div>
</div>
<Badge variant={stateVariants[item.state] ?? 'secondary'} className="text-xs">
{stateLabels[item.state] ?? item.state}
</Badge>
</div>
))}
</div>
</CardContent>
</Card>
)}
{/* Quick actions */}
<div className="grid gap-3 sm:grid-cols-3">
{currentStage && (
<Link
href={`/applicant/pipeline/${currentStage.stageId}/documents` as Route}
className="group flex items-center gap-3 rounded-xl border p-4 transition-all hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md"
>
<div className="rounded-lg bg-blue-50 p-2 dark:bg-blue-950/40">
<Upload className="h-4 w-4 text-blue-600 dark:text-blue-400" />
</div>
<div>
<p className="font-semibold text-sm">Upload Documents</p>
<p className="text-xs text-muted-foreground">Submit required files</p>
</div>
</Link>
)}
<Link
href={"/applicant/team" as Route}
className="group flex items-center gap-3 rounded-xl border p-4 transition-all hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md"
>
<div className="rounded-lg bg-teal-50 p-2 dark:bg-teal-950/40">
<Users className="h-4 w-4 text-brand-teal" />
</div>
<div>
<p className="font-semibold text-sm">View Team</p>
<p className="text-xs text-muted-foreground">Team members</p>
</div>
</Link>
<Link
href={"/applicant/mentor" as Route}
className="group flex items-center gap-3 rounded-xl border p-4 transition-all hover:border-amber-500/30 hover:bg-amber-50/50 hover:-translate-y-0.5 hover:shadow-md"
>
<div className="rounded-lg bg-amber-50 p-2 dark:bg-amber-950/40">
<MessageSquare className="h-4 w-4 text-amber-600 dark:text-amber-400" />
</div>
<div>
<p className="font-semibold text-sm">Contact Mentor</p>
<p className="text-xs text-muted-foreground">Send a message</p>
</div>
</Link>
</div>
</div>
)
}