Dashboard layout overhaul + fix Tremor chart colors and tooltips
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m55s
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m55s
- Restructure dashboard: score distribution + recently reviewed stacked in left column, full-width map at bottom, activity feed in middle row - Show all jurors in scrollable workload list (not just top 5) - Filter recently reviewed to exclude rejected/not-reviewed projects - Filter transition audit logs from activity feed - Remove completion progress bar from stat tile for equal card heights - Fix all Tremor charts: switch hex colors to named palette (cyan/teal/emerald/amber/rose) to fix black bar rendering - Fix transparent chart tooltips with global CSS overrides - Remove tilted text labels from cross-round comparison charts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState, Fragment } from 'react'
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import type { Route } from 'next'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
@@ -172,7 +172,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
|
||||
const avgScore = stats ? computeAvgScore(stats.scoreDistribution) : '—'
|
||||
|
||||
const topJurors = (jurorWorkload ?? []).slice(0, 5)
|
||||
const allJurors = jurorWorkload ?? []
|
||||
|
||||
const scoreColors: Record<string, string> = {
|
||||
'9-10': '#053d57',
|
||||
@@ -186,6 +186,13 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
? Math.max(...stats.scoreDistribution.map((b) => b.count), 1)
|
||||
: 1
|
||||
|
||||
const recentlyReviewed = (projectsData?.projects ?? []).filter(
|
||||
(p) => {
|
||||
const status = p.observerStatus ?? p.status
|
||||
return status !== 'REJECTED' && status !== 'NOT_REVIEWED' && status !== 'SUBMITTED'
|
||||
},
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
@@ -243,10 +250,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
<CheckCircle2 className="h-5 w-5 text-teal-600" />
|
||||
</div>
|
||||
<p className="text-2xl font-bold tabular-nums">{stats.completionRate}%</p>
|
||||
<div className="mt-1">
|
||||
<Progress value={stats.completionRate} className="h-1.5" />
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">Completion</p>
|
||||
<p className="text-xs text-muted-foreground">Completion</p>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
@@ -345,55 +349,124 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
|
||||
{/* Middle Row */}
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Score Distribution */}
|
||||
<AnimatedCard index={7}>
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2.5 text-base">
|
||||
<div className="rounded-lg bg-amber-500/10 p-1.5">
|
||||
<TrendingUp className="h-4 w-4 text-amber-500" />
|
||||
</div>
|
||||
Score Distribution
|
||||
</CardTitle>
|
||||
<CardDescription>Evaluation score buckets</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stats ? (
|
||||
<div className="space-y-2.5">
|
||||
{stats.scoreDistribution.map((bucket) => (
|
||||
<div key={bucket.label} className="flex items-center gap-3">
|
||||
<span className="w-10 text-right text-xs font-medium tabular-nums text-muted-foreground">
|
||||
{bucket.label}
|
||||
</span>
|
||||
<div className="flex-1 overflow-hidden rounded-full bg-muted" style={{ height: 20 }}>
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${maxScoreCount > 0 ? (bucket.count / maxScoreCount) * 100 : 0}%`,
|
||||
backgroundColor: scoreColors[bucket.label] ?? '#557f8c',
|
||||
}}
|
||||
/>
|
||||
{/* Left column: Score Distribution + Recently Reviewed stacked */}
|
||||
<div className="space-y-6">
|
||||
{/* Score Distribution */}
|
||||
<AnimatedCard index={7}>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2.5 text-base">
|
||||
<div className="rounded-lg bg-amber-500/10 p-1.5">
|
||||
<TrendingUp className="h-4 w-4 text-amber-500" />
|
||||
</div>
|
||||
Score Distribution
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stats ? (
|
||||
<div className="space-y-1.5">
|
||||
{stats.scoreDistribution.map((bucket) => (
|
||||
<div key={bucket.label} className="flex items-center gap-2">
|
||||
<span className="w-8 text-right text-[11px] font-medium tabular-nums text-muted-foreground">
|
||||
{bucket.label}
|
||||
</span>
|
||||
<div className="flex-1 overflow-hidden rounded-full bg-muted" style={{ height: 14 }}>
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${maxScoreCount > 0 ? (bucket.count / maxScoreCount) * 100 : 0}%`,
|
||||
backgroundColor: scoreColors[bucket.label] ?? '#557f8c',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="w-6 text-right text-[11px] tabular-nums text-muted-foreground">
|
||||
{bucket.count}
|
||||
</span>
|
||||
</div>
|
||||
<span className="w-8 text-right text-xs tabular-nums text-muted-foreground">
|
||||
{bucket.count}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-5 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-4 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
{/* Juror Workload */}
|
||||
{/* Recently Reviewed */}
|
||||
<AnimatedCard index={10}>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2.5 text-base">
|
||||
<div className="rounded-lg bg-emerald-500/10 p-1.5">
|
||||
<ClipboardList className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
Recently Reviewed
|
||||
</CardTitle>
|
||||
<CardDescription>Latest project reviews</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{recentlyReviewed.length > 0 ? (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Project</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right whitespace-nowrap">Score</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{recentlyReviewed.map((project) => (
|
||||
<TableRow key={project.id}>
|
||||
<TableCell className="max-w-[140px]">
|
||||
<Link
|
||||
href={`/observer/projects/${project.id}` as Route}
|
||||
className="block truncate text-sm font-medium hover:underline"
|
||||
title={project.title}
|
||||
>
|
||||
{project.title}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusBadge status={project.observerStatus ?? project.status} size="sm" />
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums text-sm whitespace-nowrap">
|
||||
{project.evaluationCount > 0 && project.averageScore !== null
|
||||
? project.averageScore.toFixed(1)
|
||||
: '—'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="border-t px-4 py-3">
|
||||
<Link
|
||||
href={"/observer/projects" as Route}
|
||||
className="flex items-center gap-1 text-sm font-medium text-brand-teal hover:underline"
|
||||
>
|
||||
View All <ChevronRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-2 p-4">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-10 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
</div>
|
||||
|
||||
{/* Juror Workload — scrollable list of all jurors */}
|
||||
<AnimatedCard index={8}>
|
||||
<Card className="h-full">
|
||||
<Card className="h-full flex flex-col">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2.5 text-base">
|
||||
<div className="rounded-lg bg-violet-500/10 p-1.5">
|
||||
@@ -401,12 +474,12 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
</div>
|
||||
Juror Workload
|
||||
</CardTitle>
|
||||
<CardDescription>Top 5 jurors by assignment</CardDescription>
|
||||
<CardDescription>All jurors by assignment</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{topJurors.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{topJurors.map((juror) => {
|
||||
<CardContent className="flex-1 overflow-hidden">
|
||||
{allJurors.length > 0 ? (
|
||||
<div className="max-h-[500px] overflow-y-auto -mr-2 pr-2 space-y-3">
|
||||
{allJurors.map((juror) => {
|
||||
const isExpanded = expandedJurorId === juror.id
|
||||
return (
|
||||
<div key={juror.id}>
|
||||
@@ -467,102 +540,9 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
{/* Project Origins */}
|
||||
<AnimatedCard index={9}>
|
||||
{selectedProgramId ? (
|
||||
<GeographicSummaryCard programId={selectedProgramId} />
|
||||
) : (
|
||||
<Card className="h-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Globe className="h-5 w-5" />
|
||||
Project Origins
|
||||
</CardTitle>
|
||||
<CardDescription>Geographic distribution of projects</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-[250px] w-full rounded-md" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</AnimatedCard>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
{/* Recent Projects Table */}
|
||||
<AnimatedCard index={10}>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2.5 text-base">
|
||||
<div className="rounded-lg bg-emerald-500/10 p-1.5">
|
||||
<ClipboardList className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
Recently Reviewed
|
||||
</CardTitle>
|
||||
<CardDescription>Latest project reviews</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{projectsData && projectsData.projects.length > 0 ? (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Project</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right whitespace-nowrap">Score</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{projectsData.projects.map((project) => (
|
||||
<TableRow key={project.id}>
|
||||
<TableCell className="max-w-[180px]">
|
||||
<Link
|
||||
href={`/observer/projects/${project.id}` as Route}
|
||||
className="block truncate text-sm font-medium hover:underline"
|
||||
title={project.title}
|
||||
>
|
||||
{project.title}
|
||||
</Link>
|
||||
{project.teamName && (
|
||||
<p className="truncate text-[11px] text-muted-foreground">{project.teamName}</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusBadge status={project.observerStatus ?? project.status} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums text-sm whitespace-nowrap">
|
||||
{project.evaluationCount > 0 && project.averageScore !== null
|
||||
? project.averageScore.toFixed(1)
|
||||
: '—'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="border-t px-4 py-3">
|
||||
<Link
|
||||
href={"/observer/projects" as Route}
|
||||
className="flex items-center gap-1 text-sm font-medium text-brand-teal hover:underline"
|
||||
>
|
||||
View All <ChevronRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-2 p-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-10 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
|
||||
{/* Activity Feed */}
|
||||
<AnimatedCard index={11}>
|
||||
<Card>
|
||||
<AnimatedCard index={9}>
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2.5 text-base">
|
||||
<div className="rounded-lg bg-blue-500/10 p-1.5">
|
||||
@@ -575,7 +555,10 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
<CardContent>
|
||||
{activityFeed && activityFeed.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{activityFeed.slice(0, 5).map((item) => {
|
||||
{activityFeed
|
||||
.filter((item) => !item.eventType.includes('transitioned') && !item.eventType.includes('transition'))
|
||||
.slice(0, 5)
|
||||
.map((item) => {
|
||||
const iconDef = ACTIVITY_ICONS[item.eventType]
|
||||
const IconComponent = iconDef?.icon ?? Activity
|
||||
const iconColor = iconDef?.color ?? 'text-slate-400'
|
||||
@@ -607,6 +590,26 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
</Card>
|
||||
</AnimatedCard>
|
||||
</div>
|
||||
|
||||
{/* Full-width Map */}
|
||||
<AnimatedCard index={11}>
|
||||
{selectedProgramId ? (
|
||||
<GeographicSummaryCard programId={selectedProgramId} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Globe className="h-5 w-5" />
|
||||
Project Origins
|
||||
</CardTitle>
|
||||
<CardDescription>Geographic distribution of projects</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-[300px] w-full rounded-md" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</AnimatedCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user