Fix observer reports: charts, filtering, project preview, dashboard stats

- Rewrite diversity metrics: horizontal bar charts for ocean issues and
  geographic distribution (replaces unreadable vertical/donut charts)
- Rewrite juror score heatmap: expandable table with score distribution
- Rewrite juror consistency: horizontal bar visual with juror names
- Merge filtering tabs into single screening view with per-project
  AI reasoning and expandable rows
- Add project preview dialog for juror performance table
- Fix status breakdown for evaluation rounds (Fully/Partially/Not Reviewed)
- Show active round name instead of count on observer dashboard
- Move Global tab to last position, default to first round-specific tab
- Add 4-card stats layout for evaluation with reviews/project ratio
- Fix oceanIssue field (singular) and remove non-existent aiSummary

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

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

@@ -210,14 +210,16 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
           <div className="grid grid-cols-3 md:grid-cols-6 divide-x divide-border">
             {[
               { value: stats.projectCount, label: 'Projects' },
-              { value: stats.activeRoundCount, label: 'Active Rounds' },
+              { value: stats.activeRoundName ?? `${stats.activeRoundCount} Active`, label: 'Active Round', isText: !!stats.activeRoundName },
               { value: avgScore, label: 'Avg Score' },
               { value: `${stats.completionRate}%`, label: 'Completion' },
               { value: stats.jurorCount, label: 'Jurors' },
               { value: countryCount, label: 'Countries' },
             ].map((stat) => (
               <div key={stat.label} className="px-4 py-3.5 text-center">
-                <p className="text-xl font-semibold tabular-nums leading-tight">{stat.value}</p>
+                <p className={`font-semibold leading-tight ${
+                  'isText' in stat && stat.isText ? 'text-sm truncate' : 'text-xl tabular-nums'
+                }`}>{stat.value}</p>
                 <p className="text-[11px] text-muted-foreground mt-0.5">{stat.label}</p>
               </div>
             ))}

src/components/observer/reports/evaluation-report-tabs.tsx

@@ -23,6 +23,7 @@ import {
   TrendingUp,
   Download,
   Clock,
+  ClipboardCheck,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
 import {
@@ -190,15 +191,15 @@ function ProgressSubTab({
               ))}
             </div>
           ) : overviewStats ? (
-            <div className="grid gap-4 sm:grid-cols-3">
+            <div className="grid gap-4 sm: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">Project Count</p>
+                        <p className="text-sm font-medium text-muted-foreground">Projects</p>
                         <p className="text-2xl font-bold mt-1">{overviewStats.projectCount}</p>
-                        <p className="text-xs text-muted-foreground mt-1">In selection</p>
+                        <p className="text-xs text-muted-foreground mt-1">In round</p>
                       </div>
                       <div className="rounded-xl bg-blue-50 p-3">
                         <FileSpreadsheet className="h-5 w-5 text-blue-600" />
@@ -209,13 +210,38 @@ function ProgressSubTab({
               </AnimatedCard>
 
               <AnimatedCard index={1}>
+                <Card className="border-l-4 border-l-teal-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">Assignments</p>
+                        <p className="text-2xl font-bold mt-1">{overviewStats.assignmentCount}</p>
+                        <p className="text-xs text-muted-foreground mt-1">
+                          {overviewStats.projectCount > 0
+                            ? `${(overviewStats.assignmentCount / overviewStats.projectCount).toFixed(1)} reviews/project`
+                            : 'No projects'}
+                        </p>
+                      </div>
+                      <div className="rounded-xl bg-teal-50 p-3">
+                        <ClipboardCheck className="h-5 w-5 text-teal-600" />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </AnimatedCard>
+
+              <AnimatedCard index={2}>
                 <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">Evaluation Count</p>
+                        <p className="text-sm font-medium text-muted-foreground">Evaluations</p>
                         <p className="text-2xl font-bold mt-1">{overviewStats.evaluationCount}</p>
-                        <p className="text-xs text-muted-foreground mt-1">Submitted</p>
+                        <p className="text-xs text-muted-foreground mt-1">
+                          {overviewStats.assignmentCount > 0
+                            ? `${overviewStats.evaluationCount}/${overviewStats.assignmentCount} submitted`
+                            : 'Submitted'}
+                        </p>
                       </div>
                       <div className="rounded-xl bg-emerald-50 p-3">
                         <TrendingUp className="h-5 w-5 text-emerald-600" />
@@ -225,13 +251,13 @@ function ProgressSubTab({
                 </Card>
               </AnimatedCard>
 
-              <AnimatedCard index={2}>
+              <AnimatedCard index={3}>
                 <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>
                       <div className="flex items-center justify-between">
                         <div>
-                          <p className="text-sm font-medium text-muted-foreground">Completion Rate</p>
+                          <p className="text-sm font-medium text-muted-foreground">Completion</p>
                           <p className="text-2xl font-bold mt-1">{overviewStats.completionRate}%</p>
                         </div>
                         <div className="rounded-xl bg-violet-50 p-3">

src/components/observer/reports/expandable-juror-table.tsx

@@ -13,7 +13,8 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { ChevronDown, ChevronUp } from 'lucide-react'
-import Link from 'next/link'
+import { scoreGradient } from '@/components/charts/chart-theme'
+import { ProjectPreviewDialog } from './project-preview-dialog'
 
 interface JurorRow {
   userId: string
@@ -24,7 +25,7 @@ interface JurorRow {
   averageScore: number
   stddev: number
   isOutlier: boolean
-  projects: { id: string; title: string; evalStatus: string }[]
+  projects: { id: string; title: string; evalStatus: string; score?: number | null }[]
 }
 
 interface ExpandableJurorTableProps {
@@ -42,13 +43,32 @@ function evalStatusBadge(status: string) {
   }
 }
 
+function ScorePill({ score }: { score: number }) {
+  const bg = scoreGradient(score)
+  const text = score >= 6 ? '#ffffff' : '#1a1a1a'
+  return (
+    <span
+      className="inline-flex items-center justify-center rounded-md px-2 py-0.5 text-xs font-semibold tabular-nums min-w-[36px]"
+      style={{ backgroundColor: bg, color: text }}
+    >
+      {score.toFixed(1)}
+    </span>
+  )
+}
+
 export function ExpandableJurorTable({ jurors }: ExpandableJurorTableProps) {
   const [expanded, setExpanded] = useState<string | null>(null)
+  const [previewProjectId, setPreviewProjectId] = useState<string | null>(null)
 
   function toggle(userId: string) {
     setExpanded((prev) => (prev === userId ? null : userId))
   }
 
+  function openPreview(projectId: string, e: React.MouseEvent) {
+    e.stopPropagation()
+    setPreviewProjectId(projectId)
+  }
+
   if (jurors.length === 0) {
     return (
       <Card>
@@ -127,22 +147,29 @@ export function ExpandableJurorTable({ jurors }: ExpandableJurorTableProps) {
                             <thead>
                               <tr className="text-left text-xs text-muted-foreground border-b">
                                 <th className="pb-2 font-medium">Project</th>
-                                <th className="pb-2 font-medium">Evaluation Status</th>
+                                <th className="pb-2 font-medium text-center">Score</th>
+                                <th className="pb-2 font-medium text-right">Status</th>
                               </tr>
                             </thead>
                             <tbody>
                               {j.projects.map((p) => (
                                 <tr key={p.id} className="border-b last:border-0">
-                                  <td className="py-1.5 pr-4">
-                                    <Link
-                                      href={`/observer/projects/${p.id}`}
-                                      className="text-primary hover:underline"
-                                      onClick={(e) => e.stopPropagation()}
+                                  <td className="py-2 pr-4">
+                                    <button
+                                      className="text-primary hover:underline text-left"
+                                      onClick={(e) => openPreview(p.id, e)}
                                     >
                                       {p.title}
-                                    </Link>
+                                    </button>
                                   </td>
-                                  <td className="py-1.5">{evalStatusBadge(p.evalStatus)}</td>
+                                  <td className="py-2 text-center">
+                                    {p.score != null ? (
+                                      <ScorePill score={p.score} />
+                                    ) : (
+                                      <span className="text-xs text-muted-foreground">—</span>
+                                    )}
+                                  </td>
+                                  <td className="py-2 text-right">{evalStatusBadge(p.evalStatus)}</td>
                                 </tr>
                               ))}
                             </tbody>
@@ -209,13 +236,16 @@ export function ExpandableJurorTable({ jurors }: ExpandableJurorTableProps) {
                 <div className="mt-3 pt-3 border-t space-y-2">
                   {j.projects.map((p) => (
                     <div key={p.id} className="flex items-center justify-between gap-2">
-                      <Link
-                        href={`/observer/projects/${p.id}`}
-                        className="text-sm text-primary hover:underline truncate"
+                      <button
+                        className="text-sm text-primary hover:underline truncate text-left"
+                        onClick={(e) => openPreview(p.id, e)}
                       >
                         {p.title}
-                      </Link>
-                      {evalStatusBadge(p.evalStatus)}
+                      </button>
+                      <div className="flex items-center gap-2 shrink-0">
+                        {p.score != null && <ScorePill score={p.score} />}
+                        {evalStatusBadge(p.evalStatus)}
+                      </div>
                     </div>
                   ))}
                 </div>
@@ -227,6 +257,13 @@ export function ExpandableJurorTable({ jurors }: ExpandableJurorTableProps) {
           </Card>
         ))}
       </div>
+
+      {/* Project Preview Dialog */}
+      <ProjectPreviewDialog
+        projectId={previewProjectId}
+        open={!!previewProjectId}
+        onOpenChange={(open) => { if (!open) setPreviewProjectId(null) }}
+      />
     </>
   )
 }

src/components/observer/reports/filtering-report-tabs.tsx

@@ -21,10 +21,10 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeft, ChevronRight, ChevronDown, ChevronUp } from 'lucide-react'
 import { RoundTypeStatsCards } from '@/components/observer/round-type-stats'
 import { FilteringScreeningBar } from './filtering-screening-bar'
+import { ProjectPreviewDialog } from './project-preview-dialog'
 
 interface FilteringReportTabsProps {
   roundId: string
@@ -46,9 +46,30 @@ function outcomeBadge(outcome: string) {
   }
 }
 
-function ProjectsTab({ roundId }: { roundId: string }) {
+/** Extract reasoning text from aiScreeningJson */
+function extractReasoning(aiScreeningJson: unknown): string | null {
+  if (!aiScreeningJson || typeof aiScreeningJson !== 'object' || Array.isArray(aiScreeningJson)) {
+    return null
+  }
+  const obj = aiScreeningJson as Record<string, unknown>
+  // Direct reasoning field
+  if (typeof obj.reasoning === 'string') return obj.reasoning
+  // Nested under rule ID: { [ruleId]: { reasoning, confidence, ... } }
+  for (const key of Object.keys(obj)) {
+    const inner = obj[key]
+    if (inner && typeof inner === 'object' && !Array.isArray(inner)) {
+      const innerObj = inner as Record<string, unknown>
+      if (typeof innerObj.reasoning === 'string') return innerObj.reasoning
+    }
+  }
+  return null
+}
+
+export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
   const [outcomeFilter, setOutcomeFilter] = useState<OutcomeFilter>('ALL')
   const [page, setPage] = useState(1)
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const [previewProjectId, setPreviewProjectId] = useState<string | null>(null)
   const perPage = 20
 
   const { data, isLoading } = trpc.analytics.getFilteringResults.useQuery({
@@ -63,8 +84,21 @@ function ProjectsTab({ roundId }: { roundId: string }) {
     setPage(1)
   }
 
+  function toggleExpand(id: string) {
+    setExpandedId((prev) => (prev === id ? null : id))
+  }
+
+  function openPreview(projectId: string, e: React.MouseEvent) {
+    e.stopPropagation()
+    setPreviewProjectId(projectId)
+  }
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
+      <RoundTypeStatsCards roundId={roundId} />
+      <FilteringScreeningBar roundId={roundId} />
+
+      {/* Filter + count */}
       <div className="flex items-center gap-3">
         <Select value={outcomeFilter} onValueChange={handleOutcomeChange}>
           <SelectTrigger className="w-[180px]">
@@ -79,7 +113,7 @@ function ProjectsTab({ roundId }: { roundId: string }) {
         </Select>
         {data && (
           <p className="text-sm text-muted-foreground">
-            {data.total} result{data.total !== 1 ? 's' : ''}
+            {data.total} project{data.total !== 1 ? 's' : ''}
           </p>
         )}
       </div>
@@ -93,35 +127,85 @@ function ProjectsTab({ roundId }: { roundId: string }) {
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Project Title</TableHead>
+                  <TableHead className="w-8" />
+                  <TableHead>Project</TableHead>
                   <TableHead>Team</TableHead>
                   <TableHead>Category</TableHead>
                   <TableHead>Country</TableHead>
                   <TableHead>Outcome</TableHead>
-                  <TableHead>Award Routing</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {data.results.map((r) => {
                   const effectiveOutcome = r.finalOutcome ?? r.outcome
-                  const awardRouting = r.project.awardEligibilities
-                    .map((ae) => ae.award.name)
-                    .join(', ')
+                  const reasoning = extractReasoning(r.aiScreeningJson)
+                  const isExpanded = expandedId === r.id
                   return (
-                    <TableRow key={r.id}>
-                      <TableCell className="font-medium">{r.project.title}</TableCell>
-                      <TableCell className="text-muted-foreground">{r.project.teamName}</TableCell>
-                      <TableCell className="text-muted-foreground">
-                        {r.project.competitionCategory ?? '—'}
-                      </TableCell>
-                      <TableCell className="text-muted-foreground">
-                        {r.project.country ?? '—'}
-                      </TableCell>
-                      <TableCell>{outcomeBadge(effectiveOutcome)}</TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        {awardRouting || '—'}
-                      </TableCell>
-                    </TableRow>
+                    <>
+                      <TableRow
+                        key={r.id}
+                        className="cursor-pointer hover:bg-muted/50"
+                        onClick={() => toggleExpand(r.id)}
+                      >
+                        <TableCell className="w-8 pr-0">
+                          {isExpanded ? (
+                            <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                          ) : (
+                            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <button
+                            className="font-medium text-primary hover:underline text-left"
+                            onClick={(e) => openPreview(r.project.id, e)}
+                          >
+                            {r.project.title}
+                          </button>
+                        </TableCell>
+                        <TableCell className="text-muted-foreground">{r.project.teamName}</TableCell>
+                        <TableCell className="text-muted-foreground">
+                          {r.project.competitionCategory ?? '—'}
+                        </TableCell>
+                        <TableCell className="text-muted-foreground">
+                          {r.project.country ?? '—'}
+                        </TableCell>
+                        <TableCell>{outcomeBadge(effectiveOutcome)}</TableCell>
+                      </TableRow>
+                      {isExpanded && (
+                        <TableRow key={`${r.id}-detail`}>
+                          <TableCell colSpan={6} className="bg-muted/30 p-0">
+                            <div className="px-6 py-4 space-y-2">
+                              {reasoning ? (
+                                <div>
+                                  <p className="text-xs font-medium text-muted-foreground mb-1">AI Reasoning</p>
+                                  <p className="text-sm whitespace-pre-wrap leading-relaxed">{reasoning}</p>
+                                </div>
+                              ) : (
+                                <p className="text-sm text-muted-foreground italic">No AI reasoning available</p>
+                              )}
+                              {r.overrideReason && (
+                                <div className="mt-2">
+                                  <p className="text-xs font-medium text-amber-700 mb-1">Override Reason</p>
+                                  <p className="text-sm rounded-md bg-amber-50 border border-amber-200 p-2">
+                                    {r.overrideReason}
+                                  </p>
+                                </div>
+                              )}
+                              {r.project.awardEligibilities.length > 0 && (
+                                <div className="mt-2">
+                                  <p className="text-xs font-medium text-muted-foreground mb-1">Award Routing</p>
+                                  <div className="flex gap-1.5">
+                                    {r.project.awardEligibilities.map((ae, i) => (
+                                      <Badge key={i} variant="secondary">{ae.award.name}</Badge>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </>
                   )
                 })}
               </TableBody>
@@ -132,23 +216,59 @@ function ProjectsTab({ roundId }: { roundId: string }) {
           <div className="space-y-3 md:hidden">
             {data.results.map((r) => {
               const effectiveOutcome = r.finalOutcome ?? r.outcome
-              const awardRouting = r.project.awardEligibilities
-                .map((ae) => ae.award.name)
-                .join(', ')
+              const reasoning = extractReasoning(r.aiScreeningJson)
+              const isExpanded = expandedId === r.id
               return (
                 <Card key={r.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">{r.project.title}</p>
-                      {outcomeBadge(effectiveOutcome)}
-                    </div>
-                    <p className="text-xs text-muted-foreground">{r.project.teamName}</p>
-                    <div className="flex gap-3 text-xs text-muted-foreground">
-                      {r.project.competitionCategory && <span>{r.project.competitionCategory}</span>}
-                      {r.project.country && <span>{r.project.country}</span>}
-                    </div>
-                    {awardRouting && (
-                      <p className="text-xs text-muted-foreground">Award: {awardRouting}</p>
+                  <CardContent className="p-4">
+                    <button
+                      className="w-full text-left"
+                      onClick={() => toggleExpand(r.id)}
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="min-w-0">
+                          <button
+                            className="font-medium text-sm text-primary hover:underline text-left truncate block max-w-full"
+                            onClick={(e) => openPreview(r.project.id, e)}
+                          >
+                            {r.project.title}
+                          </button>
+                          <p className="text-xs text-muted-foreground mt-0.5">{r.project.teamName}</p>
+                        </div>
+                        <div className="flex items-center gap-2 shrink-0">
+                          {outcomeBadge(effectiveOutcome)}
+                          {isExpanded ? (
+                            <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                          ) : (
+                            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                          )}
+                        </div>
+                      </div>
+                      <div className="flex gap-3 text-xs text-muted-foreground mt-1">
+                        {r.project.competitionCategory && <span>{r.project.competitionCategory}</span>}
+                        {r.project.country && <span>{r.project.country}</span>}
+                      </div>
+                    </button>
+
+                    {isExpanded && (
+                      <div className="mt-3 pt-3 border-t space-y-2">
+                        {reasoning ? (
+                          <div>
+                            <p className="text-xs font-medium text-muted-foreground mb-1">AI Reasoning</p>
+                            <p className="text-sm whitespace-pre-wrap leading-relaxed">{reasoning}</p>
+                          </div>
+                        ) : (
+                          <p className="text-sm text-muted-foreground italic">No AI reasoning available</p>
+                        )}
+                        {r.overrideReason && (
+                          <div>
+                            <p className="text-xs font-medium text-amber-700 mb-1">Override Reason</p>
+                            <p className="text-sm rounded-md bg-amber-50 border border-amber-200 p-2">
+                              {r.overrideReason}
+                            </p>
+                          </div>
+                        )}
+                      </div>
                     )}
                   </CardContent>
                 </Card>
@@ -198,34 +318,12 @@ function ProjectsTab({ roundId }: { roundId: string }) {
           </CardContent>
         </Card>
       )}
+
+      <ProjectPreviewDialog
+        projectId={previewProjectId}
+        open={!!previewProjectId}
+        onOpenChange={(open) => { if (!open) setPreviewProjectId(null) }}
+      />
     </div>
   )
 }
-
-function ScreeningResultsTab({ roundId }: { roundId: string }) {
-  return (
-    <div className="space-y-6">
-      <RoundTypeStatsCards roundId={roundId} />
-      <FilteringScreeningBar roundId={roundId} />
-    </div>
-  )
-}
-
-export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
-  return (
-    <Tabs defaultValue="screening" className="space-y-6">
-      <TabsList>
-        <TabsTrigger value="screening">Screening Results</TabsTrigger>
-        <TabsTrigger value="projects">Projects</TabsTrigger>
-      </TabsList>
-
-      <TabsContent value="screening">
-        <ScreeningResultsTab roundId={roundId} />
-      </TabsContent>
-
-      <TabsContent value="projects">
-        <ProjectsTab roundId={roundId} />
-      </TabsContent>
-    </Tabs>
-  )
-}

src/components/observer/reports/global-analytics-tab.tsx

@@ -32,14 +32,21 @@ export function GlobalAnalyticsTab({ programId, roundIds }: GlobalAnalyticsTabPr
 
   return (
     <div className="space-y-6">
-      {/* Geographic Distribution */}
-      {geoLoading ? (
+      {/* Diversity Metrics — includes summary cards, category breakdown, ocean issues, tags */}
+      {diversityLoading ? (
         <Skeleton className="h-[400px]" />
+      ) : diversity ? (
+        <DiversityMetricsChart data={diversity} />
+      ) : null}
+
+      {/* Geographic Distribution — full-width map with top countries */}
+      {geoLoading ? (
+        <Skeleton className="h-[500px]" />
       ) : geoData?.length ? (
         <GeographicDistribution data={geoData} />
       ) : null}
 
-      {/* Status and Diversity side by side */}
+      {/* Project Status + Cross-Round Comparison */}
       <div className="grid gap-6 lg:grid-cols-2">
         {statusLoading ? (
           <Skeleton className="h-[350px]" />
@@ -47,23 +54,16 @@ export function GlobalAnalyticsTab({ programId, roundIds }: GlobalAnalyticsTabPr
           <StatusBreakdownChart data={statusBreakdown} />
         ) : null}
 
-        {diversityLoading ? (
-          <Skeleton className="h-[350px]" />
-        ) : diversity ? (
-          <DiversityMetricsChart data={diversity} />
-        ) : null}
+        {roundIds && roundIds.length >= 2 && (
+          <>
+            {crossLoading ? (
+              <Skeleton className="h-[350px]" />
+            ) : crossRound ? (
+              <CrossStageComparisonChart data={crossRound} />
+            ) : null}
+          </>
+        )}
       </div>
-
-      {/* Cross-Round Comparison */}
-      {roundIds && roundIds.length >= 2 && (
-        <>
-          {crossLoading ? (
-            <Skeleton className="h-[350px]" />
-          ) : crossRound ? (
-            <CrossStageComparisonChart data={crossRound} />
-          ) : null}
-        </>
-      )}
     </div>
   )
 }

src/components/observer/reports/project-preview-dialog.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import { trpc } from '@/lib/trpc/client'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Separator } from '@/components/ui/separator'
+import { StatusBadge } from '@/components/shared/status-badge'
+import { ExternalLink, MapPin, Waves, Users } from 'lucide-react'
+import Link from 'next/link'
+import type { Route } from 'next'
+import { scoreGradient } from '@/components/charts/chart-theme'
+
+interface ProjectPreviewDialogProps {
+  projectId: string | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+function ScorePill({ score }: { score: number }) {
+  const bg = scoreGradient(score)
+  const text = score >= 6 ? '#ffffff' : '#1a1a1a'
+  return (
+    <span
+      className="inline-flex items-center justify-center rounded-md px-2.5 py-1 text-sm font-bold tabular-nums"
+      style={{ backgroundColor: bg, color: text }}
+    >
+      {score.toFixed(1)}
+    </span>
+  )
+}
+
+export function ProjectPreviewDialog({ projectId, open, onOpenChange }: ProjectPreviewDialogProps) {
+  const { data, isLoading } = trpc.analytics.getProjectDetail.useQuery(
+    { id: projectId! },
+    { enabled: !!projectId && open },
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
+        {isLoading || !data ? (
+          <>
+            <DialogHeader>
+              <Skeleton className="h-6 w-48" />
+            </DialogHeader>
+            <div className="space-y-4">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-20 w-full" />
+              <Skeleton className="h-32 w-full" />
+            </div>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle className="text-lg leading-tight pr-8">
+                {data.project.title}
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {/* Project info row */}
+              <div className="flex flex-wrap items-center gap-2">
+                <StatusBadge status={data.project.status} />
+                {data.project.teamName && (
+                  <Badge variant="outline" className="gap-1">
+                    <Users className="h-3 w-3" />
+                    {data.project.teamName}
+                  </Badge>
+                )}
+                {data.project.country && (
+                  <Badge variant="outline" className="gap-1">
+                    <MapPin className="h-3 w-3" />
+                    {data.project.country}
+                  </Badge>
+                )}
+                {data.project.competitionCategory && (
+                  <Badge variant="secondary">{data.project.competitionCategory}</Badge>
+                )}
+              </div>
+
+              {/* Description */}
+              {data.project.description && (
+                <p className="text-sm text-muted-foreground line-clamp-4">
+                  {data.project.description}
+                </p>
+              )}
+
+              {/* Ocean Issue */}
+              {data.project.oceanIssue && (
+                <Badge variant="outline" className="gap-1 text-xs">
+                  <Waves className="h-3 w-3" />
+                  {data.project.oceanIssue.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, (c: string) => c.toUpperCase())}
+                </Badge>
+              )}
+
+              <Separator />
+
+              {/* Evaluation summary */}
+              {data.stats && (
+                <div>
+                  <h3 className="text-sm font-semibold mb-2">Evaluation Summary</h3>
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    <div className="rounded-md border p-3 text-center">
+                      <p className="text-lg font-bold tabular-nums">
+                        {data.stats.averageGlobalScore != null ? (
+                          <ScorePill score={data.stats.averageGlobalScore} />
+                        ) : '—'}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">Avg Score</p>
+                    </div>
+                    <div className="rounded-md border p-3 text-center">
+                      <p className="text-lg font-bold tabular-nums">{data.stats.totalEvaluations ?? 0}</p>
+                      <p className="text-xs text-muted-foreground mt-1">Evaluations</p>
+                    </div>
+                    <div className="rounded-md border p-3 text-center">
+                      <p className="text-lg font-bold tabular-nums">{data.assignments?.length ?? 0}</p>
+                      <p className="text-xs text-muted-foreground mt-1">Assignments</p>
+                    </div>
+                    <div className="rounded-md border p-3 text-center">
+                      <p className="text-lg font-bold tabular-nums">
+                        {data.stats.yesPercentage != null ? `${Math.round(data.stats.yesPercentage)}%` : '—'}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">Recommend</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Individual evaluations */}
+              {data.assignments?.length > 0 && (
+                <div>
+                  <h3 className="text-sm font-semibold mb-2">Juror Evaluations</h3>
+                  <div className="space-y-1.5">
+                    {data.assignments.map((a: { id: string; user: { name: string | null }; evaluation: { status: string; globalScore: unknown } | null }) => {
+                      const ev = a.evaluation
+                      const score = ev?.status === 'SUBMITTED' && ev.globalScore != null
+                        ? Number(ev.globalScore)
+                        : null
+                      return (
+                        <div key={a.id} className="flex items-center justify-between rounded-md border px-3 py-2">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium">{a.user.name ?? 'Unknown'}</span>
+                            {ev?.status === 'SUBMITTED' ? (
+                              <Badge variant="default" className="text-[10px]">Reviewed</Badge>
+                            ) : ev?.status === 'DRAFT' ? (
+                              <Badge variant="secondary" className="text-[10px]">Draft</Badge>
+                            ) : (
+                              <Badge variant="outline" className="text-[10px]">Pending</Badge>
+                            )}
+                          </div>
+                          {score !== null && <ScorePill score={score} />}
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )}
+
+              <Separator />
+
+              {/* View full project button */}
+              <div className="flex justify-end">
+                <Button asChild>
+                  <Link href={`/observer/projects/${projectId}` as Route}>
+                    <ExternalLink className="mr-2 h-4 w-4" />
+                    View Full Project
+                  </Link>
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}