Implement 10 platform features: evaluation UX, admin tools, AI summaries, applicant portal

Batch 1 - Quick Wins:
- F1: Evaluation progress indicator with touch tracking in sticky status bar
- F2: Export filtering results as CSV with dynamic AI column flattening
- F3: Observer access to analytics dashboards (8 procedures changed to observerProcedure)

Batch 2 - Jury Experience:
- F4: Countdown timer component with urgency colors + email reminder service with cron endpoint
- F5: Conflict of interest declaration system (dialog, admin management, review workflow)

Batch 3 - Admin & AI Enhancements:
- F6: Bulk status update UI with selection checkboxes, floating toolbar, status history recording
- F7: AI-powered evaluation summary with anonymized data, OpenAI integration, scoring patterns
- F8: Smart assignment improvements (geo diversity penalty, round familiarity bonus, COI blocking)

Batch 4 - Form Flexibility & Applicant Portal:
- F9: Evaluation form flexibility (text, boolean, section_header types, conditional visibility)
- F10: Applicant portal (status timeline, per-round documents, mentor messaging)

Schema: 5 new models (ReminderLog, ConflictOfInterest, EvaluationSummary, ProjectStatusHistory, MentorMessage), ProjectFile extended with roundId + isLate.

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

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

@@ -1,7 +1,7 @@
-import { Suspense } from 'react'
-import { prisma } from '@/lib/prisma'
+'use client'
 
-export const dynamic = 'force-dynamic'
+import { useState } from 'react'
+import { trpc } from '@/lib/trpc/client'
 import {
   Card,
   CardContent,
@@ -20,80 +20,72 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import { FileSpreadsheet, BarChart3, Users, ClipboardList } from 'lucide-react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  FileSpreadsheet,
+  BarChart3,
+  Users,
+  ClipboardList,
+  CheckCircle2,
+  TrendingUp,
+} from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
+import {
+  ScoreDistributionChart,
+  EvaluationTimelineChart,
+  StatusBreakdownChart,
+  JurorWorkloadChart,
+  ProjectRankingsChart,
+  CriteriaScoresChart,
+} from '@/components/charts'
 
-async function ReportsContent() {
-  // Get rounds with evaluation stats
-  const rounds = await prisma.round.findMany({
-    include: {
-      program: {
-        select: {
-          name: true,
-        },
-      },
-      _count: {
-        select: {
-          projects: true,
-          assignments: true,
-        },
-      },
-      assignments: {
-        select: {
-          id: true,
-          evaluation: {
-            select: { id: true, status: true },
-          },
-        },
-      },
-    },
-    orderBy: { createdAt: 'desc' },
-  })
+function OverviewTab({ selectedRoundId }: { selectedRoundId: string | null }) {
+  const { data: programs, isLoading } = trpc.program.list.useQuery({ includeRounds: true })
 
-  // Calculate completion stats for each round
-  const roundStats = rounds.map((round) => {
-    const totalAssignments = round._count.assignments
-    const completedEvaluations = round.assignments.filter(
-      (a) => a.evaluation?.status === 'SUBMITTED'
-    ).length
-    const completionRate =
-      totalAssignments > 0
-        ? Math.round((completedEvaluations / totalAssignments) * 100)
-        : 0
+  const rounds = programs?.flatMap(p =>
+    p.rounds.map(r => ({
+      ...r,
+      programName: `${p.year} Edition`,
+    }))
+  ) || []
 
-    return {
-      ...round,
-      totalAssignments,
-      completedEvaluations,
-      completionRate,
-    }
-  })
+  const { data: overviewStats, isLoading: statsLoading } =
+    trpc.analytics.getOverviewStats.useQuery(
+      { roundId: selectedRoundId! },
+      { enabled: !!selectedRoundId }
+    )
 
-  // Calculate totals
-  const totalProjects = roundStats.reduce((acc, r) => acc + r._count.projects, 0)
-  const totalAssignments = roundStats.reduce(
-    (acc, r) => acc + r.totalAssignments,
-    0
-  )
-  const totalEvaluations = roundStats.reduce(
-    (acc, r) => acc + r.completedEvaluations,
-    0
-  )
-
-  if (rounds.length === 0) {
+  if (isLoading) {
     return (
-      <Card>
-        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
-          <FileSpreadsheet className="h-12 w-12 text-muted-foreground/50" />
-          <p className="mt-2 font-medium">No data to report</p>
-          <p className="text-sm text-muted-foreground">
-            Reports will appear here once rounds are created
-          </p>
-        </CardContent>
-      </Card>
+      <div className="space-y-6">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i}>
+              <CardHeader className="space-y-0 pb-2">
+                <Skeleton className="h-4 w-20" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-8 w-16" />
+                <Skeleton className="mt-2 h-3 w-24" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
     )
   }
 
+  const totalProjects = rounds.reduce((acc, r) => acc + (r._count?.projects || 0), 0)
+  const activeRounds = rounds.filter((r) => r.status === 'ACTIVE').length
+  const totalPrograms = programs?.length || 0
+
   return (
     <div className="space-y-6">
       {/* Quick Stats */}
@@ -106,7 +98,7 @@ async function ReportsContent() {
           <CardContent>
             <div className="text-2xl font-bold">{rounds.length}</div>
             <p className="text-xs text-muted-foreground">
-              {rounds.filter((r) => r.status === 'ACTIVE').length} active
+              {activeRounds} active
             </p>
           </CardContent>
         </Card>
@@ -124,27 +116,99 @@ async function ReportsContent() {
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Assignments</CardTitle>
+            <CardTitle className="text-sm font-medium">Active Rounds</CardTitle>
             <Users className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{totalAssignments}</div>
-            <p className="text-xs text-muted-foreground">Total assignments</p>
+            <div className="text-2xl font-bold">{activeRounds}</div>
+            <p className="text-xs text-muted-foreground">Currently active</p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
-            <FileSpreadsheet className="h-4 w-4 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium">Programs</CardTitle>
+            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{totalEvaluations}</div>
-            <p className="text-xs text-muted-foreground">Completed</p>
+            <div className="text-2xl font-bold">{totalPrograms}</div>
+            <p className="text-xs text-muted-foreground">Total programs</p>
           </CardContent>
         </Card>
       </div>
 
+      {/* Round-specific overview stats */}
+      {selectedRoundId && (
+        <>
+          {statsLoading ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {[...Array(4)].map((_, i) => (
+                <Card key={i}>
+                  <CardHeader className="space-y-0 pb-2">
+                    <Skeleton className="h-4 w-20" />
+                  </CardHeader>
+                  <CardContent>
+                    <Skeleton className="h-8 w-16" />
+                    <Skeleton className="mt-2 h-3 w-24" />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : overviewStats ? (
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold">Selected Round Details</h3>
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <Card>
+                  <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" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{overviewStats.projectCount}</div>
+                    <p className="text-xs text-muted-foreground">In this round</p>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">Assignments</CardTitle>
+                    <Users className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{overviewStats.assignmentCount}</div>
+                    <p className="text-xs text-muted-foreground">
+                      {overviewStats.jurorCount} jurors
+                    </p>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
+                    <FileSpreadsheet className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{overviewStats.evaluationCount}</div>
+                    <p className="text-xs text-muted-foreground">Submitted</p>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">Completion</CardTitle>
+                    <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{overviewStats.completionRate}%</div>
+                    <Progress value={overviewStats.completionRate} className="mt-2 h-2" />
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          ) : null}
+        </>
+      )}
+
       {/* Rounds Table - Desktop */}
       <Card className="hidden md:block">
         <CardHeader>
@@ -158,12 +222,11 @@ async function ReportsContent() {
                 <TableHead>Round</TableHead>
                 <TableHead>Program</TableHead>
                 <TableHead>Projects</TableHead>
-                <TableHead>Progress</TableHead>
                 <TableHead>Status</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {roundStats.map((round) => (
+              {rounds.map((round) => (
                 <TableRow key={round.id}>
                   <TableCell>
                     <div>
@@ -175,21 +238,8 @@ async function ReportsContent() {
                       )}
                     </div>
                   </TableCell>
-                  <TableCell>{round.program.name}</TableCell>
-                  <TableCell>{round._count.projects}</TableCell>
-                  <TableCell>
-                    <div className="min-w-[120px] space-y-1">
-                      <div className="flex justify-between text-sm">
-                        <span>
-                          {round.completedEvaluations}/{round.totalAssignments}
-                        </span>
-                        <span className="text-muted-foreground">
-                          {round.completionRate}%
-                        </span>
-                      </div>
-                      <Progress value={round.completionRate} className="h-2" />
-                    </div>
-                  </TableCell>
+                  <TableCell>{round.programName}</TableCell>
+                  <TableCell>{round._count?.projects || '-'}</TableCell>
                   <TableCell>
                     <Badge
                       variant={
@@ -213,7 +263,7 @@ async function ReportsContent() {
       {/* Rounds Cards - Mobile */}
       <div className="space-y-4 md:hidden">
         <h2 className="text-lg font-semibold">Round Reports</h2>
-        {roundStats.map((round) => (
+        {rounds.map((round) => (
           <Card key={round.id}>
             <CardContent className="pt-4 space-y-3">
               <div className="flex items-center justify-between">
@@ -230,24 +280,14 @@ async function ReportsContent() {
                   {round.status}
                 </Badge>
               </div>
-              <p className="text-sm text-muted-foreground">{round.program.name}</p>
+              <p className="text-sm text-muted-foreground">{round.programName}</p>
               {round.votingEndAt && (
                 <p className="text-xs text-muted-foreground">
                   Ends: {formatDateOnly(round.votingEndAt)}
                 </p>
               )}
-              <div className="flex items-center justify-between text-sm">
-                <span>{round._count.projects} projects</span>
-                <span className="text-muted-foreground">
-                  {round.completedEvaluations}/{round.totalAssignments} evaluations
-                </span>
-              </div>
-              <div className="space-y-1">
-                <div className="flex justify-between text-sm">
-                  <span>Progress</span>
-                  <span className="text-muted-foreground">{round.completionRate}%</span>
-                </div>
-                <Progress value={round.completionRate} className="h-2" />
+              <div className="text-sm">
+                <span>{round._count?.projects || 0} projects</span>
               </div>
             </CardContent>
           </Card>
@@ -257,40 +297,136 @@ async function ReportsContent() {
   )
 }
 
-function ReportsSkeleton() {
+function AnalyticsTab({ selectedRoundId }: { selectedRoundId: string }) {
+  const { data: scoreDistribution, isLoading: scoreLoading } =
+    trpc.analytics.getScoreDistribution.useQuery(
+      { roundId: selectedRoundId },
+      { enabled: !!selectedRoundId }
+    )
+
+  const { data: timeline, isLoading: timelineLoading } =
+    trpc.analytics.getEvaluationTimeline.useQuery(
+      { roundId: selectedRoundId },
+      { enabled: !!selectedRoundId }
+    )
+
+  const { data: statusBreakdown, isLoading: statusLoading } =
+    trpc.analytics.getStatusBreakdown.useQuery(
+      { roundId: selectedRoundId },
+      { enabled: !!selectedRoundId }
+    )
+
+  const { data: jurorWorkload, isLoading: workloadLoading } =
+    trpc.analytics.getJurorWorkload.useQuery(
+      { roundId: selectedRoundId },
+      { enabled: !!selectedRoundId }
+    )
+
+  const { data: projectRankings, isLoading: rankingsLoading } =
+    trpc.analytics.getProjectRankings.useQuery(
+      { roundId: selectedRoundId, limit: 15 },
+      { enabled: !!selectedRoundId }
+    )
+
+  const { data: criteriaScores, isLoading: criteriaLoading } =
+    trpc.analytics.getCriteriaScores.useQuery(
+      { roundId: selectedRoundId },
+      { enabled: !!selectedRoundId }
+    )
+
   return (
     <div className="space-y-6">
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {[...Array(4)].map((_, i) => (
-          <Card key={i}>
-            <CardHeader className="space-y-0 pb-2">
-              <Skeleton className="h-4 w-20" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-8 w-16" />
-              <Skeleton className="mt-2 h-3 w-24" />
-            </CardContent>
-          </Card>
-        ))}
+      {/* Row 1: Score Distribution & Status Breakdown */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {scoreLoading ? (
+          <Skeleton className="h-[350px]" />
+        ) : scoreDistribution ? (
+          <ScoreDistributionChart
+            data={scoreDistribution.distribution}
+            averageScore={scoreDistribution.averageScore}
+            totalScores={scoreDistribution.totalScores}
+          />
+        ) : null}
+
+        {statusLoading ? (
+          <Skeleton className="h-[350px]" />
+        ) : statusBreakdown ? (
+          <StatusBreakdownChart data={statusBreakdown} />
+        ) : null}
       </div>
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-32" />
-          <Skeleton className="h-4 w-48" />
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            {[...Array(3)].map((_, i) => (
-              <Skeleton key={i} className="h-16 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+
+      {/* Row 2: Evaluation Timeline */}
+      {timelineLoading ? (
+        <Skeleton className="h-[350px]" />
+      ) : timeline?.length ? (
+        <EvaluationTimelineChart data={timeline} />
+      ) : (
+        <Card>
+          <CardContent className="flex items-center justify-center py-12">
+            <p className="text-muted-foreground">
+              No evaluation data available yet
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Row 3: Criteria Scores */}
+      {criteriaLoading ? (
+        <Skeleton className="h-[350px]" />
+      ) : criteriaScores?.length ? (
+        <CriteriaScoresChart data={criteriaScores} />
+      ) : null}
+
+      {/* Row 4: Juror Workload */}
+      {workloadLoading ? (
+        <Skeleton className="h-[450px]" />
+      ) : jurorWorkload?.length ? (
+        <JurorWorkloadChart data={jurorWorkload} />
+      ) : (
+        <Card>
+          <CardContent className="flex items-center justify-center py-12">
+            <p className="text-muted-foreground">
+              No juror assignments yet
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Row 5: Project Rankings */}
+      {rankingsLoading ? (
+        <Skeleton className="h-[550px]" />
+      ) : projectRankings?.length ? (
+        <ProjectRankingsChart data={projectRankings} limit={15} />
+      ) : (
+        <Card>
+          <CardContent className="flex items-center justify-center py-12">
+            <p className="text-muted-foreground">
+              No project scores available yet
+            </p>
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }
 
 export default function ObserverReportsPage() {
+  const [selectedRoundId, setSelectedRoundId] = useState<string | null>(null)
+
+  const { data: programs, isLoading: roundsLoading } = trpc.program.list.useQuery({ includeRounds: true })
+
+  const rounds = programs?.flatMap(p =>
+    p.rounds.map(r => ({
+      ...r,
+      programName: `${p.year} Edition`,
+    }))
+  ) || []
+
+  // Set default selected round
+  if (rounds.length && !selectedRoundId) {
+    setSelectedRoundId(rounds[0].id)
+  }
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -301,10 +437,62 @@ export default function ObserverReportsPage() {
         </p>
       </div>
 
-      {/* Content */}
-      <Suspense fallback={<ReportsSkeleton />}>
-        <ReportsContent />
-      </Suspense>
+      {/* Round Selector */}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+        <label className="text-sm font-medium">Select Round:</label>
+        {roundsLoading ? (
+          <Skeleton className="h-10 w-full sm:w-[300px]" />
+        ) : rounds.length > 0 ? (
+          <Select value={selectedRoundId || ''} onValueChange={setSelectedRoundId}>
+            <SelectTrigger className="w-full sm:w-[300px]">
+              <SelectValue placeholder="Select a round" />
+            </SelectTrigger>
+            <SelectContent>
+              {rounds.map((round) => (
+                <SelectItem key={round.id} value={round.id}>
+                  {round.programName} - {round.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <p className="text-sm text-muted-foreground">No rounds available</p>
+        )}
+      </div>
+
+      {/* Tabs */}
+      <Tabs defaultValue="overview" className="space-y-6">
+        <TabsList>
+          <TabsTrigger value="overview" className="gap-2">
+            <FileSpreadsheet className="h-4 w-4" />
+            Overview
+          </TabsTrigger>
+          <TabsTrigger value="analytics" className="gap-2" disabled={!selectedRoundId}>
+            <TrendingUp className="h-4 w-4" />
+            Analytics
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview">
+          <OverviewTab selectedRoundId={selectedRoundId} />
+        </TabsContent>
+
+        <TabsContent value="analytics">
+          {selectedRoundId ? (
+            <AnalyticsTab selectedRoundId={selectedRoundId} />
+          ) : (
+            <Card>
+              <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+                <BarChart3 className="h-12 w-12 text-muted-foreground/50" />
+                <p className="mt-2 font-medium">Select a round</p>
+                <p className="text-sm text-muted-foreground">
+                  Choose a round from the dropdown above to view analytics
+                </p>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }