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