Comprehensive platform audit: security, UX, performance, and visual polish

Phase 1: Security - status transition validation, Zod tightening, DB indexes, transactions

Phase 2: Admin UX - search/filter for awards, learning, partners pages

Phase 3: Dashboard - Recent Activity feed, Pending Actions card, quick actions

Phase 4: Jury - assignments progress/urgency, autosave indicator, divergence highlighting

Phase 5: Portals - observer charts, mentor search, login/onboarding polish

Phase 6: Messages preview dialog, CsvExportDialog with column selection

Phase 7: Performance - query optimizations, loading skeletons, useDebounce hook

Phase 8: Visual - AnimatedCard, hover effects, StatusBadge, empty state CTAs

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

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

@@ -21,8 +21,9 @@ import {
   Users,
   CheckCircle2,
   Eye,
+  BarChart3,
 } from 'lucide-react'
-import { formatDateOnly } from '@/lib/utils'
+import { cn, formatDateOnly } from '@/lib/utils'
 
 async function ObserverDashboardContent() {
   const [
@@ -32,6 +33,7 @@ async function ObserverDashboardContent() {
     jurorCount,
     evaluationStats,
     recentRounds,
+    evaluationScores,
   ] = await Promise.all([
     prisma.program.count(),
     prisma.round.count({ where: { status: 'ACTIVE' } }),
@@ -52,8 +54,17 @@ async function ObserverDashboardContent() {
             assignments: true,
           },
         },
+        assignments: {
+          select: {
+            evaluation: { select: { status: true } },
+          },
+        },
       },
     }),
+    prisma.evaluation.findMany({
+      where: { status: 'SUBMITTED', globalScore: { not: null } },
+      select: { globalScore: true },
+    }),
   ])
 
   const submittedCount =
@@ -64,6 +75,21 @@ async function ObserverDashboardContent() {
   const completionRate =
     totalEvaluations > 0 ? (submittedCount / totalEvaluations) * 100 : 0
 
+  // Score distribution computation
+  const scores = evaluationScores.map(e => e.globalScore!).filter(s => s != null)
+  const buckets = [
+    { label: '9-10', min: 9, max: 10, color: 'bg-green-500' },
+    { label: '7-8', min: 7, max: 8.99, color: 'bg-emerald-400' },
+    { label: '5-6', min: 5, max: 6.99, color: 'bg-amber-400' },
+    { label: '3-4', min: 3, max: 4.99, color: 'bg-orange-400' },
+    { label: '1-2', min: 1, max: 2.99, color: 'bg-red-400' },
+  ]
+  const maxCount = Math.max(...buckets.map(b => scores.filter(s => s >= b.min && s <= b.max).length), 1)
+  const scoreDistribution = buckets.map(b => {
+    const count = scores.filter(s => s >= b.min && s <= b.max).length
+    return { ...b, count, percentage: (count / maxCount) * 100 }
+  })
+
   return (
     <>
       {/* Observer Notice */}
@@ -88,7 +114,7 @@ async function ObserverDashboardContent() {
 
       {/* Stats Grid */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
+        <Card className="transition-all hover:shadow-md">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Programs</CardTitle>
             <FolderKanban className="h-4 w-4 text-muted-foreground" />
@@ -101,7 +127,7 @@ async function ObserverDashboardContent() {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="transition-all hover:shadow-md">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Projects</CardTitle>
             <ClipboardList className="h-4 w-4 text-muted-foreground" />
@@ -112,7 +138,7 @@ async function ObserverDashboardContent() {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="transition-all hover:shadow-md">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
             <Users className="h-4 w-4 text-muted-foreground" />
@@ -123,7 +149,7 @@ async function ObserverDashboardContent() {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="transition-all hover:shadow-md">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
             <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
@@ -159,7 +185,7 @@ async function ObserverDashboardContent() {
               {recentRounds.map((round) => (
                 <div
                   key={round.id}
-                  className="flex items-center justify-between rounded-lg border p-4"
+                  className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm"
                 >
                   <div className="space-y-1">
                     <div className="flex items-center gap-2">
@@ -192,6 +218,74 @@ async function ObserverDashboardContent() {
           )}
         </CardContent>
       </Card>
+
+      {/* Score Distribution */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Score Distribution</CardTitle>
+          <CardDescription>Distribution of global scores across all evaluations</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {scoreDistribution.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <BarChart3 className="h-12 w-12 text-muted-foreground/50" />
+              <p className="mt-2 text-sm text-muted-foreground">No completed evaluations yet</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {scoreDistribution.map((bucket) => (
+                <div key={bucket.label} className="flex items-center gap-3">
+                  <span className="text-sm w-16 text-right tabular-nums">{bucket.label}</span>
+                  <div className="flex-1 h-6 bg-muted rounded-full overflow-hidden">
+                    <div
+                      className={cn('h-full rounded-full transition-all', bucket.color)}
+                      style={{ width: `${bucket.percentage}%` }}
+                    />
+                  </div>
+                  <span className="text-sm tabular-nums w-8">{bucket.count}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Jury Completion by Round */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Jury Completion by Round</CardTitle>
+          <CardDescription>Evaluation completion rate per round</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {recentRounds.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <FolderKanban className="h-12 w-12 text-muted-foreground/50" />
+              <p className="mt-2 text-sm text-muted-foreground">No rounds available</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {recentRounds.map((round) => {
+                const submittedInRound = round.assignments.filter(a => a.evaluation?.status === 'SUBMITTED').length
+                const totalAssignments = round.assignments.length
+                const percent = totalAssignments > 0 ? Math.round((submittedInRound / totalAssignments) * 100) : 0
+                return (
+                  <div key={round.id} className="space-y-1.5">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">{round.name}</span>
+                        <Badge variant={round.status === 'ACTIVE' ? 'default' : 'secondary'}>{round.status}</Badge>
+                      </div>
+                      <span className="text-sm font-semibold tabular-nums">{percent}%</span>
+                    </div>
+                    <Progress value={percent} className="h-2" />
+                    <p className="text-xs text-muted-foreground">{submittedInRound} of {totalAssignments} evaluations submitted</p>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </>
   )
 }