Add per-juror notify button in Jury Progress section
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m45s

Adds a mail icon on hover for each juror row in the Jury Progress
table, allowing admins to send assignment notifications to individual
jurors instead of only bulk-notifying all at once.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-19 17:18:07 +01:00
parent 725d88fec2
commit 1dcc7a5990
2 changed files with 90 additions and 7 deletions

View File

@@ -2363,11 +2363,18 @@ function JuryProgressTable({ roundId }: { roundId: string }) {
{ 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),
})
return (
<Card>
<CardHeader>
<CardTitle className="text-base">Jury Progress</CardTitle>
<CardDescription>Evaluation completion per juror</CardDescription>
<CardDescription>Evaluation completion per juror. Click the mail icon to notify an individual juror.</CardDescription>
</CardHeader>
<CardContent>
{isLoading ? (
@@ -2391,12 +2398,34 @@ function JuryProgressTable({ roundId }: { roundId: string }) {
: '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">
<div className="flex justify-between text-xs">
<span className="font-medium truncate max-w-[60%]">{juror.name}</span>
<span className="text-muted-foreground shrink-0 tabular-nums">
{juror.completed}/{juror.assigned} ({pct}%)
</span>
<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 opacity-0 group-hover:opacity-100 transition-opacity"
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>
</div>
</div>
<div className="h-2 bg-muted rounded-full overflow-hidden">
<div