MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: observer UX overhaul — reports, projects, charts, session & email
All checks were successful
Build and Push Docker Image / build (push) Successful in 11m2s
Details

Browse Source 
- Observer projects: default sort by status (rejected last), sortable status column
- Observer projects: search by country, institution, geographic zone
- Observer project detail: vertical timeline connectors between rounds
- Fix React key warning in ExpandableJurorTable and FilteringReportTabs
- Fix ScoreBadge text always white for better contrast on all backgrounds
- Remove misleading /30 denominator from heatmap juror reviewed count
- INTAKE stats: show Start-ups, Business Concepts, Countries (not States/Categories)
- DiversityMetrics: extractCountry() for country-only display in charts
- Fix nested button hydration error in filtering report mobile view
- Color project titles by outcome in filtering report (green/red/amber)
- Redesign CrossStageComparisonChart: funnel viz + metrics table with attrition %
- Center doughnut chart in StatusBreakdownChart
- Remove redundant RoundTypeStatsCards from evaluation report
- Move evaluation tab bar below overview header, rename to "Juror Assignments"
- Dev email override system (DEV_EMAIL_OVERRIDE env var)
- Session refresh on role change without re-login
- Role switcher in user dropdown menu
- formatCategory() utility for consistent category display
- Activity feed max height constraint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-03-06 13:37:50 +01:00
parent e7b99fff63
commit a556732b46
23 changed files with 2108 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/charts/cross-round-comparison.tsx
View File

@@ -1,7 +1,18 @@
'use client'
import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { scoreGradient } from './chart-theme'
import { ArrowRight } from 'lucide-react'
interface StageComparison {
roundId: string
@@ -30,99 +41,115 @@ export function CrossStageComparisonChart({
)
}
const baseData = data.map((round) => ({
name: round.roundName,
Projects: round.projectCount,
Evaluations: round.evaluationCount,
'Completion Rate': round.completionRate,
'Avg Score': round.averageScore
? parseFloat(round.averageScore.toFixed(2))
: 0,
}))
const maxProjects = Math.max(...data.map((d) => d.projectCount), 1)
return (
<Card>
<CardHeader>
<CardTitle>Round Metrics Comparison</CardTitle>
<CardTitle className="text-base">Round Progression</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Projects</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<BarChart
data={baseData}
index="name"
categories={['Projects']}
colors={['blue']}
showLegend={false}
yAxisWidth={40}
className="h-[200px]"
/>
</CardContent>
</Card>
{/* Pipeline funnel visualization */}
<div className="flex items-center gap-2 mb-6 overflow-x-auto pb-2">
{data.map((round, idx) => (
<div key={round.roundId} className="flex items-center gap-2">
<div className="flex flex-col items-center min-w-[100px]">
<div
className="rounded-lg bg-[#053d57] flex items-center justify-center text-white font-bold text-lg tabular-nums transition-all"
style={{
width: `${Math.max(60, (round.projectCount / maxProjects) * 120)}px`,
height: `${Math.max(40, (round.projectCount / maxProjects) * 60)}px`,
}}
>
{round.projectCount}
</div>
<p className="text-xs text-muted-foreground mt-1.5 text-center leading-tight max-w-[100px] truncate">
{round.roundName}
</p>
</div>
{idx < data.length - 1 && (
<div className="flex flex-col items-center shrink-0">
<ArrowRight className="h-4 w-4 text-muted-foreground" />
{data[idx + 1].projectCount < round.projectCount && (
<span className="text-[10px] text-rose-500 tabular-nums font-medium">
-{round.projectCount - data[idx + 1].projectCount}
</span>
)}
</div>
)}
</div>
))}
</div>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">
Evaluations
</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<BarChart
data={baseData}
index="name"
categories={['Evaluations']}
colors={['violet']}
showLegend={false}
yAxisWidth={40}
className="h-[200px]"
/>
</CardContent>
</Card>
{/* Detailed metrics table */}
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Round</TableHead>
<TableHead className="text-right tabular-nums">Projects</TableHead>
<TableHead className="text-right tabular-nums">Evaluations</TableHead>
<TableHead>Completion</TableHead>
<TableHead className="text-right">Avg Score</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((round, idx) => {
const prevCount = idx > 0 ? data[idx - 1].projectCount : null
const attrition = prevCount !== null && prevCount > 0
? Math.round(((prevCount - round.projectCount) / prevCount) * 100)
: null
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">
Completion Rate
</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<BarChart
data={baseData}
index="name"
categories={['Completion Rate']}
colors={['emerald']}
showLegend={false}
maxValue={100}
yAxisWidth={40}
valueFormatter={(v) => `${v}%`}
className="h-[200px]"
/>
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">
Average Score
</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<BarChart
data={baseData}
index="name"
categories={['Avg Score']}
colors={['amber']}
showLegend={false}
maxValue={10}
yAxisWidth={40}
className="h-[200px]"
/>
</CardContent>
</Card>
return (
<TableRow key={round.roundId}>
<TableCell>
<div className="flex items-center gap-2">
<span className="font-medium text-sm">{round.roundName}</span>
{attrition !== null && attrition > 0 && (
<Badge variant="outline" className="text-[10px] text-rose-600 border-rose-200">
-{attrition}%
</Badge>
)}
</div>
</TableCell>
<TableCell className="text-right tabular-nums font-medium">
{round.projectCount}
</TableCell>
<TableCell className="text-right tabular-nums">
{round.evaluationCount > 0 ? round.evaluationCount : '—'}
</TableCell>
<TableCell>
{round.evaluationCount > 0 ? (
<div className="flex items-center gap-2">
<Progress value={round.completionRate} className="w-16 h-2" />
<span className="text-xs tabular-nums text-muted-foreground">
{round.completionRate}%
</span>
</div>
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</TableCell>
<TableCell className="text-right">
{round.averageScore !== null ? (
<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: scoreGradient(round.averageScore),
color: '#ffffff',
}}
>
{round.averageScore.toFixed(1)}
</span>
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</div>
</CardContent>
</Card>

3
src/components/charts/juror-score-heatmap.tsx
View File

@@ -20,7 +20,7 @@ function getScoreColor(score: number | null): string {
function getTextColor(score: number | null): string {
if (score === null) return 'inherit'
return score >= 6 ? '#ffffff' : '#1a1a1a'
return '#ffffff'
}
function ScoreBadge({ score }: { score: number }) {
@@ -73,7 +73,6 @@ function JurorSummaryRow({
</td>
<td className="py-3 px-4 text-center tabular-nums text-sm">
{scored.length}
<span className="text-muted-foreground">/{projectCount}</span>
</td>
<td className="py-3 px-4 text-center">
{averageScore !== null ? (

18
src/components/charts/status-breakdown.tsx
View File

@@ -36,14 +36,16 @@ export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
</CardTitle>
</CardHeader>
<CardContent>
<DonutChart
data={chartData}
category="value"
index="name"
colors={colors}
showLabel={true}
className="h-[300px]"
/>
<div className="flex items-center justify-center">
<DonutChart
data={chartData}
category="value"
index="name"
colors={colors}
showLabel={true}
className="h-[250px] w-[250px]"
/>
</div>
</CardContent>
</Card>
)

6
src/components/dashboard/activity-feed.tsx
View File

@@ -23,8 +23,8 @@ type ActivityFeedProps = {
export function ActivityFeed({ activity }: ActivityFeedProps) {
return (
<Card>
<CardHeader className="pb-3">
<Card className="flex flex-col overflow-hidden" style={{ maxHeight: 420 }}>
<CardHeader className="pb-3 shrink-0">
<div className="flex items-center gap-2.5">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-blue/10">
<Activity className="h-4 w-4 text-brand-blue" />
@@ -32,7 +32,7 @@ export function ActivityFeed({ activity }: ActivityFeedProps) {
<CardTitle className="text-base">Activity</CardTitle>
</div>
</CardHeader>
<CardContent>
<CardContent className="overflow-y-auto min-h-0">
{activity.length === 0 ? (
<div className="flex flex-col items-center justify-center py-6 text-center">
<Activity className="h-8 w-8 text-muted-foreground/30" />

75
src/components/layouts/admin-sidebar.tsx
View File

@@ -12,6 +12,9 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Separator } from '@/components/ui/separator'
@@ -315,26 +318,6 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
)}
</nav>
{/* Role Switcher — visible above user section */}
{switchableRoles.length > 0 && (
<div className="border-t px-3 py-2">
<p className="mb-1.5 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
<ArrowRightLeft className="h-3 w-3" />
Switch View
</p>
<div className="flex flex-wrap gap-1.5">
{switchableRoles.map(([, opt]) => (
<Link key={opt.path} href={opt.path as Route} onClick={() => setIsMobileMenuOpen(false)}>
<Button size="sm" variant="outline" className="h-7 gap-1.5 px-2.5 text-xs">
<opt.icon className="h-3 w-3" />
{opt.label}
</Button>
</Link>
))}
</div>
</div>
)}
{/* User Profile Section */}
<div className="border-t p-3">
<DropdownMenu>
@@ -393,23 +376,41 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
{switchableRoles.length > 0 && (
<>
<DropdownMenuSeparator className="my-1" />
<div className="px-2 py-1.5">
<p className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/60">
<ArrowRightLeft className="h-3 w-3" />
Switch View
</p>
</div>
{switchableRoles.map(([, opt]) => (
<DropdownMenuItem key={opt.path} asChild>
<Link
href={opt.path as Route}
className="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2"
>
<opt.icon className="h-4 w-4 text-muted-foreground" />
<span>{opt.label}</span>
</Link>
</DropdownMenuItem>
))}
{switchableRoles.length <= 2 ? (
// Flat list for 1-2 roles
switchableRoles.map(([, opt]) => (
<DropdownMenuItem key={opt.path} asChild>
<Link
href={opt.path as Route}
className="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2"
>
<opt.icon className="h-4 w-4 text-muted-foreground" />
<span>{opt.label}</span>
</Link>
</DropdownMenuItem>
))
) : (
// Submenu for 3+ roles
<DropdownMenuSub>
<DropdownMenuSubTrigger className="flex items-center gap-2.5 rounded-md px-2 py-2">
<ArrowRightLeft className="h-4 w-4 text-muted-foreground" />
<span>Switch View</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="min-w-[160px]">
{switchableRoles.map(([, opt]) => (
<DropdownMenuItem key={opt.path} asChild>
<Link
href={opt.path as Route}
className="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2"
>
<opt.icon className="h-4 w-4 text-muted-foreground" />
<span>{opt.label}</span>
</Link>
</DropdownMenuItem>
))}
</DropdownMenuSubContent>
</DropdownMenuSub>
)}
</>
)}

4
src/components/observer/dashboard/filtering-panel.tsx
View File

@@ -17,7 +17,7 @@ import {
SelectValue,
} from '@/components/ui/select'
import { Filter, ChevronDown, ChevronUp, ChevronLeft, ChevronRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import { cn, formatCategory } from '@/lib/utils'
type AIScreeningData = {
meetsCriteria?: boolean
@@ -200,7 +200,7 @@ export function FilteringPanel({ roundId }: { roundId: string }) {
{r.project?.title ?? 'Unknown'}
</Link>
<p className="text-xs text-muted-foreground truncate">
{r.project?.competitionCategory ?? ''} · {r.project?.country ?? ''}
{formatCategory(r.project?.competitionCategory)} · {r.project?.country ?? ''}
</p>
</div>
<div className="flex items-center gap-2 shrink-0">

4
src/components/observer/dashboard/previous-round-section.tsx
View File

@@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { AnimatedCard } from '@/components/shared/animated-container'
import { ArrowDown, ChevronDown, ChevronUp, TrendingDown } from 'lucide-react'
import { cn } from '@/lib/utils'
import { cn, formatCategory } from '@/lib/utils'
export function PreviousRoundSection({ currentRoundId }: { currentRoundId: string }) {
const [collapsed, setCollapsed] = useState(false)
@@ -76,7 +76,7 @@ export function PreviousRoundSection({ currentRoundId }: { currentRoundId: strin
return (
<div key={cat.category} className="space-y-1">
<div className="flex items-center justify-between text-sm">
<span className="font-medium truncate">{cat.category}</span>
<span className="font-medium truncate">{formatCategory(cat.category)}</span>
<span className="text-xs text-muted-foreground tabular-nums">
{cat.previous} → {cat.current}
<span className="text-rose-500 ml-1">(-{cat.eliminated})</span>

6
src/components/observer/observer-dashboard-content.tsx
View File

@@ -128,7 +128,7 @@ function RoundNode({
return (
<button type="button" onClick={onClick} className="text-left focus:outline-none">
<Card className={cn(
'w-44 shrink-0 border shadow-sm transition-all cursor-pointer hover:shadow-md',
'w-44 shrink-0 border-2 border-border/60 shadow-sm transition-all cursor-pointer hover:shadow-md',
isSelected && 'ring-2 ring-brand-teal shadow-md',
)}>
<CardContent className="p-3 space-y-2">
@@ -219,7 +219,7 @@ function PipelineView({
{/* Award Tracks */}
{awardGroups.size > 0 && (
<div className="space-y-3 pt-1">
<div className="space-y-3 pt-4">
{Array.from(awardGroups.entries()).map(([awardId, group]) => (
<div
key={awardId}
@@ -313,7 +313,7 @@ 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.activeRoundName ?? `${stats.activeRoundCount} Active`, label: 'Active Round', isText: !!stats.activeRoundName },
{ value: stats.activeRoundName ?? `${stats.activeRoundCount} Active`, label: 'Active Rounds', isText: !!stats.activeRoundName },
{ value: avgScore, label: 'Avg Score' },
{ value: `${stats.completionRate}%`, label: 'Completion' },
{ value: stats.jurorCount, label: 'Jurors' },

29
src/components/observer/observer-project-detail.tsx
View File

@@ -576,9 +576,10 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
</CardDescription>
</CardHeader>
<CardContent>
<ol className="space-y-4">
<ol className="relative">
{competitionRounds.map((round, idx) => {
const effectiveState = effectiveStates[idx]
const isLast = idx === competitionRounds.length - 1
const roundAssignments = assignments.filter(
(a) => a.roundId === round.id,
@@ -589,15 +590,15 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
let labelClass = 'text-muted-foreground'
if (effectiveState === 'PASSED' || effectiveState === 'COMPLETED') {
icon = <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
icon = <CheckCircle2 className="h-5 w-5 shrink-0 text-emerald-500" />
statusLabel = 'Passed'
} else if (effectiveState === 'REJECTED') {
icon = <XCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-500" />
icon = <XCircle className="h-5 w-5 shrink-0 text-red-500" />
statusLabel = 'Rejected at this round'
labelClass = 'text-red-600 font-medium'
} else if (effectiveState === 'IN_PROGRESS') {
icon = (
<span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center">
<span className="flex h-5 w-5 shrink-0 items-center justify-center">
<span className="relative flex h-3 w-3">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75" />
<span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500" />
@@ -606,22 +607,32 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
)
statusLabel = 'Active'
} else if (effectiveState === 'NOT_REACHED') {
icon = <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/15" />
icon = <Circle className="h-5 w-5 shrink-0 text-muted-foreground/15" />
statusLabel = 'Not reached'
labelClass = 'text-muted-foreground/50 italic'
} else if (effectiveState === 'PENDING') {
icon = <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/40" />
icon = <Circle className="h-5 w-5 shrink-0 text-muted-foreground/40" />
statusLabel = 'Pending'
} else {
icon = <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/20" />
icon = <Circle className="h-5 w-5 shrink-0 text-muted-foreground/20" />
}
return (
<li key={round.id} className={cn(
'flex items-start gap-3',
'relative flex items-start gap-3 pb-6',
isLast && 'pb-0',
effectiveState === 'NOT_REACHED' && 'opacity-50',
)}>
{icon}
{/* Connector line */}
{!isLast && (
<span
className="absolute left-[9px] top-6 h-[calc(100%-8px)] w-px bg-border"
aria-hidden="true"
/>
)}
<span className="relative z-10 flex items-center justify-center">
{icon}
</span>
<div className="min-w-0 flex-1">
<p className={cn(
'text-sm font-medium',

19
src/components/observer/observer-projects-content.tsx
View File

@@ -56,7 +56,7 @@ export function ObserverProjectsContent() {
const [debouncedSearch, setDebouncedSearch] = useState('')
const [roundFilter, setRoundFilter] = useState('all')
const [statusFilter, setStatusFilter] = useState('all')
const [sortBy, setSortBy] = useState<'title' | 'score' | 'evaluations'>('title')
const [sortBy, setSortBy] = useState<'title' | 'score' | 'evaluations' | 'status'>('status')
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
const [page, setPage] = useState(1)
const [perPage] = useState(20)
@@ -86,7 +86,7 @@ export function ObserverProjectsContent() {
setPage(1)
}
const handleSort = (column: 'title' | 'score' | 'evaluations') => {
const handleSort = (column: 'title' | 'score' | 'evaluations' | 'status') => {
if (sortBy === column) {
setSortDir(sortDir === 'asc' ? 'desc' : 'asc')
} else {
@@ -184,7 +184,7 @@ export function ObserverProjectsContent() {
}
}, [utils, roundFilter, debouncedSearch, statusFilter, sortBy, sortDir])
const SortIcon = ({ column }: { column: 'title' | 'score' | 'evaluations' }) => {
const SortIcon = ({ column }: { column: 'title' | 'score' | 'evaluations' | 'status' }) => {
if (sortBy !== column)
return <ArrowUpDown className="ml-1 inline h-3 w-3 text-muted-foreground/50" />
return sortDir === 'asc' ? (
@@ -233,7 +233,7 @@ export function ObserverProjectsContent() {
<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..."
placeholder="Search by title, team, country, institution..."
value={search}
onChange={(e) => handleSearchChange(e.target.value)}
className="pl-10"
@@ -329,7 +329,16 @@ export function ObserverProjectsContent() {
</TableHead>
<TableHead>Country</TableHead>
<TableHead>Round</TableHead>
<TableHead>Status</TableHead>
<TableHead>
<button
type="button"
onClick={() => handleSort('status')}
className="inline-flex items-center hover:text-foreground transition-colors"
>
Status
<SortIcon column="status" />
</button>
</TableHead>
<TableHead>
<button
type="button"

81
src/components/observer/reports/evaluation-report-tabs.tsx
View File

@@ -38,7 +38,6 @@ import { BarChart } from '@tremor/react'
import { CsvExportDialog } from '@/components/shared/csv-export-dialog'
import { ExportPdfButton } from '@/components/shared/export-pdf-button'
import { AnimatedCard } from '@/components/shared/animated-container'
import { RoundTypeStatsCards } from '@/components/observer/round-type-stats'
import { ExpandableJurorTable } from './expandable-juror-table'
const ROUND_TYPE_LABELS: Record<string, string> = {
@@ -139,11 +138,7 @@ function ProgressSubTab({
return (
<div className="space-y-6">
<div className="flex items-center justify-between flex-wrap gap-3">
<div>
<h2 className="text-base font-semibold">Progress Overview</h2>
<p className="text-sm text-muted-foreground">Evaluation progress across rounds</p>
</div>
<div className="flex items-center justify-end flex-wrap gap-3">
<div className="flex items-center gap-2">
{selectedValue && !selectedValue.startsWith('all:') && (
<ExportPdfButton
@@ -214,7 +209,7 @@ function ProgressSubTab({
<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-sm font-medium text-muted-foreground">Juror 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
@@ -309,7 +304,7 @@ function ProgressSubTab({
<TableHead>Type</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Projects</TableHead>
<TableHead className="text-right">Assignments</TableHead>
<TableHead className="text-right">Juror Assignments</TableHead>
<TableHead className="min-w-[140px]">Completion</TableHead>
<TableHead className="text-right">Avg Days</TableHead>
</TableRow>
@@ -398,7 +393,7 @@ function ProgressSubTab({
<p className="font-medium">{projects}</p>
</div>
<div>
<p className="text-muted-foreground text-xs">Assignments</p>
<p className="text-muted-foreground text-xs">Juror Assignments</p>
<p className="font-medium">{assignments}</p>
</div>
</div>
@@ -749,42 +744,44 @@ export function EvaluationReportTabs({ roundId, programId, stages, selectedValue
const stagesLoading = false // stages passed from parent already loaded
return (
<div className="space-y-6">
<RoundTypeStatsCards roundId={roundId} />
<div className="space-y-4">
<div>
<h2 className="text-base font-semibold">Evaluation Overview</h2>
<p className="text-sm text-muted-foreground">Evaluation progress and juror performance</p>
</div>
<Tabs defaultValue="progress" className="space-y-6">
<TabsList>
<TabsTrigger value="progress" className="gap-2">
<TrendingUp className="h-4 w-4" />
Progress
</TabsTrigger>
<TabsTrigger value="jurors" className="gap-2">
<Users className="h-4 w-4" />
Jurors
</TabsTrigger>
<TabsTrigger value="scores" className="gap-2">
<BarChart3 className="h-4 w-4" />
Scores
</TabsTrigger>
</TabsList>
<Tabs defaultValue="progress" className="space-y-6">
<TabsList>
<TabsTrigger value="progress" className="gap-2">
<TrendingUp className="h-4 w-4" />
Progress
</TabsTrigger>
<TabsTrigger value="jurors" className="gap-2">
<Users className="h-4 w-4" />
Jurors
</TabsTrigger>
<TabsTrigger value="scores" className="gap-2">
<BarChart3 className="h-4 w-4" />
Scores
</TabsTrigger>
</TabsList>
<TabsContent value="progress">
<ProgressSubTab
selectedValue={selectedValue}
stages={stages}
stagesLoading={stagesLoading}
selectedRound={selectedRound}
/>
</TabsContent>
<TabsContent value="progress">
<ProgressSubTab
selectedValue={selectedValue}
stages={stages}
stagesLoading={stagesLoading}
selectedRound={selectedRound}
/>
</TabsContent>
<TabsContent value="jurors">
<JurorsSubTab roundId={roundId} selectedValue={selectedValue} />
</TabsContent>
<TabsContent value="jurors">
<JurorsSubTab roundId={roundId} selectedValue={selectedValue} />
</TabsContent>
<TabsContent value="scores">
<ScoresSubTab selectedValue={selectedValue} programId={programId} />
</TabsContent>
</Tabs>
<TabsContent value="scores">
<ScoresSubTab selectedValue={selectedValue} programId={programId} />
</TabsContent>
</Tabs>
</div>
)
}

7
src/components/observer/reports/expandable-juror-table.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { useState } from 'react'
import { Fragment, useState } from 'react'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
@@ -98,9 +98,8 @@ export function ExpandableJurorTable({ jurors }: ExpandableJurorTableProps) {
</TableHeader>
<TableBody>
{jurors.map((j) => (
<>
<Fragment key={j.userId}>
<TableRow
key={j.userId}
className="cursor-pointer hover:bg-muted/50"
onClick={() => toggle(j.userId)}
>
@@ -179,7 +178,7 @@ export function ExpandableJurorTable({ jurors }: ExpandableJurorTableProps) {
</TableCell>
</TableRow>
)}
</>
</Fragment>
))}
</TableBody>
</Table>

34
src/components/observer/reports/filtering-report-tabs.tsx
View File

@@ -1,7 +1,8 @@
'use client'
import { useState } from 'react'
import { Fragment, useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { cn, formatCategory } from '@/lib/utils'
import { Card, CardContent } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
@@ -33,6 +34,15 @@ interface FilteringReportTabsProps {
type OutcomeFilter = 'ALL' | 'PASSED' | 'FILTERED_OUT' | 'FLAGGED'
function outcomeTextColor(outcome: string): string {
switch (outcome) {
case 'PASSED': return 'text-emerald-700 dark:text-emerald-400'
case 'FILTERED_OUT': return 'text-rose-700 dark:text-rose-400'
case 'FLAGGED': return 'text-amber-700 dark:text-amber-400'
default: return 'text-primary'
}
}
function outcomeBadge(outcome: string) {
switch (outcome) {
case 'PASSED':
@@ -141,9 +151,8 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
const reasoning = extractReasoning(r.aiScreeningJson)
const isExpanded = expandedId === r.id
return (
<>
<Fragment key={r.id}>
<TableRow
key={r.id}
className="cursor-pointer hover:bg-muted/50"
onClick={() => toggleExpand(r.id)}
>
@@ -156,7 +165,7 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
</TableCell>
<TableCell>
<button
className="font-medium text-primary hover:underline text-left"
className={cn('font-medium hover:underline text-left', outcomeTextColor(effectiveOutcome))}
onClick={(e) => openPreview(r.project.id, e)}
>
{r.project.title}
@@ -164,7 +173,7 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
</TableCell>
<TableCell className="text-muted-foreground">{r.project.teamName}</TableCell>
<TableCell className="text-muted-foreground">
{r.project.competitionCategory ?? '—'}
{formatCategory(r.project.competitionCategory) || '—'}
</TableCell>
<TableCell className="text-muted-foreground">
{r.project.country ?? '—'}
@@ -205,7 +214,7 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
</TableCell>
</TableRow>
)}
</>
</Fragment>
)
})}
</TableBody>
@@ -221,14 +230,17 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
return (
<Card key={r.id}>
<CardContent className="p-4">
<button
className="w-full text-left"
<div
className="w-full text-left cursor-pointer"
role="button"
tabIndex={0}
onClick={() => toggleExpand(r.id)}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') 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"
className={cn('font-medium text-sm hover:underline text-left truncate block max-w-full', outcomeTextColor(effectiveOutcome))}
onClick={(e) => openPreview(r.project.id, e)}
>
{r.project.title}
@@ -245,10 +257,10 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
</div>
</div>
<div className="flex gap-3 text-xs text-muted-foreground mt-1">
{r.project.competitionCategory && <span>{r.project.competitionCategory}</span>}
{r.project.competitionCategory && <span>{formatCategory(r.project.competitionCategory)}</span>}
{r.project.country && <span>{r.project.country}</span>}
</div>
</button>
</div>
{isExpanded && (
<div className="mt-3 pt-3 border-t space-y-2">

3
src/components/observer/reports/project-preview-dialog.tsx
View File

@@ -1,6 +1,7 @@
'use client'
import { trpc } from '@/lib/trpc/client'
import { formatCategory } from '@/lib/utils'
import {
Dialog,
DialogContent,
@@ -81,7 +82,7 @@ export function ProjectPreviewDialog({ projectId, open, onOpenChange }: ProjectP
</Badge>
)}
{data.project.competitionCategory && (
<Badge variant="secondary">{data.project.competitionCategory}</Badge>
<Badge variant="secondary">{formatCategory(data.project.competitionCategory)}</Badge>
)}
</div>

6
src/components/observer/round-type-stats.tsx
View File

@@ -17,6 +17,7 @@ import {
FileText,
MessageSquare,
Lock,
Globe,
} from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
@@ -80,8 +81,9 @@ export function RoundTypeStatsCards({ roundId }: RoundTypeStatsCardsProps) {
case 'INTAKE':
return [
{ label: 'Total Projects', value: (stats.totalProjects as number) ?? 0, icon: Inbox, color: '#053d57' },
{ label: 'States', value: ((stats.byState as Array<unknown>)?.length ?? 0), icon: BarChart3, color: '#557f8c' },
{ label: 'Categories', value: ((stats.byCategory as Array<unknown>)?.length ?? 0), icon: Filter, color: '#1e7a8a' },
{ label: 'Start-ups', value: (stats.startupCount as number) ?? 0, icon: BarChart3, color: '#1e7a8a' },
{ label: 'Business Concepts', value: (stats.conceptCount as number) ?? 0, icon: FileText, color: '#557f8c' },
{ label: 'Countries', value: (stats.countryCount as number) ?? 0, icon: Globe, color: '#2d8659' },
]
case 'FILTERING':