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">