Admin dashboard & round management UX overhaul
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m43s
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m43s
- Extract round detail monolith (2900→600 lines) into 13 standalone components - Add shared round/status config (round-config.ts) replacing 4 local copies - Delete 12 legacy competition-scoped pages, merge project pool into projects page - Add round-type-specific dashboard stat panels (submission, mentoring, live final, deliberation, summary) - Add contextual header quick actions based on active round type - Improve pipeline visualization: progress bars, checkmarks, chevron connectors, overflow fix - Add config tab completion dots (green/amber/red) and inline validation warnings - Enhance juries page with round assignments, member avatars, and cap mode badges - Add context-aware project list (recent submissions vs active evaluations) - Move competition settings into Manage Editions page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
170
src/components/admin/assignment/coi-review-section.tsx
Normal file
170
src/components/admin/assignment/coi-review-section.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
'use client'
|
||||
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { ShieldAlert, Eye, CheckCircle2, UserPlus, FileText } from 'lucide-react'
|
||||
|
||||
export type COIReviewSectionProps = {
|
||||
roundId: string
|
||||
}
|
||||
|
||||
export function COIReviewSection({ roundId }: COIReviewSectionProps) {
|
||||
const utils = trpc.useUtils()
|
||||
const { data: declarations, isLoading } = trpc.evaluation.listCOIByStage.useQuery(
|
||||
{ roundId },
|
||||
{ refetchInterval: 15_000 },
|
||||
)
|
||||
|
||||
const reviewMutation = trpc.evaluation.reviewCOI.useMutation({
|
||||
onSuccess: (data) => {
|
||||
utils.evaluation.listCOIByStage.invalidate({ roundId })
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
utils.analytics.getJurorWorkload.invalidate({ roundId })
|
||||
if (data.reassignment) {
|
||||
toast.success(`Reassigned to ${data.reassignment.newJurorName}`)
|
||||
} else {
|
||||
toast.success('COI review updated')
|
||||
}
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
// Show placeholder when no declarations
|
||||
if (!isLoading && (!declarations || declarations.length === 0)) {
|
||||
return (
|
||||
<div className="rounded-lg border border-dashed p-4 text-center">
|
||||
<p className="text-sm text-muted-foreground">No conflict of interest declarations yet.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const conflictCount = declarations?.filter((d) => d.hasConflict).length ?? 0
|
||||
const unreviewedCount = declarations?.filter((d) => d.hasConflict && !d.reviewedAt).length ?? 0
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium flex items-center gap-2">
|
||||
<ShieldAlert className="h-4 w-4" />
|
||||
Conflict of Interest Declarations
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{declarations?.length ?? 0} declaration{(declarations?.length ?? 0) !== 1 ? 's' : ''}
|
||||
{conflictCount > 0 && (
|
||||
<> — <span className="text-amber-600 font-medium">{conflictCount} conflict{conflictCount !== 1 ? 's' : ''}</span></>
|
||||
)}
|
||||
{unreviewedCount > 0 && (
|
||||
<> ({unreviewedCount} pending review)</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1 max-h-[400px] overflow-y-auto">
|
||||
<div className="grid grid-cols-[1fr_1fr_80px_100px_100px] gap-2 text-xs text-muted-foreground font-medium px-3 py-2 sticky top-0 bg-background border-b">
|
||||
<span>Juror</span>
|
||||
<span>Project</span>
|
||||
<span>Conflict</span>
|
||||
<span>Type</span>
|
||||
<span>Action</span>
|
||||
</div>
|
||||
{declarations?.map((coi: any, idx: number) => (
|
||||
<div
|
||||
key={coi.id}
|
||||
className={cn(
|
||||
'grid grid-cols-[1fr_1fr_80px_100px_100px] gap-2 items-center px-3 py-2 rounded-md text-sm transition-colors',
|
||||
idx % 2 === 1 ? 'bg-muted/20' : 'hover:bg-muted/20',
|
||||
coi.hasConflict && !coi.reviewedAt && 'border-l-4 border-l-amber-500',
|
||||
)}
|
||||
>
|
||||
<span className="truncate">{coi.user?.name || coi.user?.email || 'Unknown'}</span>
|
||||
<span className="truncate text-muted-foreground">{coi.assignment?.project?.title || 'Unknown'}</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-[10px] justify-center',
|
||||
coi.hasConflict
|
||||
? 'bg-red-50 text-red-700 border-red-200'
|
||||
: 'bg-emerald-50 text-emerald-700 border-emerald-200',
|
||||
)}
|
||||
>
|
||||
{coi.hasConflict ? 'Yes' : 'No'}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{coi.hasConflict ? (coi.conflictType || 'Unspecified') : '\u2014'}
|
||||
</span>
|
||||
{coi.hasConflict ? (
|
||||
coi.reviewedAt ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-[10px] justify-center',
|
||||
coi.reviewAction === 'cleared'
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
||||
: coi.reviewAction === 'reassigned'
|
||||
? 'bg-blue-50 text-blue-700 border-blue-200'
|
||||
: 'bg-gray-50 text-gray-600 border-gray-200',
|
||||
)}
|
||||
>
|
||||
{coi.reviewAction === 'cleared' ? 'Cleared' : coi.reviewAction === 'reassigned' ? 'Reassigned' : 'Noted'}
|
||||
</Badge>
|
||||
) : (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs">
|
||||
<Eye className="h-3 w-3 mr-1" />
|
||||
Review
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => reviewMutation.mutate({ id: coi.id, reviewAction: 'cleared' })}
|
||||
disabled={reviewMutation.isPending}
|
||||
>
|
||||
<CheckCircle2 className="h-3.5 w-3.5 mr-2 text-emerald-600" />
|
||||
Clear — no real conflict
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => reviewMutation.mutate({ id: coi.id, reviewAction: 'reassigned' })}
|
||||
disabled={reviewMutation.isPending}
|
||||
>
|
||||
<UserPlus className="h-3.5 w-3.5 mr-2 text-blue-600" />
|
||||
Reassign to another juror
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => reviewMutation.mutate({ id: coi.id, reviewAction: 'noted' })}
|
||||
disabled={reviewMutation.isPending}
|
||||
>
|
||||
<FileText className="h-3.5 w-3.5 mr-2 text-gray-600" />
|
||||
Note — keep as is
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">—</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
854
src/components/admin/assignment/individual-assignments-table.tsx
Normal file
854
src/components/admin/assignment/individual-assignments-table.tsx
Normal file
@@ -0,0 +1,854 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/components/ui/command'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import {
|
||||
Loader2,
|
||||
Plus,
|
||||
Trash2,
|
||||
RotateCcw,
|
||||
Check,
|
||||
ChevronsUpDown,
|
||||
Search,
|
||||
MoreHorizontal,
|
||||
UserPlus,
|
||||
} from 'lucide-react'
|
||||
|
||||
export type IndividualAssignmentsTableProps = {
|
||||
roundId: string
|
||||
projectStates: any[] | undefined
|
||||
}
|
||||
|
||||
export function IndividualAssignmentsTable({
|
||||
roundId,
|
||||
projectStates,
|
||||
}: IndividualAssignmentsTableProps) {
|
||||
const [addDialogOpen, setAddDialogOpen] = useState(false)
|
||||
const [confirmAction, setConfirmAction] = useState<{ type: 'reset' | 'delete'; assignment: any } | null>(null)
|
||||
const [assignMode, setAssignMode] = useState<'byJuror' | 'byProject'>('byJuror')
|
||||
// ── By Juror mode state ──
|
||||
const [selectedJurorId, setSelectedJurorId] = useState('')
|
||||
const [selectedProjectIds, setSelectedProjectIds] = useState<Set<string>>(new Set())
|
||||
const [jurorPopoverOpen, setJurorPopoverOpen] = useState(false)
|
||||
const [projectSearch, setProjectSearch] = useState('')
|
||||
// ── By Project mode state ──
|
||||
const [selectedProjectId, setSelectedProjectId] = useState('')
|
||||
const [selectedJurorIds, setSelectedJurorIds] = useState<Set<string>>(new Set())
|
||||
const [projectPopoverOpen, setProjectPopoverOpen] = useState(false)
|
||||
const [jurorSearch, setJurorSearch] = useState('')
|
||||
|
||||
const utils = trpc.useUtils()
|
||||
const { data: assignments, isLoading } = trpc.assignment.listByStage.useQuery(
|
||||
{ roundId },
|
||||
{ refetchInterval: 15_000 },
|
||||
)
|
||||
|
||||
const { data: juryMembers } = trpc.user.getJuryMembers.useQuery(
|
||||
{ roundId },
|
||||
{ enabled: addDialogOpen },
|
||||
)
|
||||
|
||||
const deleteMutation = trpc.assignment.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
utils.roundEngine.getProjectStates.invalidate({ roundId })
|
||||
toast.success('Assignment removed')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const resetEvalMutation = trpc.evaluation.resetEvaluation.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
toast.success('Evaluation reset — juror can now start over')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const reassignCOIMutation = trpc.assignment.reassignCOI.useMutation({
|
||||
onSuccess: (data) => {
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
utils.roundEngine.getProjectStates.invalidate({ roundId })
|
||||
utils.analytics.getJurorWorkload.invalidate({ roundId })
|
||||
utils.evaluation.listCOIByStage.invalidate({ roundId })
|
||||
toast.success(`Reassigned to ${data.newJurorName}`)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const createMutation = trpc.assignment.create.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
utils.roundEngine.getProjectStates.invalidate({ roundId })
|
||||
utils.user.getJuryMembers.invalidate({ roundId })
|
||||
toast.success('Assignment created')
|
||||
resetDialog()
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const bulkCreateMutation = trpc.assignment.bulkCreate.useMutation({
|
||||
onSuccess: (result) => {
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
utils.roundEngine.getProjectStates.invalidate({ roundId })
|
||||
utils.user.getJuryMembers.invalidate({ roundId })
|
||||
toast.success(`${result.created} assignment(s) created`)
|
||||
resetDialog()
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const resetDialog = useCallback(() => {
|
||||
setAddDialogOpen(false)
|
||||
setAssignMode('byJuror')
|
||||
setSelectedJurorId('')
|
||||
setSelectedProjectIds(new Set())
|
||||
setProjectSearch('')
|
||||
setSelectedProjectId('')
|
||||
setSelectedJurorIds(new Set())
|
||||
setJurorSearch('')
|
||||
}, [])
|
||||
|
||||
const selectedJuror = useMemo(
|
||||
() => juryMembers?.find((j: any) => j.id === selectedJurorId),
|
||||
[juryMembers, selectedJurorId],
|
||||
)
|
||||
|
||||
// Filter projects by search term
|
||||
const filteredProjects = useMemo(() => {
|
||||
const items = projectStates ?? []
|
||||
if (!projectSearch) return items
|
||||
const q = projectSearch.toLowerCase()
|
||||
return items.filter((ps: any) =>
|
||||
ps.project?.title?.toLowerCase().includes(q) ||
|
||||
ps.project?.teamName?.toLowerCase().includes(q) ||
|
||||
ps.project?.competitionCategory?.toLowerCase().includes(q)
|
||||
)
|
||||
}, [projectStates, projectSearch])
|
||||
|
||||
// Existing assignments for the selected juror (to grey out already-assigned projects)
|
||||
const jurorExistingProjectIds = useMemo(() => {
|
||||
if (!selectedJurorId || !assignments) return new Set<string>()
|
||||
return new Set(
|
||||
assignments
|
||||
.filter((a: any) => a.userId === selectedJurorId)
|
||||
.map((a: any) => a.projectId)
|
||||
)
|
||||
}, [selectedJurorId, assignments])
|
||||
|
||||
const toggleProject = useCallback((projectId: string) => {
|
||||
setSelectedProjectIds(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(projectId)) {
|
||||
next.delete(projectId)
|
||||
} else {
|
||||
next.add(projectId)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const selectAllUnassigned = useCallback(() => {
|
||||
const unassigned = filteredProjects
|
||||
.filter((ps: any) => !jurorExistingProjectIds.has(ps.project?.id))
|
||||
.map((ps: any) => ps.project?.id)
|
||||
.filter(Boolean)
|
||||
setSelectedProjectIds(new Set(unassigned))
|
||||
}, [filteredProjects, jurorExistingProjectIds])
|
||||
|
||||
const handleCreate = useCallback(() => {
|
||||
if (!selectedJurorId || selectedProjectIds.size === 0) return
|
||||
|
||||
const projectIds = Array.from(selectedProjectIds)
|
||||
if (projectIds.length === 1) {
|
||||
createMutation.mutate({
|
||||
userId: selectedJurorId,
|
||||
projectId: projectIds[0],
|
||||
roundId,
|
||||
})
|
||||
} else {
|
||||
bulkCreateMutation.mutate({
|
||||
roundId,
|
||||
assignments: projectIds.map(projectId => ({
|
||||
userId: selectedJurorId,
|
||||
projectId,
|
||||
})),
|
||||
})
|
||||
}
|
||||
}, [selectedJurorId, selectedProjectIds, roundId, createMutation, bulkCreateMutation])
|
||||
|
||||
const isMutating = createMutation.isPending || bulkCreateMutation.isPending
|
||||
|
||||
// ── By Project mode helpers ──
|
||||
|
||||
// Existing assignments for the selected project (to grey out already-assigned jurors)
|
||||
const projectExistingJurorIds = useMemo(() => {
|
||||
if (!selectedProjectId || !assignments) return new Set<string>()
|
||||
return new Set(
|
||||
assignments
|
||||
.filter((a: any) => a.projectId === selectedProjectId)
|
||||
.map((a: any) => a.userId)
|
||||
)
|
||||
}, [selectedProjectId, assignments])
|
||||
|
||||
// Count assignments per juror in this round (for display)
|
||||
const jurorAssignmentCounts = useMemo(() => {
|
||||
if (!assignments) return new Map<string, number>()
|
||||
const counts = new Map<string, number>()
|
||||
for (const a of assignments) {
|
||||
counts.set(a.userId, (counts.get(a.userId) || 0) + 1)
|
||||
}
|
||||
return counts
|
||||
}, [assignments])
|
||||
|
||||
// Filter jurors by search term
|
||||
const filteredJurors = useMemo(() => {
|
||||
const items = juryMembers ?? []
|
||||
if (!jurorSearch) return items
|
||||
const q = jurorSearch.toLowerCase()
|
||||
return items.filter((j: any) =>
|
||||
j.name?.toLowerCase().includes(q) ||
|
||||
j.email?.toLowerCase().includes(q)
|
||||
)
|
||||
}, [juryMembers, jurorSearch])
|
||||
|
||||
const toggleJuror = useCallback((jurorId: string) => {
|
||||
setSelectedJurorIds(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(jurorId)) next.delete(jurorId)
|
||||
else next.add(jurorId)
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const handleCreateByProject = useCallback(() => {
|
||||
if (!selectedProjectId || selectedJurorIds.size === 0) return
|
||||
|
||||
const jurorIds = Array.from(selectedJurorIds)
|
||||
if (jurorIds.length === 1) {
|
||||
createMutation.mutate({
|
||||
userId: jurorIds[0],
|
||||
projectId: selectedProjectId,
|
||||
roundId,
|
||||
})
|
||||
} else {
|
||||
bulkCreateMutation.mutate({
|
||||
roundId,
|
||||
assignments: jurorIds.map(userId => ({
|
||||
userId,
|
||||
projectId: selectedProjectId,
|
||||
})),
|
||||
})
|
||||
}
|
||||
}, [selectedProjectId, selectedJurorIds, roundId, createMutation, bulkCreateMutation])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{assignments?.length ?? 0} individual assignments</p>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => setAddDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-1.5" />
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4, 5].map((i) => <Skeleton key={i} className="h-12 w-full" />)}
|
||||
</div>
|
||||
) : !assignments || assignments.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">
|
||||
No assignments yet. Generate assignments or add one manually.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-1 max-h-[500px] overflow-y-auto">
|
||||
<div className="grid grid-cols-[1fr_1fr_100px_70px] gap-2 text-xs text-muted-foreground font-medium px-3 py-2 sticky top-0 bg-background border-b">
|
||||
<span>Juror</span>
|
||||
<span>Project</span>
|
||||
<span>Status</span>
|
||||
<span>Actions</span>
|
||||
</div>
|
||||
{assignments.map((a: any, idx: number) => (
|
||||
<div
|
||||
key={a.id}
|
||||
className={cn(
|
||||
'grid grid-cols-[1fr_1fr_100px_70px] gap-2 items-center px-3 py-2 rounded-md text-sm transition-colors',
|
||||
idx % 2 === 1 ? 'bg-muted/20' : 'hover:bg-muted/20',
|
||||
)}
|
||||
>
|
||||
<span className="truncate">{a.user?.name || a.user?.email || 'Unknown'}</span>
|
||||
<span className="truncate text-muted-foreground">{a.project?.title || 'Unknown'}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{a.conflictOfInterest?.hasConflict ? (
|
||||
<Badge variant="outline" className="text-[10px] justify-center bg-red-50 text-red-700 border-red-200">
|
||||
COI
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-[10px] justify-center',
|
||||
a.evaluation?.status === 'SUBMITTED'
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
||||
: a.evaluation?.status === 'DRAFT'
|
||||
? 'bg-blue-50 text-blue-700 border-blue-200'
|
||||
: 'bg-gray-50 text-gray-600 border-gray-200',
|
||||
)}
|
||||
>
|
||||
{a.evaluation?.status || 'PENDING'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7">
|
||||
<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{a.conflictOfInterest?.hasConflict && (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
onClick={() => reassignCOIMutation.mutate({ assignmentId: a.id })}
|
||||
disabled={reassignCOIMutation.isPending}
|
||||
>
|
||||
<UserPlus className="h-3.5 w-3.5 mr-2 text-blue-600" />
|
||||
Reassign (COI)
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
{a.evaluation && (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
onClick={() => setConfirmAction({ type: 'reset', assignment: a })}
|
||||
disabled={resetEvalMutation.isPending}
|
||||
>
|
||||
<RotateCcw className="h-3.5 w-3.5 mr-2" />
|
||||
Reset Evaluation
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => setConfirmAction({ type: 'delete', assignment: a })}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 mr-2" />
|
||||
Delete Assignment
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add Assignment Dialog */}
|
||||
<Dialog open={addDialogOpen} onOpenChange={(open) => {
|
||||
if (!open) resetDialog()
|
||||
else setAddDialogOpen(true)
|
||||
}}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Assignment</DialogTitle>
|
||||
<DialogDescription>
|
||||
{assignMode === 'byJuror'
|
||||
? 'Select a juror, then choose projects to assign'
|
||||
: 'Select a project, then choose jurors to assign'
|
||||
}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Mode Toggle */}
|
||||
<Tabs value={assignMode} onValueChange={(v) => {
|
||||
setAssignMode(v as 'byJuror' | 'byProject')
|
||||
// Reset selections when switching
|
||||
setSelectedJurorId('')
|
||||
setSelectedProjectIds(new Set())
|
||||
setProjectSearch('')
|
||||
setSelectedProjectId('')
|
||||
setSelectedJurorIds(new Set())
|
||||
setJurorSearch('')
|
||||
}}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="byJuror">By Juror</TabsTrigger>
|
||||
<TabsTrigger value="byProject">By Project</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* ── By Juror Tab ── */}
|
||||
<TabsContent value="byJuror" className="space-y-4 mt-4">
|
||||
{/* Juror Selector */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">Juror</Label>
|
||||
<Popover open={jurorPopoverOpen} onOpenChange={setJurorPopoverOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={jurorPopoverOpen}
|
||||
className="w-full justify-between font-normal"
|
||||
>
|
||||
{selectedJuror
|
||||
? (
|
||||
<span className="flex items-center gap-2 truncate">
|
||||
<span className="truncate">{selectedJuror.name || selectedJuror.email}</span>
|
||||
<Badge variant="secondary" className="text-[10px] shrink-0">
|
||||
{selectedJuror.currentAssignments}/{selectedJuror.maxAssignments ?? '\u221E'}
|
||||
</Badge>
|
||||
</span>
|
||||
)
|
||||
: <span className="text-muted-foreground">Select a jury member...</span>
|
||||
}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search by name or email..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No jury members found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{juryMembers?.map((juror: any) => {
|
||||
const atCapacity = juror.maxAssignments !== null && juror.availableSlots === 0
|
||||
return (
|
||||
<CommandItem
|
||||
key={juror.id}
|
||||
value={`${juror.name ?? ''} ${juror.email}`}
|
||||
disabled={atCapacity}
|
||||
onSelect={() => {
|
||||
setSelectedJurorId(juror.id === selectedJurorId ? '' : juror.id)
|
||||
setSelectedProjectIds(new Set())
|
||||
setJurorPopoverOpen(false)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
selectedJurorId === juror.id ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-1 items-center justify-between min-w-0">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{juror.name || 'Unnamed'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{juror.email}
|
||||
</p>
|
||||
</div>
|
||||
<Badge
|
||||
variant={atCapacity ? 'destructive' : 'secondary'}
|
||||
className="text-[10px] ml-2 shrink-0"
|
||||
>
|
||||
{juror.currentAssignments}/{juror.maxAssignments ?? '\u221E'}
|
||||
{atCapacity ? ' full' : ''}
|
||||
</Badge>
|
||||
</div>
|
||||
</CommandItem>
|
||||
)
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Project Multi-Select */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium">
|
||||
Projects
|
||||
{selectedProjectIds.size > 0 && (
|
||||
<span className="ml-1.5 text-muted-foreground font-normal">
|
||||
({selectedProjectIds.size} selected)
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
{selectedJurorId && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={selectAllUnassigned}
|
||||
>
|
||||
Select all
|
||||
</Button>
|
||||
{selectedProjectIds.size > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setSelectedProjectIds(new Set())}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search input */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Filter projects..."
|
||||
value={projectSearch}
|
||||
onChange={(e) => setProjectSearch(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Project checklist */}
|
||||
<ScrollArea className="h-[320px] rounded-md border">
|
||||
<div className="p-2 space-y-0.5">
|
||||
{!selectedJurorId ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
Select a juror first
|
||||
</p>
|
||||
) : filteredProjects.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No projects found
|
||||
</p>
|
||||
) : (
|
||||
filteredProjects.map((ps: any) => {
|
||||
const project = ps.project
|
||||
if (!project) return null
|
||||
const alreadyAssigned = jurorExistingProjectIds.has(project.id)
|
||||
const isSelected = selectedProjectIds.has(project.id)
|
||||
|
||||
return (
|
||||
<label
|
||||
key={project.id}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-md px-2.5 py-2 text-sm cursor-pointer transition-colors',
|
||||
alreadyAssigned
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: isSelected
|
||||
? 'bg-accent'
|
||||
: 'hover:bg-muted/50',
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
disabled={alreadyAssigned}
|
||||
onCheckedChange={() => toggleProject(project.id)}
|
||||
/>
|
||||
<div className="flex flex-1 items-center justify-between min-w-0">
|
||||
<span className="truncate">{project.title}</span>
|
||||
<div className="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
{project.competitionCategory && (
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{project.competitionCategory === 'STARTUP'
|
||||
? 'Startup'
|
||||
: project.competitionCategory === 'BUSINESS_CONCEPT'
|
||||
? 'Concept'
|
||||
: project.competitionCategory}
|
||||
</Badge>
|
||||
)}
|
||||
{alreadyAssigned && (
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
Assigned
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={resetDialog}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreate}
|
||||
disabled={!selectedJurorId || selectedProjectIds.size === 0 || isMutating}
|
||||
>
|
||||
{isMutating && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
|
||||
{selectedProjectIds.size <= 1
|
||||
? 'Create Assignment'
|
||||
: `Create ${selectedProjectIds.size} Assignments`
|
||||
}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</TabsContent>
|
||||
|
||||
{/* ── By Project Tab ── */}
|
||||
<TabsContent value="byProject" className="space-y-4 mt-4">
|
||||
{/* Project Selector */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">Project</Label>
|
||||
<Popover open={projectPopoverOpen} onOpenChange={setProjectPopoverOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={projectPopoverOpen}
|
||||
className="w-full justify-between font-normal"
|
||||
>
|
||||
{selectedProjectId
|
||||
? (
|
||||
<span className="truncate">
|
||||
{(projectStates ?? []).find((ps: any) => ps.project?.id === selectedProjectId)?.project?.title || 'Unknown'}
|
||||
</span>
|
||||
)
|
||||
: <span className="text-muted-foreground">Select a project...</span>
|
||||
}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search by project title..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No projects found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{(projectStates ?? []).map((ps: any) => {
|
||||
const project = ps.project
|
||||
if (!project) return null
|
||||
return (
|
||||
<CommandItem
|
||||
key={project.id}
|
||||
value={`${project.title ?? ''} ${project.teamName ?? ''}`}
|
||||
onSelect={() => {
|
||||
setSelectedProjectId(project.id === selectedProjectId ? '' : project.id)
|
||||
setSelectedJurorIds(new Set())
|
||||
setProjectPopoverOpen(false)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
selectedProjectId === project.id ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-1 items-center justify-between min-w-0">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate">{project.title}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{project.teamName}</p>
|
||||
</div>
|
||||
{project.competitionCategory && (
|
||||
<Badge variant="outline" className="text-[10px] ml-2 shrink-0">
|
||||
{project.competitionCategory === 'STARTUP' ? 'Startup' : 'Concept'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
)
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Juror Multi-Select */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium">
|
||||
Jurors
|
||||
{selectedJurorIds.size > 0 && (
|
||||
<span className="ml-1.5 text-muted-foreground font-normal">
|
||||
({selectedJurorIds.size} selected)
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
{selectedProjectId && selectedJurorIds.size > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setSelectedJurorIds(new Set())}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search input */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Filter jurors..."
|
||||
value={jurorSearch}
|
||||
onChange={(e) => setJurorSearch(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Juror checklist */}
|
||||
<ScrollArea className="h-[320px] rounded-md border">
|
||||
<div className="p-2 space-y-0.5">
|
||||
{!selectedProjectId ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
Select a project first
|
||||
</p>
|
||||
) : filteredJurors.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No jurors found
|
||||
</p>
|
||||
) : (
|
||||
filteredJurors.map((juror: any) => {
|
||||
const alreadyAssigned = projectExistingJurorIds.has(juror.id)
|
||||
const isSelected = selectedJurorIds.has(juror.id)
|
||||
const assignCount = jurorAssignmentCounts.get(juror.id) ?? 0
|
||||
|
||||
return (
|
||||
<label
|
||||
key={juror.id}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-md px-2.5 py-2 text-sm cursor-pointer transition-colors',
|
||||
alreadyAssigned
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: isSelected
|
||||
? 'bg-accent'
|
||||
: 'hover:bg-muted/50',
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
disabled={alreadyAssigned}
|
||||
onCheckedChange={() => toggleJuror(juror.id)}
|
||||
/>
|
||||
<div className="flex flex-1 items-center justify-between min-w-0">
|
||||
<div className="min-w-0">
|
||||
<span className="font-medium truncate block">{juror.name || 'Unnamed'}</span>
|
||||
<span className="text-xs text-muted-foreground truncate block">{juror.email}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{assignCount} assigned
|
||||
</Badge>
|
||||
{alreadyAssigned && (
|
||||
<Badge variant="outline" className="text-[10px] bg-amber-50 text-amber-700 border-amber-200">
|
||||
Already on project
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={resetDialog}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateByProject}
|
||||
disabled={!selectedProjectId || selectedJurorIds.size === 0 || isMutating}
|
||||
>
|
||||
{isMutating && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
|
||||
{selectedJurorIds.size <= 1
|
||||
? 'Create Assignment'
|
||||
: `Create ${selectedJurorIds.size} Assignments`
|
||||
}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Confirmation AlertDialog for reset/delete */}
|
||||
<AlertDialog open={!!confirmAction} onOpenChange={(open) => { if (!open) setConfirmAction(null) }}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
{confirmAction?.type === 'reset' ? 'Reset evaluation?' : 'Delete assignment?'}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{confirmAction?.type === 'reset'
|
||||
? `Reset evaluation by ${confirmAction.assignment?.user?.name || confirmAction.assignment?.user?.email} for "${confirmAction.assignment?.project?.title}"? This will erase all scores and feedback so they can start over.`
|
||||
: `Remove assignment for ${confirmAction?.assignment?.user?.name || confirmAction?.assignment?.user?.email} on "${confirmAction?.assignment?.project?.title}"?`
|
||||
}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className={confirmAction?.type === 'delete' ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90' : ''}
|
||||
onClick={() => {
|
||||
if (confirmAction?.type === 'reset') {
|
||||
resetEvalMutation.mutate({ assignmentId: confirmAction.assignment.id })
|
||||
} else if (confirmAction?.type === 'delete') {
|
||||
deleteMutation.mutate({ id: confirmAction.assignment.id })
|
||||
}
|
||||
setConfirmAction(null)
|
||||
}}
|
||||
>
|
||||
{confirmAction?.type === 'reset' ? 'Reset' : 'Delete'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
180
src/components/admin/assignment/jury-progress-table.tsx
Normal file
180
src/components/admin/assignment/jury-progress-table.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import { Loader2, Mail, ArrowRightLeft, UserPlus } from 'lucide-react'
|
||||
import { TransferAssignmentsDialog } from './transfer-assignments-dialog'
|
||||
|
||||
export type JuryProgressTableProps = {
|
||||
roundId: string
|
||||
}
|
||||
|
||||
export function JuryProgressTable({ roundId }: JuryProgressTableProps) {
|
||||
const utils = trpc.useUtils()
|
||||
const [transferJuror, setTransferJuror] = useState<{ id: string; name: string } | null>(null)
|
||||
|
||||
const { data: workload, isLoading } = trpc.analytics.getJurorWorkload.useQuery(
|
||||
{ roundId },
|
||||
{ refetchInterval: 15_000 },
|
||||
)
|
||||
|
||||
const notifyMutation = trpc.assignment.notifySingleJurorOfAssignments.useMutation({
|
||||
onSuccess: (data) => {
|
||||
toast.success(`Notified juror of ${data.projectCount} assignment(s)`)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const reshuffleMutation = trpc.assignment.reassignDroppedJuror.useMutation({
|
||||
onSuccess: (data) => {
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
utils.roundEngine.getProjectStates.invalidate({ roundId })
|
||||
utils.analytics.getJurorWorkload.invalidate({ roundId })
|
||||
utils.roundAssignment.unassignedQueue.invalidate({ roundId })
|
||||
|
||||
if (data.failedCount > 0) {
|
||||
toast.warning(`Dropped juror and reassigned ${data.movedCount} project(s). ${data.failedCount} could not be reassigned (all remaining jurors at cap/blocked).`)
|
||||
} else {
|
||||
toast.success(`Dropped juror and reassigned ${data.movedCount} project(s) evenly across available jurors.`)
|
||||
}
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Jury Progress</CardTitle>
|
||||
<CardDescription>Evaluation completion per juror. Click the mail icon to notify an individual juror.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-10 w-full" />)}
|
||||
</div>
|
||||
) : !workload || workload.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">
|
||||
No assignments yet
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3 max-h-[350px] overflow-y-auto">
|
||||
{workload.map((juror) => {
|
||||
const pct = juror.completionRate
|
||||
const barGradient = pct === 100
|
||||
? 'bg-gradient-to-r from-emerald-400 to-emerald-600'
|
||||
: pct >= 50
|
||||
? 'bg-gradient-to-r from-blue-400 to-blue-600'
|
||||
: pct > 0
|
||||
? 'bg-gradient-to-r from-amber-400 to-amber-600'
|
||||
: 'bg-gray-300'
|
||||
|
||||
return (
|
||||
<div key={juror.id} className="space-y-1 hover:bg-muted/20 rounded px-1 py-0.5 -mx-1 transition-colors group">
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="font-medium truncate max-w-[50%]">{juror.name}</span>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span className="text-muted-foreground tabular-nums">
|
||||
{juror.completed}/{juror.assigned} ({pct}%)
|
||||
</span>
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 text-muted-foreground hover:text-foreground"
|
||||
disabled={notifyMutation.isPending}
|
||||
onClick={() => notifyMutation.mutate({ roundId, userId: juror.id })}
|
||||
>
|
||||
{notifyMutation.isPending && notifyMutation.variables?.userId === juror.id ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<Mail className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left"><p>Notify this juror of their assignments</p></TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setTransferJuror({ id: juror.id, name: juror.name })}
|
||||
>
|
||||
<ArrowRightLeft className="h-3 w-3" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left"><p>Transfer assignments to other jurors</p></TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 text-muted-foreground hover:text-destructive"
|
||||
disabled={reshuffleMutation.isPending}
|
||||
onClick={() => {
|
||||
const ok = window.confirm(
|
||||
`Remove ${juror.name} from this jury pool and reassign all their unsubmitted projects to other jurors within their caps? Submitted evaluations will be preserved. This cannot be undone.`
|
||||
)
|
||||
if (!ok) return
|
||||
reshuffleMutation.mutate({ roundId, jurorId: juror.id })
|
||||
}}
|
||||
>
|
||||
{reshuffleMutation.isPending && reshuffleMutation.variables?.jurorId === juror.id ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<UserPlus className="h-3 w-3" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left"><p>Drop juror + reshuffle pending projects</p></TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className={cn('h-full rounded-full transition-all duration-500', barGradient)}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{transferJuror && (
|
||||
<TransferAssignmentsDialog
|
||||
roundId={roundId}
|
||||
sourceJuror={transferJuror}
|
||||
open={!!transferJuror}
|
||||
onClose={() => setTransferJuror(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
61
src/components/admin/assignment/notify-jurors-button.tsx
Normal file
61
src/components/admin/assignment/notify-jurors-button.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import { Mail, Loader2 } from 'lucide-react'
|
||||
|
||||
export type NotifyJurorsButtonProps = {
|
||||
roundId: string
|
||||
}
|
||||
|
||||
export function NotifyJurorsButton({ roundId }: NotifyJurorsButtonProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const mutation = trpc.assignment.notifyJurorsOfAssignments.useMutation({
|
||||
onSuccess: (data) => {
|
||||
toast.success(`Notified ${data.jurorCount} juror(s) of their assignments`)
|
||||
setOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => setOpen(true)}>
|
||||
<Mail className="h-4 w-4 mr-1.5" />
|
||||
Notify Jurors
|
||||
</Button>
|
||||
<AlertDialog open={open} onOpenChange={setOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Notify jurors of their assignments?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will send an email to every juror assigned to this round, reminding them of how many projects they need to evaluate.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => mutation.mutate({ roundId })}
|
||||
disabled={mutation.isPending}
|
||||
>
|
||||
{mutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
|
||||
Notify Jurors
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
111
src/components/admin/assignment/reassignment-history.tsx
Normal file
111
src/components/admin/assignment/reassignment-history.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { History, ChevronRight } from 'lucide-react'
|
||||
|
||||
export type ReassignmentHistoryProps = {
|
||||
roundId: string
|
||||
}
|
||||
|
||||
export function ReassignmentHistory({ roundId }: ReassignmentHistoryProps) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const { data: events, isLoading } = trpc.assignment.getReassignmentHistory.useQuery(
|
||||
{ roundId },
|
||||
{ enabled: expanded },
|
||||
)
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
className="cursor-pointer select-none"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<History className="h-4 w-4" />
|
||||
Reassignment History
|
||||
<ChevronRight className={cn('h-4 w-4 ml-auto transition-transform', expanded && 'rotate-90')} />
|
||||
</CardTitle>
|
||||
<CardDescription>Juror dropout, COI, transfer, and cap redistribution audit trail</CardDescription>
|
||||
</CardHeader>
|
||||
{expanded && (
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[1, 2].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
|
||||
</div>
|
||||
) : !events || events.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">
|
||||
No reassignment events for this round
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4 max-h-[500px] overflow-y-auto">
|
||||
{events.map((event) => (
|
||||
<div key={event.id} className="border rounded-lg p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={event.type === 'DROPOUT' ? 'destructive' : 'secondary'}>
|
||||
{event.type === 'DROPOUT' ? 'Juror Dropout' : event.type === 'COI' ? 'COI Reassignment' : event.type === 'TRANSFER' ? 'Assignment Transfer' : 'Cap Redistribution'}
|
||||
</Badge>
|
||||
<span className="text-sm font-medium">
|
||||
{event.droppedJuror.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(event.timestamp).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
By {event.performedBy.name || event.performedBy.email} — {event.movedCount} project(s) reassigned
|
||||
{event.failedCount > 0 && `, ${event.failedCount} failed`}
|
||||
</p>
|
||||
|
||||
{event.moves.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="text-muted-foreground border-b">
|
||||
<th className="text-left py-1 font-medium">Project</th>
|
||||
<th className="text-left py-1 font-medium">Reassigned To</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{event.moves.map((move, i) => (
|
||||
<tr key={i} className="border-b last:border-0">
|
||||
<td className="py-1.5 pr-2 max-w-[250px] truncate">
|
||||
{move.projectTitle}
|
||||
</td>
|
||||
<td className="py-1.5 font-medium">
|
||||
{move.newJurorName}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{event.failedProjects.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<p className="text-xs font-medium text-destructive">Could not reassign:</p>
|
||||
<ul className="text-xs text-muted-foreground list-disc list-inside">
|
||||
{event.failedProjects.map((p, i) => (
|
||||
<li key={i}>{p}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
66
src/components/admin/assignment/round-unassigned-queue.tsx
Normal file
66
src/components/admin/assignment/round-unassigned-queue.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
'use client'
|
||||
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
export type RoundUnassignedQueueProps = {
|
||||
roundId: string
|
||||
requiredReviews?: number
|
||||
}
|
||||
|
||||
export function RoundUnassignedQueue({ roundId, requiredReviews = 3 }: RoundUnassignedQueueProps) {
|
||||
const { data: unassigned, isLoading } = trpc.roundAssignment.unassignedQueue.useQuery(
|
||||
{ roundId, requiredReviews },
|
||||
{ refetchInterval: 15_000 },
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Unassigned Projects</p>
|
||||
<p className="text-xs text-muted-foreground">Projects with fewer than {requiredReviews} jury assignments</p>
|
||||
</div>
|
||||
<div>
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
|
||||
</div>
|
||||
) : unassigned && unassigned.length > 0 ? (
|
||||
<div className="space-y-2 max-h-[400px] overflow-y-auto">
|
||||
{unassigned.map((project: any) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className={cn(
|
||||
'flex justify-between items-center p-3 border rounded-md hover:bg-muted/30 transition-colors',
|
||||
(project.assignmentCount || 0) === 0 && 'border-l-4 border-l-red-500',
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate">{project.title}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{project.competitionCategory || 'No category'}
|
||||
{project.teamName && ` \u00b7 ${project.teamName}`}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="outline" className={cn(
|
||||
'text-xs shrink-0 ml-3',
|
||||
(project.assignmentCount || 0) === 0
|
||||
? 'bg-red-50 text-red-700 border-red-200'
|
||||
: 'bg-amber-50 text-amber-700 border-amber-200',
|
||||
)}>
|
||||
{project.assignmentCount || 0} / {requiredReviews}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">
|
||||
All projects have sufficient assignments
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
61
src/components/admin/assignment/send-reminders-button.tsx
Normal file
61
src/components/admin/assignment/send-reminders-button.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import { Send, Loader2 } from 'lucide-react'
|
||||
|
||||
export type SendRemindersButtonProps = {
|
||||
roundId: string
|
||||
}
|
||||
|
||||
export function SendRemindersButton({ roundId }: SendRemindersButtonProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const mutation = trpc.evaluation.triggerReminders.useMutation({
|
||||
onSuccess: (data) => {
|
||||
toast.success(`Sent ${data.sent} reminder(s)`)
|
||||
setOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => setOpen(true)}>
|
||||
<Send className="h-4 w-4 mr-1.5" />
|
||||
Send Reminders
|
||||
</Button>
|
||||
<AlertDialog open={open} onOpenChange={setOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Send evaluation reminders?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will send reminder emails to all jurors who have incomplete evaluations for this round.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => mutation.mutate({ roundId })}
|
||||
disabled={mutation.isPending}
|
||||
>
|
||||
{mutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
|
||||
Send Reminders
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
328
src/components/admin/assignment/transfer-assignments-dialog.tsx
Normal file
328
src/components/admin/assignment/transfer-assignments-dialog.tsx
Normal file
@@ -0,0 +1,328 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Loader2, Sparkles } from 'lucide-react'
|
||||
|
||||
export type TransferAssignmentsDialogProps = {
|
||||
roundId: string
|
||||
sourceJuror: { id: string; name: string }
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function TransferAssignmentsDialog({
|
||||
roundId,
|
||||
sourceJuror,
|
||||
open,
|
||||
onClose,
|
||||
}: TransferAssignmentsDialogProps) {
|
||||
const utils = trpc.useUtils()
|
||||
const [step, setStep] = useState<1 | 2>(1)
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
|
||||
// Fetch source juror's assignments
|
||||
const { data: sourceAssignments, isLoading: loadingAssignments } = trpc.assignment.listByStage.useQuery(
|
||||
{ roundId },
|
||||
{ enabled: open },
|
||||
)
|
||||
|
||||
const jurorAssignments = useMemo(() =>
|
||||
(sourceAssignments ?? []).filter((a: any) => a.userId === sourceJuror.id),
|
||||
[sourceAssignments, sourceJuror.id],
|
||||
)
|
||||
|
||||
// Fetch transfer candidates when in step 2
|
||||
const { data: candidateData, isLoading: loadingCandidates } = trpc.assignment.getTransferCandidates.useQuery(
|
||||
{ roundId, sourceJurorId: sourceJuror.id, assignmentIds: [...selectedIds] },
|
||||
{ enabled: step === 2 && selectedIds.size > 0 },
|
||||
)
|
||||
|
||||
// Per-assignment destination overrides
|
||||
const [destOverrides, setDestOverrides] = useState<Record<string, string>>({})
|
||||
const [forceOverCap, setForceOverCap] = useState(false)
|
||||
|
||||
// Auto-assign: distribute assignments across eligible candidates balanced by load
|
||||
const handleAutoAssign = () => {
|
||||
if (!candidateData) return
|
||||
const movable = candidateData.assignments.filter((a) => a.movable)
|
||||
if (movable.length === 0) return
|
||||
|
||||
// Simulate load starting from each candidate's current load
|
||||
const simLoad = new Map<string, number>()
|
||||
for (const c of candidateData.candidates) {
|
||||
simLoad.set(c.userId, c.currentLoad)
|
||||
}
|
||||
|
||||
const overrides: Record<string, string> = {}
|
||||
|
||||
for (const assignment of movable) {
|
||||
const eligible = candidateData.candidates
|
||||
.filter((c) => c.eligibleProjectIds.includes(assignment.projectId))
|
||||
|
||||
if (eligible.length === 0) continue
|
||||
|
||||
// Sort: prefer not-all-completed, then under cap, then lowest simulated load
|
||||
const sorted = [...eligible].sort((a, b) => {
|
||||
// Prefer jurors who haven't completed all evaluations
|
||||
if (a.allCompleted !== b.allCompleted) return a.allCompleted ? 1 : -1
|
||||
const loadA = simLoad.get(a.userId) ?? 0
|
||||
const loadB = simLoad.get(b.userId) ?? 0
|
||||
// Prefer jurors under their cap
|
||||
const overCapA = loadA >= a.cap ? 1 : 0
|
||||
const overCapB = loadB >= b.cap ? 1 : 0
|
||||
if (overCapA !== overCapB) return overCapA - overCapB
|
||||
// Then pick the least loaded
|
||||
return loadA - loadB
|
||||
})
|
||||
|
||||
const best = sorted[0]
|
||||
overrides[assignment.id] = best.userId
|
||||
simLoad.set(best.userId, (simLoad.get(best.userId) ?? 0) + 1)
|
||||
}
|
||||
|
||||
setDestOverrides(overrides)
|
||||
}
|
||||
|
||||
const transferMutation = trpc.assignment.transferAssignments.useMutation({
|
||||
onSuccess: (data) => {
|
||||
utils.assignment.listByStage.invalidate({ roundId })
|
||||
utils.analytics.getJurorWorkload.invalidate({ roundId })
|
||||
utils.roundAssignment.unassignedQueue.invalidate({ roundId })
|
||||
utils.assignment.getReassignmentHistory.invalidate({ roundId })
|
||||
|
||||
const successCount = data.succeeded.length
|
||||
const failCount = data.failed.length
|
||||
if (failCount > 0) {
|
||||
toast.warning(`Transferred ${successCount} project(s). ${failCount} failed.`)
|
||||
} else {
|
||||
toast.success(`Transferred ${successCount} project(s) successfully.`)
|
||||
}
|
||||
onClose()
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
// Build the transfer plan: for each selected assignment, determine destination
|
||||
const transferPlan = useMemo(() => {
|
||||
if (!candidateData) return []
|
||||
const movable = candidateData.assignments.filter((a) => a.movable)
|
||||
return movable.map((assignment) => {
|
||||
const override = destOverrides[assignment.id]
|
||||
// Default: first eligible candidate
|
||||
const defaultDest = candidateData.candidates.find((c) =>
|
||||
c.eligibleProjectIds.includes(assignment.projectId)
|
||||
)
|
||||
const destId = override || defaultDest?.userId || ''
|
||||
const destName = candidateData.candidates.find((c) => c.userId === destId)?.name || ''
|
||||
return { assignmentId: assignment.id, projectTitle: assignment.projectTitle, destinationJurorId: destId, destName }
|
||||
}).filter((t) => t.destinationJurorId)
|
||||
}, [candidateData, destOverrides])
|
||||
|
||||
// Check if any destination is at or over cap
|
||||
const anyOverCap = useMemo(() => {
|
||||
if (!candidateData) return false
|
||||
const destCounts = new Map<string, number>()
|
||||
for (const t of transferPlan) {
|
||||
destCounts.set(t.destinationJurorId, (destCounts.get(t.destinationJurorId) ?? 0) + 1)
|
||||
}
|
||||
return candidateData.candidates.some((c) => {
|
||||
const extraLoad = destCounts.get(c.userId) ?? 0
|
||||
return c.currentLoad + extraLoad > c.cap
|
||||
})
|
||||
}, [candidateData, transferPlan])
|
||||
|
||||
const handleTransfer = () => {
|
||||
transferMutation.mutate({
|
||||
roundId,
|
||||
sourceJurorId: sourceJuror.id,
|
||||
transfers: transferPlan.map((t) => ({ assignmentId: t.assignmentId, destinationJurorId: t.destinationJurorId })),
|
||||
forceOverCap,
|
||||
})
|
||||
}
|
||||
|
||||
const isMovable = (a: any) => {
|
||||
const status = a.evaluation?.status
|
||||
return !status || status === 'NOT_STARTED' || status === 'DRAFT'
|
||||
}
|
||||
|
||||
const movableAssignments = jurorAssignments.filter(isMovable)
|
||||
const allMovableSelected = movableAssignments.length > 0 && movableAssignments.every((a: any) => selectedIds.has(a.id))
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Transfer Assignments from {sourceJuror.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{step === 1 ? 'Select projects to transfer to other jurors.' : 'Choose destination jurors for each project.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{step === 1 && (
|
||||
<div className="space-y-3">
|
||||
{loadingAssignments ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-10 w-full" />)}
|
||||
</div>
|
||||
) : jurorAssignments.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">No assignments found.</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-2 pb-2 border-b">
|
||||
<Checkbox
|
||||
checked={allMovableSelected}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedIds(new Set(movableAssignments.map((a: any) => a.id)))
|
||||
} else {
|
||||
setSelectedIds(new Set())
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">Select all movable ({movableAssignments.length})</span>
|
||||
</div>
|
||||
<div className="space-y-1 max-h-[400px] overflow-y-auto">
|
||||
{jurorAssignments.map((a: any) => {
|
||||
const movable = isMovable(a)
|
||||
const status = a.evaluation?.status || 'No evaluation'
|
||||
return (
|
||||
<div key={a.id} className={cn('flex items-center gap-3 py-2 px-2 rounded-md', !movable && 'opacity-50')}>
|
||||
<Checkbox
|
||||
checked={selectedIds.has(a.id)}
|
||||
disabled={!movable}
|
||||
onCheckedChange={(checked) => {
|
||||
const next = new Set(selectedIds)
|
||||
if (checked) next.add(a.id)
|
||||
else next.delete(a.id)
|
||||
setSelectedIds(next)
|
||||
}}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm truncate">{a.project?.title || 'Unknown'}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs shrink-0">
|
||||
{status}
|
||||
</Badge>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose}>Cancel</Button>
|
||||
<Button
|
||||
disabled={selectedIds.size === 0}
|
||||
onClick={() => { setStep(2); setDestOverrides({}) }}
|
||||
>
|
||||
Next ({selectedIds.size} selected)
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="space-y-3">
|
||||
{loadingCandidates ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-10 w-full" />)}
|
||||
</div>
|
||||
) : !candidateData || candidateData.candidates.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">No eligible candidates found.</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-end">
|
||||
<Button variant="outline" size="sm" onClick={handleAutoAssign}>
|
||||
<Sparkles className="mr-1.5 h-3.5 w-3.5" />
|
||||
Auto-assign
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2 max-h-[350px] overflow-y-auto">
|
||||
{candidateData.assignments.filter((a) => a.movable).map((assignment) => {
|
||||
const currentDest = destOverrides[assignment.id] ||
|
||||
candidateData.candidates.find((c) => c.eligibleProjectIds.includes(assignment.projectId))?.userId || ''
|
||||
return (
|
||||
<div key={assignment.id} className="flex items-center gap-3 py-2 px-2 border rounded-md">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm truncate">{assignment.projectTitle}</p>
|
||||
<p className="text-xs text-muted-foreground">{assignment.evalStatus || 'No evaluation'}</p>
|
||||
</div>
|
||||
<Select
|
||||
value={currentDest}
|
||||
onValueChange={(v) => setDestOverrides((prev) => ({ ...prev, [assignment.id]: v }))}
|
||||
>
|
||||
<SelectTrigger className="w-[200px] h-8 text-xs">
|
||||
<SelectValue placeholder="Select juror" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{candidateData.candidates
|
||||
.filter((c) => c.eligibleProjectIds.includes(assignment.projectId))
|
||||
.map((c) => (
|
||||
<SelectItem key={c.userId} value={c.userId}>
|
||||
<span>{c.name}</span>
|
||||
<span className="text-muted-foreground ml-1">({c.currentLoad}/{c.cap})</span>
|
||||
{c.allCompleted && <span className="text-emerald-600 ml-1">Done</span>}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{transferPlan.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Transfer {transferPlan.length} project(s) from {sourceJuror.name}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{anyOverCap && (
|
||||
<div className="flex items-center gap-2 p-2 border border-amber-200 bg-amber-50 rounded-md">
|
||||
<Checkbox
|
||||
checked={forceOverCap}
|
||||
onCheckedChange={(checked) => setForceOverCap(!!checked)}
|
||||
/>
|
||||
<span className="text-xs text-amber-800">Force over-cap: some destinations will exceed their assignment limit</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setStep(1)}>Back</Button>
|
||||
<Button
|
||||
disabled={transferPlan.length === 0 || transferMutation.isPending || (anyOverCap && !forceOverCap)}
|
||||
onClick={handleTransfer}
|
||||
>
|
||||
{transferMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> : null}
|
||||
Transfer {transferPlan.length} project(s)
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -6,24 +6,18 @@ import { Badge } from '@/components/ui/badge'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { format } from 'date-fns'
|
||||
import { CheckCircle2, Circle, Clock } from 'lucide-react'
|
||||
import {
|
||||
roundTypeConfig as sharedRoundTypeConfig,
|
||||
roundStatusConfig as sharedRoundStatusConfig,
|
||||
} from '@/lib/round-config'
|
||||
|
||||
const roundTypeColors: Record<string, string> = {
|
||||
INTAKE: 'bg-gray-100 text-gray-700 border-gray-300',
|
||||
FILTERING: 'bg-amber-100 text-amber-700 border-amber-300',
|
||||
EVALUATION: 'bg-blue-100 text-blue-700 border-blue-300',
|
||||
SUBMISSION: 'bg-purple-100 text-purple-700 border-purple-300',
|
||||
MENTORING: 'bg-teal-100 text-teal-700 border-teal-300',
|
||||
LIVE_FINAL: 'bg-red-100 text-red-700 border-red-300',
|
||||
DELIBERATION: 'bg-indigo-100 text-indigo-700 border-indigo-300',
|
||||
}
|
||||
const roundTypeColors: Record<string, string> = Object.fromEntries(
|
||||
Object.entries(sharedRoundTypeConfig).map(([k, v]) => [k, `${v.badgeClass} ${v.cardBorder}`])
|
||||
)
|
||||
|
||||
const roundStatusConfig: Record<string, { icon: typeof Circle; color: string }> = {
|
||||
ROUND_DRAFT: { icon: Circle, color: 'text-gray-400' },
|
||||
ROUND_ACTIVE: { icon: Clock, color: 'text-emerald-500' },
|
||||
ROUND_CLOSED: { icon: CheckCircle2, color: 'text-blue-500' },
|
||||
ROUND_ARCHIVED: { icon: CheckCircle2, color: 'text-gray-400' },
|
||||
}
|
||||
const roundStatusConfig: Record<string, { icon: React.ElementType; color: string }> = Object.fromEntries(
|
||||
Object.entries(sharedRoundStatusConfig).map(([k, v]) => [k, { icon: v.timelineIcon, color: v.timelineIconColor }])
|
||||
)
|
||||
|
||||
type RoundSummary = {
|
||||
id: string
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { AlertCircle, CheckCircle2 } from 'lucide-react'
|
||||
import { roundTypeConfig } from '@/lib/round-config'
|
||||
|
||||
type WizardRound = {
|
||||
tempId: string
|
||||
@@ -40,15 +41,9 @@ type ReviewSectionProps = {
|
||||
state: WizardState
|
||||
}
|
||||
|
||||
const roundTypeColors: Record<string, string> = {
|
||||
INTAKE: 'bg-gray-100 text-gray-700',
|
||||
FILTERING: 'bg-amber-100 text-amber-700',
|
||||
EVALUATION: 'bg-blue-100 text-blue-700',
|
||||
SUBMISSION: 'bg-purple-100 text-purple-700',
|
||||
MENTORING: 'bg-teal-100 text-teal-700',
|
||||
LIVE_FINAL: 'bg-red-100 text-red-700',
|
||||
DELIBERATION: 'bg-indigo-100 text-indigo-700',
|
||||
}
|
||||
const roundTypeColors: Record<string, string> = Object.fromEntries(
|
||||
Object.entries(roundTypeConfig).map(([k, v]) => [k, v.badgeClass])
|
||||
)
|
||||
|
||||
export function ReviewSection({ state }: ReviewSectionProps) {
|
||||
const warnings: string[] = []
|
||||
|
||||
164
src/components/admin/jury/inline-member-cap.tsx
Normal file
164
src/components/admin/jury/inline-member-cap.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Loader2, Pencil } from 'lucide-react'
|
||||
|
||||
export type InlineMemberCapProps = {
|
||||
memberId: string
|
||||
currentValue: number | null
|
||||
onSave: (val: number | null) => void
|
||||
roundId?: string
|
||||
jurorUserId?: string
|
||||
}
|
||||
|
||||
export function InlineMemberCap({
|
||||
memberId,
|
||||
currentValue,
|
||||
onSave,
|
||||
roundId,
|
||||
jurorUserId,
|
||||
}: InlineMemberCapProps) {
|
||||
const utils = trpc.useUtils()
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [value, setValue] = useState(currentValue?.toString() ?? '')
|
||||
const [overCapInfo, setOverCapInfo] = useState<{ total: number; overCapCount: number; movableOverCap: number; immovableOverCap: number } | null>(null)
|
||||
const [showBanner, setShowBanner] = useState(false)
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const redistributeMutation = trpc.assignment.redistributeOverCap.useMutation({
|
||||
onSuccess: (data) => {
|
||||
utils.assignment.listByStage.invalidate()
|
||||
utils.analytics.getJurorWorkload.invalidate()
|
||||
utils.roundAssignment.unassignedQueue.invalidate()
|
||||
setShowBanner(false)
|
||||
setOverCapInfo(null)
|
||||
if (data.failed > 0) {
|
||||
toast.warning(`Redistributed ${data.redistributed} project(s). ${data.failed} could not be reassigned.`)
|
||||
} else {
|
||||
toast.success(`Redistributed ${data.redistributed} project(s) to other jurors.`)
|
||||
}
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (editing) inputRef.current?.focus()
|
||||
}, [editing])
|
||||
|
||||
const save = async () => {
|
||||
const trimmed = value.trim()
|
||||
const newVal = trimmed === '' ? null : parseInt(trimmed, 10)
|
||||
if (newVal !== null && (isNaN(newVal) || newVal < 1)) {
|
||||
toast.error('Enter a positive number or leave empty for no cap')
|
||||
return
|
||||
}
|
||||
if (newVal === currentValue) {
|
||||
setEditing(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Check over-cap impact before saving
|
||||
if (newVal !== null && roundId && jurorUserId) {
|
||||
try {
|
||||
const preview = await utils.client.assignment.getOverCapPreview.query({
|
||||
roundId,
|
||||
jurorId: jurorUserId,
|
||||
newCap: newVal,
|
||||
})
|
||||
if (preview.overCapCount > 0) {
|
||||
setOverCapInfo(preview)
|
||||
setShowBanner(true)
|
||||
setEditing(false)
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// If preview fails, just save the cap normally
|
||||
}
|
||||
}
|
||||
|
||||
onSave(newVal)
|
||||
setEditing(false)
|
||||
}
|
||||
|
||||
const handleRedistribute = () => {
|
||||
const newVal = parseInt(value.trim(), 10)
|
||||
onSave(newVal)
|
||||
if (roundId && jurorUserId) {
|
||||
redistributeMutation.mutate({ roundId, jurorId: jurorUserId, newCap: newVal })
|
||||
}
|
||||
}
|
||||
|
||||
const handleJustSave = () => {
|
||||
const newVal = value.trim() === '' ? null : parseInt(value.trim(), 10)
|
||||
onSave(newVal)
|
||||
setShowBanner(false)
|
||||
setOverCapInfo(null)
|
||||
}
|
||||
|
||||
if (showBanner && overCapInfo) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-xs text-amber-800">
|
||||
<p>New cap of <strong>{value}</strong> is below current load (<strong>{overCapInfo.total}</strong> assignments). <strong>{overCapInfo.movableOverCap}</strong> can be redistributed.</p>
|
||||
{overCapInfo.immovableOverCap > 0 && (
|
||||
<p className="text-amber-600 mt-0.5">{overCapInfo.immovableOverCap} submitted evaluation(s) cannot be moved.</p>
|
||||
)}
|
||||
<div className="flex gap-1.5 mt-1.5">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
className="h-6 text-xs px-2"
|
||||
disabled={redistributeMutation.isPending || overCapInfo.movableOverCap === 0}
|
||||
onClick={handleRedistribute}
|
||||
>
|
||||
{redistributeMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : null}
|
||||
Redistribute
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="h-6 text-xs px-2" onClick={handleJustSave}>
|
||||
Just save cap
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" className="h-6 text-xs px-2" onClick={() => { setShowBanner(false); setOverCapInfo(null) }}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="number"
|
||||
min={1}
|
||||
className="h-6 w-16 text-xs"
|
||||
value={value}
|
||||
placeholder="\u221E"
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onBlur={save}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') save()
|
||||
if (e.key === 'Escape') { setValue(currentValue?.toString() ?? ''); setEditing(false) }
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs hover:bg-muted transition-colors group"
|
||||
title="Click to set max assignment cap"
|
||||
onClick={() => { setValue(currentValue?.toString() ?? ''); setEditing(true) }}
|
||||
>
|
||||
<span className="text-muted-foreground">max:</span>
|
||||
<span className="font-medium">{currentValue ?? '\u221E'}</span>
|
||||
<Pencil className="h-2.5 w-2.5 text-muted-foreground" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
165
src/components/admin/program/competition-settings.tsx
Normal file
165
src/components/admin/program/competition-settings.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
'use client'
|
||||
|
||||
import { 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 { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Loader2, Save, Settings } from 'lucide-react'
|
||||
|
||||
type CompetitionSettingsProps = {
|
||||
competitionId: string
|
||||
initialSettings: {
|
||||
categoryMode: string
|
||||
startupFinalistCount: number
|
||||
conceptFinalistCount: number
|
||||
notifyOnRoundAdvance: boolean
|
||||
notifyOnDeadlineApproach: boolean
|
||||
deadlineReminderDays: number[]
|
||||
}
|
||||
}
|
||||
|
||||
export function CompetitionSettings({ competitionId, initialSettings }: CompetitionSettingsProps) {
|
||||
const [settings, setSettings] = useState(initialSettings)
|
||||
const [dirty, setDirty] = useState(false)
|
||||
|
||||
const updateMutation = trpc.competition.update.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Competition settings saved')
|
||||
setDirty(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
function update<K extends keyof typeof settings>(key: K, value: (typeof settings)[K]) {
|
||||
setSettings((prev) => ({ ...prev, [key]: value }))
|
||||
setDirty(true)
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
updateMutation.mutate({ id: competitionId, ...settings })
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
Competition Settings
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Category mode, finalist targets, and notification preferences
|
||||
</CardDescription>
|
||||
</div>
|
||||
{dirty && (
|
||||
<Button onClick={handleSave} disabled={updateMutation.isPending} size="sm">
|
||||
{updateMutation.isPending ? (
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Save Changes
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Category Mode</Label>
|
||||
<Select value={settings.categoryMode} onValueChange={(v) => update('categoryMode', v)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="SHARED">Shared Pool</SelectItem>
|
||||
<SelectItem value="SEPARATE">Separate Tracks</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Startup Finalist Count</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={settings.startupFinalistCount}
|
||||
onChange={(e) => update('startupFinalistCount', parseInt(e.target.value) || 1)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Concept Finalist Count</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={settings.conceptFinalistCount}
|
||||
onChange={(e) => update('conceptFinalistCount', parseInt(e.target.value) || 1)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-medium">Notifications</h4>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Notify on Round Advance</Label>
|
||||
<p className="text-xs text-muted-foreground">Email applicants when their project advances</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.notifyOnRoundAdvance}
|
||||
onCheckedChange={(v) => update('notifyOnRoundAdvance', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Notify on Deadline Approach</Label>
|
||||
<p className="text-xs text-muted-foreground">Send reminders before deadlines</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.notifyOnDeadlineApproach}
|
||||
onCheckedChange={(v) => update('notifyOnDeadlineApproach', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Reminder Days Before Deadline</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
{settings.deadlineReminderDays.map((day, idx) => (
|
||||
<Badge key={idx} variant="secondary" className="gap-1">
|
||||
{day}d
|
||||
<button
|
||||
className="ml-1 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => {
|
||||
const next = settings.deadlineReminderDays.filter((_, i) => i !== idx)
|
||||
update('deadlineReminderDays', next)
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
placeholder="Add..."
|
||||
className="w-20 h-7 text-xs"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const val = parseInt((e.target as HTMLInputElement).value)
|
||||
if (val > 0 && !settings.deadlineReminderDays.includes(val)) {
|
||||
update('deadlineReminderDays', [...settings.deadlineReminderDays, val].sort((a, b) => b - a))
|
||||
;(e.target as HTMLInputElement).value = ''
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
289
src/components/admin/round/advance-projects-dialog.tsx
Normal file
289
src/components/admin/round/advance-projects-dialog.tsx
Normal file
@@ -0,0 +1,289 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
|
||||
export type AdvanceProjectsDialogProps = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
roundId: string
|
||||
roundType?: string
|
||||
projectStates: any[] | undefined
|
||||
config: Record<string, unknown>
|
||||
advanceMutation: { mutate: (input: { roundId: string; projectIds?: string[]; targetRoundId?: string; autoPassPending?: boolean }) => void; isPending: boolean }
|
||||
competitionRounds?: Array<{ id: string; name: string; sortOrder: number; roundType: string }>
|
||||
currentSortOrder?: number
|
||||
}
|
||||
|
||||
export function AdvanceProjectsDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
roundId,
|
||||
roundType,
|
||||
projectStates,
|
||||
config,
|
||||
advanceMutation,
|
||||
competitionRounds,
|
||||
currentSortOrder,
|
||||
}: AdvanceProjectsDialogProps) {
|
||||
// For non-jury rounds (INTAKE, SUBMISSION, MENTORING), offer a simpler "advance all" flow
|
||||
const isSimpleAdvance = ['INTAKE', 'SUBMISSION', 'MENTORING'].includes(roundType ?? '')
|
||||
// Target round selector
|
||||
const availableTargets = useMemo(() =>
|
||||
(competitionRounds ?? [])
|
||||
.filter((r) => r.sortOrder > (currentSortOrder ?? -1) && r.id !== roundId)
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder),
|
||||
[competitionRounds, currentSortOrder, roundId])
|
||||
|
||||
const [targetRoundId, setTargetRoundId] = useState<string>('')
|
||||
|
||||
// Default to first available target when dialog opens
|
||||
if (open && !targetRoundId && availableTargets.length > 0) {
|
||||
setTargetRoundId(availableTargets[0].id)
|
||||
}
|
||||
const allProjects = projectStates ?? []
|
||||
const pendingCount = allProjects.filter((ps: any) => ps.state === 'PENDING').length
|
||||
const passedProjects = useMemo(() =>
|
||||
allProjects.filter((ps: any) => ps.state === 'PASSED'),
|
||||
[allProjects])
|
||||
|
||||
const startups = useMemo(() =>
|
||||
passedProjects.filter((ps: any) => ps.project?.competitionCategory === 'STARTUP'),
|
||||
[passedProjects])
|
||||
|
||||
const concepts = useMemo(() =>
|
||||
passedProjects.filter((ps: any) => ps.project?.competitionCategory === 'BUSINESS_CONCEPT'),
|
||||
[passedProjects])
|
||||
|
||||
const other = useMemo(() =>
|
||||
passedProjects.filter((ps: any) =>
|
||||
ps.project?.competitionCategory !== 'STARTUP' && ps.project?.competitionCategory !== 'BUSINESS_CONCEPT',
|
||||
),
|
||||
[passedProjects])
|
||||
|
||||
const startupCap = (config.startupAdvanceCount as number) || 0
|
||||
const conceptCap = (config.conceptAdvanceCount as number) || 0
|
||||
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set())
|
||||
|
||||
// Reset selection when dialog opens
|
||||
if (open && selected.size === 0 && passedProjects.length > 0) {
|
||||
const initial = new Set<string>()
|
||||
// Auto-select all (or up to cap if configured)
|
||||
const startupSlice = startupCap > 0 ? startups.slice(0, startupCap) : startups
|
||||
const conceptSlice = conceptCap > 0 ? concepts.slice(0, conceptCap) : concepts
|
||||
for (const ps of startupSlice) initial.add(ps.project?.id)
|
||||
for (const ps of conceptSlice) initial.add(ps.project?.id)
|
||||
for (const ps of other) initial.add(ps.project?.id)
|
||||
setSelected(initial)
|
||||
}
|
||||
|
||||
const toggleProject = (projectId: string) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(projectId)) next.delete(projectId)
|
||||
else next.add(projectId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const toggleAll = (projects: any[], on: boolean) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev)
|
||||
for (const ps of projects) {
|
||||
if (on) next.add(ps.project?.id)
|
||||
else next.delete(ps.project?.id)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const handleAdvance = (autoPass?: boolean) => {
|
||||
if (autoPass) {
|
||||
// Auto-pass all pending then advance all
|
||||
advanceMutation.mutate({
|
||||
roundId,
|
||||
autoPassPending: true,
|
||||
...(targetRoundId ? { targetRoundId } : {}),
|
||||
})
|
||||
} else {
|
||||
const ids = Array.from(selected)
|
||||
if (ids.length === 0) return
|
||||
advanceMutation.mutate({
|
||||
roundId,
|
||||
projectIds: ids,
|
||||
...(targetRoundId ? { targetRoundId } : {}),
|
||||
})
|
||||
}
|
||||
onOpenChange(false)
|
||||
setSelected(new Set())
|
||||
setTargetRoundId('')
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false)
|
||||
setSelected(new Set())
|
||||
setTargetRoundId('')
|
||||
}
|
||||
|
||||
const renderCategorySection = (
|
||||
label: string,
|
||||
projects: any[],
|
||||
cap: number,
|
||||
badgeColor: string,
|
||||
) => {
|
||||
const selectedInCategory = projects.filter((ps: any) => selected.has(ps.project?.id)).length
|
||||
const overCap = cap > 0 && selectedInCategory > cap
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={projects.length > 0 && projects.every((ps: any) => selected.has(ps.project?.id))}
|
||||
onCheckedChange={(checked) => toggleAll(projects, !!checked)}
|
||||
/>
|
||||
<span className="text-sm font-medium">{label}</span>
|
||||
<Badge variant="secondary" className={cn('text-[10px]', badgeColor)}>
|
||||
{selectedInCategory}/{projects.length}
|
||||
</Badge>
|
||||
{cap > 0 && (
|
||||
<span className={cn('text-[10px]', overCap ? 'text-red-500 font-medium' : 'text-muted-foreground')}>
|
||||
(target: {cap})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{projects.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground pl-7">No passed projects in this category</p>
|
||||
) : (
|
||||
<div className="space-y-1 pl-7">
|
||||
{projects.map((ps: any) => (
|
||||
<label
|
||||
key={ps.project?.id}
|
||||
className="flex items-center gap-2 p-2 rounded hover:bg-muted/30 cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
checked={selected.has(ps.project?.id)}
|
||||
onCheckedChange={() => toggleProject(ps.project?.id)}
|
||||
/>
|
||||
<span className="text-sm truncate flex-1">{ps.project?.title || 'Untitled'}</span>
|
||||
{ps.project?.teamName && (
|
||||
<span className="text-xs text-muted-foreground shrink-0">{ps.project.teamName}</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const totalProjectCount = allProjects.length
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="max-w-lg max-h-[85vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Advance Projects</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isSimpleAdvance
|
||||
? `Move all ${totalProjectCount} projects to the next round.`
|
||||
: `Select which passed projects to advance. ${selected.size} of ${passedProjects.length} selected.`
|
||||
}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Target round selector */}
|
||||
{availableTargets.length > 0 && (
|
||||
<div className="space-y-2 pb-2 border-b">
|
||||
<Label className="text-sm">Advance to</Label>
|
||||
<Select value={targetRoundId} onValueChange={setTargetRoundId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select target round" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableTargets.map((r) => (
|
||||
<SelectItem key={r.id} value={r.id}>
|
||||
{r.name} ({r.roundType.replace('_', ' ').toLowerCase()})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
{availableTargets.length === 0 && (
|
||||
<div className="text-sm text-amber-600 bg-amber-50 rounded-md p-3">
|
||||
No subsequent rounds found. Projects will advance to the next round by sort order.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isSimpleAdvance ? (
|
||||
/* Simple mode for INTAKE/SUBMISSION/MENTORING — no per-project selection needed */
|
||||
<div className="py-4 space-y-3">
|
||||
<div className="rounded-lg border bg-muted/30 p-4 text-center space-y-1">
|
||||
<p className="text-3xl font-bold">{totalProjectCount}</p>
|
||||
<p className="text-sm text-muted-foreground">projects will be advanced</p>
|
||||
</div>
|
||||
{pendingCount > 0 && (
|
||||
<div className="rounded-md border border-blue-200 bg-blue-50 px-3 py-2">
|
||||
<p className="text-xs text-blue-700">
|
||||
{pendingCount} pending project{pendingCount !== 1 ? 's' : ''} will be automatically marked as passed and advanced.
|
||||
{passedProjects.length > 0 && ` ${passedProjects.length} already passed.`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
/* Detailed mode for jury/evaluation rounds — per-project selection */
|
||||
<div className="flex-1 overflow-y-auto space-y-4 py-2">
|
||||
{renderCategorySection('Startup', startups, startupCap, 'bg-blue-100 text-blue-700')}
|
||||
{renderCategorySection('Business Concept', concepts, conceptCap, 'bg-purple-100 text-purple-700')}
|
||||
{other.length > 0 && renderCategorySection('Other / Uncategorized', other, 0, 'bg-gray-100 text-gray-700')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleClose}>Cancel</Button>
|
||||
{isSimpleAdvance ? (
|
||||
<Button
|
||||
onClick={() => handleAdvance(true)}
|
||||
disabled={totalProjectCount === 0 || advanceMutation.isPending || availableTargets.length === 0}
|
||||
>
|
||||
{advanceMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
|
||||
Advance All {totalProjectCount} Project{totalProjectCount !== 1 ? 's' : ''}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => handleAdvance()}
|
||||
disabled={selected.size === 0 || advanceMutation.isPending || availableTargets.length === 0}
|
||||
>
|
||||
{advanceMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
|
||||
Advance {selected.size} Project{selected.size !== 1 ? 's' : ''}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
231
src/components/admin/round/ai-recommendations-display.tsx
Normal file
231
src/components/admin/round/ai-recommendations-display.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Loader2, ChevronDown, CheckCircle2, X } from 'lucide-react'
|
||||
|
||||
export type RecommendationItem = {
|
||||
projectId: string
|
||||
rank: number
|
||||
score: number
|
||||
category: string
|
||||
strengths: string[]
|
||||
concerns: string[]
|
||||
recommendation: string
|
||||
}
|
||||
|
||||
export type AIRecommendationsDisplayProps = {
|
||||
recommendations: { STARTUP: RecommendationItem[]; BUSINESS_CONCEPT: RecommendationItem[] }
|
||||
projectStates: any[] | undefined
|
||||
roundId: string
|
||||
onClear: () => void
|
||||
onApplied: () => void
|
||||
}
|
||||
|
||||
export function AIRecommendationsDisplay({
|
||||
recommendations,
|
||||
projectStates,
|
||||
roundId,
|
||||
onClear,
|
||||
onApplied,
|
||||
}: AIRecommendationsDisplayProps) {
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null)
|
||||
const [applying, setApplying] = useState(false)
|
||||
|
||||
// Initialize selected with all recommended project IDs
|
||||
const allRecommendedIds = useMemo(() => {
|
||||
const ids = new Set<string>()
|
||||
for (const item of recommendations.STARTUP) ids.add(item.projectId)
|
||||
for (const item of recommendations.BUSINESS_CONCEPT) ids.add(item.projectId)
|
||||
return ids
|
||||
}, [recommendations])
|
||||
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set(allRecommendedIds))
|
||||
|
||||
// Build projectId → title map from projectStates
|
||||
const projectTitleMap = useMemo(() => {
|
||||
const map = new Map<string, string>()
|
||||
if (projectStates) {
|
||||
for (const ps of projectStates) {
|
||||
if (ps.project?.id && ps.project?.title) {
|
||||
map.set(ps.project.id, ps.project.title)
|
||||
}
|
||||
}
|
||||
}
|
||||
return map
|
||||
}, [projectStates])
|
||||
|
||||
const transitionMutation = trpc.roundEngine.transitionProject.useMutation()
|
||||
|
||||
const toggleProject = (projectId: string) => {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(projectId)) next.delete(projectId)
|
||||
else next.add(projectId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const selectedStartups = recommendations.STARTUP.filter((item) => selectedIds.has(item.projectId)).length
|
||||
const selectedConcepts = recommendations.BUSINESS_CONCEPT.filter((item) => selectedIds.has(item.projectId)).length
|
||||
|
||||
const handleApply = async () => {
|
||||
setApplying(true)
|
||||
try {
|
||||
// Transition all selected projects to PASSED
|
||||
const promises = Array.from(selectedIds).map((projectId) =>
|
||||
transitionMutation.mutateAsync({ projectId, roundId, newState: 'PASSED' }).catch(() => {
|
||||
// Project might already be PASSED — that's OK
|
||||
})
|
||||
)
|
||||
await Promise.all(promises)
|
||||
toast.success(`Marked ${selectedIds.size} project(s) as passed`)
|
||||
onApplied()
|
||||
} catch (error) {
|
||||
toast.error('Failed to apply recommendations')
|
||||
} finally {
|
||||
setApplying(false)
|
||||
}
|
||||
}
|
||||
|
||||
const renderCategory = (label: string, items: RecommendationItem[], colorClass: string) => {
|
||||
if (items.length === 0) return (
|
||||
<div className="text-center py-4 text-muted-foreground text-sm">
|
||||
No {label.toLowerCase()} projects evaluated
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{items.map((item) => {
|
||||
const isExpanded = expandedId === `${item.category}-${item.projectId}`
|
||||
const isSelected = selectedIds.has(item.projectId)
|
||||
const projectTitle = projectTitleMap.get(item.projectId) || item.projectId
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.projectId}
|
||||
className={cn(
|
||||
'border rounded-lg overflow-hidden transition-colors',
|
||||
!isSelected && 'opacity-50',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 p-3">
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => toggleProject(item.projectId)}
|
||||
className="shrink-0"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setExpandedId(isExpanded ? null : `${item.category}-${item.projectId}`)}
|
||||
className="flex-1 flex items-center gap-3 text-left hover:bg-muted/30 rounded transition-colors min-w-0"
|
||||
>
|
||||
<span className={cn(
|
||||
'h-7 w-7 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0 shadow-sm',
|
||||
colorClass === 'bg-blue-500' ? 'bg-gradient-to-br from-blue-400 to-blue-600' : 'bg-gradient-to-br from-purple-400 to-purple-600',
|
||||
)}>
|
||||
{item.rank}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{projectTitle}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{item.recommendation}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="shrink-0 text-xs font-mono">
|
||||
{item.score}/100
|
||||
</Badge>
|
||||
<ChevronDown className={cn(
|
||||
'h-4 w-4 text-muted-foreground transition-transform shrink-0',
|
||||
isExpanded && 'rotate-180',
|
||||
)} />
|
||||
</button>
|
||||
</div>
|
||||
{isExpanded && (
|
||||
<div className="px-3 pb-3 pt-0 space-y-2 border-t bg-muted/10">
|
||||
<div className="pt-2">
|
||||
<p className="text-xs font-medium text-emerald-700 mb-1">Strengths</p>
|
||||
<ul className="text-xs text-muted-foreground space-y-0.5 pl-4 list-disc">
|
||||
{item.strengths.map((s, i) => <li key={i}>{s}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
{item.concerns.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-amber-700 mb-1">Concerns</p>
|
||||
<ul className="text-xs text-muted-foreground space-y-0.5 pl-4 list-disc">
|
||||
{item.concerns.map((c, i) => <li key={i}>{c}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-xs font-medium text-blue-700 mb-1">Recommendation</p>
|
||||
<p className="text-xs text-muted-foreground">{item.recommendation}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">AI Shortlist Recommendations</CardTitle>
|
||||
<CardDescription>
|
||||
Ranked independently per category — {selectedStartups} of {recommendations.STARTUP.length} startups, {selectedConcepts} of {recommendations.BUSINESS_CONCEPT.length} concepts selected
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={onClear}>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Dismiss
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-blue-500" />
|
||||
Startup ({recommendations.STARTUP.length})
|
||||
</h4>
|
||||
{renderCategory('Startup', recommendations.STARTUP, 'bg-blue-500')}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-3 flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-purple-500" />
|
||||
Business Concept ({recommendations.BUSINESS_CONCEPT.length})
|
||||
</h4>
|
||||
{renderCategory('Business Concept', recommendations.BUSINESS_CONCEPT, 'bg-purple-500')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Apply button */}
|
||||
<div className="flex items-center justify-between pt-4 border-t">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{selectedIds.size} project{selectedIds.size !== 1 ? 's' : ''} will be marked as <strong>Passed</strong>
|
||||
</p>
|
||||
<Button
|
||||
onClick={handleApply}
|
||||
disabled={selectedIds.size === 0 || applying}
|
||||
className="bg-[#053d57] hover:bg-[#053d57]/90 text-white"
|
||||
>
|
||||
{applying ? (
|
||||
<><Loader2 className="h-4 w-4 mr-1.5 animate-spin" />Applying...</>
|
||||
) : (
|
||||
<><CheckCircle2 className="h-4 w-4 mr-1.5" />Apply & Mark as Passed</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
124
src/components/admin/round/evaluation-criteria-editor.tsx
Normal file
124
src/components/admin/round/evaluation-criteria-editor.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
import { EvaluationFormBuilder } from '@/components/forms/evaluation-form-builder'
|
||||
import type { Criterion } from '@/components/forms/evaluation-form-builder'
|
||||
|
||||
export type EvaluationCriteriaEditorProps = {
|
||||
roundId: string
|
||||
}
|
||||
|
||||
export function EvaluationCriteriaEditor({ roundId }: EvaluationCriteriaEditorProps) {
|
||||
const [pendingCriteria, setPendingCriteria] = useState<Criterion[] | null>(null)
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const { data: form, isLoading } = trpc.evaluation.getForm.useQuery(
|
||||
{ roundId },
|
||||
{ refetchInterval: 30_000 },
|
||||
)
|
||||
|
||||
const upsertMutation = trpc.evaluation.upsertForm.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.evaluation.getForm.invalidate({ roundId })
|
||||
toast.success('Evaluation criteria saved')
|
||||
setPendingCriteria(null)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
// Convert server criteriaJson to Criterion[] format
|
||||
const serverCriteria: Criterion[] = useMemo(() => {
|
||||
if (!form?.criteriaJson) return []
|
||||
return (form.criteriaJson as Criterion[]).map((c) => {
|
||||
// Handle legacy numeric-only format: convert "scale" string like "1-10" back to minScore/maxScore
|
||||
const type = c.type || 'numeric'
|
||||
if (type === 'numeric' && typeof c.scale === 'string') {
|
||||
const parts = (c.scale as string).split('-').map(Number)
|
||||
if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
|
||||
return { ...c, type: 'numeric' as const, scale: parts[1], minScore: parts[0], maxScore: parts[1] } as unknown as Criterion
|
||||
}
|
||||
}
|
||||
return { ...c, type } as Criterion
|
||||
})
|
||||
}, [form?.criteriaJson])
|
||||
|
||||
const handleChange = useCallback((criteria: Criterion[]) => {
|
||||
setPendingCriteria(criteria)
|
||||
}, [])
|
||||
|
||||
const handleSave = () => {
|
||||
const criteria = pendingCriteria ?? serverCriteria
|
||||
const validCriteria = criteria.filter((c) => c.label.trim())
|
||||
if (validCriteria.length === 0) {
|
||||
toast.error('Add at least one criterion')
|
||||
return
|
||||
}
|
||||
// Map to upsertForm format
|
||||
upsertMutation.mutate({
|
||||
roundId,
|
||||
criteria: validCriteria.map((c) => ({
|
||||
id: c.id,
|
||||
label: c.label,
|
||||
description: c.description,
|
||||
type: c.type || 'numeric',
|
||||
weight: c.weight,
|
||||
scale: typeof c.scale === 'number' ? c.scale : undefined,
|
||||
minScore: (c as any).minScore,
|
||||
maxScore: (c as any).maxScore,
|
||||
required: c.required,
|
||||
maxLength: c.maxLength,
|
||||
placeholder: c.placeholder,
|
||||
trueLabel: c.trueLabel,
|
||||
falseLabel: c.falseLabel,
|
||||
condition: c.condition,
|
||||
sectionId: c.sectionId,
|
||||
})),
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">Evaluation Criteria</CardTitle>
|
||||
<CardDescription>
|
||||
{form
|
||||
? `Version ${form.version} \u2014 ${(form.criteriaJson as Criterion[]).filter((c) => (c.type || 'numeric') !== 'section_header').length} criteria`
|
||||
: 'No criteria defined yet. Add numeric scores, yes/no questions, and text fields.'}
|
||||
</CardDescription>
|
||||
</div>
|
||||
{pendingCriteria && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" variant="outline" onClick={() => setPendingCriteria(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave} disabled={upsertMutation.isPending}>
|
||||
{upsertMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
|
||||
Save Criteria
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
|
||||
</div>
|
||||
) : (
|
||||
<EvaluationFormBuilder
|
||||
initialCriteria={serverCriteria}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
43
src/components/admin/round/export-evaluations-dialog.tsx
Normal file
43
src/components/admin/round/export-evaluations-dialog.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { CsvExportDialog } from '@/components/shared/csv-export-dialog'
|
||||
|
||||
export type ExportEvaluationsDialogProps = {
|
||||
roundId: string
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function ExportEvaluationsDialog({
|
||||
roundId,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: ExportEvaluationsDialogProps) {
|
||||
const [exportData, setExportData] = useState<any>(undefined)
|
||||
const [isLoadingExport, setIsLoadingExport] = useState(false)
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const handleRequestData = async () => {
|
||||
setIsLoadingExport(true)
|
||||
try {
|
||||
const data = await utils.export.evaluations.fetch({ roundId, includeDetails: true })
|
||||
setExportData(data)
|
||||
return data
|
||||
} finally {
|
||||
setIsLoadingExport(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<CsvExportDialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
exportData={exportData}
|
||||
isLoading={isLoadingExport}
|
||||
filename={`evaluations-${roundId}`}
|
||||
onRequestData={handleRequestData}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -92,7 +92,7 @@ export function ProjectStatesTable({ competitionId, roundId }: ProjectStatesTabl
|
||||
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const poolLink = `/admin/projects/pool?roundId=${roundId}&competitionId=${competitionId}` as Route
|
||||
const poolLink = `/admin/projects?hasAssign=false&round=${roundId}` as Route
|
||||
|
||||
const { data: projectStates, isLoading } = trpc.roundEngine.getProjectStates.useQuery(
|
||||
{ roundId },
|
||||
|
||||
64
src/components/admin/round/score-distribution.tsx
Normal file
64
src/components/admin/round/score-distribution.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
|
||||
export type ScoreDistributionProps = {
|
||||
roundId: string
|
||||
}
|
||||
|
||||
export function ScoreDistribution({ roundId }: ScoreDistributionProps) {
|
||||
const { data: dist, isLoading } = trpc.analytics.getRoundScoreDistribution.useQuery(
|
||||
{ roundId },
|
||||
{ refetchInterval: 15_000 },
|
||||
)
|
||||
|
||||
const maxCount = useMemo(() =>
|
||||
dist ? Math.max(...dist.globalDistribution.map((b) => b.count), 1) : 1,
|
||||
[dist])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Score Distribution</CardTitle>
|
||||
<CardDescription>
|
||||
{dist ? `${dist.totalEvaluations} evaluations \u2014 avg ${dist.averageGlobalScore.toFixed(1)}` : 'Loading...'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="flex items-end gap-1 h-32">
|
||||
{Array.from({ length: 10 }).map((_, i) => <Skeleton key={i} className="flex-1 h-full" />)}
|
||||
</div>
|
||||
) : !dist || dist.totalEvaluations === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">
|
||||
No evaluations submitted yet
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex gap-1 h-32">
|
||||
{dist.globalDistribution.map((bucket) => {
|
||||
const heightPct = (bucket.count / maxCount) * 100
|
||||
return (
|
||||
<div key={bucket.score} className="flex-1 flex flex-col items-center gap-1 h-full">
|
||||
<span className="text-[9px] text-muted-foreground">{bucket.count || ''}</span>
|
||||
<div className="w-full flex-1 relative">
|
||||
<div className={cn(
|
||||
'absolute inset-x-0 bottom-0 rounded-t transition-all',
|
||||
bucket.score <= 3 ? 'bg-red-400' :
|
||||
bucket.score <= 6 ? 'bg-amber-400' :
|
||||
'bg-emerald-400',
|
||||
)} style={{ height: `${Math.max(heightPct, 4)}%` }} />
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground">{bucket.score}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
51
src/components/admin/rounds/config/config-section-header.tsx
Normal file
51
src/components/admin/rounds/config/config-section-header.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
'use client'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type CompletionStatus = 'complete' | 'warning' | 'error'
|
||||
|
||||
type ConfigSectionHeaderProps = {
|
||||
title: string
|
||||
description?: string
|
||||
status: CompletionStatus
|
||||
summary?: string
|
||||
}
|
||||
|
||||
const statusDot: Record<CompletionStatus, string> = {
|
||||
complete: 'bg-emerald-500',
|
||||
warning: 'bg-amber-500',
|
||||
error: 'bg-red-500',
|
||||
}
|
||||
|
||||
export function ConfigSectionHeader({
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
summary,
|
||||
}: ConfigSectionHeaderProps) {
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span
|
||||
className={cn(
|
||||
'mt-1 h-2.5 w-2.5 rounded-full shrink-0',
|
||||
statusDot[status],
|
||||
)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-base font-semibold">{title}</h3>
|
||||
{summary && (
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
— {summary}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground mt-0.5">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user