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>
2026-02-17 13:07:40 +01:00
parent ef1bf24388
commit bfdbd0fc6a
5 changed files with 265 additions and 163 deletions
--- a/src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/evaluate/page.tsx
+++ b/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,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} 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,25 +236,23 @@ export default function JuryEvaluatePage({ params: paramsPromise }: PageProps) {
  // COI Dialog
  if (!coiAccepted && showCOIDialog && evalConfig?.coiRequired !== false) {
    return (
-      <Dialog open={showCOIDialog} onOpenChange={() => { /* prevent dismissal */ }}>
-        <DialogContent
-          onPointerDownOutside={(e) => e.preventDefault()}
-          onEscapeKeyDown={(e) => e.preventDefault()}
-          onInteractOutside={(e) => e.preventDefault()}
-        >
-          <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.
-              </p>
-              <p>
-                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>
-          </DialogHeader>
+      <AlertDialog open={showCOIDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Conflict of Interest Declaration</AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="space-y-3 pt-2">
+                <p>
+                  Before evaluating this project, you must confirm that you have no conflict of
+                  interest.
+                </p>
+                <p>
+                  A conflict of interest exists if you have a personal, professional, or financial
+                  relationship with the project team that could influence your judgment.
+                </p>
+              </div>
+            </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>
-        </DialogContent>
-      </Dialog>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </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) => (
-                <div key={criterion.id} className="space-y-2 p-4 border rounded-lg">
-                  <Label htmlFor={criterion.id}>
-                    {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>
-                  )}
-                  <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>
-              ))}
+              {criteria.map((criterion) => {
+                const min = criterion.minScore ?? 1
+                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-sm text-muted-foreground">{criterion.description}</p>
+                        )}
+                      </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">
-              <Label htmlFor="globalScore">
-                Overall Score <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="globalScore"
-                type="number"
-                min="1"
-                max="10"
-                value={globalScore}
-                onChange={(e) => setGlobalScore(e.target.value)}
-                placeholder="Enter score (1-10)"
-              />
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label>
+                  Overall Score <span className="text-destructive">*</span>
+                </Label>
+                <span className="rounded-md bg-muted px-2.5 py-1 text-sm font-bold tabular-nums">
+                  {globalScore || '—'}/10
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-muted-foreground">1</span>
+                <Slider
+                  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>
--- a/src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/page.tsx
+++ b/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>
-            <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>
+            {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">
--- a/src/app/(jury)/jury/competitions/page.tsx
+++ b/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">
--- a/src/app/(jury)/jury/page.tsx
+++ b/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,
-      accentColor: 'border-l-blue-500',
-      iconBg: 'bg-blue-50 dark:bg-blue-950/40',
-      iconColor: 'text-blue-600 dark:text-blue-400',
+      label: 'Assigned',
+      detail: 'Total projects',
+      accent: 'text-brand-blue',
    },
    {
-      label: 'Completed',
      value: completedAssignments,
-      icon: CheckCircle2,
-      accentColor: 'border-l-emerald-500',
-      iconBg: 'bg-emerald-50 dark:bg-emerald-950/40',
-      iconColor: 'text-emerald-600 dark:text-emerald-400',
+      label: 'Completed',
+      detail: `${completionRate.toFixed(0)}% done`,
+      accent: 'text-emerald-600',
    },
    {
-      label: 'In Progress',
      value: inProgressAssignments,
-      icon: Clock,
-      accentColor: 'border-l-amber-500',
-      iconBg: 'bg-amber-50 dark:bg-amber-950/40',
-      iconColor: 'text-amber-600 dark:text-amber-400',
+      label: 'In draft',
+      detail: inProgressAssignments > 0 ? 'Work in progress' : 'None started',
+      accent: inProgressAssignments > 0 ? 'text-amber-600' : 'text-emerald-600',
    },
    {
-      label: 'Pending',
      value: pendingAssignments,
-      icon: Target,
-      accentColor: 'border-l-slate-400',
-      iconBg: 'bg-slate-50 dark:bg-slate-800/50',
-      iconColor: 'text-slate-500 dark:text-slate-400',
+      label: 'Pending',
+      detail: pendingAssignments > 0 ? 'Not yet started' : 'All started',
+      accent: pendingAssignments > 0 ? 'text-amber-600' : 'text-emerald-600',
    },
  ]

@@ -301,48 +292,34 @@ async function JuryDashboardContent() {
        </AnimatedCard>
      )}

-      {/* Stats + Overall Completion in one row */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
-        {stats.map((stat, i) => (
-          <AnimatedCard key={stat.label} index={i + 1}>
-            <Card className={cn(
-              'border-l-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
-              stat.accentColor,
-            )}>
-              <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" />
+      {/* Stats — editorial strip */}
+      <AnimatedCard index={1}>
+        {/* Mobile: compact horizontal data strip */}
+        <div className="flex items-baseline justify-between border-b border-t py-3 md:hidden">
+          {stats.map((s, i) => (
+            <div key={i} className={`flex-1 text-center ${i > 0 ? 'border-l border-border/50' : ''}`}>
+              <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>
+            </div>
+          ))}
+        </div>
+
+        {/* Desktop: editorial stat row */}
+        <div className="hidden md:block">
+          <div className="grid grid-cols-4 gap-px rounded-lg bg-border/40 overflow-hidden">
+            {stats.map((s, i) => (
+              <div
+                key={i}
+                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 className="flex-1 min-w-0">
-                <p className="text-2xl font-bold tabular-nums tracking-tight text-brand-blue dark:text-brand-teal">
-                  {completionRate.toFixed(0)}%
-                </p>
-                <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted/60 mt-1">
-                  <div
-                    className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
-                    style={{ width: `${completionRate}%` }}
-                  />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </AnimatedCard>
-      </div>
+            ))}
+          </div>
+        </div>
+      </AnimatedCard>

      {/* 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">
-            <CardContent className="flex items-center gap-4 py-5 px-5">
-              <Skeleton className="h-11 w-11 rounded-xl" />
-              <div className="space-y-2">
-                <Skeleton className="h-7 w-12" />
-                <Skeleton className="h-4 w-24" />
-              </div>
-            </CardContent>
-          </Card>
+          <div key={i} className={`flex-1 text-center ${i > 0 ? 'border-l border-border/50' : ''}`}>
+            <Skeleton className="h-6 w-8 mx-auto" />
+            <Skeleton className="h-3 w-14 mx-auto mt-1" />
+          </div>
        ))}
      </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>
+      <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>
+          ))}
+        </div>
+      </div>
      {/* Two-column skeleton */}
      <div className="grid gap-6 lg:grid-cols-12">
        <div className="lg:col-span-7">
--- a/src/server/routers/assignment.ts
+++ b/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) {