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
162
src/components/admin/grand-finale/finalist-slots-card.tsx
Normal file
162
src/components/admin/grand-finale/finalist-slots-card.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
167
src/components/admin/grand-finale/waitlist-card.tsx
Normal file
167
src/components/admin/grand-finale/waitlist-card.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user