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