Observer platform redesign Phase 4: migrate charts to Tremor, redesign all pages

- Migrate 9 chart components from Nivo to @tremor/react (BarChart, AreaChart, DonutChart, ScatterChart)
- Remove @nivo/*, @react-spring/web dependencies (45 packages removed)
- Redesign dashboard: 6 stat tiles, competition pipeline, score distribution, juror workload, activity feed
- Add new /observer/projects page with search, filters, sorting, pagination, CSV export
- Restructure reports page from 5 tabs to 3 (Progress, Jurors, Scores & Analytics) with per-tab CSV export
- Redesign project detail: breadcrumb nav, score card header, 3-tab layout (Overview/Evaluations/Files)
- Update loading skeletons to match new layouts

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

src/components/charts/status-breakdown.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { ResponsivePie } from '@nivo/pie'
+import { DonutChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { nivoTheme, getStatusColor, formatStatus } from './chart-theme'
+import { getStatusColor, formatStatus } from './chart-theme'
 
 interface StatusDataPoint {
   status: string
@@ -18,13 +18,13 @@ export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
 
   const total = data.reduce((sum, item) => sum + item.count, 0)
 
-  const pieData = data.map((d) => ({
-    id: d.status,
-    label: formatStatus(d.status),
+  const chartData = data.map((d) => ({
+    name: formatStatus(d.status),
     value: d.count,
-    color: getStatusColor(d.status),
   }))
 
+  const colors = data.map((d) => getStatusColor(d.status))
+
   return (
     <Card>
       <CardHeader>
@@ -36,43 +36,14 @@ export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <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>
+        <DonutChart
+          data={chartData}
+          category="value"
+          index="name"
+          colors={colors as string[]}
+          showLabel={true}
+          className="h-[300px]"
+        />
       </CardContent>
     </Card>
   )