Matt
cfee3bc8a9
All checks were successful
Build and Push Docker Image / build (push) Successful in 10m0s
- processRoundClose EVALUATION uses ranking scores + advanceMode config (threshold vs count) to auto-set proposedOutcome instead of defaulting all to PASSED - Advancement emails generate invite tokens for passwordless users with "Create Your Account" CTA; rejection emails have no link - Finalization UI shows account stats (invite vs dashboard link counts) - Fixed getFinalizationSummary ranking query (was using non-existent rankingsJson) - New award pool notification system: getAwardSelectionNotificationTemplate email, notifyEligibleProjects mutation with invite token generation, "Notify Pool" button on award detail page with custom message dialog Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
309 lines
12 KiB
TypeScript
309 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { trpc } from '@/lib/trpc/client'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { CheckCircle2, Circle, Clock, XCircle, Trophy, Check } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const roundStatusDisplay: Record<string, { label: string; variant: 'default' | 'secondary' }> = {
|
|
ROUND_DRAFT: { label: 'Upcoming', variant: 'secondary' },
|
|
ROUND_ACTIVE: { label: 'In Progress', variant: 'default' },
|
|
ROUND_CLOSED: { label: 'Completed', variant: 'default' },
|
|
ROUND_ARCHIVED: { label: 'Completed', variant: 'default' },
|
|
}
|
|
|
|
export function ApplicantCompetitionTimeline() {
|
|
const { data, isLoading } = trpc.applicant.getMyCompetitionTimeline.useQuery()
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-48" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-20" />
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
if (!data || data.entries.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Competition Timeline</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center py-8">
|
|
<Circle className="h-12 w-12 text-muted-foreground/50 mx-auto mb-3" />
|
|
<p className="text-sm text-muted-foreground">No rounds available yet</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Competition Timeline</CardTitle>
|
|
{data.competitionName && (
|
|
<p className="text-sm text-muted-foreground">{data.competitionName}</p>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="relative space-y-6">
|
|
{/* Vertical connecting line */}
|
|
<div className="absolute left-5 top-5 bottom-5 w-0.5 bg-border" />
|
|
|
|
{data.entries.map((entry) => {
|
|
const isCompleted = entry.status === 'ROUND_CLOSED' || entry.status === 'ROUND_ARCHIVED'
|
|
const isActive = entry.status === 'ROUND_ACTIVE'
|
|
const isRejected = entry.projectState === 'REJECTED'
|
|
const isGrandFinale = entry.roundType === 'GRAND_FINALE'
|
|
|
|
// Determine icon
|
|
let Icon = Circle
|
|
let iconBg = 'bg-muted'
|
|
let iconColor = 'text-muted-foreground'
|
|
|
|
if (isRejected) {
|
|
Icon = XCircle
|
|
iconBg = 'bg-red-50'
|
|
iconColor = 'text-red-600'
|
|
} else if (isGrandFinale && isCompleted) {
|
|
Icon = Trophy
|
|
iconBg = 'bg-yellow-50'
|
|
iconColor = 'text-yellow-600'
|
|
} else if (isCompleted) {
|
|
Icon = CheckCircle2
|
|
iconBg = 'bg-emerald-50'
|
|
iconColor = 'text-emerald-600'
|
|
} else if (isActive) {
|
|
Icon = Clock
|
|
iconBg = 'bg-brand-blue/10'
|
|
iconColor = 'text-brand-blue'
|
|
}
|
|
|
|
// Project state display
|
|
let stateLabel: string | null = null
|
|
if (entry.projectState === 'REJECTED') {
|
|
stateLabel = 'Not Selected'
|
|
} else if (entry.projectState === 'PASSED' || entry.projectState === 'COMPLETED') {
|
|
stateLabel = 'Advanced'
|
|
} else if (entry.projectState === 'IN_PROGRESS') {
|
|
stateLabel = 'Under Review'
|
|
} else if (entry.projectState === 'PENDING') {
|
|
stateLabel = 'Pending'
|
|
}
|
|
|
|
const statusInfo = roundStatusDisplay[entry.status] ?? { label: 'Upcoming', variant: 'secondary' as const }
|
|
|
|
return (
|
|
<div key={entry.id} className="relative flex items-start gap-4">
|
|
{/* Icon */}
|
|
<div
|
|
className={`relative z-10 flex h-10 w-10 items-center justify-center rounded-full ${iconBg} shrink-0`}
|
|
>
|
|
<Icon className={`h-5 w-5 ${iconColor}`} />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-w-0 pb-6">
|
|
<div className="flex items-start justify-between flex-wrap gap-2 mb-2">
|
|
<div>
|
|
<h3 className="font-semibold">{entry.label}</h3>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{stateLabel && (
|
|
<Badge
|
|
variant="outline"
|
|
className={
|
|
isRejected
|
|
? 'border-red-200 text-red-700 bg-red-50'
|
|
: entry.projectState === 'PASSED' || entry.projectState === 'COMPLETED'
|
|
? 'border-emerald-200 text-emerald-700 bg-emerald-50'
|
|
: ''
|
|
}
|
|
>
|
|
{stateLabel}
|
|
</Badge>
|
|
)}
|
|
<Badge
|
|
variant={statusInfo.variant}
|
|
className={
|
|
isCompleted
|
|
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
|
: isActive
|
|
? 'bg-brand-blue text-white'
|
|
: ''
|
|
}
|
|
>
|
|
{statusInfo.label}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{entry.windowOpenAt && entry.windowCloseAt && (
|
|
<div className="text-sm text-muted-foreground space-y-1">
|
|
<p>Opens: {new Date(entry.windowOpenAt).toLocaleDateString()}</p>
|
|
<p>Closes: {new Date(entry.windowCloseAt).toLocaleDateString()}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Compact sidebar variant for the dashboard.
|
|
* Animated timeline with connector indicators between dots.
|
|
*/
|
|
export function CompetitionTimelineSidebar() {
|
|
const { data, isLoading } = trpc.applicant.getMyCompetitionTimeline.useQuery()
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-6" />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!data || data.entries.length === 0) {
|
|
return <p className="text-sm text-muted-foreground">No rounds available</p>
|
|
}
|
|
|
|
// Find the index where elimination happened (first REJECTED entry)
|
|
const eliminationIndex = data.entries.findIndex((e) => e.projectState === 'REJECTED')
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div className="space-y-0">
|
|
{data.entries.map((entry, index) => {
|
|
const isCompleted = entry.status === 'ROUND_CLOSED' || entry.status === 'ROUND_ARCHIVED'
|
|
const isActive = entry.status === 'ROUND_ACTIVE'
|
|
const isRejected = entry.projectState === 'REJECTED'
|
|
const isGrandFinale = entry.roundType === 'GRAND_FINALE'
|
|
const isPassed = entry.projectState === 'PASSED' || entry.projectState === 'COMPLETED'
|
|
const isLast = index === data.entries.length - 1
|
|
// Is this entry after the elimination point?
|
|
const isAfterElimination = eliminationIndex >= 0 && index > eliminationIndex
|
|
|
|
// Is this the current round the project is in (regardless of round status)?
|
|
const isCurrent = !!entry.projectState && entry.projectState !== 'PASSED' && entry.projectState !== 'COMPLETED' && entry.projectState !== 'REJECTED'
|
|
|
|
// Determine connector segment color (no icons, just colored lines)
|
|
let connectorColor = 'bg-border'
|
|
if ((isPassed || isCompleted) && !isAfterElimination) connectorColor = 'bg-emerald-400'
|
|
else if (isRejected) connectorColor = 'bg-destructive/30'
|
|
|
|
// Dot inner content
|
|
let dotInner: React.ReactNode = null
|
|
let dotClasses = 'border-2 border-muted-foreground/20 bg-background'
|
|
|
|
if (isAfterElimination) {
|
|
dotClasses = 'border-2 border-muted/60 bg-muted/30'
|
|
} else if (isRejected) {
|
|
dotClasses = 'bg-destructive border-2 border-destructive'
|
|
dotInner = <XCircle className="h-3.5 w-3.5 text-white" />
|
|
} else if (isGrandFinale && (isCompleted || isPassed)) {
|
|
dotClasses = 'bg-yellow-500 border-2 border-yellow-500'
|
|
dotInner = <Trophy className="h-3.5 w-3.5 text-white" />
|
|
} else if (isCompleted || isPassed) {
|
|
dotClasses = 'bg-emerald-500 border-2 border-emerald-500'
|
|
dotInner = <Check className="h-3.5 w-3.5 text-white" />
|
|
} else if (isCurrent) {
|
|
dotClasses = 'bg-amber-400 border-2 border-amber-400'
|
|
dotInner = <span className="h-2.5 w-2.5 rounded-full bg-white animate-ping" style={{ animationDuration: '2s' }} />
|
|
}
|
|
|
|
// Status sub-label
|
|
let statusLabel: string | null = null
|
|
let statusColor = 'text-muted-foreground'
|
|
if (isRejected) {
|
|
statusLabel = 'Eliminated'
|
|
statusColor = 'text-destructive'
|
|
} else if (isAfterElimination) {
|
|
statusLabel = null
|
|
} else if (isPassed) {
|
|
statusLabel = 'Advanced'
|
|
statusColor = 'text-emerald-600'
|
|
} else if (isCurrent) {
|
|
statusLabel = 'You are here'
|
|
statusColor = 'text-amber-600'
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={entry.id}
|
|
className="animate-in fade-in slide-in-from-left-2 fill-mode-both"
|
|
style={{ animationDelay: `${index * 100}ms`, animationDuration: '400ms' }}
|
|
>
|
|
{/* Row: dot + label */}
|
|
<div className={cn(
|
|
'group relative flex items-center gap-3.5 rounded-lg px-1.5 py-1.5 -mx-1.5 transition-colors duration-200 hover:bg-muted/40',
|
|
isCurrent && 'bg-amber-50/60 hover:bg-amber-50/80',
|
|
)}>
|
|
{/* Dot */}
|
|
<div
|
|
className={cn(
|
|
'relative z-10 h-7 w-7 rounded-full shrink-0 flex items-center justify-center shadow-sm transition-all duration-300',
|
|
isCurrent && 'ring-4 ring-amber-400/25',
|
|
isPassed && !isRejected && !isAfterElimination && 'ring-[3px] ring-emerald-500/15',
|
|
dotClasses,
|
|
)}
|
|
>
|
|
{dotInner}
|
|
</div>
|
|
|
|
{/* Label */}
|
|
<div className="flex-1 min-w-0">
|
|
<p
|
|
className={cn('text-sm leading-5 font-medium transition-colors duration-200', {
|
|
'text-destructive line-through decoration-destructive/40': isRejected,
|
|
'text-muted-foreground/40': isAfterElimination,
|
|
'text-foreground font-semibold': isCurrent,
|
|
'text-foreground': !isCurrent && !isRejected && !isAfterElimination && (isCompleted || isActive || isPassed),
|
|
'text-muted-foreground': !isRejected && !isAfterElimination && !isCompleted && !isActive && !isPassed,
|
|
})}
|
|
>
|
|
{entry.label}
|
|
</p>
|
|
{statusLabel && (
|
|
<p className={cn('text-xs mt-0.5 font-semibold tracking-wide uppercase', statusColor)}>{statusLabel}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Connector line between dots */}
|
|
{!isLast && (
|
|
<div className="flex items-center ml-[13px] h-5">
|
|
<div
|
|
className={cn(
|
|
'w-[2px] h-full rounded-full transition-all duration-500',
|
|
connectorColor,
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|