Comprehensive platform audit: security, UX, performance, and visual polish
Build and Push Docker Image / build (push) Successful in 10m57s Details

Phase 1: Security - status transition validation, Zod tightening, DB indexes, transactions

Phase 2: Admin UX - search/filter for awards, learning, partners pages

Phase 3: Dashboard - Recent Activity feed, Pending Actions card, quick actions

Phase 4: Jury - assignments progress/urgency, autosave indicator, divergence highlighting

Phase 5: Portals - observer charts, mentor search, login/onboarding polish

Phase 6: Messages preview dialog, CsvExportDialog with column selection

Phase 7: Performance - query optimizations, loading skeletons, useDebounce hook

Phase 8: Visual - AnimatedCard, hover effects, StatusBadge, empty state CTAs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-02-08 22:05:01 +01:00
parent e0e4cb2a32
commit e73a676412
33 changed files with 3193 additions and 977 deletions

View File

@ -613,6 +613,7 @@ model ProjectFile {
@@unique([bucket, objectKey])
@@index([projectId])
@@index([roundId])
@@index([projectId, roundId])
@@index([fileType])
}
@ -651,6 +652,7 @@ model Assignment {
@@index([projectId])
@@index([roundId])
@@index([isCompleted])
@@index([projectId, userId])
}
model Evaluation {
@ -1339,6 +1341,13 @@ model SpecialAward {
sortOrder Int @default(0)
// Eligibility job tracking
eligibilityJobStatus String? // PENDING, PROCESSING, COMPLETED, FAILED
eligibilityJobTotal Int? // total projects to process
eligibilityJobDone Int? // completed so far
eligibilityJobError String? @db.Text // error message if failed
eligibilityJobStarted DateTime? // when job started
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@ -1379,6 +1388,7 @@ model AwardEligibility {
@@index([awardId])
@@index([projectId])
@@index([eligible])
@@index([awardId, eligible])
}
model AwardJuror {

View File

@ -1,6 +1,6 @@
'use client'
import { useState, useMemo } from 'react'
import { useState, useMemo, useCallback } from 'react'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import {
@ -53,6 +53,7 @@ import {
ArrowLeftRight,
} from 'lucide-react'
import { Switch } from '@/components/ui/switch'
import { CsvExportDialog } from '@/components/shared/csv-export-dialog'
import { formatDate } from '@/lib/utils'
import { cn } from '@/lib/utils'
@ -163,7 +164,7 @@ export default function AuditLogPage() {
retry: false,
})
// Export mutation
// Export query
const exportLogs = trpc.export.auditLogs.useQuery(
{
userId: filters.userId || undefined,
@ -176,40 +177,17 @@ export default function AuditLogPage() {
},
{ enabled: false }
)
const [showExportDialog, setShowExportDialog] = useState(false)
// Handle export
const handleExport = async () => {
const handleExport = () => {
setShowExportDialog(true)
}
const handleRequestExportData = useCallback(async () => {
const result = await exportLogs.refetch()
if (result.data) {
const { data: rows, columns } = result.data
// Build CSV
const csvContent = [
columns.join(','),
...rows.map((row) =>
columns
.map((col) => {
const value = row[col as keyof typeof row]
// Escape quotes and wrap in quotes if contains comma
if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
return `"${value.replace(/"/g, '""')}"`
}
return value ?? ''
})
.join(',')
),
].join('\n')
// Download
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `audit-logs-${new Date().toISOString().split('T')[0]}.csv`
link.click()
URL.revokeObjectURL(url)
}
}
return result.data ?? undefined
}, [exportLogs])
// Reset filters
const resetFilters = () => {
@ -701,6 +679,16 @@ export default function AuditLogPage() {
</CardContent>
</Card>
)}
{/* CSV Export Dialog with Column Selection */}
<CsvExportDialog
open={showExportDialog}
onOpenChange={setShowExportDialog}
exportData={exportLogs.data ?? undefined}
isLoading={exportLogs.isFetching}
filename="audit-logs"
onRequestData={handleRequestExportData}
/>
</div>
)
}

View File

@ -1,6 +1,6 @@
'use client'
import { use, useState } from 'react'
import { use, useEffect, useRef, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
@ -53,9 +53,21 @@ import {
} from '@/components/ui/dialog'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Input } from '@/components/ui/input'
import { Progress } from '@/components/ui/progress'
import { UserAvatar } from '@/components/shared/user-avatar'
import { Pagination } from '@/components/shared/pagination'
import { toast } from 'sonner'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import {
ArrowLeft,
Trophy,
@ -73,6 +85,9 @@ import {
Trash2,
Plus,
Search,
Vote,
ChevronDown,
AlertCircle,
} from 'lucide-react'
const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
@ -83,6 +98,41 @@ const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'o
ARCHIVED: 'secondary',
}
// Status workflow steps for the step indicator
const WORKFLOW_STEPS = [
{ key: 'DRAFT', label: 'Draft' },
{ key: 'NOMINATIONS_OPEN', label: 'Nominations' },
{ key: 'VOTING_OPEN', label: 'Voting' },
{ key: 'CLOSED', label: 'Closed' },
] as const
function getStepIndex(status: string): number {
const idx = WORKFLOW_STEPS.findIndex((s) => s.key === status)
return idx >= 0 ? idx : (status === 'ARCHIVED' ? 3 : 0)
}
function ConfidenceBadge({ confidence }: { confidence: number }) {
if (confidence > 0.8) {
return (
<Badge variant="outline" className="border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-xs tabular-nums">
{Math.round(confidence * 100)}%
</Badge>
)
}
if (confidence >= 0.5) {
return (
<Badge variant="outline" className="border-amber-300 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-400 text-xs tabular-nums">
{Math.round(confidence * 100)}%
</Badge>
)
}
return (
<Badge variant="outline" className="border-red-300 bg-red-50 text-red-700 dark:border-red-700 dark:bg-red-950/30 dark:text-red-400 text-xs tabular-nums">
{Math.round(confidence * 100)}%
</Badge>
)
}
export default function AwardDetailPage({
params,
}: {
@ -111,6 +161,53 @@ export default function AwardDetailPage({
{ enabled: !!award?.programId }
)
const [isPollingJob, setIsPollingJob] = useState(false)
const pollingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
// Eligibility job polling
const { data: jobStatus, refetch: refetchJobStatus } =
trpc.specialAward.getEligibilityJobStatus.useQuery(
{ awardId },
{ enabled: isPollingJob }
)
useEffect(() => {
if (!isPollingJob) return
pollingIntervalRef.current = setInterval(() => {
refetchJobStatus()
}, 2000)
return () => {
if (pollingIntervalRef.current) {
clearInterval(pollingIntervalRef.current)
pollingIntervalRef.current = null
}
}
}, [isPollingJob, refetchJobStatus])
// React to job status changes
useEffect(() => {
if (!jobStatus || !isPollingJob) return
if (jobStatus.eligibilityJobStatus === 'COMPLETED') {
setIsPollingJob(false)
toast.success('Eligibility processing completed')
refetchEligibility()
refetch()
} else if (jobStatus.eligibilityJobStatus === 'FAILED') {
setIsPollingJob(false)
toast.error(jobStatus.eligibilityJobError || 'Eligibility processing failed')
}
}, [jobStatus, isPollingJob, refetchEligibility, refetch])
// Check on mount if there's an ongoing job
useEffect(() => {
if (award?.eligibilityJobStatus === 'PROCESSING' || award?.eligibilityJobStatus === 'PENDING') {
setIsPollingJob(true)
}
}, [award?.eligibilityJobStatus])
const updateStatus = trpc.specialAward.updateStatus.useMutation()
const runEligibility = trpc.specialAward.runEligibility.useMutation()
const setEligibility = trpc.specialAward.setEligibility.useMutation()
@ -123,6 +220,7 @@ export default function AwardDetailPage({
const [includeSubmitted, setIncludeSubmitted] = useState(true)
const [addProjectDialogOpen, setAddProjectDialogOpen] = useState(false)
const [projectSearchQuery, setProjectSearchQuery] = useState('')
const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
const handleStatusChange = async (
status: 'DRAFT' | 'NOMINATIONS_OPEN' | 'VOTING_OPEN' | 'CLOSED' | 'ARCHIVED'
@ -140,15 +238,12 @@ export default function AwardDetailPage({
const handleRunEligibility = async () => {
try {
const result = await runEligibility.mutateAsync({ awardId, includeSubmitted })
toast.success(
`Eligibility run: ${result.eligible} eligible, ${result.ineligible} ineligible`
)
refetchEligibility()
refetch()
await runEligibility.mutateAsync({ awardId, includeSubmitted })
toast.success('Eligibility processing started')
setIsPollingJob(true)
} catch (error) {
toast.error(
error instanceof Error ? error.message : 'Failed to run eligibility'
error instanceof Error ? error.message : 'Failed to start eligibility'
)
}
}
@ -369,6 +464,110 @@ export default function AwardDetailPage({
<p className="text-muted-foreground">{award.description}</p>
)}
{/* Status Workflow Step Indicator */}
<div className="relative">
<div className="flex items-center justify-between">
{WORKFLOW_STEPS.map((step, i) => {
const currentIdx = getStepIndex(award.status)
const isComplete = i < currentIdx
const isCurrent = i === currentIdx
return (
<div key={step.key} className="flex flex-1 items-center">
<div className="flex flex-col items-center gap-1.5 relative z-10">
<div
className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold transition-colors ${
isCurrent
? 'bg-brand-blue text-white ring-2 ring-brand-blue/20 ring-offset-2 ring-offset-background'
: isComplete
? 'bg-brand-blue/90 text-white'
: 'bg-muted text-muted-foreground'
}`}
>
{isComplete ? (
<CheckCircle2 className="h-4 w-4" />
) : (
i + 1
)}
</div>
<span
className={`text-xs font-medium whitespace-nowrap ${
isCurrent ? 'text-foreground' : isComplete ? 'text-muted-foreground' : 'text-muted-foreground/60'
}`}
>
{step.label}
</span>
</div>
{i < WORKFLOW_STEPS.length - 1 && (
<div className="flex-1 mx-2 mt-[-18px]">
<div
className={`h-0.5 w-full rounded-full transition-colors ${
i < currentIdx ? 'bg-brand-blue/70' : 'bg-muted'
}`}
/>
</div>
)}
</div>
)
})}
</div>
</div>
{/* Stats Cards */}
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card className="border-l-4 border-l-emerald-500">
<CardContent className="pt-4 pb-3">
<div className="flex items-center justify-between">
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Eligible</p>
<p className="text-2xl font-bold tabular-nums">{award.eligibleCount}</p>
</div>
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/40">
<CheckCircle2 className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
</div>
</div>
</CardContent>
</Card>
<Card className="border-l-4 border-l-blue-500">
<CardContent className="pt-4 pb-3">
<div className="flex items-center justify-between">
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Evaluated</p>
<p className="text-2xl font-bold tabular-nums">{award._count.eligibilities}</p>
</div>
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-950/40">
<Brain className="h-5 w-5 text-blue-600 dark:text-blue-400" />
</div>
</div>
</CardContent>
</Card>
<Card className="border-l-4 border-l-violet-500">
<CardContent className="pt-4 pb-3">
<div className="flex items-center justify-between">
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Jurors</p>
<p className="text-2xl font-bold tabular-nums">{award._count.jurors}</p>
</div>
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-violet-100 dark:bg-violet-950/40">
<Users className="h-5 w-5 text-violet-600 dark:text-violet-400" />
</div>
</div>
</CardContent>
</Card>
<Card className="border-l-4 border-l-amber-500">
<CardContent className="pt-4 pb-3">
<div className="flex items-center justify-between">
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Votes</p>
<p className="text-2xl font-bold tabular-nums">{award._count.votes}</p>
</div>
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-950/40">
<Vote className="h-5 w-5 text-amber-600 dark:text-amber-400" />
</div>
</div>
</CardContent>
</Card>
</div>
{/* Tabs */}
<Tabs defaultValue="eligibility">
<TabsList>
@ -407,27 +606,27 @@ export default function AwardDetailPage({
{award.useAiEligibility ? (
<Button
onClick={handleRunEligibility}
disabled={runEligibility.isPending}
disabled={runEligibility.isPending || isPollingJob}
>
{runEligibility.isPending ? (
{runEligibility.isPending || isPollingJob ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Brain className="mr-2 h-4 w-4" />
)}
Run AI Eligibility
{isPollingJob ? 'Processing...' : 'Run AI Eligibility'}
</Button>
) : (
<Button
onClick={handleRunEligibility}
disabled={runEligibility.isPending}
disabled={runEligibility.isPending || isPollingJob}
variant="outline"
>
{runEligibility.isPending ? (
{runEligibility.isPending || isPollingJob ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<CheckCircle2 className="mr-2 h-4 w-4" />
)}
Load All Projects
{isPollingJob ? 'Processing...' : 'Load All Projects'}
</Button>
)}
<Dialog open={addProjectDialogOpen} onOpenChange={setAddProjectDialogOpen}>
@ -527,6 +726,59 @@ export default function AwardDetailPage({
</Dialog>
</div>
</div>
{/* Eligibility job progress */}
{isPollingJob && jobStatus && (
<Card>
<CardContent className="py-4">
<div className="flex items-center gap-3">
<Loader2 className="h-5 w-5 animate-spin text-primary" />
<div className="flex-1 space-y-2">
<div className="flex items-center justify-between text-sm">
<span className="font-medium">
{jobStatus.eligibilityJobStatus === 'PENDING'
? 'Preparing...'
: `Processing... ${jobStatus.eligibilityJobDone ?? 0} of ${jobStatus.eligibilityJobTotal ?? '?'} projects`}
</span>
{jobStatus.eligibilityJobTotal && jobStatus.eligibilityJobTotal > 0 && (
<span className="text-muted-foreground">
{Math.round(
((jobStatus.eligibilityJobDone ?? 0) / jobStatus.eligibilityJobTotal) * 100
)}%
</span>
)}
</div>
<Progress
value={
jobStatus.eligibilityJobTotal && jobStatus.eligibilityJobTotal > 0
? ((jobStatus.eligibilityJobDone ?? 0) / jobStatus.eligibilityJobTotal) * 100
: 0
}
/>
</div>
</div>
</CardContent>
</Card>
)}
{/* Failed job notice */}
{!isPollingJob && award.eligibilityJobStatus === 'FAILED' && (
<Card className="border-destructive/50">
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 text-destructive">
<X className="h-4 w-4" />
<span className="text-sm font-medium">
Last eligibility run failed: {award.eligibilityJobError || 'Unknown error'}
</span>
</div>
<Button size="sm" variant="outline" onClick={handleRunEligibility} disabled={runEligibility.isPending}>
Retry
</Button>
</div>
</CardContent>
</Card>
)}
{!award.useAiEligibility && (
<p className="text-sm text-muted-foreground italic">
AI eligibility is off for this award. Projects are loaded for manual selection.
@ -542,20 +794,44 @@ export default function AwardDetailPage({
<TableHead>Category</TableHead>
<TableHead>Country</TableHead>
<TableHead>Method</TableHead>
{award.useAiEligibility && <TableHead>AI Confidence</TableHead>}
<TableHead>Eligible</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{eligibilityData.eligibilities.map((e) => (
<TableRow key={e.id} className={!e.eligible ? 'opacity-50' : ''}>
{eligibilityData.eligibilities.map((e) => {
const aiReasoning = e.aiReasoningJson as { confidence?: number; reasoning?: string } | null
const hasReasoning = !!aiReasoning?.reasoning
const isExpanded = expandedRows.has(e.id)
return (
<Collapsible key={e.id} open={isExpanded} onOpenChange={(open) => {
setExpandedRows((prev) => {
const next = new Set(prev)
if (open) next.add(e.id)
else next.delete(e.id)
return next
})
}} asChild>
<>
<TableRow className={`${!e.eligible ? 'opacity-50' : ''} ${hasReasoning ? 'cursor-pointer' : ''}`}>
<TableCell>
<div className="flex items-center gap-2">
{hasReasoning && (
<CollapsibleTrigger asChild>
<button className="flex-shrink-0 p-0.5 rounded hover:bg-muted transition-colors">
<ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} />
</button>
</CollapsibleTrigger>
)}
<div>
<p className="font-medium">{e.project.title}</p>
<p className="text-sm text-muted-foreground">
{e.project.teamName}
</p>
</div>
</div>
</TableCell>
<TableCell>
{e.project.competitionCategory ? (
@ -572,6 +848,24 @@ export default function AwardDetailPage({
{e.method === 'MANUAL' ? 'Manual' : 'Auto'}
</Badge>
</TableCell>
{award.useAiEligibility && (
<TableCell>
{aiReasoning?.confidence != null ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<ConfidenceBadge confidence={aiReasoning.confidence} />
</TooltipTrigger>
<TooltipContent>
AI confidence: {Math.round(aiReasoning.confidence * 100)}%
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
<span className="text-xs text-muted-foreground">-</span>
)}
</TableCell>
)}
<TableCell>
<Switch
checked={e.eligible}
@ -591,18 +885,55 @@ export default function AwardDetailPage({
</Button>
</TableCell>
</TableRow>
))}
{hasReasoning && (
<CollapsibleContent asChild>
<tr>
<td colSpan={award.useAiEligibility ? 7 : 6} className="p-0">
<div className="border-t bg-muted/30 px-6 py-3">
<div className="flex items-start gap-2">
<Brain className="h-4 w-4 text-brand-teal mt-0.5 flex-shrink-0" />
<div className="space-y-1">
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">AI Reasoning</p>
<p className="text-sm leading-relaxed">{aiReasoning?.reasoning}</p>
</div>
</div>
</div>
</td>
</tr>
</CollapsibleContent>
)}
</>
</Collapsible>
)
})}
</TableBody>
</Table>
</Card>
) : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<Brain className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 font-medium">No eligibility data</p>
<p className="text-sm text-muted-foreground">
Run AI eligibility to evaluate projects or manually add projects
<CardContent className="flex flex-col items-center justify-center py-16 text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
<Brain className="h-8 w-8 text-muted-foreground/60" />
</div>
<p className="text-lg font-medium">No eligibility data yet</p>
<p className="text-sm text-muted-foreground mt-1 max-w-sm">
{award.useAiEligibility
? 'Run AI eligibility to automatically evaluate projects against this award\'s criteria, or manually add projects.'
: 'Load all eligible projects into the evaluation list, or manually add specific projects.'}
</p>
<div className="flex gap-2 mt-4">
<Button onClick={handleRunEligibility} disabled={runEligibility.isPending || isPollingJob} size="sm">
{award.useAiEligibility ? (
<><Brain className="mr-2 h-4 w-4" />Run AI Eligibility</>
) : (
<><CheckCircle2 className="mr-2 h-4 w-4" />Load Projects</>
)}
</Button>
<Button variant="outline" size="sm" onClick={() => setAddProjectDialogOpen(true)}>
<Plus className="mr-2 h-4 w-4" />
Add Manually
</Button>
</div>
</CardContent>
</Card>
)}
@ -680,11 +1011,13 @@ export default function AwardDetailPage({
</Card>
) : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<Users className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 font-medium">No jurors assigned</p>
<p className="text-sm text-muted-foreground">
Add members as jurors for this award
<CardContent className="flex flex-col items-center justify-center py-16 text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
<Users className="h-8 w-8 text-muted-foreground/60" />
</div>
<p className="text-lg font-medium">No jurors assigned</p>
<p className="text-sm text-muted-foreground mt-1 max-w-sm">
Add jury members who will vote on eligible projects for this award. Select from existing jury members above.
</p>
</CardContent>
</Card>
@ -693,7 +1026,9 @@ export default function AwardDetailPage({
{/* Results Tab */}
<TabsContent value="results" className="space-y-4">
{voteResults && voteResults.results.length > 0 ? (
{voteResults && voteResults.results.length > 0 ? (() => {
const maxPoints = Math.max(...voteResults.results.map((r) => r.points), 1)
return (
<>
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<span>
@ -712,25 +1047,36 @@ export default function AwardDetailPage({
<TableHead className="w-12">#</TableHead>
<TableHead>Project</TableHead>
<TableHead>Votes</TableHead>
<TableHead>Points</TableHead>
<TableHead className="min-w-[200px]">Score</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{voteResults.results.map((r, i) => (
{voteResults.results.map((r, i) => {
const isWinner = r.project.id === voteResults.winnerId
const barPercent = (r.points / maxPoints) * 100
return (
<TableRow
key={r.project.id}
className={
r.project.id === voteResults.winnerId
? 'bg-amber-50 dark:bg-amber-950/20'
: ''
}
className={isWinner ? 'bg-amber-50/80 dark:bg-amber-950/20' : ''}
>
<TableCell className="font-bold">{i + 1}</TableCell>
<TableCell>
<span className={`inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold ${
i === 0
? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
: i === 1
? 'bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-300'
: i === 2
? 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300'
: 'text-muted-foreground'
}`}>
{i + 1}
</span>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
{r.project.id === voteResults.winnerId && (
<Crown className="h-4 w-4 text-amber-500" />
{isWinner && (
<Crown className="h-4 w-4 text-amber-500 flex-shrink-0" />
)}
<div>
<p className="font-medium">{r.project.title}</p>
@ -740,12 +1086,30 @@ export default function AwardDetailPage({
</div>
</div>
</TableCell>
<TableCell>{r.votes}</TableCell>
<TableCell className="font-semibold">
<TableCell>
<span className="tabular-nums">{r.votes}</span>
</TableCell>
<TableCell>
<div className="flex items-center gap-3">
<div className="flex-1 h-2.5 rounded-full bg-muted overflow-hidden">
<div
className={`h-full rounded-full transition-all duration-500 ${
isWinner
? 'bg-gradient-to-r from-amber-400 to-amber-500'
: i === 0
? 'bg-gradient-to-r from-brand-blue to-brand-teal'
: 'bg-brand-teal/60'
}`}
style={{ width: `${barPercent}%` }}
/>
</div>
<span className="text-sm font-semibold tabular-nums w-10 text-right">
{r.points}
</span>
</div>
</TableCell>
<TableCell className="text-right">
{r.project.id !== voteResults.winnerId && (
{!isWinner && (
<Button
variant="ghost"
size="sm"
@ -758,19 +1122,38 @@ export default function AwardDetailPage({
)}
</TableCell>
</TableRow>
))}
)
})}
</TableBody>
</Table>
</Card>
</>
) : (
)
})() : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<BarChart3 className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 font-medium">No votes yet</p>
<p className="text-sm text-muted-foreground">
Votes will appear here once jurors submit their selections
<CardContent className="flex flex-col items-center justify-center py-16 text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
<BarChart3 className="h-8 w-8 text-muted-foreground/60" />
</div>
<p className="text-lg font-medium">No votes yet</p>
<p className="text-sm text-muted-foreground mt-1 max-w-sm">
{award._count.jurors === 0
? 'Assign jurors to this award first, then open voting to collect their selections.'
: award.status === 'DRAFT' || award.status === 'NOMINATIONS_OPEN'
? 'Open voting to allow jurors to submit their selections for this award.'
: 'Votes will appear here as jurors submit their selections.'}
</p>
{award.status === 'NOMINATIONS_OPEN' && (
<Button
className="mt-4"
size="sm"
onClick={() => handleStatusChange('VOTING_OPEN')}
disabled={updateStatus.isPending}
>
<Play className="mr-2 h-4 w-4" />
Open Voting
</Button>
)}
</CardContent>
</Card>
)}

View File

@ -1,5 +1,7 @@
'use client'
import { useState, useMemo } from 'react'
import { useDebounce } from '@/hooks/use-debounce'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
@ -12,7 +14,15 @@ import {
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Plus, Trophy, Users, CheckCircle2 } from 'lucide-react'
import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Plus, Trophy, Users, CheckCircle2, Search } from 'lucide-react'
const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
DRAFT: 'secondary',
@ -31,16 +41,46 @@ const SCORING_LABELS: Record<string, string> = {
export default function AwardsListPage() {
const { data: awards, isLoading } = trpc.specialAward.list.useQuery({})
const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 300)
const [statusFilter, setStatusFilter] = useState('all')
const [scoringFilter, setScoringFilter] = useState('all')
const filteredAwards = useMemo(() => {
if (!awards) return []
return awards.filter((award) => {
const matchesSearch =
!debouncedSearch ||
award.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
award.description?.toLowerCase().includes(debouncedSearch.toLowerCase())
const matchesStatus = statusFilter === 'all' || award.status === statusFilter
const matchesScoring = scoringFilter === 'all' || award.scoringMode === scoringFilter
return matchesSearch && matchesStatus && matchesScoring
})
}, [awards, debouncedSearch, statusFilter, scoringFilter])
if (isLoading) {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<Skeleton className="h-9 w-48" />
<div>
<Skeleton className="h-8 w-48" />
<Skeleton className="mt-2 h-4 w-72" />
</div>
<Skeleton className="h-9 w-32" />
</div>
{/* Toolbar skeleton */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<Skeleton className="h-10 flex-1" />
<div className="flex items-center gap-2">
<Skeleton className="h-10 w-[180px]" />
<Skeleton className="h-10 w-[160px]" />
</div>
</div>
{/* Cards skeleton */}
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{[...Array(3)].map((_, i) => (
<Skeleton key={i} className="h-48" />
{[...Array(6)].map((_, i) => (
<Skeleton key={i} className="h-48 rounded-lg" />
))}
</div>
</div>
@ -67,12 +107,58 @@ export default function AwardsListPage() {
</Button>
</div>
{/* Toolbar */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="Search awards..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
/>
</div>
<div className="flex items-center gap-2">
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="All statuses" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All statuses</SelectItem>
<SelectItem value="DRAFT">Draft</SelectItem>
<SelectItem value="NOMINATIONS_OPEN">Nominations Open</SelectItem>
<SelectItem value="VOTING_OPEN">Voting Open</SelectItem>
<SelectItem value="CLOSED">Closed</SelectItem>
<SelectItem value="ARCHIVED">Archived</SelectItem>
</SelectContent>
</Select>
<Select value={scoringFilter} onValueChange={setScoringFilter}>
<SelectTrigger className="w-[160px]">
<SelectValue placeholder="All scoring" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All scoring</SelectItem>
<SelectItem value="PICK_WINNER">Pick Winner</SelectItem>
<SelectItem value="RANKED">Ranked</SelectItem>
<SelectItem value="SCORED">Scored</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* Results count */}
{awards && (
<p className="text-sm text-muted-foreground">
{filteredAwards.length} of {awards.length} awards
</p>
)}
{/* Awards Grid */}
{awards && awards.length > 0 ? (
{filteredAwards.length > 0 ? (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{awards.map((award) => (
{filteredAwards.map((award) => (
<Link key={award.id} href={`/admin/awards/${award.id}`}>
<Card className="transition-colors hover:bg-muted/50 cursor-pointer h-full">
<Card className="transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-md cursor-pointer h-full">
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<CardTitle className="text-lg flex items-center gap-2">
@ -118,13 +204,22 @@ export default function AwardsListPage() {
</Link>
))}
</div>
) : awards && awards.length > 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
<Search className="h-8 w-8 text-muted-foreground/40" />
<p className="mt-2 text-sm text-muted-foreground">
No awards match your filters
</p>
</CardContent>
</Card>
) : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<Trophy className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 font-medium">No awards yet</p>
<p className="text-sm text-muted-foreground">
Create special awards for outstanding projects
<Trophy className="h-12 w-12 text-muted-foreground/40" />
<h3 className="mt-3 text-lg font-medium">No awards yet</h3>
<p className="mt-1 text-sm text-muted-foreground max-w-sm">
Create special awards with eligibility criteria and jury voting for outstanding projects.
</p>
<Button className="mt-4" asChild>
<Link href="/admin/awards/new">

View File

@ -1,27 +1,34 @@
import { Suspense } from 'react'
'use client'
import { useState, useMemo } from 'react'
import { useDebounce } from '@/hooks/use-debounce'
import Link from 'next/link'
import { api } from '@/lib/trpc/server'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import {
Plus,
FileText,
Video,
Link as LinkIcon,
File,
Eye,
Pencil,
ExternalLink,
Search,
} from 'lucide-react'
import { formatDate } from '@/lib/utils'
const resourceTypeIcons = {
PDF: FileText,
@ -31,42 +38,139 @@ const resourceTypeIcons = {
OTHER: File,
}
const cohortColors = {
const cohortColors: Record<string, string> = {
ALL: 'bg-gray-100 text-gray-800',
SEMIFINALIST: 'bg-blue-100 text-blue-800',
FINALIST: 'bg-purple-100 text-purple-800',
}
async function LearningResourcesList() {
const caller = await api()
const { data: resources } = await caller.learningResource.list({
perPage: 50,
})
export default function LearningHubPage() {
const { data, isLoading } = trpc.learningResource.list.useQuery({ perPage: 50 })
const resources = data?.data
if (resources.length === 0) {
const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 300)
const [typeFilter, setTypeFilter] = useState('all')
const [cohortFilter, setCohortFilter] = useState('all')
const filteredResources = useMemo(() => {
if (!resources) return []
return resources.filter((resource) => {
const matchesSearch =
!debouncedSearch ||
resource.title.toLowerCase().includes(debouncedSearch.toLowerCase())
const matchesType = typeFilter === 'all' || resource.resourceType === typeFilter
const matchesCohort = cohortFilter === 'all' || resource.cohortLevel === cohortFilter
return matchesSearch && matchesType && matchesCohort
})
}, [resources, debouncedSearch, typeFilter, cohortFilter])
if (isLoading) {
return (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<FileText className="h-12 w-12 text-muted-foreground mb-4" />
<h3 className="text-lg font-medium mb-2">No resources yet</h3>
<p className="text-muted-foreground mb-4">
Start by adding your first learning resource
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<Skeleton className="h-8 w-48" />
<Skeleton className="mt-2 h-4 w-72" />
</div>
<Skeleton className="h-9 w-32" />
</div>
{/* Toolbar skeleton */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<Skeleton className="h-10 flex-1" />
<div className="flex items-center gap-2">
<Skeleton className="h-10 w-[160px]" />
<Skeleton className="h-10 w-[160px]" />
</div>
</div>
{/* Resource list skeleton */}
<div className="grid gap-4">
{[...Array(5)].map((_, i) => (
<Card key={i}>
<CardContent className="flex items-center gap-4 py-4">
<Skeleton className="h-10 w-10 rounded-lg" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-48" />
<Skeleton className="h-4 w-32" />
</div>
<Skeleton className="h-8 w-8 rounded" />
</CardContent>
</Card>
))}
</div>
</div>
)
}
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">Learning Hub</h1>
<p className="text-muted-foreground">
Manage educational resources for jury members
</p>
</div>
<Link href="/admin/learning/new">
<Button>
<Plus className="mr-2 h-4 w-4" />
Add Resource
</Button>
</Link>
</CardContent>
</Card>
)
}
</div>
return (
{/* Toolbar */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="Search resources..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
/>
</div>
<div className="flex items-center gap-2">
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="w-[160px]">
<SelectValue placeholder="All types" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All types</SelectItem>
<SelectItem value="PDF">PDF</SelectItem>
<SelectItem value="VIDEO">Video</SelectItem>
<SelectItem value="DOCUMENT">Document</SelectItem>
<SelectItem value="LINK">Link</SelectItem>
<SelectItem value="OTHER">Other</SelectItem>
</SelectContent>
</Select>
<Select value={cohortFilter} onValueChange={setCohortFilter}>
<SelectTrigger className="w-[160px]">
<SelectValue placeholder="All cohorts" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All cohorts</SelectItem>
<SelectItem value="ALL">All (cohort)</SelectItem>
<SelectItem value="SEMIFINALIST">Semifinalist</SelectItem>
<SelectItem value="FINALIST">Finalist</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* Results count */}
{resources && (
<p className="text-sm text-muted-foreground">
{filteredResources.length} of {resources.length} resources
</p>
)}
{/* Resource List */}
{filteredResources.length > 0 ? (
<div className="grid gap-4">
{resources.map((resource) => {
const Icon = resourceTypeIcons[resource.resourceType]
{filteredResources.map((resource) => {
const Icon = resourceTypeIcons[resource.resourceType as keyof typeof resourceTypeIcons] || File
return (
<Card key={resource.id}>
<CardContent className="flex items-center gap-4 py-4">
@ -81,7 +185,7 @@ async function LearningResourcesList() {
)}
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Badge className={cohortColors[resource.cohortLevel]} variant="outline">
<Badge className={cohortColors[resource.cohortLevel] || ''} variant="outline">
{resource.cohortLevel}
</Badge>
<span>{resource.resourceType}</span>
@ -112,48 +216,32 @@ async function LearningResourcesList() {
)
})}
</div>
)
}
function LoadingSkeleton() {
return (
<div className="grid gap-4">
{[1, 2, 3].map((i) => (
<Card key={i}>
<CardContent className="flex items-center gap-4 py-4">
<Skeleton className="h-10 w-10 rounded-lg" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-48" />
<Skeleton className="h-4 w-32" />
</div>
) : resources && resources.length > 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
<Search className="h-8 w-8 text-muted-foreground/40" />
<p className="mt-2 text-sm text-muted-foreground">
No resources match your filters
</p>
</CardContent>
</Card>
))}
</div>
)
}
export default function LearningHubPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">Learning Hub</h1>
<p className="text-muted-foreground">
Manage educational resources for jury members
) : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<FileText className="h-12 w-12 text-muted-foreground/40" />
<h3 className="mt-3 text-lg font-medium">No resources yet</h3>
<p className="mt-1 text-sm text-muted-foreground max-w-sm">
Add learning materials like videos, documents, and links for program participants.
</p>
</div>
<Button className="mt-4" asChild>
<Link href="/admin/learning/new">
<Button>
<Plus className="mr-2 h-4 w-4" />
Add Resource
</Button>
</Link>
</div>
<Suspense fallback={<LoadingSkeleton />}>
<LearningResourcesList />
</Suspense>
</Button>
</CardContent>
</Card>
)}
</div>
)
}

View File

@ -41,6 +41,14 @@ import {
TableHeader,
TableRow,
} from '@/components/ui/table'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import {
Send,
Mail,
@ -51,6 +59,7 @@ import {
AlertCircle,
Inbox,
CheckCircle2,
Eye,
} from 'lucide-react'
import { toast } from 'sonner'
import { formatDate } from '@/lib/utils'
@ -79,6 +88,7 @@ export default function MessagesPage() {
const [deliveryChannels, setDeliveryChannels] = useState<string[]>(['EMAIL', 'IN_APP'])
const [isScheduled, setIsScheduled] = useState(false)
const [scheduledAt, setScheduledAt] = useState('')
const [showPreview, setShowPreview] = useState(false)
const utils = trpc.useUtils()
@ -152,7 +162,42 @@ export default function MessagesPage() {
}
}
const handleSend = () => {
const getRecipientDescription = (): string => {
switch (recipientType) {
case 'ALL':
return 'All platform users'
case 'ROLE': {
const roleLabel = selectedRole ? selectedRole.replace(/_/g, ' ') : ''
return roleLabel ? `All ${roleLabel}s` : 'By Role (none selected)'
}
case 'ROUND_JURY': {
if (!roundId) return 'Round Jury (none selected)'
const round = (rounds as Array<{ id: string; name: string; program?: { name: string } }> | undefined)?.find(
(r) => r.id === roundId
)
return round
? `Jury of ${round.program ? `${round.program.name} - ` : ''}${round.name}`
: 'Round Jury'
}
case 'PROGRAM_TEAM': {
if (!selectedProgramId) return 'Program Team (none selected)'
const program = (programs as Array<{ id: string; name: string }> | undefined)?.find(
(p) => p.id === selectedProgramId
)
return program ? `Team of ${program.name}` : 'Program Team'
}
case 'USER': {
if (!selectedUserId) return 'Specific User (none selected)'
const userList = (users as { users: Array<{ id: string; name: string | null; email: string }> } | undefined)?.users
const user = userList?.find((u) => u.id === selectedUserId)
return user ? (user.name || user.email) : 'Specific User'
}
default:
return 'Unknown'
}
}
const handlePreview = () => {
if (!subject.trim()) {
toast.error('Subject is required')
return
@ -182,6 +227,10 @@ export default function MessagesPage() {
return
}
setShowPreview(true)
}
const handleActualSend = () => {
sendMutation.mutate({
recipientType,
recipientFilter: buildRecipientFilter(),
@ -192,6 +241,7 @@ export default function MessagesPage() {
scheduledAt: isScheduled && scheduledAt ? new Date(scheduledAt).toISOString() : undefined,
templateId: selectedTemplateId && selectedTemplateId !== '__none__' ? selectedTemplateId : undefined,
})
setShowPreview(false)
}
return (
@ -474,13 +524,13 @@ export default function MessagesPage() {
{/* Send button */}
<div className="flex justify-end">
<Button onClick={handleSend} disabled={sendMutation.isPending}>
<Button onClick={handlePreview} disabled={sendMutation.isPending}>
{sendMutation.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Send className="mr-2 h-4 w-4" />
<Eye className="mr-2 h-4 w-4" />
)}
{isScheduled ? 'Schedule' : 'Send Message'}
{isScheduled ? 'Preview & Schedule' : 'Preview & Send'}
</Button>
</div>
</CardContent>
@ -581,6 +631,68 @@ export default function MessagesPage() {
</Card>
</TabsContent>
</Tabs>
{/* Preview Dialog */}
<Dialog open={showPreview} onOpenChange={setShowPreview}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Preview Message</DialogTitle>
<DialogDescription>Review your message before sending</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Recipients</p>
<p className="text-sm mt-1">{getRecipientDescription()}</p>
</div>
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Subject</p>
<p className="text-sm font-medium mt-1">{subject}</p>
</div>
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Message</p>
<div className="mt-1 rounded-lg border bg-muted/30 p-4">
<p className="text-sm whitespace-pre-wrap">{body}</p>
</div>
</div>
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Delivery Channels</p>
<div className="flex items-center gap-2 mt-1">
{deliveryChannels.includes('EMAIL') && (
<Badge variant="outline" className="text-xs">
<Mail className="mr-1 h-3 w-3" />
Email
</Badge>
)}
{deliveryChannels.includes('IN_APP') && (
<Badge variant="outline" className="text-xs">
<Bell className="mr-1 h-3 w-3" />
In-App
</Badge>
)}
</div>
</div>
{isScheduled && scheduledAt && (
<div>
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Scheduled For</p>
<p className="text-sm mt-1">{formatDate(new Date(scheduledAt))}</p>
</div>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setShowPreview(false)}>
Edit
</Button>
<Button onClick={handleActualSend} disabled={sendMutation.isPending}>
{sendMutation.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Send className="mr-2 h-4 w-4" />
)}
{isScheduled ? 'Confirm & Schedule' : 'Confirm & Send'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)
}

View File

@ -16,6 +16,7 @@ import {
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { Skeleton } from '@/components/ui/skeleton'
import { Button } from '@/components/ui/button'
import {
CircleDot,
ClipboardList,
@ -25,13 +26,27 @@ import {
TrendingUp,
ArrowRight,
Layers,
Activity,
AlertTriangle,
ShieldAlert,
Plus,
Upload,
UserPlus,
FileEdit,
LogIn,
Send,
Eye,
Trash2,
} from 'lucide-react'
import { GeographicSummaryCard } from '@/components/charts'
import { AnimatedCard } from '@/components/shared/animated-container'
import { StatusBadge } from '@/components/shared/status-badge'
import { ProjectLogo } from '@/components/shared/project-logo'
import { getCountryName } from '@/lib/countries'
import {
formatDateOnly,
formatEnumLabel,
formatRelativeTime,
truncate,
daysUntil,
} from '@/lib/utils'
@ -104,6 +119,10 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
latestProjects,
categoryBreakdown,
oceanIssueBreakdown,
recentActivity,
pendingCOIs,
draftRounds,
unassignedProjects,
] = await Promise.all([
prisma.round.count({
where: { programId: editionId, status: 'ACTIVE' },
@ -146,7 +165,13 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
where: { programId: editionId },
orderBy: { createdAt: 'desc' },
take: 5,
include: {
select: {
id: true,
name: true,
status: true,
votingStartAt: true,
votingEndAt: true,
submissionEndDate: true,
_count: {
select: {
projects: true,
@ -188,6 +213,40 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
where: { round: { programId: editionId } },
_count: true,
}),
// Recent activity feed (scoped to last 7 days for performance)
prisma.auditLog.findMany({
where: {
timestamp: { gte: sevenDaysAgo },
},
orderBy: { timestamp: 'desc' },
take: 8,
select: {
id: true,
action: true,
entityType: true,
timestamp: true,
user: { select: { name: true } },
},
}),
// Pending COI declarations (hasConflict declared but not yet reviewed)
prisma.conflictOfInterest.count({
where: {
hasConflict: true,
reviewedAt: null,
assignment: { round: { programId: editionId } },
},
}),
// Draft rounds needing activation
prisma.round.count({
where: { programId: editionId, status: 'DRAFT' },
}),
// Projects without assignments in active rounds
prisma.project.count({
where: {
round: { programId: editionId, status: 'ACTIVE' },
assignments: { none: {} },
},
}),
])
const submittedCount =
@ -253,6 +312,40 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
const maxCategoryCount = Math.max(...categories.map((c) => c.count), 1)
const maxIssueCount = Math.max(...issues.map((i) => i.count), 1)
// Helper: human-readable action descriptions for audit log
function formatAction(action: string, entityType: string | null): string {
const entity = entityType?.toLowerCase() || 'record'
const actionMap: Record<string, string> = {
CREATE: `created a ${entity}`,
UPDATE: `updated a ${entity}`,
DELETE: `deleted a ${entity}`,
LOGIN: 'logged in',
EXPORT: `exported ${entity} data`,
SUBMIT: `submitted an ${entity}`,
ASSIGN: `assigned a ${entity}`,
INVITE: `invited a user`,
STATUS_CHANGE: `changed ${entity} status`,
BULK_UPDATE: `bulk updated ${entity}s`,
IMPORT: `imported ${entity}s`,
}
return actionMap[action] || `${action.toLowerCase()} ${entity}`
}
// Helper: pick an icon for an audit action
function getActionIcon(action: string) {
switch (action) {
case 'CREATE': return <Plus className="h-3.5 w-3.5" />
case 'UPDATE': return <FileEdit className="h-3.5 w-3.5" />
case 'DELETE': return <Trash2 className="h-3.5 w-3.5" />
case 'LOGIN': return <LogIn className="h-3.5 w-3.5" />
case 'EXPORT': return <ArrowRight className="h-3.5 w-3.5" />
case 'SUBMIT': return <Send className="h-3.5 w-3.5" />
case 'ASSIGN': return <Users className="h-3.5 w-3.5" />
case 'INVITE': return <UserPlus className="h-3.5 w-3.5" />
default: return <Eye className="h-3.5 w-3.5" />
}
}
return (
<>
{/* Header */}
@ -265,7 +358,8 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
{/* Stats Grid */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card>
<AnimatedCard index={0}>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Rounds</CardTitle>
<CircleDot className="h-4 w-4 text-muted-foreground" />
@ -277,8 +371,10 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
</p>
</CardContent>
</Card>
</AnimatedCard>
<Card>
<AnimatedCard index={1}>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Projects</CardTitle>
<ClipboardList className="h-4 w-4 text-muted-foreground" />
@ -292,8 +388,10 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
</p>
</CardContent>
</Card>
</AnimatedCard>
<Card>
<AnimatedCard index={2}>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Jury Members</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
@ -305,8 +403,10 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
</p>
</CardContent>
</Card>
</AnimatedCard>
<Card>
<AnimatedCard index={3}>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Evaluations</CardTitle>
<CheckCircle2 className="h-4 w-4 text-muted-foreground" />
@ -328,6 +428,29 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
</div>
</CardContent>
</Card>
</AnimatedCard>
</div>
{/* Quick Actions */}
<div className="flex flex-wrap gap-2">
<Button variant="outline" size="sm" asChild>
<Link href="/admin/rounds/new">
<Plus className="mr-1.5 h-3.5 w-3.5" />
New Round
</Link>
</Button>
<Button variant="outline" size="sm" asChild>
<Link href="/admin/projects/new">
<Upload className="mr-1.5 h-3.5 w-3.5" />
Import Projects
</Link>
</Button>
<Button variant="outline" size="sm" asChild>
<Link href="/admin/members">
<UserPlus className="mr-1.5 h-3.5 w-3.5" />
Invite Jury
</Link>
</Button>
</div>
{/* Two-Column Content */}
@ -374,22 +497,12 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
href={`/admin/rounds/${round.id}`}
className="block"
>
<div className="rounded-lg border p-4 transition-colors hover:bg-muted/50">
<div className="rounded-lg border p-4 transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-md">
<div className="flex items-start justify-between gap-2">
<div className="space-y-1.5 flex-1 min-w-0">
<div className="flex items-center gap-2">
<p className="font-medium">{round.name}</p>
<Badge
variant={
round.status === 'ACTIVE'
? 'default'
: round.status === 'CLOSED'
? 'success'
: 'secondary'
}
>
{round.status}
</Badge>
<StatusBadge status={round.status} />
</div>
<p className="text-sm text-muted-foreground">
{round._count.projects} projects &middot; {round._count.assignments} assignments
@ -447,7 +560,7 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
href={`/admin/projects/${project.id}`}
className="block"
>
<div className="flex items-start gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50">
<div className="flex items-start gap-3 rounded-lg p-3 transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-sm">
<ProjectLogo
project={project}
size="sm"
@ -458,12 +571,11 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
<p className="font-medium text-sm leading-tight truncate">
{truncate(project.title, 45)}
</p>
<Badge
variant={statusColors[project.status ?? 'SUBMITTED'] || 'secondary'}
className="shrink-0 text-[10px] px-1.5 py-0"
>
{(project.status ?? 'SUBMITTED').replace('_', ' ')}
</Badge>
<StatusBadge
status={project.status ?? 'SUBMITTED'}
size="sm"
className="shrink-0"
/>
</div>
<p className="text-xs text-muted-foreground mt-0.5">
{[
@ -500,6 +612,53 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
{/* Right Column */}
<div className="space-y-6 lg:col-span-5">
{/* Pending Actions Card */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<AlertTriangle className="h-4 w-4" />
Pending Actions
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-2">
{pendingCOIs > 0 && (
<Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<ShieldAlert className="h-4 w-4 text-amber-500" />
<span className="text-sm">COI declarations to review</span>
</div>
<Badge variant="warning">{pendingCOIs}</Badge>
</Link>
)}
{unassignedProjects > 0 && (
<Link href="/admin/projects" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-orange-500" />
<span className="text-sm">Projects without assignments</span>
</div>
<Badge variant="warning">{unassignedProjects}</Badge>
</Link>
)}
{draftRounds > 0 && (
<Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
<div className="flex items-center gap-2">
<CircleDot className="h-4 w-4 text-blue-500" />
<span className="text-sm">Draft rounds to activate</span>
</div>
<Badge variant="secondary">{draftRounds}</Badge>
</Link>
)}
{pendingCOIs === 0 && unassignedProjects === 0 && draftRounds === 0 && (
<div className="flex flex-col items-center py-4 text-center">
<CheckCircle2 className="h-6 w-6 text-emerald-500" />
<p className="mt-1.5 text-sm text-muted-foreground">All caught up!</p>
</div>
)}
</div>
</CardContent>
</Card>
{/* Evaluation Progress Card */}
<Card>
<CardHeader>
@ -604,6 +763,45 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
</CardContent>
</Card>
{/* Recent Activity Card */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Activity className="h-4 w-4" />
Recent Activity
</CardTitle>
</CardHeader>
<CardContent>
{recentActivity.length === 0 ? (
<div className="flex flex-col items-center justify-center py-6 text-center">
<Activity className="h-8 w-8 text-muted-foreground/40" />
<p className="mt-2 text-sm text-muted-foreground">
No recent activity
</p>
</div>
) : (
<div className="space-y-3">
{recentActivity.map((log) => (
<div key={log.id} className="flex items-start gap-3">
<div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted">
{getActionIcon(log.action)}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm">
<span className="font-medium">{log.user?.name || 'System'}</span>
{' '}{formatAction(log.action, log.entityType)}
</p>
<p className="text-xs text-muted-foreground">
{formatRelativeTime(log.timestamp)}
</p>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Upcoming Deadlines Card */}
<Card>
<CardHeader>

View File

@ -1,6 +1,9 @@
import { Suspense } from 'react'
'use client'
import { useState, useMemo } from 'react'
import { useDebounce } from '@/hooks/use-debounce'
import Link from 'next/link'
import { api } from '@/lib/trpc/server'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import {
Card,
@ -8,6 +11,14 @@ import {
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import {
Plus,
Pencil,
@ -16,6 +27,7 @@ import {
Eye,
EyeOff,
Globe,
Search,
} from 'lucide-react'
const visibilityIcons = {
@ -24,7 +36,7 @@ const visibilityIcons = {
PUBLIC: Globe,
}
const partnerTypeColors = {
const partnerTypeColors: Record<string, string> = {
SPONSOR: 'bg-yellow-100 text-yellow-800',
PARTNER: 'bg-blue-100 text-blue-800',
SUPPORTER: 'bg-green-100 text-green-800',
@ -32,36 +44,138 @@ const partnerTypeColors = {
OTHER: 'bg-gray-100 text-gray-800',
}
async function PartnersList() {
const caller = await api()
const { data: partners } = await caller.partner.list({
perPage: 50,
})
export default function PartnersPage() {
const { data, isLoading } = trpc.partner.list.useQuery({ perPage: 50 })
const partners = data?.data
if (partners.length === 0) {
const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 300)
const [typeFilter, setTypeFilter] = useState('all')
const [activeFilter, setActiveFilter] = useState('all')
const filteredPartners = useMemo(() => {
if (!partners) return []
return partners.filter((partner) => {
const matchesSearch =
!debouncedSearch ||
partner.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
partner.description?.toLowerCase().includes(debouncedSearch.toLowerCase())
const matchesType = typeFilter === 'all' || partner.partnerType === typeFilter
const matchesActive =
activeFilter === 'all' ||
(activeFilter === 'active' && partner.isActive) ||
(activeFilter === 'inactive' && !partner.isActive)
return matchesSearch && matchesType && matchesActive
})
}, [partners, debouncedSearch, typeFilter, activeFilter])
if (isLoading) {
return (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<Building2 className="h-12 w-12 text-muted-foreground mb-4" />
<h3 className="text-lg font-medium mb-2">No partners yet</h3>
<p className="text-muted-foreground mb-4">
Start by adding your first partner organization
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<Skeleton className="h-8 w-48" />
<Skeleton className="mt-2 h-4 w-72" />
</div>
<Skeleton className="h-9 w-32" />
</div>
{/* Toolbar skeleton */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<Skeleton className="h-10 flex-1" />
<div className="flex items-center gap-2">
<Skeleton className="h-10 w-[160px]" />
<Skeleton className="h-10 w-[160px]" />
</div>
</div>
{/* Partner cards skeleton */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{[...Array(6)].map((_, i) => (
<Card key={i}>
<CardContent className="p-4">
<div className="flex items-start gap-4">
<Skeleton className="h-12 w-12 rounded-lg" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-32" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-full" />
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
)
}
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">Partners</h1>
<p className="text-muted-foreground">
Manage partner and sponsor organizations
</p>
</div>
<Link href="/admin/partners/new">
<Button>
<Plus className="mr-2 h-4 w-4" />
Add Partner
</Button>
</Link>
</CardContent>
</Card>
)
}
</div>
return (
{/* Toolbar */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="Search partners..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
/>
</div>
<div className="flex items-center gap-2">
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="w-[160px]">
<SelectValue placeholder="All types" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All types</SelectItem>
<SelectItem value="SPONSOR">Sponsor</SelectItem>
<SelectItem value="PARTNER">Partner</SelectItem>
<SelectItem value="SUPPORTER">Supporter</SelectItem>
<SelectItem value="MEDIA">Media</SelectItem>
<SelectItem value="OTHER">Other</SelectItem>
</SelectContent>
</Select>
<Select value={activeFilter} onValueChange={setActiveFilter}>
<SelectTrigger className="w-[160px]">
<SelectValue placeholder="All statuses" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All statuses</SelectItem>
<SelectItem value="active">Active</SelectItem>
<SelectItem value="inactive">Inactive</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* Results count */}
{partners && (
<p className="text-sm text-muted-foreground">
{filteredPartners.length} of {partners.length} partners
</p>
)}
{/* Partners Grid */}
{filteredPartners.length > 0 ? (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{partners.map((partner) => {
const VisibilityIcon = visibilityIcons[partner.visibility]
{filteredPartners.map((partner) => {
const VisibilityIcon = visibilityIcons[partner.visibility as keyof typeof visibilityIcons] || Eye
return (
<Card key={partner.id} className={!partner.isActive ? 'opacity-60' : ''}>
<CardContent className="p-4">
@ -77,7 +191,7 @@ async function PartnersList() {
)}
</div>
<div className="flex items-center gap-2 mt-1">
<Badge className={partnerTypeColors[partner.partnerType]} variant="outline">
<Badge className={partnerTypeColors[partner.partnerType] || ''} variant="outline">
{partner.partnerType}
</Badge>
<VisibilityIcon className="h-3 w-3 text-muted-foreground" />
@ -114,51 +228,32 @@ async function PartnersList() {
)
})}
</div>
)
}
function LoadingSkeleton() {
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{[1, 2, 3, 4, 5, 6].map((i) => (
<Card key={i}>
<CardContent className="p-4">
<div className="flex items-start gap-4">
<Skeleton className="h-12 w-12 rounded-lg" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-32" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-full" />
</div>
</div>
) : partners && partners.length > 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
<Search className="h-8 w-8 text-muted-foreground/40" />
<p className="mt-2 text-sm text-muted-foreground">
No partners match your filters
</p>
</CardContent>
</Card>
))}
</div>
)
}
export default function PartnersPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">Partners</h1>
<p className="text-muted-foreground">
Manage partner and sponsor organizations
) : (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<Building2 className="h-12 w-12 text-muted-foreground/40" />
<h3 className="mt-3 text-lg font-medium">No partners yet</h3>
<p className="mt-1 text-sm text-muted-foreground max-w-sm">
Add sponsor and partner organizations to showcase on the platform.
</p>
</div>
<Button className="mt-4" asChild>
<Link href="/admin/partners/new">
<Button>
<Plus className="mr-2 h-4 w-4" />
Add Partner
</Button>
</Link>
</div>
<Suspense fallback={<LoadingSkeleton />}>
<PartnersList />
</Suspense>
</Button>
</CardContent>
</Card>
)}
</div>
)
}

View File

@ -57,6 +57,7 @@ import {
RotateCcw,
Download,
Upload,
ExternalLink,
} from 'lucide-react'
import {
DndContext,
@ -643,7 +644,7 @@ export default function ApplySettingsPage() {
{program?.name} {program?.year}
</Link>
<span>/</span>
<span className="text-foreground">Apply Settings</span>
<span className="text-foreground">Apply Page</span>
</div>
{/* Header */}
@ -665,6 +666,15 @@ export default function ApplySettingsPage() {
</div>
<div className="flex items-center gap-2 shrink-0 flex-wrap justify-end">
{/* View public apply page */}
{program?.slug && (
<Button variant="outline" size="sm" asChild>
<a href={`/apply/edition/${program.slug}`} target="_blank" rel="noopener noreferrer">
<ExternalLink className="mr-2 h-4 w-4" />
View Public Page
</a>
</Button>
)}
{/* Template controls */}
<Select
onValueChange={(value) => {

View File

@ -24,6 +24,8 @@ import {
} from '@/components/ui/select'
import { Skeleton } from '@/components/ui/skeleton'
import { TagInput } from '@/components/shared/tag-input'
import { CountrySelect } from '@/components/ui/country-select'
import { PhoneInput } from '@/components/ui/phone-input'
import { toast } from 'sonner'
import {
ArrowLeft,
@ -31,15 +33,15 @@ import {
Loader2,
AlertCircle,
FolderPlus,
Plus,
X,
} from 'lucide-react'
function NewProjectPageContent() {
const router = useRouter()
const searchParams = useSearchParams()
const roundIdParam = searchParams.get('round')
const programIdParam = searchParams.get('program')
const [selectedProgramId, setSelectedProgramId] = useState<string>(programIdParam || '')
const [selectedRoundId, setSelectedRoundId] = useState<string>(roundIdParam || '')
// Form state
@ -49,15 +51,25 @@ function NewProjectPageContent() {
const [tags, setTags] = useState<string[]>([])
const [contactEmail, setContactEmail] = useState('')
const [contactName, setContactName] = useState('')
const [contactPhone, setContactPhone] = useState('')
const [country, setCountry] = useState('')
const [customFields, setCustomFields] = useState<{ key: string; value: string }[]>([])
const [city, setCity] = useState('')
const [institution, setInstitution] = useState('')
const [competitionCategory, setCompetitionCategory] = useState<string>('')
const [oceanIssue, setOceanIssue] = useState<string>('')
// Fetch active programs with rounds
// Fetch programs
const { data: programs, isLoading: loadingPrograms } = trpc.program.list.useQuery({
status: 'ACTIVE',
includeRounds: true,
})
// Fetch wizard config for selected program (dropdown options)
const { data: wizardConfig } = trpc.program.getWizardConfig.useQuery(
{ programId: selectedProgramId },
{ enabled: !!selectedProgramId }
)
// Create mutation
const utils = trpc.useUtils()
const createProject = trpc.project.create.useMutation({
@ -65,68 +77,46 @@ function NewProjectPageContent() {
toast.success('Project created successfully')
utils.project.list.invalidate()
utils.round.get.invalidate()
router.push(`/admin/projects?round=${selectedRoundId}`)
router.push('/admin/projects')
},
onError: (error) => {
toast.error(error.message)
},
})
// Get all rounds from programs
const rounds = programs?.flatMap((p) =>
(p.rounds || []).map((r) => ({
...r,
programId: p.id,
programName: `${p.year} Edition`,
}))
) || []
// Get rounds for selected program
const selectedProgram = programs?.find((p) => p.id === selectedProgramId)
const rounds = selectedProgram?.rounds || []
const selectedRound = rounds.find((r) => r.id === selectedRoundId)
const addCustomField = () => {
setCustomFields([...customFields, { key: '', value: '' }])
}
const updateCustomField = (index: number, key: string, value: string) => {
const newFields = [...customFields]
newFields[index] = { key, value }
setCustomFields(newFields)
}
const removeCustomField = (index: number) => {
setCustomFields(customFields.filter((_, i) => i !== index))
}
// Get dropdown options from wizard config
const categoryOptions = wizardConfig?.competitionCategories || []
const oceanIssueOptions = wizardConfig?.oceanIssues || []
const handleSubmit = () => {
if (!title.trim()) {
toast.error('Please enter a project title')
return
}
if (!selectedRoundId) {
toast.error('Please select a round')
if (!selectedProgramId) {
toast.error('Please select a program')
return
}
// Build metadata
const metadataJson: Record<string, unknown> = {}
if (contactEmail) metadataJson.contactEmail = contactEmail
if (contactName) metadataJson.contactName = contactName
if (country) metadataJson.country = country
// Add custom fields
customFields.forEach((field) => {
if (field.key.trim() && field.value.trim()) {
metadataJson[field.key.trim()] = field.value.trim()
}
})
createProject.mutate({
roundId: selectedRoundId,
programId: selectedProgramId,
roundId: selectedRoundId || undefined,
title: title.trim(),
teamName: teamName.trim() || undefined,
description: description.trim() || undefined,
tags: tags.length > 0 ? tags : undefined,
metadataJson: Object.keys(metadataJson).length > 0 ? metadataJson : undefined,
country: country || undefined,
competitionCategory: competitionCategory as 'STARTUP' | 'BUSINESS_CONCEPT' | undefined || undefined,
oceanIssue: oceanIssue as 'POLLUTION_REDUCTION' | 'CLIMATE_MITIGATION' | 'TECHNOLOGY_INNOVATION' | 'SUSTAINABLE_SHIPPING' | 'BLUE_CARBON' | 'HABITAT_RESTORATION' | 'COMMUNITY_CAPACITY' | 'SUSTAINABLE_FISHING' | 'CONSUMER_AWARENESS' | 'OCEAN_ACIDIFICATION' | 'OTHER' | undefined || undefined,
institution: institution.trim() || undefined,
contactPhone: contactPhone.trim() || undefined,
contactEmail: contactEmail.trim() || undefined,
contactName: contactName.trim() || undefined,
city: city.trim() || undefined,
})
}
@ -156,64 +146,67 @@ function NewProjectPageContent() {
</div>
</div>
{/* Round selection */}
{!selectedRoundId ? (
{/* Program & Round selection */}
<Card>
<CardHeader>
<CardTitle>Select Round</CardTitle>
<CardTitle>Program & Round</CardTitle>
<CardDescription>
Choose the round for this project submission
Select the program for this project. Round assignment is optional.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{rounds.length === 0 ? (
{!programs || programs.length === 0 ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<AlertCircle className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 font-medium">No Active Rounds</p>
<p className="mt-2 font-medium">No Active Programs</p>
<p className="text-sm text-muted-foreground">
Create a round first before adding projects
Create a program first before adding projects
</p>
<Button asChild className="mt-4">
<Link href="/admin/rounds/new">Create Round</Link>
</Button>
</div>
) : (
<>
<Select value={selectedRoundId} onValueChange={setSelectedRoundId}>
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label>Program *</Label>
<Select value={selectedProgramId} onValueChange={(v) => {
setSelectedProgramId(v)
setSelectedRoundId('') // Reset round on program change
}}>
<SelectTrigger>
<SelectValue placeholder="Select a round" />
<SelectValue placeholder="Select a program" />
</SelectTrigger>
<SelectContent>
{rounds.map((round) => (
<SelectItem key={round.id} value={round.id}>
{round.programName} - {round.name}
{programs.map((p) => (
<SelectItem key={p.id} value={p.id}>
{p.name} {p.year}
</SelectItem>
))}
</SelectContent>
</Select>
</>
</div>
<div className="space-y-2">
<Label>Round (optional)</Label>
<Select value={selectedRoundId || '__none__'} onValueChange={(v) => setSelectedRoundId(v === '__none__' ? '' : v)} disabled={!selectedProgramId}>
<SelectTrigger>
<SelectValue placeholder="No round assigned" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__">No round assigned</SelectItem>
{rounds.map((r: { id: string; name: string }) => (
<SelectItem key={r.id} value={r.id}>
{r.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
)}
</CardContent>
</Card>
) : (
<>
{/* Selected round info */}
<Card>
<CardContent className="flex items-center justify-between py-4">
<div>
<p className="font-medium">{selectedRound?.programName}</p>
<p className="text-sm text-muted-foreground">{selectedRound?.name}</p>
</div>
<Button
variant="outline"
size="sm"
onClick={() => setSelectedRoundId('')}
>
Change Round
</Button>
</CardContent>
</Card>
{selectedProgramId && (
<>
<div className="grid gap-6 lg:grid-cols-2">
{/* Basic Info */}
<Card>
@ -265,6 +258,52 @@ function NewProjectPageContent() {
maxTags={10}
/>
</div>
{categoryOptions.length > 0 && (
<div className="space-y-2">
<Label>Competition Category</Label>
<Select value={competitionCategory} onValueChange={setCompetitionCategory}>
<SelectTrigger>
<SelectValue placeholder="Select category..." />
</SelectTrigger>
<SelectContent>
{categoryOptions.map((opt: { value: string; label: string }) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
{oceanIssueOptions.length > 0 && (
<div className="space-y-2">
<Label>Ocean Issue</Label>
<Select value={oceanIssue} onValueChange={setOceanIssue}>
<SelectTrigger>
<SelectValue placeholder="Select ocean issue..." />
</SelectTrigger>
<SelectContent>
{oceanIssueOptions.map((opt: { value: string; label: string }) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
<div className="space-y-2">
<Label htmlFor="institution">Institution</Label>
<Input
id="institution"
value={institution}
onChange={(e) => setInstitution(e.target.value)}
placeholder="e.g., University of Monaco"
/>
</div>
</CardContent>
</Card>
@ -299,11 +338,28 @@ function NewProjectPageContent() {
</div>
<div className="space-y-2">
<Label htmlFor="country">Country</Label>
<Input
id="country"
<Label>Contact Phone</Label>
<PhoneInput
value={contactPhone}
onChange={setContactPhone}
defaultCountry="MC"
/>
</div>
<div className="space-y-2">
<Label>Country</Label>
<CountrySelect
value={country}
onChange={(e) => setCountry(e.target.value)}
onChange={setCountry}
/>
</div>
<div className="space-y-2">
<Label htmlFor="city">City</Label>
<Input
id="city"
value={city}
onChange={(e) => setCity(e.target.value)}
placeholder="e.g., Monaco"
/>
</div>
@ -311,65 +367,6 @@ function NewProjectPageContent() {
</Card>
</div>
{/* Custom Fields */}
<Card>
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span>Additional Information</span>
<Button
type="button"
variant="outline"
size="sm"
onClick={addCustomField}
>
<Plus className="mr-2 h-4 w-4" />
Add Field
</Button>
</CardTitle>
<CardDescription>
Add custom metadata fields for this project
</CardDescription>
</CardHeader>
<CardContent>
{customFields.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-4">
No additional fields. Click &quot;Add Field&quot; to add custom information.
</p>
) : (
<div className="space-y-3">
{customFields.map((field, index) => (
<div key={index} className="flex gap-2">
<Input
placeholder="Field name"
value={field.key}
onChange={(e) =>
updateCustomField(index, e.target.value, field.value)
}
className="flex-1"
/>
<Input
placeholder="Value"
value={field.value}
onChange={(e) =>
updateCustomField(index, field.key, e.target.value)
}
className="flex-1"
/>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => removeCustomField(index)}
>
<X className="h-4 w-4" />
</Button>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Actions */}
<div className="flex justify-end gap-4">
<Button variant="outline" asChild>
@ -377,7 +374,7 @@ function NewProjectPageContent() {
</Button>
<Button
onClick={handleSubmit}
disabled={createProject.isPending || !title.trim()}
disabled={createProject.isPending || !title.trim() || !selectedProgramId}
>
{createProject.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />

View File

@ -81,6 +81,7 @@ import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { truncate } from '@/lib/utils'
import { ProjectLogo } from '@/components/shared/project-logo'
import { StatusBadge } from '@/components/shared/status-badge'
import { Pagination } from '@/components/shared/pagination'
import {
ProjectFiltersBar,
@ -256,6 +257,11 @@ export default function ProjectsPage() {
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
const [projectToDelete, setProjectToDelete] = useState<{ id: string; title: string } | null>(null)
// Assign to round dialog state
const [assignDialogOpen, setAssignDialogOpen] = useState(false)
const [projectToAssign, setProjectToAssign] = useState<{ id: string; title: string } | null>(null)
const [assignRoundId, setAssignRoundId] = useState('')
const [aiTagDialogOpen, setAiTagDialogOpen] = useState(false)
const [taggingScope, setTaggingScope] = useState<'round' | 'program'>('round')
const [selectedRoundForTagging, setSelectedRoundForTagging] = useState<string>('')
@ -420,6 +426,19 @@ export default function ProjectsPage() {
? data.projects.some((p) => selectedIds.has(p.id)) && !allVisibleSelected
: false
const assignToRound = trpc.projectPool.assignToRound.useMutation({
onSuccess: () => {
toast.success('Project assigned to round')
utils.project.list.invalidate()
setAssignDialogOpen(false)
setProjectToAssign(null)
setAssignRoundId('')
},
onError: (error) => {
toast.error(error.message || 'Failed to assign project')
},
})
const deleteProject = trpc.project.delete.useMutation({
onSuccess: () => {
toast.success('Project deleted successfully')
@ -448,6 +467,12 @@ export default function ProjectsPage() {
</p>
</div>
<div className="flex gap-2">
<Button variant="outline" asChild>
<Link href="/admin/projects/pool">
<Layers className="mr-2 h-4 w-4" />
Project Pool
</Link>
</Button>
<Button variant="outline" onClick={() => setAiTagDialogOpen(true)}>
<Sparkles className="mr-2 h-4 w-4" />
AI Tags
@ -600,7 +625,13 @@ export default function ProjectsPage() {
<TableCell>
<div>
<div className="flex items-center gap-2">
<p>{project.round?.name ?? '-'}</p>
{project.round ? (
<p>{project.round.name}</p>
) : (
<Badge variant="outline" className="text-xs text-amber-600 border-amber-300 bg-amber-50">
Unassigned
</Badge>
)}
{project.status === 'REJECTED' && (
<Badge variant="destructive" className="text-xs">
Eliminated
@ -620,11 +651,7 @@ export default function ProjectsPage() {
</div>
</TableCell>
<TableCell>
<Badge
variant={statusColors[project.status ?? 'SUBMITTED'] || 'secondary'}
>
{(project.status ?? 'SUBMITTED').replace('_', ' ')}
</Badge>
<StatusBadge status={project.status ?? 'SUBMITTED'} />
</TableCell>
<TableCell className="relative z-10 text-right">
<DropdownMenu>
@ -647,6 +674,18 @@ export default function ProjectsPage() {
Edit
</Link>
</DropdownMenuItem>
{!project.round && (
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation()
setProjectToAssign({ id: project.id, title: project.title })
setAssignDialogOpen(true)
}}
>
<FolderOpen className="mr-2 h-4 w-4" />
Assign to Round
</DropdownMenuItem>
)}
<DropdownMenuSeparator />
<DropdownMenuItem
className="text-destructive focus:text-destructive"
@ -697,14 +736,10 @@ export default function ProjectsPage() {
<CardTitle className="text-base line-clamp-2">
{project.title}
</CardTitle>
<Badge
variant={
statusColors[project.status ?? 'SUBMITTED'] || 'secondary'
}
<StatusBadge
status={project.status ?? 'SUBMITTED'}
className="shrink-0"
>
{(project.status ?? 'SUBMITTED').replace('_', ' ')}
</Badge>
/>
</div>
<CardDescription>{project.teamName}</CardDescription>
</div>
@ -857,6 +892,59 @@ export default function ProjectsPage() {
</AlertDialogContent>
</AlertDialog>
{/* Assign to Round Dialog */}
<Dialog open={assignDialogOpen} onOpenChange={(open) => {
setAssignDialogOpen(open)
if (!open) { setProjectToAssign(null); setAssignRoundId('') }
}}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Assign to Round</DialogTitle>
<DialogDescription>
Assign &quot;{projectToAssign?.title}&quot; to a round.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>Select Round</Label>
<Select value={assignRoundId} onValueChange={setAssignRoundId}>
<SelectTrigger>
<SelectValue placeholder="Choose a round..." />
</SelectTrigger>
<SelectContent>
{programs?.flatMap((p) =>
(p.rounds || []).map((r: { id: string; name: string }) => (
<SelectItem key={r.id} value={r.id}>
{p.name} {p.year} - {r.name}
</SelectItem>
))
)}
</SelectContent>
</Select>
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setAssignDialogOpen(false)}>
Cancel
</Button>
<Button
onClick={() => {
if (projectToAssign && assignRoundId) {
assignToRound.mutate({
projectIds: [projectToAssign.id],
roundId: assignRoundId,
})
}
}}
disabled={!assignRoundId || assignToRound.isPending}
>
{assignToRound.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Assign
</Button>
</div>
</DialogContent>
</Dialog>
{/* AI Tagging Dialog */}
<Dialog open={aiTagDialogOpen} onOpenChange={handleCloseTaggingDialog}>
<DialogContent className="sm:max-w-lg">

View File

@ -32,7 +32,17 @@ import {
type Criterion,
} from '@/components/forms/evaluation-form-builder'
import { RoundTypeSettings } from '@/components/forms/round-type-settings'
import { ArrowLeft, Loader2, AlertCircle, AlertTriangle, Bell, GitCompare, MessageSquare, FileText, Calendar } from 'lucide-react'
import { ArrowLeft, Loader2, AlertCircle, AlertTriangle, Bell, GitCompare, MessageSquare, FileText, Calendar, LayoutTemplate } from 'lucide-react'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { toast } from 'sonner'
import { Switch } from '@/components/ui/switch'
import { Slider } from '@/components/ui/slider'
import { Label } from '@/components/ui/label'
@ -113,9 +123,23 @@ function EditRoundContent({ roundId }: { roundId: string }) {
roundId,
})
const [saveTemplateOpen, setSaveTemplateOpen] = useState(false)
const [templateName, setTemplateName] = useState('')
const utils = trpc.useUtils()
// Mutations
const saveAsTemplate = trpc.roundTemplate.create.useMutation({
onSuccess: () => {
toast.success('Round saved as template')
setSaveTemplateOpen(false)
setTemplateName('')
},
onError: (error) => {
toast.error(error.message)
},
})
const updateRound = trpc.round.update.useMutation({
onSuccess: () => {
// Invalidate cache to ensure fresh data
@ -825,6 +849,58 @@ function EditRoundContent({ roundId }: { roundId: string }) {
{/* Actions */}
<div className="flex justify-end gap-3">
<Dialog open={saveTemplateOpen} onOpenChange={setSaveTemplateOpen}>
<DialogTrigger asChild>
<Button type="button" variant="outline">
<LayoutTemplate className="mr-2 h-4 w-4" />
Save as Template
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Save as Template</DialogTitle>
<DialogDescription>
Save the current round configuration as a reusable template.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="templateName">Template Name</Label>
<Input
id="templateName"
value={templateName}
onChange={(e) => setTemplateName(e.target.value)}
placeholder="e.g., Standard Evaluation Round"
/>
</div>
</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setSaveTemplateOpen(false)}
>
Cancel
</Button>
<Button
disabled={!templateName.trim() || saveAsTemplate.isPending}
onClick={() => {
saveAsTemplate.mutate({
name: templateName.trim(),
roundType: roundType,
criteriaJson: criteria,
settingsJson: roundSettings,
programId: round?.programId,
})
}}
>
{saveAsTemplate.isPending && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
Save Template
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Button type="button" variant="outline" asChild>
<Link href={`/admin/rounds/${roundId}`}>Cancel</Link>
</Button>

View File

@ -1,6 +1,6 @@
'use client'
import { use, useState } from 'react'
import { use, useState, useCallback } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
@ -43,6 +43,7 @@ import {
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import { Pagination } from '@/components/shared/pagination'
import { CsvExportDialog } from '@/components/shared/csv-export-dialog'
import { toast } from 'sonner'
import {
ArrowLeft,
@ -114,36 +115,16 @@ export default function FilteringResultsPage({
{ roundId },
{ enabled: false }
)
const [showExportDialog, setShowExportDialog] = useState(false)
const handleExport = async () => {
const handleExport = () => {
setShowExportDialog(true)
}
const handleRequestExportData = useCallback(async () => {
const result = await exportResults.refetch()
if (result.data) {
const { data: rows, columns } = result.data
const csvContent = [
columns.join(','),
...rows.map((row) =>
columns
.map((col) => {
const value = row[col as keyof typeof row]
if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
return `"${value.replace(/"/g, '""')}"`
}
return value ?? ''
})
.join(',')
),
].join('\n')
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `filtering-results-${new Date().toISOString().split('T')[0]}.csv`
link.click()
URL.revokeObjectURL(url)
}
}
return result.data ?? undefined
}, [exportResults])
const toggleRow = (id: string) => {
const next = new Set(expandedRows)
@ -601,6 +582,16 @@ export default function FilteringResultsPage({
</DialogFooter>
</DialogContent>
</Dialog>
{/* CSV Export Dialog with Column Selection */}
<CsvExportDialog
open={showExportDialog}
onOpenChange={setShowExportDialog}
exportData={exportResults.data ?? undefined}
isLoading={exportResults.isFetching}
filename="filtering-results"
onRequestData={handleRequestExportData}
/>
</div>
)
}

View File

@ -49,8 +49,12 @@ export default function LoginPage() {
// Use window.location for external redirects or callback URLs
window.location.href = callbackUrl
}
} catch {
} catch (err: unknown) {
if (err instanceof Error && err.message.includes('429')) {
setError('Too many attempts. Please wait a few minutes before trying again.')
} else {
setError('An unexpected error occurred. Please try again.')
}
} finally {
setIsLoading(false)
}
@ -84,8 +88,12 @@ export default function LoginPage() {
} else {
setError('Failed to send magic link. Please try again.')
}
} catch {
} catch (err: unknown) {
if (err instanceof Error && err.message.includes('429')) {
setError('Too many attempts. Please wait a few minutes before trying again.')
} else {
setError('An unexpected error occurred. Please try again.')
}
} finally {
setIsLoading(false)
}
@ -96,8 +104,8 @@ export default function LoginPage() {
return (
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<CheckCircle2 className="h-6 w-6 text-green-600" />
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 animate-in zoom-in-50 duration-300">
<Mail className="h-8 w-8 text-green-600" />
</div>
<CardTitle className="text-xl">Check your email</CardTitle>
<CardDescription className="text-base">
@ -105,22 +113,27 @@ export default function LoginPage() {
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground text-center">
Click the link in the email to sign in. The link will expire in 15
minutes.
</p>
<div className="border-t pt-4">
<div className="rounded-lg border bg-muted/50 p-4 text-sm text-muted-foreground space-y-2">
<p>Click the link in the email to sign in. The link will expire in 15 minutes.</p>
<p>If you don&apos;t see it, check your spam folder.</p>
</div>
<div className="border-t pt-4 space-y-2">
<Button
variant="ghost"
variant="outline"
className="w-full"
onClick={() => {
setIsSent(false)
setEmail('')
setPassword('')
setError(null)
}}
>
Use a different email
Send to a different email
</Button>
<p className="text-xs text-center text-muted-foreground">
Having trouble?{' '}
<a href="mailto:support@monaco-opc.com" className="text-primary hover:underline">
Contact support
</a>
</p>
</div>
</CardContent>
</Card>

View File

@ -22,6 +22,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'
import { ExpertiseSelect } from '@/components/shared/expertise-select'
import { AvatarUpload } from '@/components/shared/avatar-upload'
@ -195,6 +196,30 @@ export default function OnboardingPage() {
</div>
))}
</div>
{/* Step labels */}
<div className="flex items-center gap-2 mt-1">
{steps.slice(0, -1).map((s, i) => {
const labels: Record<string, string> = {
name: 'Name',
photo: 'Photo',
country: 'Country',
bio: 'About',
phone: 'Phone',
tags: 'Expertise',
preferences: 'Settings',
}
return (
<div key={s} className="flex-1 text-center">
<span className={cn(
'text-[10px]',
i <= currentIndex ? 'text-primary font-medium' : 'text-muted-foreground'
)}>
{labels[s] || s}
</span>
</div>
)
})}
</div>
<p className="text-sm text-muted-foreground mt-2">
Step {currentIndex + 1} of {totalVisibleSteps}
</p>
@ -530,10 +555,12 @@ export default function OnboardingPage() {
{/* Step 7: Complete */}
{step === 'complete' && (
<CardContent className="flex flex-col items-center justify-center py-12">
<div className="rounded-full bg-green-100 p-4 mb-4">
<div className="rounded-full bg-green-100 p-4 mb-4 animate-in zoom-in-50 duration-500">
<CheckCircle className="h-12 w-12 text-green-600" />
</div>
<h2 className="text-xl font-semibold mb-2">Welcome, {name}!</h2>
<h2 className="text-xl font-semibold mb-2 animate-in fade-in slide-in-from-bottom-2 duration-500 delay-200">
Welcome, {name}!
</h2>
<p className="text-muted-foreground text-center mb-4">
Your profile is all set up. You&apos;ll be redirected to your dashboard
shortly.

View File

@ -30,7 +30,7 @@ import {
AlertCircle,
} from 'lucide-react'
import { Progress } from '@/components/ui/progress'
import { formatDate, truncate } from '@/lib/utils'
import { cn, formatDate, truncate } from '@/lib/utils'
function getCriteriaProgress(evaluation: {
criterionScoresJson: unknown
@ -47,6 +47,17 @@ function getCriteriaProgress(evaluation: {
return { completed, total }
}
function getDeadlineUrgency(deadline: Date | null): { label: string; className: string } | null {
if (!deadline) return null
const now = new Date()
const diff = deadline.getTime() - now.getTime()
const daysLeft = Math.ceil(diff / (1000 * 60 * 60 * 24))
if (daysLeft < 0) return { label: 'Overdue', className: 'text-muted-foreground' }
if (daysLeft <= 2) return { label: `${daysLeft}d left`, className: 'text-red-600 font-semibold' }
if (daysLeft <= 7) return { label: `${daysLeft}d left`, className: 'text-amber-600 font-medium' }
return { label: `${daysLeft}d left`, className: 'text-muted-foreground' }
}
async function AssignmentsContent({
roundId,
}: {
@ -134,8 +145,46 @@ async function AssignmentsContent({
const now = new Date()
const completedCount = assignments.filter(a => a.evaluation?.status === 'SUBMITTED').length
const inProgressCount = assignments.filter(a => a.evaluation?.status === 'DRAFT').length
const pendingCount = assignments.filter(a => !a.evaluation).length
const overallProgress = assignments.length > 0 ? Math.round((completedCount / assignments.length) * 100) : 0
return (
<div className="space-y-6">
{/* Progress Summary */}
<Card className="bg-muted/30">
<CardContent className="py-4">
<div className="flex flex-wrap items-center gap-6">
<div className="flex items-center gap-2">
<CheckCircle2 className="h-5 w-5 text-green-500" />
<div>
<p className="text-2xl font-bold">{completedCount}</p>
<p className="text-xs text-muted-foreground">Completed</p>
</div>
</div>
<div className="flex items-center gap-2">
<Clock className="h-5 w-5 text-amber-500" />
<div>
<p className="text-2xl font-bold">{inProgressCount}</p>
<p className="text-xs text-muted-foreground">In Progress</p>
</div>
</div>
<div className="flex items-center gap-2">
<FileText className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-2xl font-bold">{pendingCount}</p>
<p className="text-xs text-muted-foreground">Pending</p>
</div>
</div>
<div className="ml-auto">
<Progress value={overallProgress} className="h-2 w-32" />
<p className="text-xs text-muted-foreground mt-1">{overallProgress}% complete</p>
</div>
</div>
</CardContent>
</Card>
{/* Desktop table view */}
<Card className="hidden md:block">
<Table>
@ -185,6 +234,7 @@ async function AssignmentsContent({
</TableCell>
<TableCell>
{assignment.round.votingEndAt ? (
<div>
<span
className={
new Date(assignment.round.votingEndAt) < now
@ -194,6 +244,12 @@ async function AssignmentsContent({
>
{formatDate(assignment.round.votingEndAt)}
</span>
{(() => {
const urgency = getDeadlineUrgency(assignment.round.votingEndAt ? new Date(assignment.round.votingEndAt) : null)
if (!urgency || isCompleted) return null
return <p className={cn('text-xs mt-0.5', urgency.className)}>{urgency.label}</p>
})()}
</div>
) : (
<span className="text-muted-foreground">No deadline</span>
)}
@ -309,7 +365,14 @@ async function AssignmentsContent({
{assignment.round.votingEndAt && (
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Deadline</span>
<div className="text-right">
<span>{formatDate(assignment.round.votingEndAt)}</span>
{(() => {
const urgency = getDeadlineUrgency(assignment.round.votingEndAt ? new Date(assignment.round.votingEndAt) : null)
if (!urgency || isCompleted) return null
return <p className={cn('text-xs mt-0.5', urgency.className)}>{urgency.label}</p>
})()}
</div>
</div>
)}
{isDraft && (() => {

View File

@ -31,6 +31,7 @@ import {
SelectValue,
} from '@/components/ui/select'
import {
AlertCircle,
ArrowLeft,
GitCompare,
MapPin,
@ -354,6 +355,44 @@ export default function CompareProjectsPage() {
scales={data.scales}
/>
)}
{/* Divergence Summary */}
{data.criteria && (() => {
const scCriteria = data.criteria.filter((c) => c.type !== 'section_header')
const getMaxForCriterion = (criterion: Criterion) => {
if (criterion.scale && data.scales && data.scales[criterion.scale]) return data.scales[criterion.scale].max
return 10
}
const getScoreForItem = (item: ComparisonItem, criterionId: string): number | null => {
const scores = (item.evaluation?.criterionScoresJson || item.evaluation?.scores) as Record<string, unknown> | undefined
if (!scores) return null
const val = scores[criterionId]
if (val == null) return null
const num = Number(val)
return isNaN(num) ? null : num
}
const divergentCount = scCriteria.filter(criterion => {
const scores = data.items.map(item => getScoreForItem(item, criterion.id)).filter((s): s is number => s !== null)
if (scores.length < 2) return false
const max = Math.max(...scores)
const min = Math.min(...scores)
const range = getMaxForCriterion(criterion)
return range > 0 && (max - min) / range >= 0.4
}).length
if (divergentCount === 0) return null
return (
<div className="rounded-lg border border-amber-200 bg-amber-50 dark:bg-amber-950/20 dark:border-amber-800 p-4">
<div className="flex items-center gap-2">
<AlertCircle className="h-4 w-4 text-amber-600" />
<p className="text-sm font-medium text-amber-800 dark:text-amber-200">
{divergentCount} criterion{divergentCount > 1 ? 'a' : ''} with significant score divergence ({'>'}40% range difference)
</p>
</div>
</div>
)
})()}
</div>
)}
</div>
@ -550,17 +589,22 @@ function CriterionComparisonTable({
const itemScores = items.map((item) => getScore(item, criterion.id))
const validScores = itemScores.filter((s): s is number => s !== null)
const highestScore = validScores.length > 0 ? Math.max(...validScores) : null
const minScore = validScores.length > 0 ? Math.min(...validScores) : null
const divergence = highestScore !== null && minScore !== null ? highestScore - minScore : 0
const maxPossibleDivergence = max
const isDivergent = validScores.length >= 2 && maxPossibleDivergence > 0 && (divergence / maxPossibleDivergence) >= 0.4
return (
<TableRow key={criterion.id}>
<TableRow key={criterion.id} className={cn(isDivergent && 'bg-amber-50 dark:bg-amber-950/20')}>
<TableCell className="font-medium">
<div>
<div className="flex items-center flex-wrap gap-1">
<span className="text-sm">{criterion.label}</span>
{criterion.weight && criterion.weight > 1 && (
<span className="text-xs text-muted-foreground ml-1">
(x{criterion.weight})
</span>
)}
{isDivergent && <Badge variant="outline" className="text-[10px] ml-1.5 text-amber-600 border-amber-300">Divergent</Badge>}
</div>
</TableCell>
{items.map((item, idx) => {

View File

@ -244,7 +244,7 @@ async function JuryDashboardContent() {
{/* Stats */}
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
{stats.map((stat) => (
<Card key={stat.label}>
<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)} />
@ -432,7 +432,7 @@ async function JuryDashboardContent() {
<div
key={round.id}
className={cn(
'rounded-lg border p-4 space-y-3 transition-colors',
'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'
)}
>

View File

@ -1,5 +1,6 @@
'use client'
import { useState, useMemo } from 'react'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
@ -15,6 +16,14 @@ import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Progress } from '@/components/ui/progress'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import {
Users,
Briefcase,
@ -27,6 +36,7 @@ import {
CheckCircle2,
Circle,
Clock,
Search,
} from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'
@ -72,15 +82,27 @@ function DashboardSkeleton() {
export default function MentorDashboard() {
const { data: assignments, isLoading } = trpc.mentor.getMyProjects.useQuery()
if (isLoading) {
return <DashboardSkeleton />
}
const [search, setSearch] = useState('')
const [statusFilter, setStatusFilter] = useState('all')
const projects = assignments || []
const completedCount = projects.filter((a) => a.completionStatus === 'completed').length
const inProgressCount = projects.filter((a) => a.completionStatus === 'in_progress').length
const filteredProjects = useMemo(() => {
return projects.filter(a => {
const matchesSearch = !search ||
a.project.title.toLowerCase().includes(search.toLowerCase()) ||
a.project.teamName?.toLowerCase().includes(search.toLowerCase())
const matchesStatus = statusFilter === 'all' || a.completionStatus === statusFilter
return matchesSearch && matchesStatus
})
}, [projects, search, statusFilter])
if (isLoading) {
return <DashboardSkeleton />
}
return (
<div className="space-y-6">
{/* Header */}
@ -154,10 +176,46 @@ export default function MentorDashboard() {
</Card>
</div>
{/* Quick Actions */}
<div className="flex flex-wrap gap-2">
<Button variant="outline" size="sm" asChild>
<Link href={'/mentor/messages' as Route}>
<Mail className="mr-2 h-4 w-4" />
Messages
</Link>
</Button>
</div>
{/* Projects List */}
<div>
<h2 className="text-lg font-semibold mb-4">Your Mentees</h2>
{/* Search and Filter */}
{projects.length > 0 && (
<div className="flex flex-col gap-3 sm:flex-row sm:items-center mb-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="Search projects..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
/>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-[160px]">
<SelectValue placeholder="All statuses" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All statuses</SelectItem>
<SelectItem value="in_progress">In Progress</SelectItem>
<SelectItem value="completed">Completed</SelectItem>
<SelectItem value="paused">Paused</SelectItem>
</SelectContent>
</Select>
</div>
)}
{projects.length === 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
@ -171,9 +229,26 @@ export default function MentorDashboard() {
</p>
</CardContent>
</Card>
) : filteredProjects.length === 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
<Search className="h-8 w-8 text-muted-foreground/50" />
<p className="mt-2 text-sm text-muted-foreground">
No projects match your search criteria
</p>
<Button
variant="ghost"
size="sm"
className="mt-2"
onClick={() => { setSearch(''); setStatusFilter('all') }}
>
Clear filters
</Button>
</CardContent>
</Card>
) : (
<div className="grid gap-4">
{projects.map((assignment) => {
{filteredProjects.map((assignment) => {
const project = assignment.project
const teamLead = project.teamMembers?.find(
(m) => m.role === 'LEAD'

View File

@ -21,8 +21,9 @@ import {
Users,
CheckCircle2,
Eye,
BarChart3,
} from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'
import { cn, formatDateOnly } from '@/lib/utils'
async function ObserverDashboardContent() {
const [
@ -32,6 +33,7 @@ async function ObserverDashboardContent() {
jurorCount,
evaluationStats,
recentRounds,
evaluationScores,
] = await Promise.all([
prisma.program.count(),
prisma.round.count({ where: { status: 'ACTIVE' } }),
@ -52,7 +54,16 @@ async function ObserverDashboardContent() {
assignments: true,
},
},
assignments: {
select: {
evaluation: { select: { status: true } },
},
},
},
}),
prisma.evaluation.findMany({
where: { status: 'SUBMITTED', globalScore: { not: null } },
select: { globalScore: true },
}),
])
@ -64,6 +75,21 @@ async function ObserverDashboardContent() {
const completionRate =
totalEvaluations > 0 ? (submittedCount / totalEvaluations) * 100 : 0
// Score distribution computation
const scores = evaluationScores.map(e => e.globalScore!).filter(s => s != null)
const buckets = [
{ label: '9-10', min: 9, max: 10, color: 'bg-green-500' },
{ label: '7-8', min: 7, max: 8.99, color: 'bg-emerald-400' },
{ label: '5-6', min: 5, max: 6.99, color: 'bg-amber-400' },
{ label: '3-4', min: 3, max: 4.99, color: 'bg-orange-400' },
{ label: '1-2', min: 1, max: 2.99, color: 'bg-red-400' },
]
const maxCount = Math.max(...buckets.map(b => scores.filter(s => s >= b.min && s <= b.max).length), 1)
const scoreDistribution = buckets.map(b => {
const count = scores.filter(s => s >= b.min && s <= b.max).length
return { ...b, count, percentage: (count / maxCount) * 100 }
})
return (
<>
{/* Observer Notice */}
@ -88,7 +114,7 @@ async function ObserverDashboardContent() {
{/* Stats Grid */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Programs</CardTitle>
<FolderKanban className="h-4 w-4 text-muted-foreground" />
@ -101,7 +127,7 @@ async function ObserverDashboardContent() {
</CardContent>
</Card>
<Card>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Projects</CardTitle>
<ClipboardList className="h-4 w-4 text-muted-foreground" />
@ -112,7 +138,7 @@ async function ObserverDashboardContent() {
</CardContent>
</Card>
<Card>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Jury Members</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
@ -123,7 +149,7 @@ async function ObserverDashboardContent() {
</CardContent>
</Card>
<Card>
<Card className="transition-all hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Evaluations</CardTitle>
<CheckCircle2 className="h-4 w-4 text-muted-foreground" />
@ -159,7 +185,7 @@ async function ObserverDashboardContent() {
{recentRounds.map((round) => (
<div
key={round.id}
className="flex items-center justify-between rounded-lg border p-4"
className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm"
>
<div className="space-y-1">
<div className="flex items-center gap-2">
@ -192,6 +218,74 @@ async function ObserverDashboardContent() {
)}
</CardContent>
</Card>
{/* Score Distribution */}
<Card>
<CardHeader>
<CardTitle>Score Distribution</CardTitle>
<CardDescription>Distribution of global scores across all evaluations</CardDescription>
</CardHeader>
<CardContent>
{scoreDistribution.length === 0 ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<BarChart3 className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 text-sm text-muted-foreground">No completed evaluations yet</p>
</div>
) : (
<div className="space-y-2">
{scoreDistribution.map((bucket) => (
<div key={bucket.label} className="flex items-center gap-3">
<span className="text-sm w-16 text-right tabular-nums">{bucket.label}</span>
<div className="flex-1 h-6 bg-muted rounded-full overflow-hidden">
<div
className={cn('h-full rounded-full transition-all', bucket.color)}
style={{ width: `${bucket.percentage}%` }}
/>
</div>
<span className="text-sm tabular-nums w-8">{bucket.count}</span>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Jury Completion by Round */}
<Card>
<CardHeader>
<CardTitle>Jury Completion by Round</CardTitle>
<CardDescription>Evaluation completion rate per round</CardDescription>
</CardHeader>
<CardContent>
{recentRounds.length === 0 ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<FolderKanban className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 text-sm text-muted-foreground">No rounds available</p>
</div>
) : (
<div className="space-y-4">
{recentRounds.map((round) => {
const submittedInRound = round.assignments.filter(a => a.evaluation?.status === 'SUBMITTED').length
const totalAssignments = round.assignments.length
const percent = totalAssignments > 0 ? Math.round((submittedInRound / totalAssignments) * 100) : 0
return (
<div key={round.id} className="space-y-1.5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm font-medium">{round.name}</span>
<Badge variant={round.status === 'ACTIVE' ? 'default' : 'secondary'}>{round.status}</Badge>
</div>
<span className="text-sm font-semibold tabular-nums">{percent}%</span>
</div>
<Progress value={percent} className="h-2" />
<p className="text-xs text-muted-foreground">{submittedInRound} of {totalAssignments} evaluations submitted</p>
</div>
)
})}
</div>
)}
</CardContent>
</Card>
</>
)
}

View File

@ -28,7 +28,7 @@ import { UserAvatar } from '@/components/shared/user-avatar'
import { UserActions, UserMobileActions } from '@/components/admin/user-actions'
import { Pagination } from '@/components/shared/pagination'
import { Plus, Users, Search } from 'lucide-react'
import { formatDate } from '@/lib/utils'
import { formatRelativeTime } from '@/lib/utils'
type RoleValue = 'SUPER_ADMIN' | 'PROGRAM_ADMIN' | 'JURY_MEMBER' | 'MENTOR' | 'OBSERVER'
type TabKey = 'all' | 'jury' | 'mentors' | 'observers' | 'admins'
@ -221,7 +221,9 @@ export function MembersContent() {
</TableCell>
<TableCell>
{user.lastLoginAt ? (
formatDate(user.lastLoginAt)
<span title={new Date(user.lastLoginAt).toLocaleString()}>
{formatRelativeTime(user.lastLoginAt)}
</span>
) : (
<span className="text-muted-foreground">Never</span>
)}
@ -280,6 +282,16 @@ export function MembersContent() {
: `${(user as unknown as { _count: { mentorAssignments: number; assignments: number } })._count.assignments} assigned`}
</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Last Login</span>
<span>
{user.lastLoginAt ? (
formatRelativeTime(user.lastLoginAt)
) : (
<span className="text-muted-foreground">Never</span>
)}
</span>
</div>
{user.expertiseTags && user.expertiseTags.length > 0 && (
<div className="flex flex-wrap gap-1">
{user.expertiseTags.map((tag) => (

View File

@ -644,7 +644,35 @@ export function EvaluationForm({
{/* Bottom submit button for mobile */}
{!isReadOnly && (
<div className="flex justify-end pb-safe">
<div className="flex flex-col gap-3 pb-safe">
{/* Autosave Status */}
<div className="flex items-center justify-end gap-2 text-sm">
{autosaveStatus === 'saved' && (
<span className="flex items-center gap-1.5 text-green-600">
<CheckCircle2 className="h-3.5 w-3.5" />
All changes saved
</span>
)}
{autosaveStatus === 'saving' && (
<span className="flex items-center gap-1.5 text-muted-foreground">
<Loader2 className="h-3.5 w-3.5 animate-spin" />
Saving...
</span>
)}
{autosaveStatus === 'error' && (
<span className="flex items-center gap-1.5 text-amber-600">
<AlertCircle className="h-3.5 w-3.5" />
Unsaved changes
</span>
)}
{autosaveStatus === 'idle' && isDirty && (
<span className="flex items-center gap-1.5 text-amber-600">
<AlertCircle className="h-3.5 w-3.5" />
Unsaved changes
</span>
)}
</div>
<div className="flex justify-end">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
@ -684,6 +712,7 @@ export function EvaluationForm({
</AlertDialogContent>
</AlertDialog>
</div>
</div>
)}
</form>
)

View File

@ -32,7 +32,6 @@ import {
History,
Trophy,
User,
LayoutTemplate,
MessageSquare,
Wand2,
} from 'lucide-react'
@ -51,80 +50,85 @@ interface AdminSidebarProps {
}
}
type NavItem = {
name: string
href: string
icon: typeof LayoutDashboard
activeMatch?: string // pathname must include this to be active
activeExclude?: string // pathname must NOT include this to be active
}
// Main navigation - scoped to selected edition
const navigation = [
const navigation: NavItem[] = [
{
name: 'Dashboard',
href: '/admin' as const,
href: '/admin',
icon: LayoutDashboard,
},
{
name: 'Rounds',
href: '/admin/rounds' as const,
href: '/admin/rounds',
icon: CircleDot,
},
{
name: 'Templates',
href: '/admin/round-templates' as const,
icon: LayoutTemplate,
},
{
name: 'Awards',
href: '/admin/awards' as const,
href: '/admin/awards',
icon: Trophy,
},
{
name: 'Projects',
href: '/admin/projects' as const,
href: '/admin/projects',
icon: ClipboardList,
},
{
name: 'Members',
href: '/admin/members' as const,
href: '/admin/members',
icon: Users,
},
{
name: 'Reports',
href: '/admin/reports' as const,
href: '/admin/reports',
icon: FileSpreadsheet,
},
{
name: 'Learning Hub',
href: '/admin/learning' as const,
href: '/admin/learning',
icon: BookOpen,
},
{
name: 'Messages',
href: '/admin/messages' as const,
href: '/admin/messages',
icon: MessageSquare,
},
{
name: 'Partners',
href: '/admin/partners' as const,
href: '/admin/partners',
icon: Handshake,
},
]
// Admin-only navigation
const adminNavigation = [
const adminNavigation: NavItem[] = [
{
name: 'Manage Editions',
href: '/admin/programs' as const,
href: '/admin/programs',
icon: FolderKanban,
activeExclude: 'apply-settings',
},
{
name: 'Apply Settings',
href: '/admin/programs' as const,
name: 'Apply Page',
href: '/admin/programs',
icon: Wand2,
activeMatch: 'apply-settings',
},
{
name: 'Audit Log',
href: '/admin/audit' as const,
href: '/admin/audit',
icon: History,
},
{
name: 'Settings',
href: '/admin/settings' as const,
href: '/admin/settings',
icon: Settings,
},
]
@ -232,11 +236,16 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
Administration
</p>
{adminNavigation.map((item) => {
const isActive = pathname.startsWith(item.href)
let isActive = pathname.startsWith(item.href)
if (item.activeMatch) {
isActive = pathname.includes(item.activeMatch)
} else if (item.activeExclude && pathname.includes(item.activeExclude)) {
isActive = false
}
return (
<Link
key={item.name}
href={item.href}
href={item.href as Route}
onClick={() => setIsMobileMenuOpen(false)}
className={cn(
'group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150',

View File

@ -0,0 +1,28 @@
'use client'
import { motion } from 'motion/react'
import { type ReactNode } from 'react'
export function AnimatedCard({ children, index = 0 }: { children: ReactNode; index?: number }) {
return (
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: index * 0.05, ease: 'easeOut' }}
>
{children}
</motion.div>
)
}
export function AnimatedList({ children }: { children: ReactNode }) {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.div>
)
}

View File

@ -0,0 +1,212 @@
'use client'
import { useState, useEffect, useCallback } from 'react'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { Download, Loader2 } from 'lucide-react'
/**
* Converts a camelCase or snake_case column name to Title Case.
* e.g. "projectTitle" -> "Project Title", "ai_meetsCriteria" -> "Ai Meets Criteria"
*/
function formatColumnName(col: string): string {
// Replace underscores with spaces
let result = col.replace(/_/g, ' ')
// Insert space before uppercase letters (camelCase -> spaced)
result = result.replace(/([a-z])([A-Z])/g, '$1 $2')
// Capitalize first letter of each word
return result
.split(' ')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ')
}
type ExportData = {
data: Record<string, unknown>[]
columns: string[]
}
type CsvExportDialogProps = {
open: boolean
onOpenChange: (open: boolean) => void
exportData: ExportData | undefined
isLoading: boolean
filename: string
onRequestData: () => Promise<ExportData | undefined>
}
export function CsvExportDialog({
open,
onOpenChange,
exportData,
isLoading,
filename,
onRequestData,
}: CsvExportDialogProps) {
const [selectedColumns, setSelectedColumns] = useState<Set<string>>(new Set())
const [dataLoaded, setDataLoaded] = useState(false)
// When dialog opens, fetch data if not already loaded
useEffect(() => {
if (open && !dataLoaded) {
onRequestData().then((result) => {
if (result?.columns) {
setSelectedColumns(new Set(result.columns))
}
setDataLoaded(true)
})
}
}, [open, dataLoaded, onRequestData])
// Sync selected columns when export data changes
useEffect(() => {
if (exportData?.columns) {
setSelectedColumns(new Set(exportData.columns))
}
}, [exportData])
// Reset state when dialog closes
useEffect(() => {
if (!open) {
setDataLoaded(false)
}
}, [open])
const toggleColumn = (col: string, checked: boolean) => {
const next = new Set(selectedColumns)
if (checked) {
next.add(col)
} else {
next.delete(col)
}
setSelectedColumns(next)
}
const toggleAll = () => {
if (!exportData) return
if (selectedColumns.size === exportData.columns.length) {
setSelectedColumns(new Set())
} else {
setSelectedColumns(new Set(exportData.columns))
}
}
const handleDownload = () => {
if (!exportData) return
const columnsArray = exportData.columns.filter((col) => selectedColumns.has(col))
// Build CSV header with formatted names
const csvHeader = columnsArray.map((col) => {
const formatted = formatColumnName(col)
// Escape quotes in header
if (formatted.includes(',') || formatted.includes('"')) {
return `"${formatted.replace(/"/g, '""')}"`
}
return formatted
})
const csvContent = [
csvHeader.join(','),
...exportData.data.map((row) =>
columnsArray
.map((col) => {
const value = row[col]
if (value === null || value === undefined) return ''
const str = String(value)
if (str.includes(',') || str.includes('"') || str.includes('\n')) {
return `"${str.replace(/"/g, '""')}"`
}
return str
})
.join(',')
),
].join('\n')
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `${filename}-${new Date().toISOString().split('T')[0]}.csv`
link.click()
URL.revokeObjectURL(url)
onOpenChange(false)
}
const allSelected = exportData ? selectedColumns.size === exportData.columns.length : false
const noneSelected = selectedColumns.size === 0
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Export CSV</DialogTitle>
<DialogDescription>
Select which columns to include in the export
</DialogDescription>
</DialogHeader>
{isLoading ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
<span className="ml-2 text-sm text-muted-foreground">Loading data...</span>
</div>
) : exportData ? (
<div className="space-y-3">
<div className="flex items-center justify-between">
<Label className="text-sm font-medium">
{selectedColumns.size} of {exportData.columns.length} columns selected
</Label>
<Button variant="ghost" size="sm" onClick={toggleAll}>
{allSelected ? 'Deselect all' : 'Select all'}
</Button>
</div>
<div className="space-y-1.5 max-h-60 overflow-y-auto rounded-lg border p-3">
{exportData.columns.map((col) => (
<div key={col} className="flex items-center gap-2">
<Checkbox
id={`col-${col}`}
checked={selectedColumns.has(col)}
onCheckedChange={(checked) => toggleColumn(col, !!checked)}
/>
<Label htmlFor={`col-${col}`} className="text-sm cursor-pointer font-normal">
{formatColumnName(col)}
</Label>
</div>
))}
</div>
<p className="text-xs text-muted-foreground">
{exportData.data.length} row{exportData.data.length !== 1 ? 's' : ''} will be exported
</p>
</div>
) : (
<p className="text-sm text-muted-foreground py-4 text-center">
No data available for export.
</p>
)}
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button
onClick={handleDownload}
disabled={isLoading || !exportData || noneSelected}
>
<Download className="mr-2 h-4 w-4" />
Download CSV
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}

View File

@ -30,6 +30,21 @@ import {
import { cn } from '@/lib/utils'
import { toast } from 'sonner'
const OFFICE_MIME_TYPES = [
'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
'application/vnd.ms-powerpoint', // .ppt
'application/msword', // .doc
]
const OFFICE_EXTENSIONS = ['.pptx', '.ppt', '.docx', '.doc']
function isOfficeFile(mimeType: string, fileName: string): boolean {
if (OFFICE_MIME_TYPES.includes(mimeType)) return true
const ext = fileName.toLowerCase().slice(fileName.lastIndexOf('.'))
return OFFICE_EXTENSIONS.includes(ext)
}
interface ProjectFile {
id: string
fileType: 'EXEC_SUMMARY' | 'PRESENTATION' | 'VIDEO' | 'OTHER' | 'BUSINESS_PLAN' | 'VIDEO_PITCH' | 'SUPPORTING_DOC'
@ -210,7 +225,8 @@ function FileItem({ file }: { file: ProjectFile }) {
const canPreview =
file.mimeType.startsWith('video/') ||
file.mimeType === 'application/pdf' ||
file.mimeType.startsWith('image/')
file.mimeType.startsWith('image/') ||
isOfficeFile(file.mimeType, file.fileName)
return (
<div className="space-y-2">
@ -264,6 +280,7 @@ function FileItem({ file }: { file: ProjectFile }) {
)}
</Button>
)}
<FileOpenButton file={file} />
<FileDownloadButton file={file} />
</div>
</div>
@ -462,6 +479,45 @@ function BulkDownloadButton({ projectId, fileIds }: { projectId: string; fileIds
)
}
function FileOpenButton({ file }: { file: ProjectFile }) {
const [loading, setLoading] = useState(false)
const { refetch } = trpc.file.getDownloadUrl.useQuery(
{ bucket: file.bucket, objectKey: file.objectKey },
{ enabled: false }
)
const handleOpen = async () => {
setLoading(true)
try {
const result = await refetch()
if (result.data?.url) {
window.open(result.data.url, '_blank')
}
} catch (error) {
console.error('Failed to get URL:', error)
} finally {
setLoading(false)
}
}
return (
<Button
variant="outline"
size="sm"
onClick={handleOpen}
disabled={loading}
aria-label="Open file in new tab"
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ExternalLink className="h-4 w-4" />
)}
</Button>
)
}
function FileDownloadButton({ file }: { file: ProjectFile }) {
const [downloading, setDownloading] = useState(false)
@ -475,8 +531,14 @@ function FileDownloadButton({ file }: { file: ProjectFile }) {
try {
const result = await refetch()
if (result.data?.url) {
// Open in new tab for download
window.open(result.data.url, '_blank')
// Force browser download via <a download>
const link = document.createElement('a')
link.href = result.data.url
link.download = file.fileName
link.rel = 'noopener noreferrer'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
} catch (error) {
console.error('Failed to get download URL:', error)
@ -562,6 +624,31 @@ function FilePreview({ file, url }: { file: ProjectFile; url: string }) {
)
}
// Office documents (PPTX, DOCX, PPT, DOC)
if (isOfficeFile(file.mimeType, file.fileName)) {
const viewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
return (
<div className="relative">
<iframe
src={viewerUrl}
className="w-full h-[600px]"
title={file.fileName}
/>
<Button
variant="secondary"
size="sm"
className="absolute top-2 right-2"
asChild
>
<a href={url} target="_blank" rel="noopener noreferrer">
<ExternalLink className="mr-2 h-4 w-4" />
Open in new tab
</a>
</Button>
</div>
)
}
return (
<div className="flex items-center justify-center py-8 text-muted-foreground">
Preview not available for this file type

View File

@ -1,6 +1,8 @@
'use client'
import { useState, useRef, useCallback } from 'react'
import Cropper from 'react-easy-crop'
import type { Area } from 'react-easy-crop'
import {
Dialog,
DialogContent,
@ -13,8 +15,9 @@ import {
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Slider } from '@/components/ui/slider'
import { ProjectLogo } from './project-logo'
import { Upload, Loader2, Trash2, ImagePlus } from 'lucide-react'
import { Upload, Loader2, Trash2, ImagePlus, ZoomIn } from 'lucide-react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
@ -32,6 +35,48 @@ type LogoUploadProps = {
const MAX_SIZE_MB = 5
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
/**
* Crop an image client-side using canvas and return a Blob.
*/
async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<Blob> {
const image = new Image()
image.crossOrigin = 'anonymous'
await new Promise<void>((resolve, reject) => {
image.onload = () => resolve()
image.onerror = reject
image.src = imageSrc
})
const canvas = document.createElement('canvas')
canvas.width = pixelCrop.width
canvas.height = pixelCrop.height
const ctx = canvas.getContext('2d')!
ctx.drawImage(
image,
pixelCrop.x,
pixelCrop.y,
pixelCrop.width,
pixelCrop.height,
0,
0,
pixelCrop.width,
pixelCrop.height
)
return new Promise<Blob>((resolve, reject) => {
canvas.toBlob(
(blob) => {
if (blob) resolve(blob)
else reject(new Error('Canvas toBlob failed'))
},
'image/png',
0.9
)
})
}
export function LogoUpload({
project,
currentLogoUrl,
@ -39,8 +84,10 @@ export function LogoUpload({
children,
}: LogoUploadProps) {
const [open, setOpen] = useState(false)
const [preview, setPreview] = useState<string | null>(null)
const [selectedFile, setSelectedFile] = useState<File | null>(null)
const [imageSrc, setImageSrc] = useState<string | null>(null)
const [crop, setCrop] = useState({ x: 0, y: 0 })
const [zoom, setZoom] = useState(1)
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
const [isUploading, setIsUploading] = useState(false)
const [isDeleting, setIsDeleting] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null)
@ -50,6 +97,10 @@ export function LogoUpload({
const confirmUpload = trpc.logo.confirmUpload.useMutation()
const deleteLogo = trpc.logo.delete.useMutation()
const onCropComplete = useCallback((_croppedArea: Area, croppedPixels: Area) => {
setCroppedAreaPixels(croppedPixels)
}, [])
const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
if (!file) return
@ -66,34 +117,36 @@ export function LogoUpload({
return
}
setSelectedFile(file)
// Create preview
const reader = new FileReader()
reader.onload = (e) => {
setPreview(e.target?.result as string)
reader.onload = (ev) => {
setImageSrc(ev.target?.result as string)
setCrop({ x: 0, y: 0 })
setZoom(1)
}
reader.readAsDataURL(file)
}, [])
const handleUpload = async () => {
if (!selectedFile) return
if (!imageSrc || !croppedAreaPixels) return
setIsUploading(true)
try {
// Get pre-signed upload URL (includes provider type for tracking)
// Crop the image client-side
const croppedBlob = await getCroppedImg(imageSrc, croppedAreaPixels)
// Get pre-signed upload URL
const { uploadUrl, key, providerType } = await getUploadUrl.mutateAsync({
projectId: project.id,
fileName: selectedFile.name,
contentType: selectedFile.type,
fileName: 'logo.png',
contentType: 'image/png',
})
// Upload file directly to storage
// Upload cropped blob directly to storage
const uploadResponse = await fetch(uploadUrl, {
method: 'PUT',
body: selectedFile,
body: croppedBlob,
headers: {
'Content-Type': selectedFile.type,
'Content-Type': 'image/png',
},
})
@ -109,8 +162,7 @@ export function LogoUpload({
toast.success('Logo updated successfully')
setOpen(false)
setPreview(null)
setSelectedFile(null)
resetState()
onUploadComplete?.()
} catch (error) {
console.error('Upload error:', error)
@ -136,9 +188,16 @@ export function LogoUpload({
}
}
const resetState = () => {
setImageSrc(null)
setCrop({ x: 0, y: 0 })
setZoom(1)
setCroppedAreaPixels(null)
if (fileInputRef.current) fileInputRef.current.value = ''
}
const handleCancel = () => {
setPreview(null)
setSelectedFile(null)
resetState()
setOpen(false)
}
@ -156,17 +215,63 @@ export function LogoUpload({
<DialogHeader>
<DialogTitle>Update Project Logo</DialogTitle>
<DialogDescription>
Upload a logo for &quot;{project.title}&quot;. Allowed formats: JPEG, PNG, GIF, WebP.
Max size: {MAX_SIZE_MB}MB.
{imageSrc
? 'Drag to reposition and use the slider to zoom. The logo will be cropped to a square.'
: `Upload a logo for "${project.title}". Allowed formats: JPEG, PNG, GIF, WebP. Max size: ${MAX_SIZE_MB}MB.`}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
{/* Preview */}
{imageSrc ? (
<>
{/* Cropper */}
<div className="relative w-full h-64 bg-muted rounded-lg overflow-hidden">
<Cropper
image={imageSrc}
crop={crop}
zoom={zoom}
aspect={1}
cropShape="rect"
showGrid
onCropChange={setCrop}
onCropComplete={onCropComplete}
onZoomChange={setZoom}
/>
</div>
{/* Zoom slider */}
<div className="flex items-center gap-3 px-1">
<ZoomIn className="h-4 w-4 text-muted-foreground shrink-0" />
<Slider
value={[zoom]}
min={1}
max={3}
step={0.1}
onValueChange={([val]) => setZoom(val)}
className="flex-1"
/>
</div>
{/* Change image button */}
<Button
variant="ghost"
size="sm"
onClick={() => {
resetState()
fileInputRef.current?.click()
}}
className="w-full"
>
Choose a different image
</Button>
</>
) : (
<>
{/* Current logo preview */}
<div className="flex justify-center">
<ProjectLogo
project={project}
logoUrl={preview || currentLogoUrl}
logoUrl={currentLogoUrl}
size="lg"
/>
</div>
@ -183,10 +288,12 @@ export function LogoUpload({
className="cursor-pointer"
/>
</div>
</>
)}
</div>
<DialogFooter className="flex-col gap-2 sm:flex-row">
{currentLogoUrl && !preview && (
{currentLogoUrl && !imageSrc && (
<Button
variant="destructive"
onClick={handleDelete}
@ -206,9 +313,10 @@ export function LogoUpload({
<Button variant="outline" onClick={handleCancel} className="flex-1">
Cancel
</Button>
{imageSrc && (
<Button
onClick={handleUpload}
disabled={!selectedFile || isUploading}
disabled={!croppedAreaPixels || isUploading}
className="flex-1"
>
{isUploading ? (
@ -218,6 +326,7 @@ export function LogoUpload({
)}
Upload
</Button>
)}
</div>
</DialogFooter>
</DialogContent>

View File

@ -0,0 +1,55 @@
import { Badge, type BadgeProps } from '@/components/ui/badge'
import { cn } from '@/lib/utils'
const STATUS_STYLES: Record<string, { variant: BadgeProps['variant']; className?: string }> = {
// Round statuses
DRAFT: { variant: 'secondary' },
ACTIVE: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
EVALUATION: { variant: 'default', className: 'bg-violet-500/10 text-violet-700 border-violet-200 dark:text-violet-400' },
CLOSED: { variant: 'secondary', className: 'bg-slate-500/10 text-slate-600 border-slate-200' },
// Project statuses
SUBMITTED: { variant: 'secondary', className: 'bg-indigo-500/10 text-indigo-700 border-indigo-200 dark:text-indigo-400' },
ELIGIBLE: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
ASSIGNED: { variant: 'default', className: 'bg-violet-500/10 text-violet-700 border-violet-200 dark:text-violet-400' },
UNDER_REVIEW: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
SHORTLISTED: { variant: 'default', className: 'bg-amber-500/10 text-amber-700 border-amber-200 dark:text-amber-400' },
SEMIFINALIST: { variant: 'default', className: 'bg-amber-500/10 text-amber-700 border-amber-200 dark:text-amber-400' },
FINALIST: { variant: 'default', className: 'bg-orange-500/10 text-orange-700 border-orange-200 dark:text-orange-400' },
WINNER: { variant: 'default', className: 'bg-yellow-500/10 text-yellow-800 border-yellow-300 dark:text-yellow-400' },
REJECTED: { variant: 'destructive' },
WITHDRAWN: { variant: 'secondary' },
// Evaluation statuses
IN_PROGRESS: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
COMPLETED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
// User statuses
INVITED: { variant: 'secondary', className: 'bg-sky-500/10 text-sky-700 border-sky-200 dark:text-sky-400' },
INACTIVE: { variant: 'secondary' },
SUSPENDED: { variant: 'destructive' },
}
type StatusBadgeProps = {
status: string
className?: string
size?: 'sm' | 'default'
}
export function StatusBadge({ status, className, size = 'default' }: StatusBadgeProps) {
const style = STATUS_STYLES[status] || { variant: 'secondary' as const }
const label = status.replace(/_/g, ' ')
return (
<Badge
variant={style.variant}
className={cn(
style.className,
size === 'sm' && 'text-[10px] px-1.5 py-0',
className,
)}
>
{label}
</Badge>
)
}

12
src/hooks/use-debounce.ts Normal file
View File

@ -0,0 +1,12 @@
import { useState, useEffect } from 'react'
export function useDebounce<T>(value: T, delay: number = 300): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay)
return () => clearTimeout(timer)
}, [value, delay])
return debouncedValue
}

View File

@ -10,6 +10,16 @@ import {
import { normalizeCountryToCode } from '@/lib/countries'
import { logAudit } from '../utils/audit'
// Valid project status transitions
const VALID_PROJECT_TRANSITIONS: Record<string, string[]> = {
SUBMITTED: ['ELIGIBLE', 'REJECTED'], // New submissions get screened
ELIGIBLE: ['ASSIGNED', 'REJECTED'], // Eligible projects get assigned to jurors
ASSIGNED: ['SEMIFINALIST', 'FINALIST', 'REJECTED'], // After evaluation
SEMIFINALIST: ['FINALIST', 'REJECTED'], // Semi-finalists advance or get cut
FINALIST: ['REJECTED'], // Finalists can only be rejected (rare)
REJECTED: ['SUBMITTED'], // Rejected can be re-submitted (admin override)
}
export const projectRouter = router({
/**
* List projects with filtering and pagination
@ -288,29 +298,73 @@ export const projectRouter = router({
create: adminProcedure
.input(
z.object({
roundId: z.string(),
programId: z.string(),
roundId: z.string().optional(),
title: z.string().min(1).max(500),
teamName: z.string().optional(),
description: z.string().optional(),
tags: z.array(z.string()).optional(),
country: z.string().optional(),
competitionCategory: z.enum(['STARTUP', 'BUSINESS_CONCEPT']).optional(),
oceanIssue: z.enum([
'POLLUTION_REDUCTION', 'CLIMATE_MITIGATION', 'TECHNOLOGY_INNOVATION',
'SUSTAINABLE_SHIPPING', 'BLUE_CARBON', 'HABITAT_RESTORATION',
'COMMUNITY_CAPACITY', 'SUSTAINABLE_FISHING', 'CONSUMER_AWARENESS',
'OCEAN_ACIDIFICATION', 'OTHER',
]).optional(),
institution: z.string().optional(),
contactPhone: z.string().optional(),
contactEmail: z.string().email('Invalid email address').optional(),
contactName: z.string().optional(),
city: z.string().optional(),
metadataJson: z.record(z.unknown()).optional(),
})
)
.mutation(async ({ ctx, input }) => {
const { metadataJson, ...rest } = input
const {
metadataJson,
contactPhone, contactEmail, contactName, city,
...rest
} = input
// Get round to fetch programId
// If roundId provided, derive programId from round for validation
let resolvedProgramId = input.programId
if (input.roundId) {
const round = await ctx.prisma.round.findUniqueOrThrow({
where: { id: input.roundId },
select: { programId: true },
})
resolvedProgramId = round.programId
}
// Build metadata from contact fields + any additional metadata
const fullMetadata: Record<string, unknown> = { ...metadataJson }
if (contactPhone) fullMetadata.contactPhone = contactPhone
if (contactEmail) fullMetadata.contactEmail = contactEmail
if (contactName) fullMetadata.contactName = contactName
if (city) fullMetadata.city = city
// Normalize country to ISO code if provided
const normalizedCountry = input.country
? normalizeCountryToCode(input.country)
: undefined
const project = await ctx.prisma.$transaction(async (tx) => {
const created = await tx.project.create({
data: {
...rest,
programId: round.programId,
metadataJson: metadataJson as Prisma.InputJsonValue ?? undefined,
programId: resolvedProgramId,
roundId: input.roundId || null,
title: input.title,
teamName: input.teamName,
description: input.description,
tags: input.tags || [],
country: normalizedCountry,
competitionCategory: input.competitionCategory,
oceanIssue: input.oceanIssue,
institution: input.institution,
metadataJson: Object.keys(fullMetadata).length > 0
? (fullMetadata as Prisma.InputJsonValue)
: undefined,
status: 'SUBMITTED',
},
})
@ -321,7 +375,7 @@ export const projectRouter = router({
action: 'CREATE',
entityType: 'Project',
entityId: created.id,
detailsJson: { title: input.title, roundId: input.roundId },
detailsJson: { title: input.title, roundId: input.roundId, programId: resolvedProgramId },
ipAddress: ctx.ip,
userAgent: ctx.userAgent,
})
@ -368,7 +422,23 @@ export const projectRouter = router({
? (country === null ? null : normalizeCountryToCode(country))
: undefined
const project = await ctx.prisma.project.update({
// Validate status transition if status is being changed
if (status) {
const currentProject = await ctx.prisma.project.findUniqueOrThrow({
where: { id },
select: { status: true },
})
const allowedTransitions = VALID_PROJECT_TRANSITIONS[currentProject.status] || []
if (!allowedTransitions.includes(status)) {
throw new TRPCError({
code: 'BAD_REQUEST',
message: `Invalid status transition: cannot change from ${currentProject.status} to ${status}. Allowed: ${allowedTransitions.join(', ') || 'none'}`,
})
}
}
const project = await ctx.prisma.$transaction(async (tx) => {
const updated = await tx.project.update({
where: { id },
data: {
...data,
@ -380,7 +450,7 @@ export const projectRouter = router({
// Record status change in history
if (status) {
await ctx.prisma.projectStatusHistory.create({
await tx.projectStatusHistory.create({
data: {
projectId: id,
status,
@ -389,6 +459,9 @@ export const projectRouter = router({
})
}
return updated
})
// Send notifications if status changed
if (status) {
// Get round details for notification
@ -660,17 +733,33 @@ export const projectRouter = router({
const matchingIds = projects.map((p) => p.id)
const updated = await ctx.prisma.project.updateMany({
where: {
id: { in: matchingIds },
roundId: input.roundId,
},
// Validate status transitions for all projects
const projectsWithStatus = await ctx.prisma.project.findMany({
where: { id: { in: matchingIds }, roundId: input.roundId },
select: { id: true, title: true, status: true },
})
const invalidTransitions: string[] = []
for (const p of projectsWithStatus) {
const allowed = VALID_PROJECT_TRANSITIONS[p.status] || []
if (!allowed.includes(input.status)) {
invalidTransitions.push(`"${p.title}" (${p.status}${input.status})`)
}
}
if (invalidTransitions.length > 0) {
throw new TRPCError({
code: 'BAD_REQUEST',
message: `Invalid transitions for ${invalidTransitions.length} project(s): ${invalidTransitions.slice(0, 3).join('; ')}${invalidTransitions.length > 3 ? ` and ${invalidTransitions.length - 3} more` : ''}`,
})
}
const updated = await ctx.prisma.$transaction(async (tx) => {
const result = await tx.project.updateMany({
where: { id: { in: matchingIds }, roundId: input.roundId },
data: { status: input.status },
})
// Record status change in history for each project
if (matchingIds.length > 0) {
await ctx.prisma.projectStatusHistory.createMany({
await tx.projectStatusHistory.createMany({
data: matchingIds.map((projectId) => ({
projectId,
status: input.status,
@ -679,17 +768,19 @@ export const projectRouter = router({
})
}
// Audit log
await logAudit({
prisma: ctx.prisma,
prisma: tx,
userId: ctx.user.id,
action: 'BULK_UPDATE_STATUS',
entityType: 'Project',
detailsJson: { ids: matchingIds, roundId: input.roundId, status: input.status, count: updated.count },
detailsJson: { ids: matchingIds, roundId: input.roundId, status: input.status, count: result.count },
ipAddress: ctx.ip,
userAgent: ctx.userAgent,
})
return result
})
// Helper to get notification title based on type
const getNotificationTitle = (type: string): string => {
const titles: Record<string, string> = {

View File

@ -8,6 +8,14 @@ import {
} from '../services/in-app-notification'
import { logAudit } from '@/server/utils/audit'
// Valid round status transitions (state machine)
const VALID_ROUND_TRANSITIONS: Record<string, string[]> = {
DRAFT: ['ACTIVE', 'ARCHIVED'], // Draft can be activated or archived
ACTIVE: ['CLOSED'], // Active rounds can only be closed
CLOSED: ['ARCHIVED'], // Closed rounds can be archived
ARCHIVED: [], // Archived is terminal — no transitions out
}
export const roundRouter = router({
/**
* List rounds for a program
@ -296,6 +304,15 @@ export const roundRouter = router({
select: { status: true, votingStartAt: true, votingEndAt: true },
})
// Validate status transition
const allowedTransitions = VALID_ROUND_TRANSITIONS[previousRound.status] || []
if (!allowedTransitions.includes(input.status)) {
throw new TRPCError({
code: 'BAD_REQUEST',
message: `Invalid status transition: cannot change from ${previousRound.status} to ${input.status}. Allowed transitions: ${allowedTransitions.join(', ') || 'none (terminal state)'}`,
})
}
const now = new Date()
// When activating a round, if votingStartAt is in the future, update it to now

View File

@ -3,11 +3,7 @@ import { TRPCError } from '@trpc/server'
import { Prisma } from '@prisma/client'
import { router, protectedProcedure, adminProcedure } from '../trpc'
import { logAudit } from '../utils/audit'
import {
applyAutoTagRules,
aiInterpretCriteria,
type AutoTagRule,
} from '../services/ai-award-eligibility'
import { processEligibilityJob } from '../services/award-eligibility-job'
export const specialAwardRouter = router({
// ─── Admin Queries ──────────────────────────────────────────────────────
@ -267,125 +263,53 @@ export const specialAwardRouter = router({
includeSubmitted: z.boolean().optional(),
}))
.mutation(async ({ ctx, input }) => {
const award = await ctx.prisma.specialAward.findUniqueOrThrow({
// Set job status to PENDING immediately
await ctx.prisma.specialAward.update({
where: { id: input.awardId },
include: { program: true },
})
// Get projects in the program's rounds
const statusFilter = input.includeSubmitted
? (['SUBMITTED', 'ELIGIBLE', 'ASSIGNED', 'SEMIFINALIST', 'FINALIST'] as const)
: (['ELIGIBLE', 'ASSIGNED', 'SEMIFINALIST', 'FINALIST'] as const)
const projects = await ctx.prisma.project.findMany({
where: {
round: { programId: award.programId },
status: { in: [...statusFilter] },
},
select: {
id: true,
title: true,
description: true,
competitionCategory: true,
country: true,
geographicZone: true,
tags: true,
oceanIssue: true,
data: {
eligibilityJobStatus: 'PENDING',
eligibilityJobTotal: null,
eligibilityJobDone: null,
eligibilityJobError: null,
eligibilityJobStarted: null,
},
})
if (projects.length === 0) {
throw new TRPCError({
code: 'BAD_REQUEST',
message: 'No eligible projects found',
})
}
// Phase 1: Auto-tag rules (deterministic)
const autoTagRules = award.autoTagRulesJson as unknown as AutoTagRule[] | null
let autoResults: Map<string, boolean> | undefined
if (autoTagRules && Array.isArray(autoTagRules) && autoTagRules.length > 0) {
autoResults = applyAutoTagRules(autoTagRules, projects)
}
// Phase 2: AI interpretation (if criteria text exists AND AI eligibility is enabled)
let aiResults: Map<string, { eligible: boolean; confidence: number; reasoning: string }> | undefined
if (award.criteriaText && award.useAiEligibility) {
const aiEvals = await aiInterpretCriteria(award.criteriaText, projects)
aiResults = new Map(
aiEvals.map((e) => [
e.projectId,
{ eligible: e.eligible, confidence: e.confidence, reasoning: e.reasoning },
])
)
}
// Combine results: auto-tag AND AI must agree (or just one if only one configured)
const eligibilities = projects.map((project) => {
const autoEligible = autoResults?.get(project.id) ?? true
const aiEval = aiResults?.get(project.id)
const aiEligible = aiEval?.eligible ?? true
const eligible = autoEligible && aiEligible
const method = autoResults && aiResults ? 'AUTO' : autoResults ? 'AUTO' : 'MANUAL'
return {
projectId: project.id,
eligible,
method,
aiReasoningJson: aiEval
? { confidence: aiEval.confidence, reasoning: aiEval.reasoning }
: null,
}
})
// Upsert eligibilities
await ctx.prisma.$transaction(
eligibilities.map((e) =>
ctx.prisma.awardEligibility.upsert({
where: {
awardId_projectId: {
awardId: input.awardId,
projectId: e.projectId,
},
},
create: {
awardId: input.awardId,
projectId: e.projectId,
eligible: e.eligible,
method: e.method as 'AUTO' | 'MANUAL',
aiReasoningJson: e.aiReasoningJson ?? undefined,
},
update: {
eligible: e.eligible,
method: e.method as 'AUTO' | 'MANUAL',
aiReasoningJson: e.aiReasoningJson ?? undefined,
// Clear overrides
overriddenBy: null,
overriddenAt: null,
},
})
)
)
const eligibleCount = eligibilities.filter((e) => e.eligible).length
await logAudit({
userId: ctx.user.id,
action: 'UPDATE',
entityType: 'SpecialAward',
entityId: input.awardId,
detailsJson: {
action: 'RUN_ELIGIBILITY',
totalProjects: projects.length,
eligible: eligibleCount,
},
detailsJson: { action: 'RUN_ELIGIBILITY_STARTED' },
})
return {
total: projects.length,
eligible: eligibleCount,
ineligible: projects.length - eligibleCount,
}
// Fire and forget - process in background
void processEligibilityJob(
input.awardId,
input.includeSubmitted ?? false,
ctx.user.id
)
return { started: true }
}),
/**
* Get eligibility job status for polling
*/
getEligibilityJobStatus: protectedProcedure
.input(z.object({ awardId: z.string() }))
.query(async ({ ctx, input }) => {
const award = await ctx.prisma.specialAward.findUniqueOrThrow({
where: { id: input.awardId },
select: {
eligibilityJobStatus: true,
eligibilityJobTotal: true,
eligibilityJobDone: true,
eligibilityJobError: true,
eligibilityJobStarted: true,
},
})
return award
}),
/**

View File

@ -0,0 +1,184 @@
import { prisma } from '@/lib/prisma'
import {
applyAutoTagRules,
aiInterpretCriteria,
type AutoTagRule,
} from './ai-award-eligibility'
const BATCH_SIZE = 20
/**
* Process eligibility for an award in the background.
* Updates progress in the database as it goes so the frontend can poll.
*/
export async function processEligibilityJob(
awardId: string,
includeSubmitted: boolean,
userId: string
): Promise<void> {
try {
// Mark job as PROCESSING
const award = await prisma.specialAward.findUniqueOrThrow({
where: { id: awardId },
include: { program: true },
})
// Get projects
const statusFilter = includeSubmitted
? (['SUBMITTED', 'ELIGIBLE', 'ASSIGNED', 'SEMIFINALIST', 'FINALIST'] as const)
: (['ELIGIBLE', 'ASSIGNED', 'SEMIFINALIST', 'FINALIST'] as const)
const projects = await prisma.project.findMany({
where: {
round: { programId: award.programId },
status: { in: [...statusFilter] },
},
select: {
id: true,
title: true,
description: true,
competitionCategory: true,
country: true,
geographicZone: true,
tags: true,
oceanIssue: true,
},
})
if (projects.length === 0) {
await prisma.specialAward.update({
where: { id: awardId },
data: {
eligibilityJobStatus: 'COMPLETED',
eligibilityJobTotal: 0,
eligibilityJobDone: 0,
},
})
return
}
await prisma.specialAward.update({
where: { id: awardId },
data: {
eligibilityJobStatus: 'PROCESSING',
eligibilityJobTotal: projects.length,
eligibilityJobDone: 0,
eligibilityJobError: null,
eligibilityJobStarted: new Date(),
},
})
// Phase 1: Auto-tag rules (deterministic, fast)
const autoTagRules = award.autoTagRulesJson as unknown as AutoTagRule[] | null
let autoResults: Map<string, boolean> | undefined
if (autoTagRules && Array.isArray(autoTagRules) && autoTagRules.length > 0) {
autoResults = applyAutoTagRules(autoTagRules, projects)
}
// Phase 2: AI interpretation (if criteria text exists AND AI eligibility is enabled)
// Process in batches to avoid timeouts
let aiResults: Map<string, { eligible: boolean; confidence: number; reasoning: string }> | undefined
if (award.criteriaText && award.useAiEligibility) {
aiResults = new Map()
for (let i = 0; i < projects.length; i += BATCH_SIZE) {
const batch = projects.slice(i, i + BATCH_SIZE)
const aiEvals = await aiInterpretCriteria(award.criteriaText, batch)
for (const e of aiEvals) {
aiResults.set(e.projectId, {
eligible: e.eligible,
confidence: e.confidence,
reasoning: e.reasoning,
})
}
// Update progress
await prisma.specialAward.update({
where: { id: awardId },
data: {
eligibilityJobDone: Math.min(i + BATCH_SIZE, projects.length),
},
})
}
} else {
// No AI needed, mark all as done
await prisma.specialAward.update({
where: { id: awardId },
data: { eligibilityJobDone: projects.length },
})
}
// Combine results: auto-tag AND AI must agree (or just one if only one configured)
const eligibilities = projects.map((project) => {
const autoEligible = autoResults?.get(project.id) ?? true
const aiEval = aiResults?.get(project.id)
const aiEligible = aiEval?.eligible ?? true
const eligible = autoEligible && aiEligible
const method = autoResults && aiResults ? 'AUTO' : autoResults ? 'AUTO' : 'MANUAL'
return {
projectId: project.id,
eligible,
method,
aiReasoningJson: aiEval
? { confidence: aiEval.confidence, reasoning: aiEval.reasoning }
: null,
}
})
// Upsert eligibilities
await prisma.$transaction(
eligibilities.map((e) =>
prisma.awardEligibility.upsert({
where: {
awardId_projectId: {
awardId,
projectId: e.projectId,
},
},
create: {
awardId,
projectId: e.projectId,
eligible: e.eligible,
method: e.method as 'AUTO' | 'MANUAL',
aiReasoningJson: e.aiReasoningJson ?? undefined,
},
update: {
eligible: e.eligible,
method: e.method as 'AUTO' | 'MANUAL',
aiReasoningJson: e.aiReasoningJson ?? undefined,
overriddenBy: null,
overriddenAt: null,
},
})
)
)
// Mark as completed
await prisma.specialAward.update({
where: { id: awardId },
data: {
eligibilityJobStatus: 'COMPLETED',
eligibilityJobDone: projects.length,
},
})
} catch (error) {
// Mark as failed
const errorMessage = error instanceof Error ? error.message : 'Unknown error'
try {
await prisma.specialAward.update({
where: { id: awardId },
data: {
eligibilityJobStatus: 'FAILED',
eligibilityJobError: errorMessage,
},
})
} catch {
// If we can't even update the status, log and give up
console.error('Failed to update eligibility job status:', error)
}
}
}