Observer platform overhaul: Nivo charts, round-type stats, UX improvements

Phase 1: Fix 6 backend data bugs in analytics.ts (roundName filtering,
unscored projects, criteria scores, activeRoundCount scoping, email
privacy leaks in juror consistency + workload)

Phase 2-3: Migrate all 9 chart components from Recharts to Nivo
(@nivo/bar, @nivo/line, @nivo/pie, @nivo/scatterplot) with shared brand
theme, scoreGradient colors, and STATUS_COLORS map. Fixes scatter plot
outlier coloring and pie chart label visibility bugs.

Phase 4: Add round-type-aware stats (getRoundTypeStats backend +
RoundTypeStatsCards component) showing appropriate metrics per round
type (intake/filtering/evaluation/submission/mentoring/live/deliberation).

Phase 5: UX improvements — Stage→Round terminology, clickable dashboard
round links, URL-based round selection (?round=), round type indicators
in selectors, accessible Toggle-based cross-round comparison, sortable
project table columns (title/score/evaluations), brand score colors on
dashboard bar chart with aria labels.

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

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useSearchParams } from 'next/navigation'
 import { trpc } from '@/lib/trpc/client'
 import {
   Card,
@@ -10,6 +11,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import { Toggle } from '@/components/ui/toggle'
 import { Progress } from '@/components/ui/progress'
 import { Skeleton } from '@/components/ui/skeleton'
 import {
@@ -61,11 +63,21 @@ function parseSelection(value: string | null): { roundId?: string; programId?: s
   return { roundId: value }
 }
 
+const ROUND_TYPE_LABELS: Record<string, string> = {
+  INTAKE: 'Intake',
+  FILTERING: 'Filtering',
+  EVALUATION: 'Evaluation',
+  SUBMISSION: 'Submission',
+  MENTORING: 'Mentoring',
+  LIVE_FINAL: 'Live Final',
+  DELIBERATION: 'Deliberation',
+}
+
 function OverviewTab({ selectedValue }: { selectedValue: string | null }) {
   const { data: programs, isLoading } = trpc.program.list.useQuery({ includeStages: true })
 
   const stages = programs?.flatMap(p =>
-    (p.stages as { id: string; name: string; status: string; windowCloseAt: Date | null; _count: { projects: number; assignments: number } }[]).map(s => ({
+    (p.stages as { id: string; name: string; status: string; roundType: string; windowCloseAt: Date | null; _count: { projects: number; assignments: number } }[]).map(s => ({
       ...s,
       programName: `${p.year} Edition`,
     }))
@@ -100,9 +112,8 @@ function OverviewTab({ selectedValue }: { selectedValue: string | null }) {
     )
   }
 
-  // Count distinct projects by collecting unique IDs, not summing per-round states
-  const totalProjects = overviewStats?.projectCount ?? stages.reduce((acc, s) => acc + (s._count?.projects || 0), 0)
-  const activeStages = stages.filter((s) => s.status === 'ROUND_ACTIVE').length
+  const totalProjects = overviewStats?.projectCount ?? 0
+  const activeRounds = stages.filter((s) => s.status === 'ROUND_ACTIVE').length
   const totalPrograms = programs?.length || 0
 
   return (
@@ -114,10 +125,10 @@ function OverviewTab({ selectedValue }: { selectedValue: string | null }) {
             <CardContent className="p-5">
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-medium text-muted-foreground">Total Stages</p>
+                  <p className="text-sm font-medium text-muted-foreground">Total Rounds</p>
                   <p className="text-2xl font-bold mt-1">{stages.length}</p>
                   <p className="text-xs text-muted-foreground mt-1">
-                    {activeStages} active
+                    {activeRounds} active
                   </p>
                 </div>
                 <div className="rounded-xl bg-blue-50 p-3">
@@ -135,7 +146,7 @@ function OverviewTab({ selectedValue }: { selectedValue: string | null }) {
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Total Projects</p>
                   <p className="text-2xl font-bold mt-1">{totalProjects}</p>
-                  <p className="text-xs text-muted-foreground mt-1">Across all stages</p>
+                  <p className="text-xs text-muted-foreground mt-1">Across all rounds</p>
                 </div>
                 <div className="rounded-xl bg-emerald-50 p-3">
                   <ClipboardList className="h-5 w-5 text-emerald-600" />
@@ -150,8 +161,8 @@ function OverviewTab({ selectedValue }: { selectedValue: string | null }) {
             <CardContent className="p-5">
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-medium text-muted-foreground">Active Stages</p>
-                  <p className="text-2xl font-bold mt-1">{activeStages}</p>
+                  <p className="text-sm font-medium text-muted-foreground">Active Rounds</p>
+                  <p className="text-2xl font-bold mt-1">{activeRounds}</p>
                   <p className="text-xs text-muted-foreground mt-1">Currently active</p>
                 </div>
                 <div className="rounded-xl bg-violet-50 p-3">
@@ -255,14 +266,14 @@ function OverviewTab({ selectedValue }: { selectedValue: string | null }) {
       {/* Stages Table - Desktop */}
       <Card className="hidden md:block">
         <CardHeader>
-          <CardTitle>Stage Reports</CardTitle>
-          <CardDescription>Progress overview for each stage</CardDescription>
+          <CardTitle>Round Reports</CardTitle>
+          <CardDescription>Progress overview for each round</CardDescription>
         </CardHeader>
         <CardContent>
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Stage</TableHead>
+                <TableHead>Round</TableHead>
                 <TableHead>Program</TableHead>
                 <TableHead>Projects</TableHead>
                 <TableHead>Status</TableHead>
@@ -305,7 +316,7 @@ function OverviewTab({ selectedValue }: { selectedValue: string | null }) {
 
       {/* Stages Cards - Mobile */}
       <div className="space-y-4 md:hidden">
-        <h2 className="text-lg font-semibold">Stage Reports</h2>
+        <h2 className="text-lg font-semibold">Round Reports</h2>
         {stages.map((stage) => (
           <Card key={stage.id}>
             <CardContent className="pt-4 space-y-3">
@@ -485,25 +496,27 @@ function CrossStageTab() {
     <div className="space-y-6">
       <Card>
         <CardHeader>
-          <CardTitle>Select Stages to Compare</CardTitle>
-          <CardDescription>Choose at least 2 stages</CardDescription>
+          <CardTitle>Select Rounds to Compare</CardTitle>
+          <CardDescription>Choose at least 2 rounds</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-2" role="group" aria-label="Select rounds to compare">
             {stages.map((stage) => (
-              <Badge
+              <Toggle
                 key={stage.id}
-                variant={selectedRoundIds.includes(stage.id) ? 'default' : 'outline'}
-                className="cursor-pointer text-sm py-1.5 px-3"
-                onClick={() => toggleRound(stage.id)}
+                variant="outline"
+                size="sm"
+                pressed={selectedRoundIds.includes(stage.id)}
+                onPressedChange={() => toggleRound(stage.id)}
+                aria-label={`${stage.programName} - ${stage.name}`}
               >
                 {stage.programName} - {stage.name}
-              </Badge>
+              </Toggle>
             ))}
           </div>
           {selectedRoundIds.length < 2 && (
             <p className="text-sm text-muted-foreground mt-3">
-              Select at least 2 stages to enable comparison
+              Select at least 2 rounds to enable comparison
             </p>
           )}
         </CardContent>
@@ -541,7 +554,7 @@ function JurorConsistencyTab({ selectedValue }: { selectedValue: string }) {
       data={consistency as {
         overallAverage: number
         jurors: Array<{
-          userId: string; name: string; email: string
+          userId: string; name: string
           evaluationCount: number; averageScore: number
           stddev: number; deviationFromOverall: number; isOutlier: boolean
         }>
@@ -578,19 +591,21 @@ function DiversityTab({ selectedValue }: { selectedValue: string }) {
 }
 
 export default function ObserverReportsPage() {
-  const [selectedValue, setSelectedValue] = useState<string | null>(null)
+  const searchParams = useSearchParams()
+  const roundFromUrl = searchParams.get('round')
+  const [selectedValue, setSelectedValue] = useState<string | null>(roundFromUrl)
 
   const { data: programs, isLoading: stagesLoading } = trpc.program.list.useQuery({ includeStages: true })
 
   const stages = programs?.flatMap(p =>
-    (p.stages as { id: string; name: string; status: string; windowCloseAt: Date | null; _count: { projects: number; assignments: number } }[]).map(s => ({
+    (p.stages as { id: string; name: string; status: string; roundType: string; windowCloseAt: Date | null; _count: { projects: number; assignments: number } }[]).map(s => ({
       ...s,
       programId: p.id,
       programName: `${p.year} Edition`,
     }))
   ) || []
 
-  // Set default selected stage — prefer the active round, fall back to first
+  // Set default selected round — prefer URL param, then active round, then first
   useEffect(() => {
     if (stages.length && !selectedValue) {
       const active = stages.find((s) => s.status === 'ROUND_ACTIVE')
@@ -613,29 +628,29 @@ export default function ObserverReportsPage() {
 
       {/* Stage Selector */}
       <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
-        <label className="text-sm font-medium">Select Stage:</label>
+        <label className="text-sm font-medium">Select Round:</label>
         {stagesLoading ? (
           <Skeleton className="h-10 w-full sm:w-[300px]" />
         ) : stages.length > 0 ? (
           <Select value={selectedValue || ''} onValueChange={setSelectedValue}>
             <SelectTrigger className="w-full sm:w-[300px]">
-              <SelectValue placeholder="Select a stage" />
+              <SelectValue placeholder="Select a round" />
             </SelectTrigger>
             <SelectContent>
               {programs?.map((p) => (
                 <SelectItem key={`all:${p.id}`} value={`all:${p.id}`}>
-                  {p.year} Edition — All Stages
+                  {p.year} Edition — All Rounds
                 </SelectItem>
               ))}
               {stages.map((stage) => (
                 <SelectItem key={stage.id} value={stage.id}>
-                  {stage.programName} - {stage.name}
+                  {stage.programName} - {stage.name}{stage.roundType ? ` (${ROUND_TYPE_LABELS[stage.roundType] || stage.roundType})` : ''}
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
         ) : (
-          <p className="text-sm text-muted-foreground">No stages available</p>
+          <p className="text-sm text-muted-foreground">No rounds available</p>
         )}
       </div>
 

src/components/charts/chart-theme.ts

@@ -0,0 +1,133 @@
+import type { PartialTheme } from '@nivo/theming'
+
+// Brand colors from CLAUDE.md
+export const BRAND_DARK_BLUE = '#053d57'
+export const BRAND_RED = '#de0f1e'
+export const BRAND_TEAL = '#557f8c'
+export const BRAND_WHITE = '#fefefe'
+
+// Extended palette derived from brand
+export const BRAND_COLORS = [
+  '#053d57', // Dark Blue
+  '#de0f1e', // Red
+  '#557f8c', // Teal
+  '#1e7a8a', // Deep Teal
+  '#c4453a', // Coral
+  '#3a6f7f', // Mid Teal
+  '#8b1a24', // Dark Red
+  '#2d8659', // Sea Green
+  '#7c9aa6', // Light Teal
+  '#a83240', // Rose
+] as const
+
+// Project status colors — mapped to actual ProjectStatus enum values
+export const STATUS_COLORS: Record<string, string> = {
+  SUBMITTED: '#557f8c',    // Teal
+  ELIGIBLE: '#053d57',     // Dark Blue
+  ASSIGNED: '#1e7a8a',     // Deep Teal
+  SEMIFINALIST: '#c4453a', // Coral
+  FINALIST: '#2d8659',     // Sea Green
+  REJECTED: '#de0f1e',     // Red
+  DRAFT: '#9ca3af',        // Gray
+  WITHDRAWN: '#6b7280',    // Dark Gray
+}
+
+// Human-readable status labels
+export const STATUS_LABELS: Record<string, string> = {
+  SUBMITTED: 'Submitted',
+  ELIGIBLE: 'Eligible',
+  ASSIGNED: 'Assigned',
+  SEMIFINALIST: 'Semi-finalist',
+  FINALIST: 'Finalist',
+  REJECTED: 'Rejected',
+  DRAFT: 'Draft',
+  WITHDRAWN: 'Withdrawn',
+}
+
+/**
+ * Score gradient: Red (low) → Teal (mid) → Dark Blue (high)
+ * for scores on a 1-10 scale
+ */
+export function scoreGradient(score: number): string {
+  const t = Math.max(0, Math.min(1, (score - 1) / 9))
+  if (t < 0.5) {
+    // Red → Teal (0 → 0.5)
+    const p = t * 2
+    return lerpColor(BRAND_RED, BRAND_TEAL, p)
+  }
+  // Teal → Dark Blue (0.5 → 1)
+  const p = (t - 0.5) * 2
+  return lerpColor(BRAND_TEAL, BRAND_DARK_BLUE, p)
+}
+
+function lerpColor(a: string, b: string, t: number): string {
+  const ar = parseInt(a.slice(1, 3), 16)
+  const ag = parseInt(a.slice(3, 5), 16)
+  const ab = parseInt(a.slice(5, 7), 16)
+  const br = parseInt(b.slice(1, 3), 16)
+  const bg = parseInt(b.slice(3, 5), 16)
+  const bb = parseInt(b.slice(5, 7), 16)
+  const r = Math.round(ar + (br - ar) * t)
+  const g = Math.round(ag + (bg - ag) * t)
+  const bl = Math.round(ab + (bb - ab) * t)
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${bl.toString(16).padStart(2, '0')}`
+}
+
+/**
+ * Shared Nivo theme — brand fonts, clean grid, shadcn-style tooltips
+ */
+export const nivoTheme: PartialTheme = {
+  background: 'transparent',
+  text: {
+    fontSize: 12,
+    fill: '#374151',
+    fontFamily: 'Montserrat, system-ui, sans-serif',
+  },
+  axis: {
+    domain: {
+      line: { stroke: '#e5e7eb', strokeWidth: 1 },
+    },
+    ticks: {
+      line: { stroke: '#e5e7eb', strokeWidth: 1 },
+      text: { fontSize: 11, fill: '#6b7280' },
+    },
+    legend: {
+      text: { fontSize: 13, fill: '#374151', fontWeight: 600 },
+    },
+  },
+  grid: {
+    line: { stroke: '#f3f4f6', strokeWidth: 1 },
+  },
+  legends: {
+    text: { fontSize: 12, fill: '#374151' },
+  },
+  labels: {
+    text: { fontSize: 12, fill: '#374151', fontWeight: 500 },
+  },
+  tooltip: {
+    container: {
+      background: '#ffffff',
+      color: '#1f2937',
+      fontSize: 12,
+      borderRadius: '8px',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+      padding: '8px 12px',
+      border: '1px solid #e5e7eb',
+    },
+  },
+}
+
+/**
+ * Helper: get color for a status value from STATUS_COLORS
+ * Falls back to a neutral gray
+ */
+export function getStatusColor(status: string): string {
+  return STATUS_COLORS[status] || '#9ca3af'
+}
+
+/**
+ * Helper: format a status value for display
+ */
+export function formatStatus(status: string): string {
+  return STATUS_LABELS[status] || status.charAt(0) + status.slice(1).toLowerCase().replace(/_/g, ' ')
+}

src/components/charts/criteria-scores.tsx

@@ -1,16 +1,8 @@
 'use client'
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from 'recharts'
+import { ResponsiveBar } from '@nivo/bar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { nivoTheme, scoreGradient } from './chart-theme'
 
 interface CriteriaScoreData {
   id: string
@@ -23,27 +15,27 @@ interface CriteriaScoresProps {
   data: CriteriaScoreData[]
 }
 
-// Color scale from red to green based on score
-const getScoreColor = (score: number): string => {
-  if (score >= 8) return '#0bd90f' // Excellent - green
-  if (score >= 6) return '#82ca9d' // Good - light green
-  if (score >= 4) return '#ffc658' // Average - yellow
-  if (score >= 2) return '#ff7300' // Poor - orange
-  return '#de0f1e' // Very poor - red
+type CriterionBarDatum = {
+  criterion: string
+  averageScore: number
+  fullName: string
+  count: number
 }
 
 export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
-  const formattedData = data.map((d) => ({
-    ...d,
-    displayName:
-      d.name.length > 20 ? d.name.substring(0, 20) + '...' : d.name,
-  }))
-
   const overallAverage =
     data.length > 0
       ? data.reduce((sum, d) => sum + d.averageScore, 0) / data.length
       : 0
 
+  const chartData: CriterionBarDatum[] = data.map((d) => ({
+    criterion:
+      d.name.length > 25 ? d.name.substring(0, 25) + '...' : d.name,
+    averageScore: d.averageScore,
+    fullName: d.name,
+    count: d.count,
+  }))
+
   return (
     <Card>
       <CardHeader>
@@ -55,50 +47,54 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              data={formattedData}
-              margin={{ top: 20, right: 30, bottom: 60, left: 20 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis
-                dataKey="displayName"
-                tick={{ fontSize: 11 }}
-                angle={-45}
-                textAnchor="end"
-                interval={0}
-                height={60}
-              />
-              <YAxis domain={[0, 10]} />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '6px',
+        <div style={{ height: '300px' }}>
+          <ResponsiveBar
+            data={chartData}
+            keys={['averageScore']}
+            indexBy="criterion"
+            theme={nivoTheme}
+            colors={(bar) =>
+              scoreGradient(bar.data.averageScore as number)
+            }
+            valueScale={{ type: 'linear', max: 10 }}
+            borderRadius={4}
+            enableLabel={true}
+            label={(d) => {
+              const v = d.value
+              return v != null ? Number(v).toFixed(1) : ''
+            }}
+            labelSkipHeight={12}
+            labelTextColor="#ffffff"
+            axisBottom={{
+              tickRotation: -45,
+            }}
+            axisLeft={{
+              legend: 'Score',
+              legendPosition: 'middle',
+              legendOffset: -40,
+            }}
+            margin={{ top: 20, right: 20, bottom: 80, left: 50 }}
+            padding={0.25}
+            tooltip={({ data: rowData }) => (
+              <div
+                style={{
+                  background: '#ffffff',
+                  padding: '8px 12px',
+                  borderRadius: '8px',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                  border: '1px solid #e5e7eb',
+                  fontSize: 12,
                 }}
-                formatter={(value: number | undefined) => [
-                  (value ?? 0).toFixed(2),
-                  'Average Score',
-                ]}
-                labelFormatter={(_, payload) => {
-                  if (payload && payload[0]) {
-                    const item = payload[0].payload as CriteriaScoreData
-                    return `${item.name} (${item.count} ratings)`
-                  }
-                  return ''
-                }}
-              />
-              <Bar dataKey="averageScore" radius={[4, 4, 0, 0]}>
-                {formattedData.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={getScoreColor(entry.averageScore)}
-                  />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
+              >
+                <strong>{rowData.fullName}</strong>
+                <br />
+                Average Score: {Number(rowData.averageScore).toFixed(2)}
+                <br />
+                Ratings: {rowData.count}
+              </div>
+            )}
+            animate={true}
+          />
         </div>
       </CardContent>
     </Card>

src/components/charts/cross-round-comparison.tsx

@@ -1,16 +1,8 @@
 'use client'
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from 'recharts'
+import { ResponsiveBar } from '@nivo/bar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { nivoTheme, BRAND_COLORS } from './chart-theme'
 
 interface StageComparison {
   roundId: string
@@ -26,128 +18,152 @@ interface CrossStageComparisonProps {
   data: StageComparison[]
 }
 
-const STAGE_COLORS = ['#053d57', '#de0f1e', '#557f8c', '#f38a52', '#6ad82f']
-
-export function CrossStageComparisonChart({ data }: CrossStageComparisonProps) {
-  // Prepare comparison data
-  const comparisonData = data.map((stage, i) => ({
-    name: stage.roundName.length > 20 ? stage.roundName.slice(0, 20) + '...' : stage.roundName,
-    projects: stage.projectCount,
-    evaluations: stage.evaluationCount,
-    completionRate: stage.completionRate,
-    avgScore: stage.averageScore ? parseFloat(stage.averageScore.toFixed(2)) : 0,
-    color: STAGE_COLORS[i % STAGE_COLORS.length],
+export function CrossStageComparisonChart({
+  data,
+}: CrossStageComparisonProps) {
+  const baseData = data.map((round) => ({
+    name:
+      round.roundName.length > 20
+        ? round.roundName.slice(0, 20) + '...'
+        : round.roundName,
+    projects: round.projectCount,
+    evaluations: round.evaluationCount,
+    completionRate: round.completionRate,
+    avgScore: round.averageScore
+      ? parseFloat(round.averageScore.toFixed(2))
+      : 0,
   }))
 
+  const sharedMargin = { top: 10, right: 10, bottom: 40, left: 40 }
+
   return (
-    <div className="space-y-6">
-      {/* Metrics Comparison */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Stage Metrics Comparison</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="h-[350px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart
-                data={comparisonData}
-                margin={{ top: 20, right: 30, bottom: 60, left: 20 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                <XAxis
-                  dataKey="name"
-                  angle={-25}
-                  textAnchor="end"
-                  height={60}
-                  tick={{ fontSize: 12 }}
-                />
-                <YAxis />
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: 'hsl(var(--card))',
-                    border: '1px solid hsl(var(--border))',
-                    borderRadius: '6px',
+    <Card>
+      <CardHeader>
+        <CardTitle>Round Metrics Comparison</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">Projects</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div style={{ height: '200px' }}>
+                <ResponsiveBar
+                  data={baseData}
+                  keys={['projects']}
+                  indexBy="name"
+                  theme={nivoTheme}
+                  colors={[BRAND_COLORS[0]]}
+                  borderRadius={4}
+                  enableLabel={true}
+                  labelSkipHeight={12}
+                  labelTextColor="#ffffff"
+                  margin={sharedMargin}
+                  padding={0.3}
+                  axisBottom={{
+                    tickRotation: -25,
                   }}
+                  animate={true}
                 />
-                <Legend />
-                <Bar dataKey="projects" name="Projects" fill="#053d57" radius={[4, 4, 0, 0]} />
-                <Bar dataKey="evaluations" name="Evaluations" fill="#557f8c" radius={[4, 4, 0, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </CardContent>
-      </Card>
+              </div>
+            </CardContent>
+          </Card>
 
-      {/* Completion & Score Comparison */}
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Completion Rate by Stage</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="h-[300px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart
-                  data={comparisonData}
-                  margin={{ top: 20, right: 20, bottom: 60, left: 20 }}
-                >
-                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                  <XAxis
-                    dataKey="name"
-                    angle={-25}
-                    textAnchor="end"
-                    height={60}
-                    tick={{ fontSize: 12 }}
-                  />
-                  <YAxis domain={[0, 100]} unit="%" />
-                  <Tooltip
-                    contentStyle={{
-                      backgroundColor: 'hsl(var(--card))',
-                      border: '1px solid hsl(var(--border))',
-                      borderRadius: '6px',
-                    }}
-                  />
-                  <Bar dataKey="completionRate" name="Completion %" fill="#6ad82f" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </CardContent>
-        </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">
+                Evaluations
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div style={{ height: '200px' }}>
+                <ResponsiveBar
+                  data={baseData}
+                  keys={['evaluations']}
+                  indexBy="name"
+                  theme={nivoTheme}
+                  colors={[BRAND_COLORS[2]]}
+                  borderRadius={4}
+                  enableLabel={true}
+                  labelSkipHeight={12}
+                  labelTextColor="#ffffff"
+                  margin={sharedMargin}
+                  padding={0.3}
+                  axisBottom={{
+                    tickRotation: -25,
+                  }}
+                  animate={true}
+                />
+              </div>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Average Score by Stage</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="h-[300px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart
-                  data={comparisonData}
-                  margin={{ top: 20, right: 20, bottom: 60, left: 20 }}
-                >
-                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                  <XAxis
-                    dataKey="name"
-                    angle={-25}
-                    textAnchor="end"
-                    height={60}
-                    tick={{ fontSize: 12 }}
-                  />
-                  <YAxis domain={[0, 10]} />
-                  <Tooltip
-                    contentStyle={{
-                      backgroundColor: 'hsl(var(--card))',
-                      border: '1px solid hsl(var(--border))',
-                      borderRadius: '6px',
-                    }}
-                  />
-                  <Bar dataKey="avgScore" name="Avg Score" fill="#de0f1e" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">
+                Completion Rate
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div style={{ height: '200px' }}>
+                <ResponsiveBar
+                  data={baseData}
+                  keys={['completionRate']}
+                  indexBy="name"
+                  theme={nivoTheme}
+                  colors={[BRAND_COLORS[1]]}
+                  valueScale={{ type: 'linear', max: 100 }}
+                  borderRadius={4}
+                  enableLabel={true}
+                  labelSkipHeight={12}
+                  labelTextColor="#ffffff"
+                  valueFormat={(v) => `${v}%`}
+                  margin={sharedMargin}
+                  padding={0.3}
+                  axisBottom={{
+                    tickRotation: -25,
+                  }}
+                  axisLeft={{
+                    format: (v) => `${v}%`,
+                  }}
+                  animate={true}
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">
+                Average Score
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div style={{ height: '200px' }}>
+                <ResponsiveBar
+                  data={baseData}
+                  keys={['avgScore']}
+                  indexBy="name"
+                  theme={nivoTheme}
+                  colors={[BRAND_COLORS[0]]}
+                  valueScale={{ type: 'linear', max: 10 }}
+                  borderRadius={4}
+                  enableLabel={true}
+                  labelSkipHeight={12}
+                  labelTextColor="#ffffff"
+                  margin={sharedMargin}
+                  padding={0.3}
+                  axisBottom={{
+                    tickRotation: -25,
+                  }}
+                  animate={true}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </CardContent>
+    </Card>
   )
 }

src/components/charts/diversity-metrics.tsx

@@ -1,20 +1,10 @@
 'use client'
 
-import {
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-} from 'recharts'
+import { ResponsivePie } from '@nivo/pie'
+import { ResponsiveBar } from '@nivo/bar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import { nivoTheme, BRAND_COLORS } from './chart-theme'
 
 interface DiversityData {
   total: number
@@ -28,12 +18,6 @@ interface DiversityMetricsProps {
   data: DiversityData
 }
 
-const PIE_COLORS = [
-  '#053d57', '#de0f1e', '#557f8c', '#f38a52', '#6ad82f',
-  '#3be31e', '#c9c052', '#e6382f', '#ed6141', '#0bd90f',
-  '#8884d8', '#82ca9d', '#ffc658', '#ff7c7c', '#8dd1e1',
-]
-
 /** Convert ISO 3166-1 alpha-2 code to full country name using Intl API */
 function getCountryName(code: string): string {
   if (code === 'Others') return 'Others'
@@ -54,33 +38,6 @@ function formatLabel(value: string): string {
     .replace(/\b\w/g, (c) => c.toUpperCase())
 }
 
-/** Custom tooltip for the pie chart */
-function CountryTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { country: string; count: number; percentage: number } }> }) {
-  if (!active || !payload?.length) return null
-  const d = payload[0].payload
-  return (
-    <div className="rounded-md border bg-card px-3 py-2 text-sm shadow-md">
-      <p className="font-medium">{getCountryName(d.country)}</p>
-      <p className="text-muted-foreground">{d.count} projects ({d.percentage.toFixed(1)}%)</p>
-    </div>
-  )
-}
-
-/** Custom tooltip for bar charts */
-function BarTooltip({ active, payload, labelFormatter }: { active?: boolean; payload?: Array<{ value: number }>; label?: string; labelFormatter: (val: string) => string }) {
-  if (!active || !payload?.length) return null
-  const entry = payload[0]
-  const rawPayload = entry as unknown as { payload: Record<string, unknown> }
-  const dataPoint = rawPayload.payload
-  const rawLabel = (dataPoint.category || dataPoint.issue || '') as string
-  return (
-    <div className="rounded-md border bg-card px-3 py-2 text-sm shadow-md">
-      <p className="font-medium">{labelFormatter(rawLabel)}</p>
-      <p className="text-muted-foreground">{entry.value} projects</p>
-    </div>
-  )
-}
-
 export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
   if (data.total === 0) {
     return (
@@ -103,15 +60,21 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
       }]
     : topCountries
 
+  const nivoPieData = countryPieData.map((c) => ({
+    id: c.country,
+    label: getCountryName(c.country),
+    value: c.count,
+  }))
+
   // Pre-format category and ocean issue data for display
   const formattedCategories = data.byCategory.slice(0, 10).map((c) => ({
-    ...c,
     category: formatLabel(c.category),
+    count: c.count,
   }))
 
   const formattedOceanIssues = data.byOceanIssue.slice(0, 15).map((o) => ({
-    ...o,
     issue: formatLabel(o.issue),
+    count: o.count,
   }))
 
   return (
@@ -151,35 +114,42 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
             <CardTitle>Geographic Distribution</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-[400px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
-                  <Pie
-                    data={countryPieData}
-                    cx="50%"
-                    cy="50%"
-                    innerRadius={60}
-                    outerRadius={120}
-                    paddingAngle={2}
-                    dataKey="count"
-                    nameKey="country"
-                    label={((props: unknown) => {
-                      const p = props as { country: string; percentage: number }
-                      return `${getCountryName(p.country)} (${p.percentage.toFixed(0)}%)`
-                    }) as unknown as boolean}
-                    fontSize={13}
-                  >
-                    {countryPieData.map((_, index) => (
-                      <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
-                    ))}
-                  </Pie>
-                  <Tooltip content={<CountryTooltip />} />
-                  <Legend
-                    formatter={(value: string) => getCountryName(value)}
-                    wrapperStyle={{ fontSize: '13px' }}
-                  />
-                </PieChart>
-              </ResponsiveContainer>
+            <div style={{ height: '400px' }}>
+              <ResponsivePie
+                data={nivoPieData}
+                theme={nivoTheme}
+                colors={[...BRAND_COLORS]}
+                innerRadius={0.4}
+                padAngle={0.5}
+                cornerRadius={3}
+                activeOuterRadiusOffset={8}
+                margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
+                enableArcLinkLabels={true}
+                arcLinkLabelsSkipAngle={10}
+                arcLinkLabelsTextColor="#374151"
+                arcLinkLabelsThickness={2}
+                arcLinkLabelsColor={{ from: 'color' }}
+                enableArcLabels={true}
+                arcLabelsSkipAngle={10}
+                arcLabelsTextColor={{ from: 'color', modifiers: [['darker', 2]] }}
+                legends={[
+                  {
+                    anchor: 'bottom',
+                    direction: 'row',
+                    justify: false,
+                    translateX: 0,
+                    translateY: 56,
+                    itemsSpacing: 0,
+                    itemWidth: 100,
+                    itemHeight: 18,
+                    itemTextColor: '#374151',
+                    itemDirection: 'left-to-right',
+                    itemOpacity: 1,
+                    symbolSize: 12,
+                    symbolShape: 'circle',
+                  },
+                ]}
+              />
             </div>
           </CardContent>
         </Card>
@@ -191,25 +161,27 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
           </CardHeader>
           <CardContent>
             {formattedCategories.length > 0 ? (
-              <div className="h-[400px]">
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart
-                    data={formattedCategories}
-                    layout="vertical"
-                    margin={{ top: 5, right: 30, bottom: 5, left: 120 }}
-                  >
-                    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                    <XAxis type="number" tick={{ fontSize: 13 }} />
-                    <YAxis
-                      type="category"
-                      dataKey="category"
-                      width={110}
-                      tick={{ fontSize: 13 }}
-                    />
-                    <Tooltip content={<BarTooltip labelFormatter={(v) => v} />} />
-                    <Bar dataKey="count" fill="#053d57" radius={[0, 4, 4, 0]} />
-                  </BarChart>
-                </ResponsiveContainer>
+              <div style={{ height: '400px' }}>
+                <ResponsiveBar
+                  data={formattedCategories}
+                  theme={nivoTheme}
+                  keys={['count']}
+                  indexBy="category"
+                  layout="horizontal"
+                  colors={[BRAND_COLORS[0]]}
+                  borderRadius={4}
+                  margin={{ top: 10, right: 30, bottom: 10, left: 120 }}
+                  padding={0.3}
+                  enableLabel={true}
+                  labelTextColor="#ffffff"
+                  enableGridX={true}
+                  enableGridY={false}
+                  axisBottom={null}
+                  axisLeft={{
+                    tickSize: 0,
+                    tickPadding: 8,
+                  }}
+                />
               </div>
             ) : (
               <p className="text-muted-foreground text-center py-8">No category data</p>
@@ -225,26 +197,31 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
             <CardTitle>Ocean Issues Addressed</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-[400px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart
-                  data={formattedOceanIssues}
-                  margin={{ top: 20, right: 30, bottom: 80, left: 20 }}
-                >
-                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                  <XAxis
-                    dataKey="issue"
-                    angle={-35}
-                    textAnchor="end"
-                    height={100}
-                    tick={{ fontSize: 12 }}
-                    interval={0}
-                  />
-                  <YAxis tick={{ fontSize: 13 }} />
-                  <Tooltip content={<BarTooltip labelFormatter={(v) => v} />} />
-                  <Bar dataKey="count" fill="#557f8c" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
+            <div style={{ height: '400px' }}>
+              <ResponsiveBar
+                data={formattedOceanIssues}
+                theme={nivoTheme}
+                keys={['count']}
+                indexBy="issue"
+                layout="vertical"
+                colors={[BRAND_COLORS[2]]}
+                borderRadius={4}
+                margin={{ top: 20, right: 30, bottom: 80, left: 40 }}
+                padding={0.3}
+                enableLabel={true}
+                labelTextColor="#ffffff"
+                enableGridX={false}
+                enableGridY={true}
+                axisBottom={{
+                  tickSize: 0,
+                  tickPadding: 8,
+                  tickRotation: -35,
+                }}
+                axisLeft={{
+                  tickSize: 0,
+                  tickPadding: 8,
+                }}
+              />
             </div>
           </CardContent>
         </Card>

src/components/charts/evaluation-timeline.tsx

@@ -1,19 +1,8 @@
 'use client'
 
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-  Area,
-  ComposedChart,
-  Bar,
-} from 'recharts'
+import { ResponsiveLine } from '@nivo/line'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { nivoTheme, BRAND_DARK_BLUE } from './chart-theme'
 
 interface TimelineDataPoint {
   date: string
@@ -26,7 +15,6 @@ interface EvaluationTimelineProps {
 }
 
 export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
-  // Format date for display
   const formattedData = data.map((d) => ({
     ...d,
     dateFormatted: new Date(d.date).toLocaleDateString('en-US', {
@@ -38,6 +26,16 @@ export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
   const totalEvaluations =
     data.length > 0 ? data[data.length - 1].cumulative : 0
 
+  const lineData = [
+    {
+      id: 'Cumulative Evaluations',
+      data: formattedData.map((d) => ({
+        x: d.dateFormatted,
+        y: d.cumulative,
+      })),
+    },
+  ]
+
   return (
     <Card>
       <CardHeader>
@@ -49,52 +47,55 @@ export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <ComposedChart
-              data={formattedData}
-              margin={{ top: 20, right: 30, bottom: 20, left: 20 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis
-                dataKey="dateFormatted"
-                tick={{ fontSize: 12 }}
-                interval="preserveStartEnd"
-              />
-              <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
-              <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '6px',
-                }}
-                formatter={(value: number | undefined, name: string | undefined) => [
-                  value ?? 0,
-                  (name ?? '') === 'daily' ? 'Daily' : 'Cumulative',
-                ]}
-                labelFormatter={(label) => `Date: ${label}`}
-              />
-              <Legend />
-              <Bar
-                yAxisId="left"
-                dataKey="daily"
-                name="Daily Evaluations"
-                fill="#8884d8"
-                radius={[4, 4, 0, 0]}
-              />
-              <Line
-                yAxisId="right"
-                type="monotone"
-                dataKey="cumulative"
-                name="Cumulative Total"
-                stroke="#82ca9d"
-                strokeWidth={2}
-                dot={{ r: 3 }}
-                activeDot={{ r: 6 }}
-              />
-            </ComposedChart>
-          </ResponsiveContainer>
+        <div style={{ height: '300px' }}>
+          <ResponsiveLine
+            data={lineData}
+            theme={nivoTheme}
+            colors={[BRAND_DARK_BLUE]}
+            enableArea={true}
+            areaOpacity={0.1}
+            areaBaselineValue={0}
+            curve="monotoneX"
+            pointSize={6}
+            pointColor={BRAND_DARK_BLUE}
+            pointBorderWidth={2}
+            pointBorderColor="#ffffff"
+            useMesh={true}
+            enableSlices="x"
+            sliceTooltip={({ slice }) => {
+              const point = slice.points[0]
+              const dataItem = formattedData.find(
+                (d) => d.dateFormatted === point.data.xFormatted
+              )
+              return (
+                <div
+                  style={{
+                    background: '#fff',
+                    padding: '8px 12px',
+                    border: '1px solid #e5e7eb',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                  }}
+                >
+                  <strong>{point.data.xFormatted}</strong>
+                  <div>Cumulative: {point.data.yFormatted}</div>
+                  {dataItem && <div>Daily: {dataItem.daily}</div>}
+                </div>
+              )
+            }}
+            margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
+            axisBottom={{
+              tickRotation: -45,
+              legend: '',
+              legendOffset: 36,
+            }}
+            axisLeft={{
+              legend: 'Evaluations',
+              legendOffset: -50,
+              legendPosition: 'middle',
+            }}
+            yScale={{ type: 'linear', min: 0, max: 'auto' }}
+          />
         </div>
       </CardContent>
     </Card>

src/components/charts/juror-consistency.tsx

@@ -1,15 +1,11 @@
 'use client'
 
-import {
-  ScatterChart,
-  Scatter,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  ReferenceLine,
-} from 'recharts'
+import { ResponsiveScatterPlot } from '@nivo/scatterplot'
+import type {
+  ScatterPlotDatum,
+  ScatterPlotNodeProps,
+} from '@nivo/scatterplot'
+import { animated } from '@react-spring/web'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -21,11 +17,11 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { AlertTriangle } from 'lucide-react'
+import { nivoTheme, BRAND_DARK_BLUE, BRAND_RED } from './chart-theme'
 
 interface JurorMetric {
   userId: string
   name: string
-  email: string
   evaluationCount: number
   averageScore: number
   stddev: number
@@ -40,14 +36,73 @@ interface JurorConsistencyProps {
   }
 }
 
+interface JurorDatum extends ScatterPlotDatum {
+  x: number
+  y: number
+  name: string
+  evaluations: number
+  isOutlier: boolean
+}
+
+function CustomNode({
+  node,
+  style,
+  blendMode,
+  isInteractive,
+  onMouseEnter,
+  onMouseMove,
+  onMouseLeave,
+  onClick,
+}: ScatterPlotNodeProps<JurorDatum>) {
+  const fillColor = node.data.isOutlier ? BRAND_RED : BRAND_DARK_BLUE
+
+  return (
+    <animated.circle
+      cx={style.x}
+      cy={style.y}
+      r={style.size.to((s: number) => s / 2)}
+      fill={fillColor}
+      fillOpacity={0.7}
+      stroke={fillColor}
+      strokeWidth={1}
+      style={{ mixBlendMode: blendMode }}
+      onMouseEnter={
+        isInteractive && onMouseEnter
+          ? (event) => onMouseEnter(node, event)
+          : undefined
+      }
+      onMouseMove={
+        isInteractive && onMouseMove
+          ? (event) => onMouseMove(node, event)
+          : undefined
+      }
+      onMouseLeave={
+        isInteractive && onMouseLeave
+          ? (event) => onMouseLeave(node, event)
+          : undefined
+      }
+      onClick={
+        isInteractive && onClick
+          ? (event) => onClick(node, event)
+          : undefined
+      }
+    />
+  )
+}
+
 export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
-  const scatterData = data.jurors.map((j) => ({
-    name: j.name,
-    avgScore: parseFloat(j.averageScore.toFixed(2)),
-    stddev: parseFloat(j.stddev.toFixed(2)),
-    evaluations: j.evaluationCount,
-    isOutlier: j.isOutlier,
-  }))
+  const scatterData = [
+    {
+      id: 'Jurors',
+      data: data.jurors.map((j) => ({
+        x: parseFloat(j.averageScore.toFixed(2)),
+        y: parseFloat(j.stddev.toFixed(2)),
+        name: j.name,
+        evaluations: j.evaluationCount,
+        isOutlier: j.isOutlier,
+      })),
+    },
+  ]
 
   const outlierCount = data.jurors.filter((j) => j.isOutlier).length
 
@@ -69,51 +124,63 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="h-[400px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <ScatterChart margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                <XAxis
-                  type="number"
-                  dataKey="avgScore"
-                  name="Average Score"
-                  domain={[0, 10]}
-                  label={{ value: 'Average Score', position: 'insideBottom', offset: -10 }}
-                />
-                <YAxis
-                  type="number"
-                  dataKey="stddev"
-                  name="Std Deviation"
-                  label={{ value: 'Std Deviation', angle: -90, position: 'insideLeft' }}
-                />
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: 'hsl(var(--card))',
-                    border: '1px solid hsl(var(--border))',
-                    borderRadius: '6px',
+          <div style={{ height: '400px' }}>
+            <ResponsiveScatterPlot<JurorDatum>
+              data={scatterData}
+              theme={nivoTheme}
+              colors={[BRAND_DARK_BLUE]}
+              xScale={{ type: 'linear', min: 0, max: 10 }}
+              yScale={{ type: 'linear', min: 0, max: 'auto' }}
+              axisBottom={{
+                legend: 'Average Score',
+                legendPosition: 'middle',
+                legendOffset: 40,
+              }}
+              axisLeft={{
+                legend: 'Std Deviation',
+                legendPosition: 'middle',
+                legendOffset: -50,
+              }}
+              useMesh={true}
+              nodeSize={(node) =>
+                Math.max(8, Math.min(20, node.data.evaluations * 2))
+              }
+              nodeComponent={CustomNode}
+              margin={{ top: 20, right: 20, bottom: 60, left: 60 }}
+              tooltip={({ node }) => (
+                <div
+                  style={{
+                    background: '#fff',
+                    padding: '8px 12px',
+                    border: '1px solid #e5e7eb',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                   }}
-                />
-                <ReferenceLine
-                  x={data.overallAverage}
-                  stroke="#de0f1e"
-                  strokeDasharray="3 3"
-                  label={{ value: 'Avg', fill: '#de0f1e', position: 'top' }}
-                />
-                <Scatter data={scatterData} fill="#053d57">
-                  {scatterData.map((entry, index) => (
-                    <circle
-                      key={index}
-                      r={Math.max(4, entry.evaluations)}
-                      fill={entry.isOutlier ? '#de0f1e' : '#053d57'}
-                      fillOpacity={0.7}
-                    />
-                  ))}
-                </Scatter>
-              </ScatterChart>
-            </ResponsiveContainer>
+                >
+                  <strong>{node.data.name}</strong>
+                  <div>Avg Score: {node.data.x}</div>
+                  <div>Std Dev: {node.data.y}</div>
+                  <div>Evaluations: {node.data.evaluations}</div>
+                </div>
+              )}
+              markers={[
+                {
+                  axis: 'x',
+                  value: data.overallAverage,
+                  lineStyle: {
+                    stroke: BRAND_RED,
+                    strokeWidth: 2,
+                    strokeDasharray: '6 4',
+                  },
+                  legend: `Avg: ${data.overallAverage.toFixed(1)}`,
+                  legendPosition: 'top',
+                },
+              ]}
+            />
           </div>
           <p className="text-xs text-muted-foreground mt-2 text-center">
-            Dot size represents number of evaluations. Red dots indicate outlier jurors (2+ points from mean).
+            Dot size represents number of evaluations. Red dots indicate outlier
+            jurors (2+ points from mean).
           </p>
         </CardContent>
       </Card>
@@ -131,22 +198,30 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
                 <TableHead className="text-right">Evaluations</TableHead>
                 <TableHead className="text-right">Avg Score</TableHead>
                 <TableHead className="text-right">Std Dev</TableHead>
-                <TableHead className="text-right">Deviation from Mean</TableHead>
+                <TableHead className="text-right">
+                  Deviation from Mean
+                </TableHead>
                 <TableHead className="text-center">Status</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {data.jurors.map((juror) => (
-                <TableRow key={juror.userId} className={juror.isOutlier ? 'bg-destructive/5' : ''}>
+                <TableRow
+                  key={juror.userId}
+                  className={juror.isOutlier ? 'bg-destructive/5' : ''}
+                >
                   <TableCell>
-                    <div>
-                      <p className="font-medium">{juror.name}</p>
-                      <p className="text-xs text-muted-foreground">{juror.email}</p>
-                    </div>
+                    <p className="font-medium">{juror.name}</p>
+                  </TableCell>
+                  <TableCell className="text-right tabular-nums">
+                    {juror.evaluationCount}
+                  </TableCell>
+                  <TableCell className="text-right tabular-nums">
+                    {juror.averageScore.toFixed(2)}
+                  </TableCell>
+                  <TableCell className="text-right tabular-nums">
+                    {juror.stddev.toFixed(2)}
                   </TableCell>
-                  <TableCell className="text-right tabular-nums">{juror.evaluationCount}</TableCell>
-                  <TableCell className="text-right tabular-nums">{juror.averageScore.toFixed(2)}</TableCell>
-                  <TableCell className="text-right tabular-nums">{juror.stddev.toFixed(2)}</TableCell>
                   <TableCell className="text-right tabular-nums">
                     {juror.deviationFromOverall.toFixed(2)}
                   </TableCell>

src/components/charts/juror-workload.tsx

@@ -1,16 +1,8 @@
 'use client'
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts'
+import { ResponsiveBar, type ComputedDatum } from '@nivo/bar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { nivoTheme } from './chart-theme'
 
 interface JurorWorkloadData {
   id: string
@@ -24,18 +16,32 @@ interface JurorWorkloadProps {
   data: JurorWorkloadData[]
 }
 
-export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
-  // Truncate names for display
-  const formattedData = data.map((d) => ({
-    ...d,
-    displayName: d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name,
-  }))
+type WorkloadBarDatum = {
+  juror: string
+  completed: number
+  remaining: number
+  completionRate: number
+  fullName: string
+}
 
+export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
   const totalAssigned = data.reduce((sum, d) => sum + d.assigned, 0)
   const totalCompleted = data.reduce((sum, d) => sum + d.completed, 0)
   const overallRate =
     totalAssigned > 0 ? Math.round((totalCompleted / totalAssigned) * 100) : 0
 
+  const sortedData = [...data].sort(
+    (a, b) => b.completionRate - a.completionRate,
+  )
+
+  const chartData: WorkloadBarDatum[] = sortedData.map((d) => ({
+    juror: d.name.length > 25 ? d.name.substring(0, 25) + '...' : d.name,
+    completed: d.completed,
+    remaining: d.assigned - d.completed,
+    completionRate: d.completionRate,
+    fullName: d.name,
+  }))
+
   return (
     <Card>
       <CardHeader>
@@ -47,54 +53,65 @@ export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[400px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              data={formattedData}
-              layout="vertical"
-              margin={{ top: 20, right: 30, bottom: 20, left: 100 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis type="number" />
-              <YAxis
-                dataKey="displayName"
-                type="category"
-                width={90}
-                tick={{ fontSize: 12 }}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '6px',
+        <div
+          style={{ height: `${Math.max(300, data.length * 35)}px` }}
+        >
+          <ResponsiveBar
+            data={chartData}
+            keys={['completed', 'remaining']}
+            indexBy="juror"
+            layout="horizontal"
+            theme={nivoTheme}
+            colors={['#053d57', '#e5e7eb']}
+            borderRadius={2}
+            enableLabel={true}
+            label={(d: ComputedDatum<WorkloadBarDatum>) => {
+              if (d.id === 'completed') {
+                return `${d.data.completionRate}%`
+              }
+              return ''
+            }}
+            labelSkipWidth={40}
+            labelTextColor={(d) => {
+              const datum = d as unknown as { data: ComputedDatum<WorkloadBarDatum> }
+              return datum.data.id === 'completed' ? '#ffffff' : '#374151'
+            }}
+            margin={{ top: 10, right: 30, bottom: 30, left: 160 }}
+            padding={0.25}
+            groupMode="stacked"
+            tooltip={({ id, value, data: rowData }) => (
+              <div
+                style={{
+                  background: '#ffffff',
+                  padding: '8px 12px',
+                  borderRadius: '8px',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                  border: '1px solid #e5e7eb',
+                  fontSize: 12,
                 }}
-                formatter={(value: number | undefined, name: string | undefined) => [
-                  value ?? 0,
-                  (name ?? '') === 'assigned' ? 'Assigned' : 'Completed',
-                ]}
-                labelFormatter={(_, payload) => {
-                  if (payload && payload[0]) {
-                    const item = payload[0].payload as JurorWorkloadData
-                    return `${item.name} (${item.completionRate}% complete)`
-                  }
-                  return ''
-                }}
-              />
-              <Legend />
-              <Bar
-                dataKey="assigned"
-                name="Assigned"
-                fill="#8884d8"
-                radius={[0, 4, 4, 0]}
-              />
-              <Bar
-                dataKey="completed"
-                name="Completed"
-                fill="#82ca9d"
-                radius={[0, 4, 4, 0]}
-              />
-            </BarChart>
-          </ResponsiveContainer>
+              >
+                <strong>{rowData.fullName}</strong>
+                <br />
+                {id === 'completed' ? 'Completed' : 'Remaining'}: {value}
+                <br />
+                Completion: {rowData.completionRate}%
+              </div>
+            )}
+            legends={[
+              {
+                dataFrom: 'keys',
+                anchor: 'bottom',
+                direction: 'row',
+                translateY: 30,
+                itemsSpacing: 20,
+                itemWidth: 100,
+                itemHeight: 18,
+                symbolSize: 12,
+                symbolShape: 'square',
+              },
+            ]}
+            animate={true}
+          />
         </div>
       </CardContent>
     </Card>

src/components/charts/project-rankings.tsx

@@ -1,17 +1,8 @@
 'use client'
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-  ReferenceLine,
-} from 'recharts'
+import { ResponsiveBar } from '@nivo/bar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { nivoTheme, scoreGradient } from './chart-theme'
 
 interface ProjectRankingData {
   id: string
@@ -27,93 +18,119 @@ interface ProjectRankingsProps {
   limit?: number
 }
 
-// Generate color based on score (red to green gradient)
-const getScoreColor = (score: number): string => {
-  if (score >= 8) return '#0bd90f' // Excellent - green
-  if (score >= 6) return '#82ca9d' // Good - light green
-  if (score >= 4) return '#ffc658' // Average - yellow
-  if (score >= 2) return '#ff7300' // Poor - orange
-  return '#de0f1e' // Very poor - red
+type RankingBarDatum = {
+  project: string
+  score: number
+  fullTitle: string
+  teamName: string
+  evaluationCount: number
 }
 
 export function ProjectRankingsChart({
   data,
   limit = 20,
 }: ProjectRankingsProps) {
-  const displayData = data.slice(0, limit).map((d, index) => ({
-    ...d,
-    rank: index + 1,
-    displayTitle:
-      d.title.length > 25 ? d.title.substring(0, 25) + '...' : d.title,
-    score: d.averageScore || 0,
-  }))
+  const scoredData = data.filter(
+    (d): d is ProjectRankingData & { averageScore: number } =>
+      d.averageScore !== null,
+  )
 
   const averageScore =
-    data.length > 0
-      ? data.reduce((sum, d) => sum + (d.averageScore || 0), 0) / data.length
+    scoredData.length > 0
+      ? scoredData.reduce((sum, d) => sum + d.averageScore, 0) /
+        scoredData.length
       : 0
 
+  const displayData = scoredData.slice(0, limit)
+
+  const chartData: RankingBarDatum[] = displayData.map((d) => ({
+    project:
+      d.title.length > 30 ? d.title.substring(0, 30) + '...' : d.title,
+    score: d.averageScore,
+    fullTitle: d.title,
+    teamName: d.teamName ?? '',
+    evaluationCount: d.evaluationCount,
+  }))
+
   return (
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span>Project Rankings</span>
           <span className="text-sm font-normal text-muted-foreground">
-            Top {displayData.length} of {data.length} projects
+            Top {displayData.length} of {scoredData.length} scored projects
           </span>
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[500px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              data={displayData}
-              layout="vertical"
-              margin={{ top: 20, right: 30, bottom: 20, left: 150 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis type="number" domain={[0, 10]} />
-              <YAxis
-                dataKey="displayTitle"
-                type="category"
-                width={140}
-                tick={{ fontSize: 11 }}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '6px',
-                }}
-                formatter={(value: number | undefined) => [(value ?? 0).toFixed(2), 'Average Score']}
-                labelFormatter={(_, payload) => {
-                  if (payload && payload[0]) {
-                    const item = payload[0].payload as ProjectRankingData & {
-                      rank: number
-                    }
-                    return `#${item.rank} - ${item.title}${item.teamName ? ` (${item.teamName})` : ''}`
-                  }
-                  return ''
-                }}
-              />
-              <ReferenceLine
-                x={averageScore}
-                stroke="#666"
-                strokeDasharray="5 5"
-                label={{
-                  value: `Avg: ${averageScore.toFixed(1)}`,
-                  position: 'top',
-                  fill: '#666',
+        <div
+          style={{
+            height: `${Math.max(400, displayData.length * 30)}px`,
+          }}
+        >
+          <ResponsiveBar
+            data={chartData}
+            keys={['score']}
+            indexBy="project"
+            layout="horizontal"
+            theme={nivoTheme}
+            colors={(bar) => scoreGradient(bar.data.score as number)}
+            valueScale={{ type: 'linear', max: 10 }}
+            borderRadius={4}
+            enableLabel={true}
+            label={(d) => {
+              const v = d.value
+              return v != null ? Number(v).toFixed(1) : ''
+            }}
+            labelSkipWidth={30}
+            labelTextColor="#ffffff"
+            margin={{ top: 10, right: 30, bottom: 30, left: 200 }}
+            padding={0.2}
+            markers={[
+              {
+                axis: 'x',
+                value: averageScore,
+                lineStyle: {
+                  stroke: '#6b7280',
+                  strokeWidth: 2,
+                  strokeDasharray: '6 4',
+                },
+                legend: `Avg: ${averageScore.toFixed(1)}`,
+                legendPosition: 'top',
+                textStyle: {
+                  fill: '#6b7280',
                   fontSize: 11,
+                },
+              },
+            ]}
+            tooltip={({ data: rowData }) => (
+              <div
+                style={{
+                  background: '#ffffff',
+                  padding: '8px 12px',
+                  borderRadius: '8px',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                  border: '1px solid #e5e7eb',
+                  fontSize: 12,
                 }}
-              />
-              <Bar dataKey="score" radius={[0, 4, 4, 0]}>
-                {displayData.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={getScoreColor(entry.score)} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
+              >
+                <strong>{rowData.fullTitle}</strong>
+                {rowData.teamName && (
+                  <>
+                    <br />
+                    <span style={{ color: '#6b7280' }}>
+                      {rowData.teamName}
+                    </span>
+                  </>
+                )}
+                <br />
+                Score: {Number(rowData.score).toFixed(2)}
+                <br />
+                Evaluations: {rowData.evaluationCount}
+              </div>
+            )}
+            animate={true}
+          />
         </div>
       </CardContent>
     </Card>

src/components/charts/score-distribution.tsx

@@ -1,16 +1,8 @@
 'use client'
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from 'recharts'
+import { ResponsiveBar } from '@nivo/bar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { nivoTheme, scoreGradient } from './chart-theme'
 
 interface ScoreDistributionProps {
   data: { score: number; count: number }[]
@@ -18,24 +10,16 @@ interface ScoreDistributionProps {
   totalScores: number
 }
 
-const COLORS = [
-  '#de0f1e', // 1 - red (poor)
-  '#e6382f',
-  '#ed6141',
-  '#f38a52',
-  '#f8b364', // 5 - yellow (average)
-  '#c9c052',
-  '#99cc41',
-  '#6ad82f',
-  '#3be31e',
-  '#0bd90f', // 10 - green (excellent)
-]
-
 export function ScoreDistributionChart({
   data,
   averageScore,
   totalScores,
 }: ScoreDistributionProps) {
+  const chartData = data.map((d) => ({
+    score: String(d.score),
+    count: d.count,
+  }))
+
   return (
     <Card>
       <CardHeader>
@@ -47,44 +31,31 @@ export function ScoreDistributionChart({
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              data={data}
-              margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis
-                dataKey="score"
-                label={{
-                  value: 'Score',
-                  position: 'insideBottom',
-                  offset: -10,
-                }}
-              />
-              <YAxis
-                label={{
-                  value: 'Count',
-                  angle: -90,
-                  position: 'insideLeft',
-                }}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '6px',
-                }}
-                formatter={(value: number | undefined) => [value ?? 0, 'Count']}
-                labelFormatter={(label) => `Score: ${label}`}
-              />
-              <Bar dataKey="count" radius={[4, 4, 0, 0]}>
-                {data.map((_, index) => (
-                  <Cell key={`cell-${index}`} fill={COLORS[index]} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
+        <div style={{ height: '300px' }}>
+          <ResponsiveBar
+            data={chartData}
+            keys={['count']}
+            indexBy="score"
+            theme={nivoTheme}
+            colors={(bar) => scoreGradient(Number(bar.indexValue))}
+            borderRadius={4}
+            enableLabel={true}
+            labelSkipHeight={12}
+            labelTextColor="#ffffff"
+            axisBottom={{
+              legend: 'Score',
+              legendPosition: 'middle',
+              legendOffset: 36,
+            }}
+            axisLeft={{
+              legend: 'Count',
+              legendPosition: 'middle',
+              legendOffset: -40,
+            }}
+            margin={{ top: 20, right: 20, bottom: 50, left: 50 }}
+            padding={0.2}
+            animate={true}
+          />
         </div>
       </CardContent>
     </Card>

src/components/charts/status-breakdown.tsx

@@ -1,13 +1,8 @@
 'use client'
-import {
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts'
+
+import { ResponsivePie } from '@nivo/pie'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { nivoTheme, getStatusColor, formatStatus } from './chart-theme'
 
 interface StatusDataPoint {
   status: string
@@ -18,66 +13,14 @@ interface StatusBreakdownProps {
   data: StatusDataPoint[]
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  PENDING: '#8884d8',
-  UNDER_REVIEW: '#82ca9d',
-  SHORTLISTED: '#ffc658',
-  SEMIFINALIST: '#ff7300',
-  FINALIST: '#00C49F',
-  WINNER: '#0088FE',
-  ELIMINATED: '#de0f1e',
-  WITHDRAWN: '#999999',
-}
-
-const renderCustomLabel = ({
-  cx,
-  cy,
-  midAngle,
-  innerRadius,
-  outerRadius,
-  percent,
-}: {
-  cx?: number
-  cy?: number
-  midAngle?: number
-  innerRadius?: number
-  outerRadius?: number
-  percent?: number
-}) => {
-  if (cx === undefined || cy === undefined || midAngle === undefined ||
-      innerRadius === undefined || outerRadius === undefined || percent === undefined) {
-    return null
-  }
-  if (percent < 0.05) return null // Don't show labels for small slices
-
-  const RADIAN = Math.PI / 180
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5
-  const x = cx + radius * Math.cos(-midAngle * RADIAN)
-  const y = cy + radius * Math.sin(-midAngle * RADIAN)
-
-  return (
-    <text
-      x={x}
-      y={y}
-      fill="white"
-      textAnchor={x > cx ? 'start' : 'end'}
-      dominantBaseline="central"
-      fontSize={12}
-      fontWeight={600}
-    >
-      {`${(percent * 100).toFixed(0)}%`}
-    </text>
-  )
-}
-
 export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
   const total = data.reduce((sum, item) => sum + item.count, 0)
 
-  // Format status for display
-  const formattedData = data.map((d) => ({
-    ...d,
-    name: d.status.replace(/_/g, ' '),
-    color: STATUS_COLORS[d.status] || '#8884d8',
+  const pieData = data.map((d) => ({
+    id: d.status,
+    label: formatStatus(d.status),
+    value: d.count,
+    color: getStatusColor(d.status),
   }))
 
   return (
@@ -91,39 +34,42 @@ export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <PieChart>
-              <Pie
-                data={formattedData}
-                cx="50%"
-                cy="50%"
-                labelLine={false}
-                label={renderCustomLabel}
-                outerRadius={100}
-                innerRadius={50}
-                fill="#8884d8"
-                dataKey="count"
-                nameKey="name"
-              >
-                {formattedData.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={entry.color} />
-                ))}
-              </Pie>
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '6px',
-                }}
-                formatter={(value: number | undefined, name: string | undefined) => [
-                  `${value ?? 0} (${(((value ?? 0) / total) * 100).toFixed(1)}%)`,
-                  name ?? '',
-                ]}
-              />
-              <Legend />
-            </PieChart>
-          </ResponsiveContainer>
+        <div style={{ height: '300px' }}>
+          <ResponsivePie
+            data={pieData}
+            theme={nivoTheme}
+            colors={{ datum: 'data.color' }}
+            innerRadius={0.5}
+            padAngle={0.7}
+            cornerRadius={3}
+            activeOuterRadiusOffset={8}
+            margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
+            enableArcLinkLabels={true}
+            arcLinkLabelsSkipAngle={10}
+            arcLinkLabelsTextColor="#374151"
+            arcLinkLabelsThickness={2}
+            arcLinkLabelsColor={{ from: 'color' }}
+            enableArcLabels={true}
+            arcLabelsSkipAngle={10}
+            arcLabelsTextColor={{ from: 'color', modifiers: [['darker', 2]] }}
+            legends={[
+              {
+                anchor: 'bottom',
+                direction: 'row',
+                justify: false,
+                translateX: 0,
+                translateY: 56,
+                itemsSpacing: 0,
+                itemWidth: 100,
+                itemHeight: 18,
+                itemTextColor: '#374151',
+                itemDirection: 'left-to-right',
+                itemOpacity: 1,
+                symbolSize: 12,
+                symbolShape: 'circle',
+              },
+            ]}
+          />
         </div>
       </CardContent>
     </Card>

src/components/observer/observer-dashboard-content.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
 import { trpc } from '@/lib/trpc/client'
 import {
   Card,
@@ -40,9 +41,13 @@ import {
   Search,
   ChevronLeft,
   ChevronRight,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { AnimatedCard } from '@/components/shared/animated-container'
+import { RoundTypeStatsCards } from '@/components/observer/round-type-stats'
 import { useDebouncedCallback } from 'use-debounce'
 
 const PER_PAGE_OPTIONS = [10, 20, 50]
@@ -52,6 +57,8 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
   const [search, setSearch] = useState('')
   const [debouncedSearch, setDebouncedSearch] = useState('')
   const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [sortBy, setSortBy] = useState<'title' | 'score' | 'evaluations'>('title')
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
   const [page, setPage] = useState(1)
   const [perPage, setPerPage] = useState(20)
 
@@ -75,18 +82,44 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
     setPage(1)
   }
 
+  const handleSort = (column: 'title' | 'score' | 'evaluations') => {
+    if (sortBy === column) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortBy(column)
+      setSortDir(column === 'title' ? 'asc' : 'desc')
+    }
+    setPage(1)
+  }
+
+  const SortIcon = ({ column }: { column: 'title' | 'score' | 'evaluations' }) => {
+    if (sortBy !== column) return <ArrowUpDown className="ml-1 inline h-3 w-3 text-muted-foreground/50" />
+    return sortDir === 'asc'
+      ? <ArrowUp className="ml-1 inline h-3 w-3" />
+      : <ArrowDown className="ml-1 inline h-3 w-3" />
+  }
+
   // Fetch programs/rounds for the filter dropdown
-  const { data: programs } = trpc.program.list.useQuery({})
+  const { data: programs } = trpc.program.list.useQuery({ includeStages: true })
 
   const rounds = programs?.flatMap((p) =>
-    (p.rounds ?? []).map((r: { id: string; name: string; status: string }) => ({
+    (p.rounds ?? []).map((r: { id: string; name: string; status: string; roundType?: string }) => ({
       id: r.id,
       name: r.name,
       programName: `${p.year} Edition`,
       status: r.status,
+      roundType: r.roundType,
     }))
   ) || []
 
+  // Default to the active round
+  useEffect(() => {
+    if (rounds.length && selectedRoundId === 'all') {
+      const active = rounds.find((r) => r.status === 'ROUND_ACTIVE')
+      if (active) setSelectedRoundId(active.id)
+    }
+  }, [rounds.length]) // eslint-disable-line react-hooks/exhaustive-deps
+
   // Fetch dashboard stats
   const roundIdParam = selectedRoundId !== 'all' ? selectedRoundId : undefined
   const { data: stats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery(
@@ -98,18 +131,14 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
     roundId: roundIdParam,
     search: debouncedSearch || undefined,
     status: statusFilter !== 'all' ? statusFilter : undefined,
+    sortBy,
+    sortDir,
     page,
     perPage,
   })
 
-  // Fetch recent rounds for jury completion
-  const { data: recentRoundsData } = trpc.program.list.useQuery({})
-  const recentRounds = recentRoundsData?.flatMap((p) =>
-    (p.rounds ?? []).map((r: { id: string; name: string; status: string }) => ({
-      ...r,
-      programName: `${p.year} Edition`,
-    }))
-  )?.slice(0, 5) || []
+  // Recent rounds for jury completion (reuse existing programs data)
+  const recentRounds = rounds.slice(0, 5)
 
   return (
     <div className="space-y-6">
@@ -152,7 +181,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
             <SelectItem value="all">All Rounds</SelectItem>
             {rounds.map((round) => (
               <SelectItem key={round.id} value={round.id}>
-                {round.programName} - {round.name}
+                {round.programName} - {round.name}{round.roundType ? ` (${round.roundType.replace(/_/g, ' ')})` : ''}
               </SelectItem>
             ))}
           </SelectContent>
@@ -175,83 +204,93 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
           ))}
         </div>
       ) : stats ? (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          <AnimatedCard index={0}>
-            <Card className="border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-              <CardContent className="p-5">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">Programs</p>
-                    <p className="text-2xl font-bold mt-1">{stats.programCount}</p>
-                    <p className="text-xs text-muted-foreground mt-1">
-                      {stats.activeRoundCount} active round{stats.activeRoundCount !== 1 ? 's' : ''}
-                    </p>
-                  </div>
-                  <div className="rounded-xl bg-blue-50 p-3">
-                    <FolderKanban className="h-5 w-5 text-blue-600" />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </AnimatedCard>
-
-          <AnimatedCard index={1}>
-            <Card className="border-l-4 border-l-emerald-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-              <CardContent className="p-5">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">Projects</p>
-                    <p className="text-2xl font-bold mt-1">{stats.projectCount}</p>
-                    <p className="text-xs text-muted-foreground mt-1">
-                      {selectedRoundId !== 'all' ? 'In selected round' : 'Across all rounds'}
-                    </p>
-                  </div>
-                  <div className="rounded-xl bg-emerald-50 p-3">
-                    <ClipboardList className="h-5 w-5 text-emerald-600" />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </AnimatedCard>
-
-          <AnimatedCard index={2}>
-            <Card className="border-l-4 border-l-violet-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-              <CardContent className="p-5">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">Jury Members</p>
-                    <p className="text-2xl font-bold mt-1">{stats.jurorCount}</p>
-                    <p className="text-xs text-muted-foreground mt-1">Active members</p>
-                  </div>
-                  <div className="rounded-xl bg-violet-50 p-3">
-                    <Users className="h-5 w-5 text-violet-600" />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </AnimatedCard>
-
-          <AnimatedCard index={3}>
-            <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-              <CardContent className="p-5">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">Evaluations</p>
-                    <p className="text-2xl font-bold mt-1">{stats.submittedEvaluations}</p>
-                    <div className="mt-2">
-                      <Progress value={stats.completionRate} className="h-2" gradient />
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {stats.completionRate}% completion rate
+        <div className="space-y-4">
+          {/* Universal stats: Programs + Projects */}
+          <div className="grid gap-4 md:grid-cols-2">
+            <AnimatedCard index={0}>
+              <Card className="border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
+                <CardContent className="p-5">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground">Programs</p>
+                      <p className="text-2xl font-bold mt-1">{stats.programCount}</p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {stats.activeRoundCount} active round{stats.activeRoundCount !== 1 ? 's' : ''}
                       </p>
                     </div>
+                    <div className="rounded-xl bg-blue-50 p-3">
+                      <FolderKanban className="h-5 w-5 text-blue-600" />
+                    </div>
                   </div>
-                  <div className="rounded-xl bg-brand-teal/10 p-3">
-                    <CheckCircle2 className="h-5 w-5 text-brand-teal" />
+                </CardContent>
+              </Card>
+            </AnimatedCard>
+
+            <AnimatedCard index={1}>
+              <Card className="border-l-4 border-l-emerald-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
+                <CardContent className="p-5">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground">Projects</p>
+                      <p className="text-2xl font-bold mt-1">{stats.projectCount}</p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {selectedRoundId !== 'all' ? 'In selected round' : 'Across all rounds'}
+                      </p>
+                    </div>
+                    <div className="rounded-xl bg-emerald-50 p-3">
+                      <ClipboardList className="h-5 w-5 text-emerald-600" />
+                    </div>
                   </div>
-                </div>
-              </CardContent>
-            </Card>
-          </AnimatedCard>
+                </CardContent>
+              </Card>
+            </AnimatedCard>
+          </div>
+
+          {/* Round-type-aware stats */}
+          {selectedRoundId !== 'all' ? (
+            <RoundTypeStatsCards roundId={selectedRoundId} />
+          ) : (
+            <div className="grid gap-4 md:grid-cols-2">
+              <AnimatedCard index={2}>
+                <Card className="border-l-4 border-l-violet-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
+                  <CardContent className="p-5">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Jury Members</p>
+                        <p className="text-2xl font-bold mt-1">{stats.jurorCount}</p>
+                        <p className="text-xs text-muted-foreground mt-1">Active members</p>
+                      </div>
+                      <div className="rounded-xl bg-violet-50 p-3">
+                        <Users className="h-5 w-5 text-violet-600" />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </AnimatedCard>
+
+              <AnimatedCard index={3}>
+                <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
+                  <CardContent className="p-5">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Evaluations</p>
+                        <p className="text-2xl font-bold mt-1">{stats.submittedEvaluations}</p>
+                        <div className="mt-2">
+                          <Progress value={stats.completionRate} className="h-2" gradient />
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            {stats.completionRate}% completion rate
+                          </p>
+                        </div>
+                      </div>
+                      <div className="rounded-xl bg-brand-teal/10 p-3">
+                        <CheckCircle2 className="h-5 w-5 text-brand-teal" />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </AnimatedCard>
+            </div>
+          )}
         </div>
       ) : null}
 
@@ -320,12 +359,24 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                 <Table>
                   <TableHeader>
                     <TableRow>
-                      <TableHead>Title</TableHead>
+                      <TableHead>
+                        <button type="button" onClick={() => handleSort('title')} className="inline-flex items-center hover:text-foreground transition-colors">
+                          Title<SortIcon column="title" />
+                        </button>
+                      </TableHead>
                       <TableHead>Team</TableHead>
                       <TableHead>Round</TableHead>
                       <TableHead>Status</TableHead>
-                      <TableHead className="text-right">Avg Score</TableHead>
-                      <TableHead className="text-right">Evaluations</TableHead>
+                      <TableHead className="text-right">
+                        <button type="button" onClick={() => handleSort('score')} className="inline-flex items-center hover:text-foreground transition-colors">
+                          Avg Score<SortIcon column="score" />
+                        </button>
+                      </TableHead>
+                      <TableHead className="text-right">
+                        <button type="button" onClick={() => handleSort('evaluations')} className="inline-flex items-center hover:text-foreground transition-colors">
+                          Evaluations<SortIcon column="evaluations" />
+                        </button>
+                      </TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
@@ -441,14 +492,24 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
             <div className="space-y-2">
               {(() => {
                 const maxCount = Math.max(...stats.scoreDistribution.map((b) => b.count), 1)
-                const colors = ['bg-green-500', 'bg-emerald-400', 'bg-amber-400', 'bg-orange-400', 'bg-red-400']
-                return stats.scoreDistribution.map((bucket, i) => (
-                  <div key={bucket.label} className="flex items-center gap-3">
+                // Score-based colors: high scores = brand dark blue, low = brand red
+                const scoreColors: Record<string, string> = {
+                  '9-10': '#053d57',
+                  '7-8': '#1e7a8a',
+                  '5-6': '#557f8c',
+                  '3-4': '#c4453a',
+                  '1-2': '#de0f1e',
+                }
+                return stats.scoreDistribution.map((bucket) => (
+                  <div key={bucket.label} className="flex items-center gap-3" role="img" aria-label={`Score ${bucket.label}: ${bucket.count} evaluations`}>
                     <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', colors[i])}
-                        style={{ width: `${maxCount > 0 ? (bucket.count / maxCount) * 100 : 0}%` }}
+                        className="h-full rounded-full transition-all"
+                        style={{
+                          width: `${maxCount > 0 ? (bucket.count / maxCount) * 100 : 0}%`,
+                          backgroundColor: scoreColors[bucket.label] || '#557f8c',
+                        }}
                       />
                     </div>
                     <span className="text-sm tabular-nums w-8">{bucket.count}</span>
@@ -477,13 +538,19 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
           <CardContent>
             <div className="space-y-4">
               {recentRounds.map((round) => (
-                <div
+                <Link
                   key={round.id}
-                  className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm"
+                  href={`/observer/reports?round=${round.id}`}
+                  className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm hover:bg-muted/50"
                 >
                   <div className="space-y-1">
                     <div className="flex items-center gap-2">
                       <p className="font-medium">{round.name}</p>
+                      {round.roundType && (
+                        <Badge variant="outline" className="text-xs">
+                          {round.roundType.replace(/_/g, ' ')}
+                        </Badge>
+                      )}
                       <Badge
                         variant={
                           round.status === 'ROUND_ACTIVE'
@@ -500,13 +567,8 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                       {round.programName}
                     </p>
                   </div>
-                  <div className="text-right text-sm">
-                    <p>Round details</p>
-                    <p className="text-muted-foreground">
-                      View analytics
-                    </p>
-                  </div>
-                </div>
+                  <ChevronRight className="h-5 w-5 text-muted-foreground" />
+                </Link>
               ))}
             </div>
           </CardContent>

src/components/observer/round-type-stats.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { trpc } from '@/lib/trpc/client'
+import { Card, CardContent } from '@/components/ui/card'
+import { AnimatedCard } from '@/components/shared/animated-container'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Inbox,
+  Filter,
+  ClipboardCheck,
+  Upload,
+  Users,
+  Presentation,
+  Vote,
+  CheckCircle2,
+  BarChart3,
+  FileText,
+  MessageSquare,
+  Lock,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+interface StatCardData {
+  label: string
+  value: string | number
+  icon: LucideIcon
+  color: string
+}
+
+function StatCard({ label, value, icon: Icon, color, index }: StatCardData & { index: number }) {
+  return (
+    <AnimatedCard index={index}>
+      <Card className="relative overflow-hidden">
+        <div className={`absolute left-0 top-0 bottom-0 w-1`} style={{ backgroundColor: color }} />
+        <CardContent className="flex items-center gap-4 pt-6">
+          <div className="rounded-lg p-2" style={{ backgroundColor: `${color}15` }}>
+            <Icon className="h-5 w-5" style={{ color }} />
+          </div>
+          <div>
+            <p className="text-2xl font-bold tabular-nums">{value}</p>
+            <p className="text-sm text-muted-foreground">{label}</p>
+          </div>
+        </CardContent>
+      </Card>
+    </AnimatedCard>
+  )
+}
+
+interface RoundTypeStatsCardsProps {
+  roundId: string
+}
+
+export function RoundTypeStatsCards({ roundId }: RoundTypeStatsCardsProps) {
+  const { data, isLoading } = trpc.analytics.getRoundTypeStats.useQuery(
+    { roundId },
+    { enabled: !!roundId }
+  )
+
+  if (isLoading) {
+    return (
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {[...Array(4)].map((_, i) => (
+          <Card key={i}>
+            <CardContent className="pt-6">
+              <Skeleton className="h-8 w-16" />
+              <Skeleton className="mt-2 h-4 w-24" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    )
+  }
+
+  if (!data) return null
+
+  const stats = data.stats as Record<string, unknown>
+
+  const cards: StatCardData[] = (() => {
+    switch (data.roundType) {
+      case 'INTAKE':
+        return [
+          { label: 'Total Projects', value: (stats.totalProjects as number) ?? 0, icon: Inbox, color: '#053d57' },
+          { label: 'States', value: ((stats.byState as Array<unknown>)?.length ?? 0), icon: BarChart3, color: '#557f8c' },
+          { label: 'Categories', value: ((stats.byCategory as Array<unknown>)?.length ?? 0), icon: Filter, color: '#1e7a8a' },
+        ]
+
+      case 'FILTERING':
+        return [
+          { label: 'Total Screened', value: (stats.totalScreened as number) ?? 0, icon: Filter, color: '#053d57' },
+          { label: 'Passed', value: (stats.passed as number) ?? 0, icon: CheckCircle2, color: '#2d8659' },
+          { label: 'Filtered Out', value: (stats.filteredOut as number) ?? 0, icon: Filter, color: '#de0f1e' },
+          { label: 'Pass Rate', value: `${(stats.passRate as number) ?? 0}%`, icon: BarChart3, color: '#557f8c' },
+        ]
+
+      case 'EVALUATION':
+        return [
+          { label: 'Assignments', value: (stats.totalAssignments as number) ?? 0, icon: ClipboardCheck, color: '#053d57' },
+          { label: 'Completed', value: (stats.completedEvaluations as number) ?? 0, icon: CheckCircle2, color: '#2d8659' },
+          { label: 'Completion Rate', value: `${(stats.completionRate as number) ?? 0}%`, icon: BarChart3, color: '#557f8c' },
+          { label: 'Active Jurors', value: (stats.activeJurors as number) ?? 0, icon: Users, color: '#1e7a8a' },
+        ]
+
+      case 'SUBMISSION':
+        return [
+          { label: 'Total Files', value: (stats.totalFiles as number) ?? 0, icon: Upload, color: '#053d57' },
+          { label: 'Teams Submitted', value: (stats.teamsSubmitted as number) ?? 0, icon: FileText, color: '#557f8c' },
+        ]
+
+      case 'MENTORING':
+        return [
+          { label: 'Mentor Assignments', value: (stats.mentorAssignments as number) ?? 0, icon: Users, color: '#053d57' },
+          { label: 'Total Messages', value: (stats.totalMessages as number) ?? 0, icon: MessageSquare, color: '#557f8c' },
+        ]
+
+      case 'LIVE_FINAL':
+        return [
+          { label: 'Session Status', value: formatSessionStatus((stats.sessionStatus as string) ?? 'NOT_STARTED'), icon: Presentation, color: '#053d57' },
+          { label: 'Total Votes', value: (stats.voteCount as number) ?? 0, icon: Vote, color: '#de0f1e' },
+        ]
+
+      case 'DELIBERATION':
+        return [
+          { label: 'Sessions', value: (stats.totalSessions as number) ?? 0, icon: Users, color: '#053d57' },
+          { label: 'Votes Cast', value: (stats.totalVotes as number) ?? 0, icon: Vote, color: '#557f8c' },
+          { label: 'Results Locked', value: (stats.resultsLocked as number) ?? 0, icon: Lock, color: '#2d8659' },
+        ]
+
+      default:
+        return []
+    }
+  })()
+
+  if (cards.length === 0) return null
+
+  return (
+    <div className={
+      cards.length <= 2
+        ? 'grid gap-4 sm:grid-cols-2'
+        : cards.length === 3
+          ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'
+          : 'grid gap-4 sm:grid-cols-2 lg:grid-cols-4'
+    }>
+      {cards.map((card, i) => (
+        <StatCard key={card.label} {...card} index={i} />
+      ))}
+    </div>
+  )
+}
+
+function formatSessionStatus(status: string): string {
+  switch (status) {
+    case 'NOT_STARTED': return 'Not Started'
+    case 'IN_PROGRESS': return 'In Progress'
+    case 'PAUSED': return 'Paused'
+    case 'COMPLETED': return 'Completed'
+    default: return status
+  }
+}

src/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

src/server/routers/analytics.ts

@@ -121,7 +121,7 @@ export const analyticsRouter = router({
       const assignments = await ctx.prisma.assignment.findMany({
         where: assignmentWhere(input),
         include: {
-          user: { select: { name: true, email: true } },
+          user: { select: { name: true } },
           evaluation: {
             select: { id: true, status: true },
           },
@@ -138,7 +138,7 @@ export const analyticsRouter = router({
         const userId = assignment.userId
         if (!byUser[userId]) {
           byUser[userId] = {
-            name: assignment.user.name || assignment.user.email || 'Unknown',
+            name: assignment.user.name || 'Unknown',
             assigned: 0,
             completed: 0,
           }
@@ -317,21 +317,24 @@ export const analyticsRouter = router({
         return []
       }
 
-      const criteriaMap = new Map<string, { id: string; label: string }>()
+      // Build label → Set<id> map so program-level queries match all IDs for the same criterion label
+      const labelToIds = new Map<string, Set<string>>()
+      const labelToFirst = new Map<string, { id: string; label: string }>()
       evaluationForms.forEach((form) => {
         const criteria = form.criteriaJson as Array<{ id: string; label: string }> | null
         if (criteria) {
           criteria.forEach((c) => {
-            const key = input.roundId ? c.id : c.label
-            if (!criteriaMap.has(key)) {
-              criteriaMap.set(key, c)
+            if (!labelToIds.has(c.label)) {
+              labelToIds.set(c.label, new Set())
+              labelToFirst.set(c.label, c)
             }
+            labelToIds.get(c.label)!.add(c.id)
           })
         }
       })
 
-      const criteria = Array.from(criteriaMap.values())
-      if (criteria.length === 0) {
+      const criteriaLabels = Array.from(labelToFirst.values())
+      if (criteriaLabels.length === 0) {
         return []
       }
 
@@ -341,17 +344,23 @@ export const analyticsRouter = router({
         select: { criterionScoresJson: true },
       })
 
-      // Calculate average score per criterion
-      const criteriaScores = criteria.map((criterion) => {
+      // Calculate average score per criterion, checking ALL IDs that share the same label
+      const criteriaScores = criteriaLabels.map((criterion) => {
         const scores: number[] = []
+        const ids = labelToIds.get(criterion.label) ?? new Set([criterion.id])
 
         evaluations.forEach((evaluation) => {
           const criterionScoresJson = evaluation.criterionScoresJson as Record<
             string,
             number
           > | null
-          if (criterionScoresJson && typeof criterionScoresJson[criterion.id] === 'number') {
-            scores.push(criterionScoresJson[criterion.id])
+          if (criterionScoresJson) {
+            for (const cid of ids) {
+              if (typeof criterionScoresJson[cid] === 'number') {
+                scores.push(criterionScoresJson[cid])
+                break // Only count one score per evaluation per criterion
+              }
+            }
           }
         })
 
@@ -496,21 +505,20 @@ export const analyticsRouter = router({
         include: {
           assignment: {
             include: {
-              user: { select: { id: true, name: true, email: true } },
+              user: { select: { id: true, name: true } },
             },
           },
         },
       })
 
       // Group scores by juror
-      const jurorScores: Record<string, { name: string; email: string; scores: number[] }> = {}
+      const jurorScores: Record<string, { name: string; scores: number[] }> = {}
 
       evaluations.forEach((e) => {
         const userId = e.assignment.userId
         if (!jurorScores[userId]) {
           jurorScores[userId] = {
-            name: e.assignment.user.name || e.assignment.user.email || 'Unknown',
-            email: e.assignment.user.email || '',
+            name: e.assignment.user.name || 'Unknown',
             scores: [],
           }
         }
@@ -539,7 +547,6 @@ export const analyticsRouter = router({
         return {
           userId,
           name: data.name,
-          email: data.email,
           evaluationCount: data.scores.length,
           averageScore: avg,
           stddev,
@@ -731,7 +738,12 @@ export const analyticsRouter = router({
         evaluationScores,
       ] = await Promise.all([
         ctx.prisma.program.count(),
-        ctx.prisma.round.count({ where: { status: 'ROUND_ACTIVE' } }),
+        roundId
+          ? ctx.prisma.round.findUnique({ where: { id: roundId }, select: { competitionId: true } })
+              .then((r) => r?.competitionId
+                ? ctx.prisma.round.count({ where: { competitionId: r.competitionId, status: 'ROUND_ACTIVE' } })
+                : ctx.prisma.round.count({ where: { status: 'ROUND_ACTIVE' } }))
+          : ctx.prisma.round.count({ where: { status: 'ROUND_ACTIVE' } }),
         ctx.prisma.project.count({ where: projectFilter }),
         roundId
           ? ctx.prisma.assignment.findMany({
@@ -949,6 +961,8 @@ export const analyticsRouter = router({
         roundId: z.string().optional(),
         search: z.string().optional(),
         status: z.string().optional(),
+        sortBy: z.enum(['title', 'score', 'evaluations']).default('title'),
+        sortDir: z.enum(['asc', 'desc']).default('asc'),
         page: z.number().min(1).default(1),
         perPage: z.number().min(1).max(100).default(20),
       })
@@ -971,6 +985,11 @@ export const analyticsRouter = router({
         ]
       }
 
+      // Prisma-level sort for title; score/evaluations sorted post-query
+      const prismaOrderBy = input.sortBy === 'title'
+        ? { title: input.sortDir as 'asc' | 'desc' }
+        : { title: 'asc' as const }
+
       const [projects, total] = await Promise.all([
         ctx.prisma.project.findMany({
           where,
@@ -990,9 +1009,11 @@ export const analyticsRouter = router({
               },
             },
           },
-          orderBy: { title: 'asc' },
-          skip: (input.page - 1) * input.perPage,
-          take: input.perPage,
+          orderBy: prismaOrderBy,
+          // When sorting by computed fields, fetch all then slice in JS
+          ...(input.sortBy === 'title'
+            ? { skip: (input.page - 1) * input.perPage, take: input.perPage }
+            : {}),
         }),
         ctx.prisma.project.count({ where }),
       ])
@@ -1009,7 +1030,10 @@ export const analyticsRouter = router({
             ? scores.reduce((a, b) => a + b, 0) / scores.length
             : null
 
-        const firstAssignment = p.assignments[0]
+        // Filter assignments to the queried round so we show the correct round name
+        const roundAssignment = input.roundId
+          ? p.assignments.find((a) => a.roundId === input.roundId)
+          : p.assignments[0]
 
         return {
           id: p.id,
@@ -1017,19 +1041,200 @@ export const analyticsRouter = router({
           teamName: p.teamName,
           status: p.status,
           country: p.country,
-          roundId: firstAssignment?.round?.id ?? '',
-          roundName: firstAssignment?.round?.name ?? '',
+          roundId: roundAssignment?.round?.id ?? '',
+          roundName: roundAssignment?.round?.name ?? '',
           averageScore,
           evaluationCount: submitted.length,
         }
       })
 
+      // Sort by computed fields (score, evaluations) in JS
+      let sorted = mapped
+      if (input.sortBy === 'score') {
+        sorted = mapped.sort((a, b) => {
+          const sa = a.averageScore ?? -1
+          const sb = b.averageScore ?? -1
+          return input.sortDir === 'asc' ? sa - sb : sb - sa
+        })
+      } else if (input.sortBy === 'evaluations') {
+        sorted = mapped.sort((a, b) =>
+          input.sortDir === 'asc'
+            ? a.evaluationCount - b.evaluationCount
+            : b.evaluationCount - a.evaluationCount
+        )
+      }
+
+      // Paginate in JS for computed-field sorts
+      const paginated = input.sortBy !== 'title'
+        ? sorted.slice((input.page - 1) * input.perPage, input.page * input.perPage)
+        : sorted
+
       return {
-        projects: mapped,
+        projects: paginated,
         total,
         page: input.page,
         perPage: input.perPage,
         totalPages: Math.ceil(total / input.perPage),
       }
     }),
+
+  /**
+   * Get round-type-aware stats for a specific round.
+   * Returns different metrics depending on the round type.
+   */
+  getRoundTypeStats: observerProcedure
+    .input(z.object({ roundId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const round = await ctx.prisma.round.findUniqueOrThrow({
+        where: { id: input.roundId },
+        select: { id: true, roundType: true, competitionId: true },
+      })
+
+      const roundType = round.roundType
+
+      switch (roundType) {
+        case 'INTAKE': {
+          const [total, byState, byCategory] = await Promise.all([
+            ctx.prisma.projectRoundState.count({ where: { roundId: input.roundId } }),
+            ctx.prisma.projectRoundState.groupBy({
+              by: ['state'],
+              where: { roundId: input.roundId },
+              _count: true,
+            }),
+            ctx.prisma.project.groupBy({
+              by: ['competitionCategory'],
+              where: { projectRoundStates: { some: { roundId: input.roundId } } },
+              _count: true,
+            }),
+          ])
+          return {
+            roundType,
+            stats: {
+              totalProjects: total,
+              byState: byState.map((s) => ({ state: s.state, count: s._count })),
+              byCategory: byCategory.map((c) => ({
+                category: c.competitionCategory ?? 'Uncategorized',
+                count: c._count,
+              })),
+            },
+          }
+        }
+
+        case 'FILTERING': {
+          const [total, byOutcome] = await Promise.all([
+            ctx.prisma.filteringResult.count({ where: { roundId: input.roundId } }),
+            ctx.prisma.filteringResult.groupBy({
+              by: ['outcome'],
+              where: { roundId: input.roundId },
+              _count: true,
+            }),
+          ])
+          const passed = byOutcome.find((o) => o.outcome === 'PASSED')?._count ?? 0
+          return {
+            roundType,
+            stats: {
+              totalScreened: total,
+              passed,
+              filteredOut: byOutcome.find((o) => o.outcome === 'FILTERED_OUT')?._count ?? 0,
+              flagged: byOutcome.find((o) => o.outcome === 'FLAGGED')?._count ?? 0,
+              passRate: total > 0 ? Math.round((passed / total) * 100) : 0,
+            },
+          }
+        }
+
+        case 'EVALUATION': {
+          const [assignmentCount, submittedCount, jurorCount] = await Promise.all([
+            ctx.prisma.assignment.count({ where: { roundId: input.roundId } }),
+            ctx.prisma.evaluation.count({
+              where: { assignment: { roundId: input.roundId }, status: 'SUBMITTED' },
+            }),
+            ctx.prisma.assignment.findMany({
+              where: { roundId: input.roundId },
+              select: { userId: true },
+              distinct: ['userId'],
+            }).then((rows) => rows.length),
+          ])
+          return {
+            roundType,
+            stats: {
+              totalAssignments: assignmentCount,
+              completedEvaluations: submittedCount,
+              completionRate: assignmentCount > 0 ? Math.round((submittedCount / assignmentCount) * 100) : 0,
+              activeJurors: jurorCount,
+            },
+          }
+        }
+
+        case 'SUBMISSION': {
+          const [fileCount, teamsWithFiles] = await Promise.all([
+            ctx.prisma.projectFile.count({ where: { roundId: input.roundId } }),
+            ctx.prisma.projectFile.findMany({
+              where: { roundId: input.roundId },
+              select: { projectId: true },
+              distinct: ['projectId'],
+            }).then((rows) => rows.length),
+          ])
+          return {
+            roundType,
+            stats: {
+              totalFiles: fileCount,
+              teamsSubmitted: teamsWithFiles,
+            },
+          }
+        }
+
+        case 'MENTORING': {
+          const [assignmentCount, messageCount] = await Promise.all([
+            ctx.prisma.mentorAssignment.count({
+              where: { project: { projectRoundStates: { some: { roundId: input.roundId } } } },
+            }),
+            ctx.prisma.mentorMessage.count({
+              where: { project: { projectRoundStates: { some: { roundId: input.roundId } } } },
+            }),
+          ])
+          return {
+            roundType,
+            stats: {
+              mentorAssignments: assignmentCount,
+              totalMessages: messageCount,
+            },
+          }
+        }
+
+        case 'LIVE_FINAL': {
+          const session = await ctx.prisma.liveVotingSession.findUnique({
+            where: { roundId: input.roundId },
+            select: { id: true, status: true, _count: { select: { votes: true } } },
+          })
+          return {
+            roundType,
+            stats: {
+              sessionStatus: session?.status ?? 'NOT_STARTED',
+              voteCount: session?._count.votes ?? 0,
+            },
+          }
+        }
+
+        case 'DELIBERATION': {
+          const [sessions, votes, locks] = await Promise.all([
+            ctx.prisma.deliberationSession.count({ where: { roundId: input.roundId } }),
+            ctx.prisma.deliberationVote.count({
+              where: { session: { roundId: input.roundId } },
+            }),
+            ctx.prisma.resultLock.count({ where: { roundId: input.roundId } }),
+          ])
+          return {
+            roundType,
+            stats: {
+              totalSessions: sessions,
+              totalVotes: votes,
+              resultsLocked: locks,
+            },
+          }
+        }
+
+        default:
+          return { roundType, stats: {} }
+      }
+    }),
 })

src/server/routers/program.ts

@@ -63,6 +63,7 @@ export const programRouter = router({
             name: round.name,
             competitionId: round.competitionId,
             status: round.status,
+            roundType: round.roundType,
             votingEndAt: round.windowCloseAt,
             _count: {
               projects: round._count?.projectRoundStates || 0,