Pool page: add bulk assign-to-round, enhance project pool UI

- Add assignAllToRound mutation to project-pool router
- Rewrite pool page with round selector, bulk assignment, and better layout
- Add pool navigation link to admin projects page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-02-16 07:06:59 +01:00
parent 4c0efb232c
commit 2fb26d4734
3 changed files with 228 additions and 49 deletions

View File

@ -622,6 +622,12 @@ export default function ProjectsPage() {
<Bot className="mr-2 h-4 w-4" />
AI Tags
</Button>
<Button variant="outline" asChild>
<Link href="/admin/projects/pool">
<Layers className="mr-2 h-4 w-4" />
Assign to Round
</Link>
</Button>
<Button variant="outline" asChild>
<Link href="/admin/projects/bulk-upload">
<FileUp className="mr-2 h-4 w-4" />

View File

@ -1,6 +1,8 @@
'use client'
import { useState } from 'react'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
@ -24,14 +26,14 @@ import { Input } from '@/components/ui/input'
import { Card } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { toast } from 'sonner'
import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
import Link from 'next/link'
import { ArrowLeft, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
export default function ProjectPoolPage() {
const [selectedProgramId, setSelectedProgramId] = useState<string>('')
const [selectedProjects, setSelectedProjects] = useState<string[]>([])
const [assignDialogOpen, setAssignDialogOpen] = useState(false)
const [targetStageId, setTargetStageId] = useState<string>('')
const [assignAllDialogOpen, setAssignAllDialogOpen] = useState(false)
const [targetRoundId, setTargetRoundId] = useState<string>('')
const [searchQuery, setSearchQuery] = useState('')
const [categoryFilter, setCategoryFilter] = useState<'STARTUP' | 'BUSINESS_CONCEPT' | 'all'>('all')
const [currentPage, setCurrentPage] = useState(1)
@ -50,34 +52,61 @@ export default function ProjectPoolPage() {
{ enabled: !!selectedProgramId }
)
// Get stages from the selected program (program.list includes rounds/stages)
const { data: selectedProgramData, isLoading: isLoadingStages } = trpc.program.get.useQuery(
// Load rounds from program (program.get returns rounds from all competitions)
const { data: programData, isLoading: isLoadingRounds } = trpc.program.get.useQuery(
{ id: selectedProgramId },
{ enabled: !!selectedProgramId }
)
const stages = (selectedProgramData?.stages || []) as Array<{ id: string; name: string }>
const rounds = (programData?.rounds || []) as Array<{ id: string; name: string; roundType: string; sortOrder: number }>
const utils = trpc.useUtils()
const assignMutation = trpc.projectPool.assignToRound.useMutation({
onSuccess: (result) => {
utils.project.list.invalidate()
utils.program.get.invalidate()
utils.projectPool.listUnassigned.invalidate()
toast.success(`Assigned ${result.assignedCount} project${result.assignedCount !== 1 ? 's' : ''} to round`)
setSelectedProjects([])
setAssignDialogOpen(false)
setTargetStageId('')
setTargetRoundId('')
refetch()
},
onError: (error: any) => {
toast.error(error.message || 'Failed to assign projects')
onError: (error: unknown) => {
toast.error((error as { message?: string }).message || 'Failed to assign projects')
},
})
const assignAllMutation = trpc.projectPool.assignAllToRound.useMutation({
onSuccess: (result) => {
utils.project.list.invalidate()
utils.projectPool.listUnassigned.invalidate()
toast.success(`Assigned all ${result.assignedCount} projects to round`)
setSelectedProjects([])
setAssignAllDialogOpen(false)
setTargetRoundId('')
refetch()
},
onError: (error: unknown) => {
toast.error((error as { message?: string }).message || 'Failed to assign projects')
},
})
const isPending = assignMutation.isPending || assignAllMutation.isPending
const handleBulkAssign = () => {
if (selectedProjects.length === 0 || !targetStageId) return
if (selectedProjects.length === 0 || !targetRoundId) return
assignMutation.mutate({
projectIds: selectedProjects,
roundId: targetStageId,
roundId: targetRoundId,
})
}
const handleAssignAll = () => {
if (!targetRoundId || !selectedProgramId) return
assignAllMutation.mutate({
programId: selectedProgramId,
roundId: targetRoundId,
competitionCategory: categoryFilter === 'all' ? undefined : categoryFilter,
})
}
@ -108,14 +137,21 @@ export default function ProjectPoolPage() {
return (
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="text-2xl font-semibold">Project Pool</h1>
<p className="text-muted-foreground">
Assign unassigned projects to evaluation stages
</p>
<div className="flex items-start gap-3">
<Link href={"/admin/projects" as Route} className="mt-1 shrink-0">
<Button variant="ghost" size="icon" className="h-8 w-8">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-2xl font-semibold">Project Pool</h1>
<p className="text-muted-foreground">
Assign unassigned projects to competition rounds
</p>
</div>
</div>
{/* Program Selector */}
{/* Filters */}
<Card className="p-4">
<div className="flex flex-col gap-4 md:flex-row md:items-end">
<div className="flex-1 space-y-2">
@ -140,8 +176,8 @@ export default function ProjectPoolPage() {
<div className="flex-1 space-y-2">
<label className="text-sm font-medium">Category</label>
<Select value={categoryFilter} onValueChange={(value: any) => {
setCategoryFilter(value)
<Select value={categoryFilter} onValueChange={(value: string) => {
setCategoryFilter(value as 'STARTUP' | 'BUSINESS_CONCEPT' | 'all')
setCurrentPage(1)
}}>
<SelectTrigger>
@ -166,15 +202,32 @@ export default function ProjectPoolPage() {
}}
/>
</div>
{selectedProjects.length > 0 && (
<Button onClick={() => setAssignDialogOpen(true)} className="whitespace-nowrap">
Assign {selectedProjects.length} Project{selectedProjects.length > 1 ? 's' : ''}
</Button>
)}
</div>
</Card>
{/* Action bar */}
{selectedProgramId && poolData && poolData.total > 0 && (
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">
<span className="font-medium text-foreground">{poolData.total}</span> unassigned project{poolData.total !== 1 ? 's' : ''}
</p>
<div className="flex items-center gap-2">
{selectedProjects.length > 0 && (
<Button onClick={() => setAssignDialogOpen(true)} size="sm">
Assign {selectedProjects.length} Selected
</Button>
)}
<Button
variant="default"
size="sm"
onClick={() => setAssignAllDialogOpen(true)}
>
Assign All {poolData.total} to Round
</Button>
</div>
</div>
)}
{/* Projects Table */}
{selectedProgramId && (
<>
@ -195,7 +248,7 @@ export default function ProjectPoolPage() {
<tr className="text-sm">
<th className="p-3 text-left">
<Checkbox
checked={selectedProjects.length === poolData.projects.length && poolData.projects.length > 0}
checked={poolData.projects.length > 0 && selectedProjects.length === poolData.projects.length}
onCheckedChange={toggleSelectAll}
/>
</th>
@ -203,7 +256,7 @@ export default function ProjectPoolPage() {
<th className="p-3 text-left font-medium">Category</th>
<th className="p-3 text-left font-medium">Country</th>
<th className="p-3 text-left font-medium">Submitted</th>
<th className="p-3 text-left font-medium">Action</th>
<th className="p-3 text-left font-medium">Quick Assign</th>
</tr>
</thead>
<tbody>
@ -217,7 +270,7 @@ export default function ProjectPoolPage() {
</td>
<td className="p-3">
<Link
href={`/admin/projects/${project.id}`}
href={`/admin/projects/${project.id}` as Route}
className="hover:underline"
>
<div className="font-medium">{project.title}</div>
@ -225,9 +278,11 @@ export default function ProjectPoolPage() {
</Link>
</td>
<td className="p-3">
<Badge variant="outline">
{project.competitionCategory === 'STARTUP' ? 'Startup' : 'Business Concept'}
</Badge>
{project.competitionCategory && (
<Badge variant="outline">
{project.competitionCategory === 'STARTUP' ? 'Startup' : 'Business Concept'}
</Badge>
)}
</td>
<td className="p-3 text-sm text-muted-foreground">
{project.country || '-'}
@ -238,20 +293,20 @@ export default function ProjectPoolPage() {
: '-'}
</td>
<td className="p-3">
{isLoadingStages ? (
{isLoadingRounds ? (
<Skeleton className="h-9 w-[200px]" />
) : (
<Select
onValueChange={(roundId) => handleQuickAssign(project.id, roundId)}
disabled={assignMutation.isPending}
disabled={isPending}
>
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="Assign to stage..." />
<SelectValue placeholder="Assign to round..." />
</SelectTrigger>
<SelectContent>
{stages?.map((stage: { id: string; name: string }) => (
<SelectItem key={stage.id} value={stage.id}>
{stage.name}
{rounds.map((round) => (
<SelectItem key={round.id} value={round.id}>
{round.name}
</SelectItem>
))}
</SelectContent>
@ -269,7 +324,7 @@ export default function ProjectPoolPage() {
{poolData.totalPages > 1 && (
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">
Showing {((currentPage - 1) * perPage) + 1} to {Math.min(currentPage * perPage, poolData.total)} of {poolData.total} projects
Showing {((currentPage - 1) * perPage) + 1} to {Math.min(currentPage * perPage, poolData.total)} of {poolData.total}
</p>
<div className="flex gap-2">
<Button
@ -308,24 +363,24 @@ export default function ProjectPoolPage() {
</Card>
)}
{/* Bulk Assignment Dialog */}
{/* Bulk Assignment Dialog (selected projects) */}
<Dialog open={assignDialogOpen} onOpenChange={setAssignDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Assign Projects to Stage</DialogTitle>
<DialogTitle>Assign Selected Projects</DialogTitle>
<DialogDescription>
Assign {selectedProjects.length} selected project{selectedProjects.length > 1 ? 's' : ''} to:
Assign {selectedProjects.length} selected project{selectedProjects.length > 1 ? 's' : ''} to a round:
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<Select value={targetStageId} onValueChange={setTargetStageId}>
<Select value={targetRoundId} onValueChange={setTargetRoundId}>
<SelectTrigger>
<SelectValue placeholder="Select stage..." />
<SelectValue placeholder="Select round..." />
</SelectTrigger>
<SelectContent>
{stages?.map((stage: { id: string; name: string }) => (
<SelectItem key={stage.id} value={stage.id}>
{stage.name}
{rounds.map((round) => (
<SelectItem key={round.id} value={round.id}>
{round.name}
</SelectItem>
))}
</SelectContent>
@ -337,10 +392,48 @@ export default function ProjectPoolPage() {
</Button>
<Button
onClick={handleBulkAssign}
disabled={!targetStageId || assignMutation.isPending}
disabled={!targetRoundId || isPending}
>
{assignMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Assign
Assign {selectedProjects.length} Projects
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* Assign ALL Dialog */}
<Dialog open={assignAllDialogOpen} onOpenChange={setAssignAllDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Assign All Unassigned Projects</DialogTitle>
<DialogDescription>
This will assign all {poolData?.total || 0}{categoryFilter !== 'all' ? ` ${categoryFilter === 'STARTUP' ? 'Startup' : 'Business Concept'}` : ''} unassigned projects to a round in one operation.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<Select value={targetRoundId} onValueChange={setTargetRoundId}>
<SelectTrigger>
<SelectValue placeholder="Select round..." />
</SelectTrigger>
<SelectContent>
{rounds.map((round) => (
<SelectItem key={round.id} value={round.id}>
{round.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setAssignAllDialogOpen(false)}>
Cancel
</Button>
<Button
onClick={handleAssignAll}
disabled={!targetRoundId || isPending}
>
{assignAllMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Assign All {poolData?.total || 0} Projects
</Button>
</DialogFooter>
</DialogContent>

View File

@ -198,4 +198,84 @@ export const projectPoolRouter = router({
roundId,
}
}),
/**
* Assign ALL unassigned projects in a program to a round (server-side, no ID limit)
*/
assignAllToRound: adminProcedure
.input(
z.object({
programId: z.string(),
roundId: z.string(),
competitionCategory: z.enum(['STARTUP', 'BUSINESS_CONCEPT']).optional(),
})
)
.mutation(async ({ ctx, input }) => {
const { programId, roundId, competitionCategory } = input
// Verify round exists
await ctx.prisma.round.findUniqueOrThrow({
where: { id: roundId },
select: { id: true },
})
// Find all unassigned projects
const where: Record<string, unknown> = {
programId,
projectRoundStates: { none: {} },
}
if (competitionCategory) {
where.competitionCategory = competitionCategory
}
const projects = await ctx.prisma.project.findMany({
where,
select: { id: true },
})
if (projects.length === 0) {
return { success: true, assignedCount: 0, roundId }
}
const projectIds = projects.map((p) => p.id)
const result = await ctx.prisma.$transaction(async (tx) => {
await tx.projectRoundState.createMany({
data: projectIds.map((projectId) => ({ projectId, roundId })),
skipDuplicates: true,
})
const updated = await tx.project.updateMany({
where: { id: { in: projectIds } },
data: { status: 'ASSIGNED' },
})
await tx.projectStatusHistory.createMany({
data: projectIds.map((projectId) => ({
projectId,
status: 'ASSIGNED',
changedBy: ctx.user?.id,
})),
})
await logAudit({
prisma: tx,
userId: ctx.user?.id,
action: 'BULK_ASSIGN_ALL_TO_ROUND',
entityType: 'Project',
detailsJson: {
roundId,
programId,
competitionCategory: competitionCategory || 'ALL',
projectCount: projectIds.length,
},
ipAddress: ctx.ip,
userAgent: ctx.userAgent,
})
return updated
})
return { success: true, assignedCount: result.count, roundId }
}),
})