Jury UX: fix COI modal, add sliders, redesign stats, gate evaluations

- Switch COI dialog from Dialog to AlertDialog (non-dismissible)
- Replace number inputs with sliders + rating buttons for criteria/global scores
- Redesign jury dashboard stat cards: compact strip on mobile, editorial grid on desktop
- Remove ROUND_ACTIVE filter from myAssignments so all assignments show
- Block evaluate page when round is inactive or voting window is closed
- Gate evaluate button on project detail page based on voting window status

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/evaluate/page.tsx

@@ -7,21 +7,22 @@ import type { Route } from 'next'
 import { trpc } from '@/lib/trpc/client'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
+import { Slider } from '@/components/ui/slider'
 import { Textarea } from '@/components/ui/textarea'
 import { Label } from '@/components/ui/label'
 import { Skeleton } from '@/components/ui/skeleton'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import {
-  Dialog,
+  AlertDialog,
-  DialogContent,
+  AlertDialogContent,
-  DialogDescription,
+  AlertDialogDescription,
-  DialogFooter,
+  AlertDialogFooter,
-  DialogHeader,
+  AlertDialogHeader,
-  DialogTitle,
+  AlertDialogTitle,
-} from '@/components/ui/dialog'
+} from '@/components/ui/alert-dialog'
 import { Checkbox } from '@/components/ui/checkbox'
-import { ArrowLeft, Save, Send, AlertCircle, ThumbsUp, ThumbsDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { ArrowLeft, Save, Send, AlertCircle, ThumbsUp, ThumbsDown, Clock } from 'lucide-react'
 import { toast } from 'sonner'
 import type { EvaluationConfig } from '@/types/competition-configs'
 
@@ -235,15 +236,12 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
   // COI Dialog
   if (!coiAccepted && showCOIDialog && evalConfig?.coiRequired !== false) {
     return (
-      <Dialog open={showCOIDialog} onOpenChange={() => { /* prevent dismissal */ }}>
+      <AlertDialog open={showCOIDialog}>
-        <DialogContent
+        <AlertDialogContent>
-          onPointerDownOutside={(e) => e.preventDefault()}
+          <AlertDialogHeader>
-          onEscapeKeyDown={(e) => e.preventDefault()}
+            <AlertDialogTitle>Conflict of Interest Declaration</AlertDialogTitle>
-          onInteractOutside={(e) => e.preventDefault()}
+            <AlertDialogDescription asChild>
-        >
+              <div className="space-y-3 pt-2">
-          <DialogHeader>
-            <DialogTitle>Conflict of Interest Declaration</DialogTitle>
-            <DialogDescription className="space-y-3 pt-2">
                 <p>
                   Before evaluating this project, you must confirm that you have no conflict of
                   interest.
@@ -252,8 +250,9 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
                   A conflict of interest exists if you have a personal, professional, or financial
                   relationship with the project team that could influence your judgment.
                 </p>
-            </DialogDescription>
+              </div>
-          </DialogHeader>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
           <div className="flex items-start gap-3 py-4">
             <Checkbox
               id="coi"
@@ -265,7 +264,7 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
               unbiased evaluation.
             </Label>
           </div>
-          <DialogFooter>
+          <AlertDialogFooter>
             <Button
               variant="outline"
               onClick={() => router.push(`/jury/competitions/${roundId}` as Route)}
@@ -279,9 +278,9 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
             >
               Continue to Evaluation
             </Button>
-          </DialogFooter>
+          </AlertDialogFooter>
-        </DialogContent>
+        </AlertDialogContent>
-      </Dialog>
+      </AlertDialog>
     )
   }
 
@@ -300,6 +299,48 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
     )
   }
 
+  // Check if round is active and voting window is open
+  const now = new Date()
+  const isRoundActive = round.status === 'ROUND_ACTIVE'
+  const isWindowOpen = isRoundActive &&
+    round.windowOpenAt && round.windowCloseAt &&
+    new Date(round.windowOpenAt) <= now && new Date(round.windowCloseAt) >= now
+
+  if (!isWindowOpen) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" asChild>
+            <Link href={`/jury/competitions/${roundId}/projects/${projectId}` as Route}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Project
+            </Link>
+          </Button>
+        </div>
+        <Card className="border-l-4 border-l-amber-500">
+          <CardContent className="flex items-start gap-4 p-6">
+            <div className="rounded-xl bg-amber-50 dark:bg-amber-950/40 p-3">
+              <Clock className="h-6 w-6 text-amber-600" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold">Evaluation Not Available</h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                {!isRoundActive
+                  ? 'This round is not currently active. Evaluations can only be submitted during an active round.'
+                  : 'The voting window for this round is not currently open. Please check back when the window opens.'}
+              </p>
+              <Button variant="outline" size="sm" className="mt-4" asChild>
+                <Link href={`/jury/competitions/${roundId}/projects/${projectId}` as Route}>
+                  View Project Details
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-6">
       <div className="flex items-center gap-4">
@@ -342,51 +383,119 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
           {scoringMode === 'criteria' && criteria && criteria.length > 0 && (
             <div className="space-y-4">
               <h3 className="font-semibold">Criteria Scores</h3>
-              {criteria.map((criterion) => (
+              {criteria.map((criterion) => {
-                <div key={criterion.id} className="space-y-2 p-4 border rounded-lg">
+                const min = criterion.minScore ?? 1
-                  <Label htmlFor={criterion.id}>
+                const max = criterion.maxScore ?? 10
+                const currentValue = criteriaScores[criterion.id]
+                const displayValue = currentValue !== undefined ? currentValue : undefined
+                const sliderValue = typeof currentValue === 'number' ? currentValue : Math.ceil((min + max) / 2)
+
+                return (
+                  <div key={criterion.id} className="space-y-3 p-4 border rounded-lg">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="space-y-1">
+                        <Label className="text-base font-medium">
                           {criterion.label}
                           {evalConfig?.requireAllCriteriaScored !== false && (
                             <span className="text-destructive ml-1">*</span>
                           )}
                         </Label>
                         {criterion.description && (
-                    <p className="text-xs text-muted-foreground">{criterion.description}</p>
+                          <p className="text-sm text-muted-foreground">{criterion.description}</p>
                         )}
-                  <Input
-                    id={criterion.id}
-                    type="number"
-                    min={criterion.minScore ?? 0}
-                    max={criterion.maxScore ?? 10}
-                    value={criteriaScores[criterion.id] ?? ''}
-                    onChange={(e) =>
-                      setCriteriaScores({
-                        ...criteriaScores,
-                        [criterion.id]: parseInt(e.target.value, 10) || 0,
-                      })
-                    }
-                    placeholder={`Score (${criterion.minScore ?? 0}-${criterion.maxScore ?? 10})`}
-                  />
                       </div>
+                      <span className="shrink-0 rounded-md bg-muted px-2.5 py-1 text-sm font-bold tabular-nums">
+                        {displayValue !== undefined ? displayValue : '—'}/{max}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground w-4">{min}</span>
+                      <Slider
+                        min={min}
+                        max={max}
+                        step={1}
+                        value={[sliderValue]}
+                        onValueChange={(v) =>
+                          setCriteriaScores({ ...criteriaScores, [criterion.id]: v[0] })
+                        }
+                        className="flex-1"
+                      />
+                      <span className="text-xs text-muted-foreground w-4">{max}</span>
+                    </div>
+
+                    <div className="flex gap-1 flex-wrap">
+                      {Array.from({ length: max - min + 1 }, (_, i) => i + min).map((num) => (
+                        <button
+                          key={num}
+                          type="button"
+                          onClick={() =>
+                            setCriteriaScores({ ...criteriaScores, [criterion.id]: num })
+                          }
+                          className={cn(
+                            'w-9 h-9 rounded-md text-sm font-medium transition-colors',
+                            displayValue !== undefined && displayValue === num
+                              ? 'bg-primary text-primary-foreground'
+                              : displayValue !== undefined && displayValue > num
+                                ? 'bg-primary/20 text-primary'
+                                : 'bg-muted hover:bg-muted/80'
+                          )}
+                        >
+                          {num}
+                        </button>
                       ))}
                     </div>
+                  </div>
+                )
+              })}
+            </div>
           )}
 
           {/* Global scoring */}
           {scoringMode === 'global' && (
-            <div className="space-y-2">
+            <div className="space-y-3">
-              <Label htmlFor="globalScore">
+              <div className="flex items-center justify-between">
+                <Label>
                   Overall Score <span className="text-destructive">*</span>
                 </Label>
-              <Input
+                <span className="rounded-md bg-muted px-2.5 py-1 text-sm font-bold tabular-nums">
-                id="globalScore"
+                  {globalScore || '—'}/10
-                type="number"
+                </span>
-                min="1"
+              </div>
-                max="10"
+              <div className="flex items-center gap-2">
-                value={globalScore}
+                <span className="text-xs text-muted-foreground">1</span>
-                onChange={(e) => setGlobalScore(e.target.value)}
+                <Slider
-                placeholder="Enter score (1-10)"
+                  min={1}
+                  max={10}
+                  step={1}
+                  value={[globalScore ? parseInt(globalScore, 10) : 5]}
+                  onValueChange={(v) => setGlobalScore(v[0].toString())}
+                  className="flex-1"
                 />
+                <span className="text-xs text-muted-foreground">10</span>
+              </div>
+              <div className="flex gap-1 flex-wrap">
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => {
+                  const current = globalScore ? parseInt(globalScore, 10) : 0
+                  return (
+                    <button
+                      key={num}
+                      type="button"
+                      onClick={() => setGlobalScore(num.toString())}
+                      className={cn(
+                        'w-9 h-9 rounded-md text-sm font-medium transition-colors',
+                        current === num
+                          ? 'bg-primary text-primary-foreground'
+                          : current > num
+                            ? 'bg-primary/20 text-primary'
+                            : 'bg-muted hover:bg-muted/80'
+                      )}
+                    >
+                      {num}
+                    </button>
+                  )
+                })}
+              </div>
               <p className="text-xs text-muted-foreground">
                 Provide a score from 1 to 10 based on your overall assessment
               </p>

src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/page.tsx

@@ -22,6 +22,17 @@ export default function JuryProjectDetailPage() {
     { enabled: !!projectId }
   )
 
+  const { data: round } = trpc.round.getById.useQuery(
+    { id: roundId },
+    { enabled: !!roundId }
+  )
+
+  // Determine if voting is currently open
+  const now = new Date()
+  const isVotingOpen = round?.status === 'ROUND_ACTIVE' &&
+    round?.windowOpenAt && round?.windowCloseAt &&
+    new Date(round.windowOpenAt) <= now && new Date(round.windowCloseAt) >= now
+
   if (isLoading) {
     return (
       <div className="space-y-6">
@@ -71,12 +82,18 @@ export default function JuryProjectDetailPage() {
                 <p className="text-muted-foreground mt-1">{project.teamName}</p>
               )}
             </div>
+            {isVotingOpen ? (
               <Button asChild className="bg-brand-blue hover:bg-brand-blue-light">
                 <Link href={`/jury/competitions/${roundId}/projects/${projectId}/evaluate` as Route}>
                   <Target className="mr-2 h-4 w-4" />
                   Evaluate Project
                 </Link>
               </Button>
+            ) : (
+              <Badge variant="outline" className="text-muted-foreground">
+                Voting not open
+              </Badge>
+            )}
           </div>
         </CardHeader>
         <CardContent className="space-y-6">

src/app/(jury)/jury/competitions/page.tsx

@@ -74,7 +74,7 @@ export default function JuryAssignmentsPage() {
             </div>
             <h2 className="text-xl font-semibold mb-2">No Assignments</h2>
             <p className="text-muted-foreground text-center max-w-md">
-              You don&apos;t have any active assignments yet.
+              You don&apos;t have any assignments yet. Assignments will appear once an administrator assigns projects to you.
             </p>
           </CardContent>
         </Card>
@@ -95,6 +95,11 @@ export default function JuryAssignmentsPage() {
                       <Badge variant="secondary" className="text-xs">
                         {formatEnumLabel(round.roundType)}
                       </Badge>
+                      {round.status !== 'ROUND_ACTIVE' && (
+                        <Badge variant="outline" className="text-xs text-muted-foreground">
+                          {formatEnumLabel(round.status)}
+                        </Badge>
+                      )}
                     </div>
                     <div className="flex items-center gap-2">
                       <span className="text-xs text-muted-foreground">

src/app/(jury)/jury/page.tsx

@@ -24,7 +24,6 @@ import {
   GitCompare,
   Zap,
   BarChart3,
-  Target,
   Waves,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
@@ -187,36 +186,28 @@ async function JuryDashboardContent() {
 
   const stats = [
     {
-      label: 'Total Assignments',
       value: totalAssignments,
-      icon: ClipboardList,
+      label: 'Assigned',
-      accentColor: 'border-l-blue-500',
+      detail: 'Total projects',
-      iconBg: 'bg-blue-50 dark:bg-blue-950/40',
+      accent: 'text-brand-blue',
-      iconColor: 'text-blue-600 dark:text-blue-400',
     },
     {
-      label: 'Completed',
       value: completedAssignments,
-      icon: CheckCircle2,
+      label: 'Completed',
-      accentColor: 'border-l-emerald-500',
+      detail: `${completionRate.toFixed(0)}% done`,
-      iconBg: 'bg-emerald-50 dark:bg-emerald-950/40',
+      accent: 'text-emerald-600',
-      iconColor: 'text-emerald-600 dark:text-emerald-400',
     },
     {
-      label: 'In Progress',
       value: inProgressAssignments,
-      icon: Clock,
+      label: 'In draft',
-      accentColor: 'border-l-amber-500',
+      detail: inProgressAssignments > 0 ? 'Work in progress' : 'None started',
-      iconBg: 'bg-amber-50 dark:bg-amber-950/40',
+      accent: inProgressAssignments > 0 ? 'text-amber-600' : 'text-emerald-600',
-      iconColor: 'text-amber-600 dark:text-amber-400',
     },
     {
-      label: 'Pending',
       value: pendingAssignments,
-      icon: Target,
+      label: 'Pending',
-      accentColor: 'border-l-slate-400',
+      detail: pendingAssignments > 0 ? 'Not yet started' : 'All started',
-      iconBg: 'bg-slate-50 dark:bg-slate-800/50',
+      accent: pendingAssignments > 0 ? 'text-amber-600' : 'text-emerald-600',
-      iconColor: 'text-slate-500 dark:text-slate-400',
     },
   ]
 
@@ -301,48 +292,34 @@ async function JuryDashboardContent() {
         </AnimatedCard>
       )}
 
-      {/* Stats + Overall Completion in one row */}
+      {/* Stats — editorial strip */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+      <AnimatedCard index={1}>
-        {stats.map((stat, i) => (
+        {/* Mobile: compact horizontal data strip */}
-          <AnimatedCard key={stat.label} index={i + 1}>
+        <div className="flex items-baseline justify-between border-b border-t py-3 md:hidden">
-            <Card className={cn(
+          {stats.map((s, i) => (
-              'border-l-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+            <div key={i} className={`flex-1 text-center ${i > 0 ? 'border-l border-border/50' : ''}`}>
-              stat.accentColor,
+              <span className="text-xl font-bold tabular-nums tracking-tight">{s.value}</span>
-            )}>
+              <p className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground mt-0.5">{s.label}</p>
-              <CardContent className="flex items-center gap-4 py-5 px-5">
-                <div className={cn('rounded-xl p-3', stat.iconBg)}>
-                  <stat.icon className={cn('h-5 w-5', stat.iconColor)} />
             </div>
-                <div>
-                  <p className="text-2xl font-bold tabular-nums tracking-tight">{stat.value}</p>
-                  <p className="text-sm text-muted-foreground font-medium">{stat.label}</p>
-                </div>
-              </CardContent>
-            </Card>
-          </AnimatedCard>
           ))}
-        {/* Overall completion as 5th stat card */}
-        <AnimatedCard index={5}>
-          <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-            <CardContent className="flex items-center gap-4 py-5 px-5">
-              <div className="rounded-xl p-3 bg-brand-blue/10 dark:bg-brand-blue/20">
-                <BarChart3 className="h-5 w-5 text-brand-blue dark:text-brand-teal" />
         </div>
-              <div className="flex-1 min-w-0">
+
-                <p className="text-2xl font-bold tabular-nums tracking-tight text-brand-blue dark:text-brand-teal">
+        {/* Desktop: editorial stat row */}
-                  {completionRate.toFixed(0)}%
+        <div className="hidden md:block">
-                </p>
+          <div className="grid grid-cols-4 gap-px rounded-lg bg-border/40 overflow-hidden">
-                <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted/60 mt-1">
+            {stats.map((s, i) => (
               <div
-                    className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
+                key={i}
-                    style={{ width: `${completionRate}%` }}
+                className="bg-background px-5 py-4 group hover:bg-muted/30 transition-colors"
-                  />
+              >
+                <span className="text-3xl font-bold tabular-nums tracking-tight">{s.value}</span>
+                <p className="text-xs font-medium text-muted-foreground mt-1">{s.label}</p>
+                <p className={`text-xs mt-0.5 ${s.accent}`}>{s.detail}</p>
+              </div>
+            ))}
           </div>
         </div>
-            </CardContent>
-          </Card>
       </AnimatedCard>
-      </div>
 
       {/* Main content -- two column layout */}
       <div className="grid gap-4 lg:grid-cols-12">
@@ -670,30 +647,25 @@ function DashboardSkeleton() {
   return (
     <>
       {/* Stats skeleton */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div className="flex items-baseline justify-between border-b border-t py-3 md:hidden">
         {[...Array(4)].map((_, i) => (
-          <Card key={i} className="border-l-4 border-l-muted">
+          <div key={i} className={`flex-1 text-center ${i > 0 ? 'border-l border-border/50' : ''}`}>
-            <CardContent className="flex items-center gap-4 py-5 px-5">
+            <Skeleton className="h-6 w-8 mx-auto" />
-              <Skeleton className="h-11 w-11 rounded-xl" />
+            <Skeleton className="h-3 w-14 mx-auto mt-1" />
-              <div className="space-y-2">
+          </div>
-                <Skeleton className="h-7 w-12" />
+        ))}
-                <Skeleton className="h-4 w-24" />
+      </div>
+      <div className="hidden md:block">
+        <div className="grid grid-cols-4 gap-px rounded-lg bg-border/40 overflow-hidden">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="bg-background px-5 py-4">
+              <Skeleton className="h-9 w-12" />
+              <Skeleton className="h-4 w-20 mt-1" />
+              <Skeleton className="h-3 w-16 mt-1" />
             </div>
-            </CardContent>
-          </Card>
           ))}
         </div>
-      {/* Progress bar skeleton */}
-      <Card className="overflow-hidden">
-        <div className="h-1 w-full bg-muted" />
-        <CardContent className="py-5 px-6">
-          <div className="flex items-center justify-between mb-3">
-            <Skeleton className="h-4 w-36" />
-            <Skeleton className="h-7 w-16" />
       </div>
-          <Skeleton className="h-3 w-full rounded-full" />
-        </CardContent>
-      </Card>
       {/* Two-column skeleton */}
       <div className="grid gap-6 lg:grid-cols-12">
         <div className="lg:col-span-7">

src/server/routers/assignment.ts

@@ -253,7 +253,6 @@ export const assignmentRouter = router({
     .query(async ({ ctx, input }) => {
       const where: Record<string, unknown> = {
         userId: ctx.user.id,
-        round: { status: 'ROUND_ACTIVE' },
       }
 
       if (input.roundId) {