477 lines
18 KiB
TypeScript
477 lines
18 KiB
TypeScript
'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>
|
|
)
|
|
}
|