feat: admin UI for finalist slot quotas + waitlist on grand-finale round

- New components/admin/grand-finale/finalist-slots-card: per-category
  quota editor with confirmed/pending counts, dirty-tracking, save button.
  Renders an empty editor for both Startup and Business Concept categories
  even when no quota exists yet.
- New components/admin/grand-finale/waitlist-card: per-category ranked
  waitlist display with status badges + manual-promote AlertDialog
  (audit-logged via FINALIST_MANUAL_PROMOTE).
- Round detail page: embeds both cards conditionally when
  roundType === 'LIVE_FINAL'.
- New finalist router queries: listQuotas, listCategoryCounts (groupBy
  on category+status), listWaitlist (rank-ordered with project relation).

Smoke-tested: setting Startup quota to 3 persists to DB; UI renders
quota editor and waitlist card cleanly with empty state.
This commit is contained in:
Matt
2026-04-28 18:07:55 +02:00
parent 437bed2326
commit 95055e0dae
4 changed files with 390 additions and 0 deletions

View File

@@ -92,6 +92,8 @@ import { ProjectStatesTable } from '@/components/admin/round/project-states-tabl
import { FileRequirementsEditor } from '@/components/admin/round/file-requirements-editor'
import { FilteringDashboard } from '@/components/admin/round/filtering-dashboard'
import { MentoringRoundOverview } from '@/components/admin/round/mentoring-round-overview'
import { FinalistSlotsCard } from '@/components/admin/grand-finale/finalist-slots-card'
import { WaitlistCard } from '@/components/admin/grand-finale/waitlist-card'
import { RankingDashboard } from '@/components/admin/round/ranking-dashboard'
import { CoverageReport } from '@/components/admin/assignment/coverage-report'
import { AssignmentPreviewSheet } from '@/components/admin/assignment/assignment-preview-sheet'
@@ -583,6 +585,7 @@ export default function RoundDetailPage() {
const isFiltering = round?.roundType === 'FILTERING'
const isEvaluation = round?.roundType === 'EVALUATION'
const isMentoring = round?.roundType === 'MENTORING'
const isGrandFinale = round?.roundType === 'LIVE_FINAL'
// Mentor pool size — used by Round Details panel below to replace the
// always-empty "Jury Group" row on MENTORING rounds.
@@ -1481,6 +1484,14 @@ export default function RoundDetailPage() {
{/* Mentoring-specific stats \u2014 only on MENTORING rounds */}
{isMentoring && <MentoringRoundOverview roundId={roundId} />}
{/* Grand-finale logistics \u2014 only on LIVE_FINAL rounds */}
{isGrandFinale && programId && (
<div className="grid gap-4 md:grid-cols-2">
<FinalistSlotsCard programId={programId} />
<WaitlistCard programId={programId} />
</div>
)}
{/* Round Info + Project Breakdown */}
<div className="grid gap-4 sm:grid-cols-2">
<AnimatedCard index={2}>

View File

@@ -0,0 +1,162 @@
'use client'
import { useEffect, useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Loader2, Save, Trophy } from 'lucide-react'
import { formatEnumLabel } from '@/lib/utils'
import type { CompetitionCategory } from '@prisma/client'
interface Props {
programId: string
}
const CATEGORIES: CompetitionCategory[] = ['STARTUP', 'BUSINESS_CONCEPT']
type Row = {
category: CompetitionCategory
quota: number
confirmed: number
pending: number
}
export function FinalistSlotsCard({ programId }: Props) {
const utils = trpc.useUtils()
const { data: quotas, isLoading: loadingQuotas } = trpc.finalist.listQuotas.useQuery({
programId,
})
const { data: counts, isLoading: loadingCounts } = trpc.finalist.listCategoryCounts.useQuery({
programId,
})
const [draft, setDraft] = useState<Record<CompetitionCategory, string>>({
STARTUP: '',
BUSINESS_CONCEPT: '',
})
// Sync draft from server response on first load / after save
useEffect(() => {
if (!quotas) return
const next: Record<CompetitionCategory, string> = { STARTUP: '', BUSINESS_CONCEPT: '' }
for (const cat of CATEGORIES) {
const found = quotas.find((q) => q.category === cat)
next[cat] = found ? String(found.quota) : ''
}
setDraft(next)
}, [quotas])
const setQuotaMutation = trpc.finalist.setQuota.useMutation({
onSuccess: (_, vars) => {
toast.success(`${formatEnumLabel(vars.category)} quota saved`)
utils.finalist.listQuotas.invalidate({ programId })
utils.finalist.listCategoryCounts.invalidate({ programId })
},
onError: (err) => toast.error(err.message),
})
if (loadingQuotas || loadingCounts) {
return <Skeleton className="h-44 w-full rounded-md" />
}
const rows: Row[] = CATEGORIES.map((cat) => {
const q = quotas?.find((x) => x.category === cat)
const c = counts?.find((x) => x.category === cat)
return {
category: cat,
quota: q?.quota ?? 0,
confirmed: c?.confirmed ?? 0,
pending: c?.pending ?? 0,
}
})
const handleSave = (category: CompetitionCategory) => {
const raw = draft[category]
const n = Number.parseInt(raw, 10)
if (Number.isNaN(n) || n < 0) {
toast.error('Quota must be a non-negative integer')
return
}
setQuotaMutation.mutate({ programId, category, quota: n })
}
return (
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Trophy className="text-muted-foreground h-4 w-4" />
<CardTitle className="text-base">Finalist slots</CardTitle>
</div>
<CardDescription>
Per-category quotas. Reductions blocked when {`> `}confirmed count un-confirm a team
first if you need to shrink a category.
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3">
{rows.map((r) => {
const isPending =
setQuotaMutation.isPending &&
setQuotaMutation.variables?.category === r.category
const dirty = String(r.quota) !== draft[r.category]
return (
<div
key={r.category}
className="flex items-center justify-between gap-3 rounded-md border p-3"
>
<div className="min-w-0 flex-1">
<div className="font-medium">{formatEnumLabel(r.category)}</div>
<div className="text-muted-foreground mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
<span>
<Badge variant="default" className="text-xs">
{r.confirmed}
</Badge>{' '}
confirmed
</span>
<span>
<Badge variant="secondary" className="text-xs">
{r.pending}
</Badge>{' '}
pending
</span>
</div>
</div>
<div className="flex items-center gap-2">
<Input
type="number"
inputMode="numeric"
min={0}
className="w-20 tabular-nums"
value={draft[r.category]}
onChange={(e) =>
setDraft((d) => ({ ...d, [r.category]: e.target.value }))
}
/>
<Button
size="sm"
variant={dirty ? 'default' : 'outline'}
disabled={!dirty || isPending}
onClick={() => handleSave(r.category)}
>
{isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>
<Save className="mr-1 h-3.5 w-3.5" />
Save
</>
)}
</Button>
</div>
</div>
)
})}
</div>
</CardContent>
</Card>
)
}

View File

@@ -0,0 +1,167 @@
'use client'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { ListOrdered, Loader2 } from 'lucide-react'
import { formatEnumLabel } from '@/lib/utils'
import type { CompetitionCategory } from '@prisma/client'
interface Props {
programId: string
}
const STATUS_LABEL: Record<string, { label: string; variant: 'default' | 'secondary' | 'outline' | 'destructive' }> = {
WAITING: { label: 'Waiting', variant: 'outline' },
PROMOTED: { label: 'Promoted', variant: 'default' },
USED: { label: 'Used', variant: 'secondary' },
}
export function WaitlistCard({ programId }: Props) {
const utils = trpc.useUtils()
const { data, isLoading } = trpc.finalist.listWaitlist.useQuery({ programId })
const promoteMutation = trpc.finalist.manualPromote.useMutation({
onSuccess: () => {
toast.success('Waitlist entry promoted — confirmation email sent')
utils.finalist.listWaitlist.invalidate({ programId })
utils.finalist.listCategoryCounts.invalidate({ programId })
},
onError: (err) => toast.error(err.message),
})
if (isLoading) return <Skeleton className="h-44 w-full rounded-md" />
const byCategory = new Map<CompetitionCategory, typeof data>()
for (const entry of data ?? []) {
const list = byCategory.get(entry.category) ?? []
list.push(entry)
byCategory.set(entry.category, list)
}
if (!data || data.length === 0) {
return (
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<ListOrdered className="text-muted-foreground h-4 w-4" />
<CardTitle className="text-base">Waitlist</CardTitle>
</div>
<CardDescription>
Per-category ranked waitlist. Auto-cascades when a finalist declines or expires.
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-muted-foreground py-6 text-center text-sm">
No waitlist entries yet.
</p>
</CardContent>
</Card>
)
}
return (
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<ListOrdered className="text-muted-foreground h-4 w-4" />
<CardTitle className="text-base">Waitlist</CardTitle>
</div>
<CardDescription>
Per-category ranked waitlist. Auto-cascades when a finalist declines or expires. You can
manually promote out of order overrides are audit-logged.
</CardDescription>
</CardHeader>
<CardContent className="space-y-5">
{Array.from(byCategory.entries()).map(([category, entries]) => (
<div key={category}>
<div className="text-muted-foreground mb-2 text-xs font-medium uppercase tracking-wide">
{formatEnumLabel(category)}
</div>
<div className="space-y-2">
{(entries ?? []).map((entry) => {
const badge = STATUS_LABEL[entry.status] ?? { label: entry.status, variant: 'outline' as const }
const canPromote = entry.status === 'WAITING'
const isPending =
promoteMutation.isPending && promoteMutation.variables?.waitlistEntryId === entry.id
return (
<div
key={entry.id}
className="flex items-center justify-between gap-3 rounded-md border p-3"
>
<div className="flex items-center gap-3">
<div className="bg-muted flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold tabular-nums">
{entry.rank}
</div>
<div className="min-w-0">
<div className="font-medium">{entry.project.title}</div>
<div className="text-muted-foreground text-xs">
{entry.project.country ?? '—'}
</div>
</div>
</div>
<div className="flex items-center gap-2">
<Badge variant={badge.variant} className="text-xs">
{badge.label}
</Badge>
{canPromote && (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button size="sm" variant="outline" disabled={isPending}>
{isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
'Promote'
)}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Promote this team out of order?</AlertDialogTitle>
<AlertDialogDescription>
{entry.project.title} (rank #{entry.rank}) will be promoted into a
finalist slot. A confirmation email will be sent to the team lead
with a 24-hour window. This override is audit-logged.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={() =>
promoteMutation.mutate({
waitlistEntryId: entry.id,
windowHours: 24,
})
}
>
Promote
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
</div>
</div>
)
})}
</div>
</div>
))}
</CardContent>
</Card>
)
}

View File

@@ -11,6 +11,56 @@ import { sendFinalistConfirmationEmail } from '@/lib/email'
import { verifyFinalistToken } from '@/lib/finalist-token'
export const finalistRouter = router({
/** List all per-category finalist slot quotas for a program. */
listQuotas: adminProcedure
.input(z.object({ programId: z.string() }))
.query(async ({ ctx, input }) => {
return ctx.prisma.finalistSlotQuota.findMany({
where: { programId: input.programId },
orderBy: { category: 'asc' },
})
}),
/**
* Aggregate counts of confirmations per category for a program. Used by the
* admin slot card to show "X confirmed / Y pending" alongside the quota
* editor.
*/
listCategoryCounts: adminProcedure
.input(z.object({ programId: z.string() }))
.query(async ({ ctx, input }) => {
const grouped = await ctx.prisma.finalistConfirmation.groupBy({
by: ['category', 'status'],
where: { project: { programId: input.programId } },
_count: { _all: true },
})
const byCategory = new Map<string, { confirmed: number; pending: number }>()
for (const g of grouped) {
const slot = byCategory.get(g.category) ?? { confirmed: 0, pending: 0 }
if (g.status === 'CONFIRMED') slot.confirmed = g._count._all
if (g.status === 'PENDING') slot.pending = g._count._all
byCategory.set(g.category, slot)
}
return Array.from(byCategory.entries()).map(([category, counts]) => ({
category: category as CompetitionCategory,
confirmed: counts.confirmed,
pending: counts.pending,
}))
}),
/** List the per-category waitlist for a program (rank-ordered). */
listWaitlist: adminProcedure
.input(z.object({ programId: z.string() }))
.query(async ({ ctx, input }) => {
return ctx.prisma.waitlistEntry.findMany({
where: { programId: input.programId },
orderBy: [{ category: 'asc' }, { rank: 'asc' }],
include: {
project: { select: { id: true, title: true, country: true } },
},
})
}),
/**
* Set the finalist slot quota for a category in a program. Mutable mid-flight,
* but blocked when reducing below the count of already-CONFIRMED finalists in