Observer dashboard extraction, PDF reports, jury UX overhaul, and miscellaneous improvements

- Extract observer dashboard to client component, add PDF export button
- Add PDF report generator with jsPDF for analytics reports
- Overhaul jury evaluation page with improved layout and UX
- Add new analytics endpoints for observer/admin reports
- Improve round creation/edit forms with better settings
- Fix filtering rules page, CSV export dialog, notification bell
- Update auth, prisma schema, and various type fixes

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

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

@@ -0,0 +1,476 @@
+'use client'
+
+import { useState } from 'react'
+import { trpc } from '@/lib/trpc/client'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Progress } from '@/components/ui/progress'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Input } from '@/components/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import { StatusBadge } from '@/components/shared/status-badge'
+import {
+  FolderKanban,
+  ClipboardList,
+  Users,
+  CheckCircle2,
+  Eye,
+  BarChart3,
+  Search,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useDebouncedCallback } from 'use-debounce'
+
+const PER_PAGE_OPTIONS = [10, 20, 50]
+
+export function ObserverDashboardContent({ userName }: { userName?: string }) {
+  const [selectedRoundId, setSelectedRoundId] = useState<string>('all')
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [page, setPage] = useState(1)
+  const [perPage, setPerPage] = useState(20)
+
+  const debouncedSetSearch = useDebouncedCallback((value: string) => {
+    setDebouncedSearch(value)
+    setPage(1)
+  }, 300)
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value)
+    debouncedSetSearch(value)
+  }
+
+  const handleRoundChange = (value: string) => {
+    setSelectedRoundId(value)
+    setPage(1)
+  }
+
+  const handleStatusChange = (value: string) => {
+    setStatusFilter(value)
+    setPage(1)
+  }
+
+  // Fetch programs/rounds for the filter dropdown
+  const { data: programs } = trpc.program.list.useQuery({ includeRounds: true })
+
+  const rounds = programs?.flatMap((p) =>
+    p.rounds.map((r) => ({
+      id: r.id,
+      name: r.name,
+      programName: `${p.year} Edition`,
+      status: r.status,
+    }))
+  ) || []
+
+  // Fetch dashboard stats
+  const roundIdParam = selectedRoundId !== 'all' ? selectedRoundId : undefined
+  const { data: stats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery(
+    { roundId: roundIdParam }
+  )
+
+  // Fetch projects
+  const { data: projectsData, isLoading: projectsLoading } = trpc.analytics.getAllProjects.useQuery({
+    roundId: roundIdParam,
+    search: debouncedSearch || undefined,
+    status: statusFilter !== 'all' ? statusFilter : undefined,
+    page,
+    perPage,
+  })
+
+  // Fetch recent rounds for jury completion
+  const { data: recentRoundsData } = trpc.program.list.useQuery({ includeRounds: true })
+  const recentRounds = recentRoundsData?.flatMap((p) =>
+    p.rounds.map((r) => ({
+      ...r,
+      programName: `${p.year} Edition`,
+    }))
+  )?.slice(0, 5) || []
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome, {userName || 'Observer'}
+        </p>
+      </div>
+
+      {/* Observer Notice */}
+      <div className="rounded-lg border-2 border-blue-300 bg-blue-50 px-4 py-3">
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100">
+            <Eye className="h-4 w-4 text-blue-600" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <p className="font-semibold text-blue-900">Observer Mode</p>
+              <Badge variant="outline" className="border-blue-300 text-blue-700 text-xs">
+                Read-Only
+              </Badge>
+            </div>
+            <p className="text-sm text-blue-700">
+              You have read-only access to view platform statistics and reports.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Round Filter */}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+        <label className="text-sm font-medium">Filter by Round:</label>
+        <Select value={selectedRoundId} onValueChange={handleRoundChange}>
+          <SelectTrigger className="w-full sm:w-[300px]">
+            <SelectValue placeholder="All Rounds" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Rounds</SelectItem>
+            {rounds.map((round) => (
+              <SelectItem key={round.id} value={round.id}>
+                {round.programName} - {round.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Stats Grid */}
+      {statsLoading ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i}>
+              <CardHeader className="space-y-0 pb-2">
+                <Skeleton className="h-4 w-20" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-8 w-16" />
+                <Skeleton className="mt-2 h-3 w-24" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : stats ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Programs</CardTitle>
+              <FolderKanban className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.programCount}</div>
+              <p className="text-xs text-muted-foreground">
+                {stats.activeRoundCount} active round{stats.activeRoundCount !== 1 ? 's' : ''}
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Projects</CardTitle>
+              <ClipboardList className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.projectCount}</div>
+              <p className="text-xs text-muted-foreground">
+                {selectedRoundId !== 'all' ? 'In selected round' : 'Across all rounds'}
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
+              <Users className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.jurorCount}</div>
+              <p className="text-xs text-muted-foreground">Active members</p>
+            </CardContent>
+          </Card>
+
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
+              <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.submittedEvaluations}</div>
+              <div className="mt-2">
+                <Progress value={stats.completionRate} className="h-2" />
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {stats.completionRate}% completion rate
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      ) : null}
+
+      {/* Projects Table */}
+      <Card>
+        <CardHeader>
+          <CardTitle>All Projects</CardTitle>
+          <CardDescription>
+            {projectsData ? `${projectsData.total} project${projectsData.total !== 1 ? 's' : ''} found` : 'Loading projects...'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Search & Filter Bar */}
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="Search by title or team..."
+                value={search}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Select value={statusFilter} onValueChange={handleStatusChange}>
+              <SelectTrigger className="w-full sm:w-[180px]">
+                <SelectValue placeholder="All Statuses" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Statuses</SelectItem>
+                <SelectItem value="SUBMITTED">Submitted</SelectItem>
+                <SelectItem value="ELIGIBLE">Eligible</SelectItem>
+                <SelectItem value="ASSIGNED">Assigned</SelectItem>
+                <SelectItem value="UNDER_REVIEW">Under Review</SelectItem>
+                <SelectItem value="SHORTLISTED">Shortlisted</SelectItem>
+                <SelectItem value="SEMIFINALIST">Semi-finalist</SelectItem>
+                <SelectItem value="FINALIST">Finalist</SelectItem>
+                <SelectItem value="WINNER">Winner</SelectItem>
+                <SelectItem value="REJECTED">Rejected</SelectItem>
+                <SelectItem value="WITHDRAWN">Withdrawn</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={String(perPage)} onValueChange={(v) => { setPerPage(Number(v)); setPage(1) }}>
+              <SelectTrigger className="w-full sm:w-[100px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PER_PAGE_OPTIONS.map((n) => (
+                  <SelectItem key={n} value={String(n)}>{n} / page</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {projectsLoading ? (
+            <div className="space-y-2">
+              {[...Array(5)].map((_, i) => (
+                <Skeleton key={i} className="h-12 w-full" />
+              ))}
+            </div>
+          ) : projectsData && projectsData.projects.length > 0 ? (
+            <>
+              {/* Desktop Table */}
+              <div className="hidden md:block">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Title</TableHead>
+                      <TableHead>Team</TableHead>
+                      <TableHead>Round</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead className="text-right">Avg Score</TableHead>
+                      <TableHead className="text-right">Evaluations</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {projectsData.projects.map((project) => (
+                      <TableRow key={project.id}>
+                        <TableCell className="font-medium max-w-[250px] truncate">
+                          {project.title}
+                        </TableCell>
+                        <TableCell className="max-w-[150px] truncate">{project.teamName || '-'}</TableCell>
+                        <TableCell>
+                          <Badge variant="outline" className="text-xs whitespace-nowrap">
+                            {project.roundName}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <StatusBadge status={project.status} />
+                        </TableCell>
+                        <TableCell className="text-right tabular-nums">
+                          {project.averageScore !== null
+                            ? project.averageScore.toFixed(2)
+                            : '-'}
+                        </TableCell>
+                        <TableCell className="text-right tabular-nums">
+                          {project.evaluationCount}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+
+              {/* Mobile Cards */}
+              <div className="space-y-3 md:hidden">
+                {projectsData.projects.map((project) => (
+                  <Card key={project.id}>
+                    <CardContent className="pt-4 space-y-2">
+                      <div className="flex items-start justify-between gap-2">
+                        <p className="font-medium text-sm leading-tight">{project.title}</p>
+                        <StatusBadge status={project.status} />
+                      </div>
+                      {project.teamName && (
+                        <p className="text-xs text-muted-foreground">{project.teamName}</p>
+                      )}
+                      <div className="flex items-center justify-between text-xs text-muted-foreground">
+                        <Badge variant="outline" className="text-xs">
+                          {project.roundName}
+                        </Badge>
+                        <div className="flex gap-3">
+                          <span>Score: {project.averageScore !== null ? project.averageScore.toFixed(2) : '-'}</span>
+                          <span>{project.evaluationCount} eval{project.evaluationCount !== 1 ? 's' : ''}</span>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+
+              {/* Pagination */}
+              {projectsData.totalPages > 1 && (
+                <div className="flex items-center justify-between pt-2">
+                  <p className="text-sm text-muted-foreground">
+                    Page {projectsData.page} of {projectsData.totalPages}
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPage((p) => Math.max(1, p - 1))}
+                      disabled={page <= 1}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPage((p) => Math.min(projectsData.totalPages, p + 1))}
+                      disabled={page >= projectsData.totalPages}
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <ClipboardList className="h-12 w-12 text-muted-foreground/50" />
+              <p className="mt-2 text-sm text-muted-foreground">
+                {debouncedSearch || statusFilter !== 'all'
+                  ? 'No projects match your filters'
+                  : 'No projects found'}
+              </p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Score Distribution */}
+      {stats && stats.scoreDistribution.some((b) => b.count > 0) && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Score Distribution</CardTitle>
+            <CardDescription>Distribution of global scores across evaluations</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <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">
+                    <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}%` }}
+                      />
+                    </div>
+                    <span className="text-sm tabular-nums w-8">{bucket.count}</span>
+                  </div>
+                ))
+              })()}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Recent Rounds */}
+      {recentRounds.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Rounds</CardTitle>
+            <CardDescription>Overview of the latest voting rounds</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentRounds.map((round) => (
+                <div
+                  key={round.id}
+                  className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm"
+                >
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <p className="font-medium">{round.name}</p>
+                      <Badge
+                        variant={
+                          round.status === 'ACTIVE'
+                            ? 'default'
+                            : round.status === 'CLOSED'
+                              ? 'secondary'
+                              : 'outline'
+                        }
+                      >
+                        {round.status}
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      {round.programName}
+                    </p>
+                  </div>
+                  <div className="text-right text-sm">
+                    <p>{round._count?.projects || 0} projects</p>
+                    <p className="text-muted-foreground">
+                      {round._count?.assignments || 0} assignments
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}