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

feat: revamp admin member detail page, observer dashboard round timeline
All checks were successful
Build and Push Docker Image / build (push) Successful in 13m37s
Details

Browse Source 
- Member detail: tabs layout, impersonate button, icon-pill card headers,
  profile details grid, quick info sidebar, jury groups, mentor assignments
- Observer dashboard: round timeline with special award support,
  round node cards, completion indicators
- Analytics: include specialAwardId/Name in observer round overview

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-03-06 10:39:21 +01:00
parent 34fc0b81e0
commit a358e9940d
3 changed files with 620 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

839
src/app/(admin)/admin/members/[id]/page.tsx
View File

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link' import Link from 'next/link'
import { trpc } from '@/lib/trpc/client' import { trpc } from '@/lib/trpc/client'
import { directSessionUpdate } from '@/lib/session-update'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
@@ -64,8 +65,40 @@ import {
Building2, Building2,
FileText, FileText,
FolderOpen, FolderOpen,
LogIn,
Calendar,
Clock,
} from 'lucide-react' } from 'lucide-react'
import { getCountryName, getCountryFlag } from '@/lib/countries' import { getCountryName, getCountryFlag } from '@/lib/countries'
import { formatRelativeTime } from '@/lib/utils'
function getRoleHomePath(role: string): string {
switch (role) {
case 'JURY_MEMBER': return '/jury'
case 'APPLICANT': return '/applicant'
case 'MENTOR': return '/mentor'
case 'OBSERVER': return '/observer'
default: return '/admin'
}
}
const statusVariant: Record<string, 'default' | 'success' | 'destructive' | 'secondary'> = {
ACTIVE: 'success',
SUSPENDED: 'destructive',
INVITED: 'secondary',
NONE: 'secondary',
}
const roleColors: Record<string, 'default' | 'outline' | 'secondary'> = {
JURY_MEMBER: 'default',
MENTOR: 'secondary',
OBSERVER: 'outline',
PROGRAM_ADMIN: 'default',
SUPER_ADMIN: 'default',
APPLICANT: 'secondary',
AWARD_MASTER: 'outline',
AUDIENCE: 'outline',
}
export default function MemberDetailPage() { export default function MemberDetailPage() {
const params = useParams() const params = useParams()
@@ -78,6 +111,7 @@ export default function MemberDetailPage() {
const isSuperAdmin = currentUser?.role === 'SUPER_ADMIN' const isSuperAdmin = currentUser?.role === 'SUPER_ADMIN'
const updateUser = trpc.user.update.useMutation() const updateUser = trpc.user.update.useMutation()
const sendInvitation = trpc.user.sendInvitation.useMutation() const sendInvitation = trpc.user.sendInvitation.useMutation()
const startImpersonation = trpc.user.startImpersonation.useMutation()
// Mentor assignments (only fetched for mentors) // Mentor assignments (only fetched for mentors)
const { data: mentorAssignments } = trpc.mentor.listAssignments.useQuery( const { data: mentorAssignments } = trpc.mentor.listAssignments.useQuery(
@@ -129,7 +163,6 @@ export default function MemberDetailPage() {
utils.user.get.invalidate({ id: userId }) utils.user.get.invalidate({ id: userId })
utils.user.list.invalidate() utils.user.list.invalidate()
toast.success('Member updated successfully') toast.success('Member updated successfully')
router.push('/admin/members')
} catch (error) { } catch (error) {
toast.error(error instanceof Error ? error.message : 'Failed to update member') toast.error(error instanceof Error ? error.message : 'Failed to update member')
} }
@@ -146,20 +179,37 @@ export default function MemberDetailPage() {
} }
} }
const handleImpersonate = async () => {
try {
const result = await startImpersonation.mutateAsync({ targetUserId: userId })
const ok = await directSessionUpdate({ impersonate: userId })
if (!ok) {
toast.error('Failed to update session for impersonation')
return
}
window.location.href = getRoleHomePath(result.targetRole)
} catch (error) {
toast.error(error instanceof Error ? error.message : 'Failed to start impersonation')
}
}
if (isLoading) { if (isLoading) {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<Skeleton className="h-9 w-32" /> <Skeleton className="h-9 w-32" />
<Card> <div className="flex items-center gap-4">
<CardHeader> <Skeleton className="h-16 w-16 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-6 w-48" /> <Skeleton className="h-6 w-48" />
<Skeleton className="h-4 w-72" /> <Skeleton className="h-4 w-72" />
</CardHeader> </div>
<CardContent className="space-y-4"> </div>
<Skeleton className="h-10 w-full" /> <div className="grid gap-6 lg:grid-cols-3">
<Skeleton className="h-10 w-full" /> <div className="lg:col-span-2 space-y-6">
</CardContent> <Skeleton className="h-48 w-full" />
</Card> </div>
<Skeleton className="h-64 w-full" />
</div>
</div> </div>
) )
} }
@@ -172,11 +222,6 @@ export default function MemberDetailPage() {
<AlertTitle>Error Loading Member</AlertTitle> <AlertTitle>Error Loading Member</AlertTitle>
<AlertDescription> <AlertDescription>
{error?.message || 'The member you\'re looking for does not exist.'} {error?.message || 'The member you\'re looking for does not exist.'}
{process.env.NODE_ENV === 'development' && (
<div className="mt-2 text-xs opacity-75">
User ID: {userId}
</div>
)}
</AlertDescription> </AlertDescription>
</Alert> </Alert>
<Button asChild> <Button asChild>
@@ -189,47 +234,67 @@ export default function MemberDetailPage() {
) )
} }
const displayRoles = user.roles?.length ? user.roles : [user.role]
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Back nav */}
<div className="flex items-center gap-4"> <Button variant="ghost" asChild className="-ml-4">
<Button variant="ghost" asChild className="-ml-4"> <Link href="/admin/members">
<Link href="/admin/members"> <ArrowLeft className="mr-2 h-4 w-4" />
<ArrowLeft className="mr-2 h-4 w-4" /> Back to Members
Back to Members </Link>
</Link> </Button>
</Button>
</div>
<div className="flex items-start justify-between"> {/* Header Hero */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<UserAvatar user={user} avatarUrl={user.avatarUrl} size="lg" /> <UserAvatar user={user} avatarUrl={user.avatarUrl} size="lg" />
<div> <div>
<h1 className="text-2xl font-semibold tracking-tight"> <h1 className="text-2xl font-semibold tracking-tight">
{user.name || 'Unnamed Member'} {user.name || 'Unnamed Member'}
</h1> </h1>
<div className="flex items-center gap-2 mt-1"> <p className="text-muted-foreground">{user.email}</p>
<p className="text-muted-foreground">{user.email}</p> <div className="flex items-center gap-2 mt-1.5">
<Badge variant={user.status === 'ACTIVE' ? 'success' : user.status === 'SUSPENDED' ? 'destructive' : 'secondary'}> <Badge variant={statusVariant[user.status] || 'secondary'}>
{user.status === 'NONE' ? 'Not Invited' : user.status} {user.status === 'NONE' ? 'Not Invited' : user.status}
</Badge> </Badge>
{displayRoles.map((r) => (
<Badge key={r} variant={roleColors[r] || 'secondary'} className="text-xs">
{r.replace(/_/g, ' ')}
</Badge>
))}
</div> </div>
</div> </div>
</div> </div>
{(user.status === 'NONE' || user.status === 'INVITED') && ( <div className="flex items-center gap-2 shrink-0">
{(user.status === 'NONE' || user.status === 'INVITED') && (
<Button
variant="outline"
onClick={handleSendInvitation}
disabled={sendInvitation.isPending}
>
{sendInvitation.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Mail className="mr-2 h-4 w-4" />
)}
{user.status === 'INVITED' ? 'Resend Invite' : 'Send Invitation'}
</Button>
)}
<Button <Button
variant="outline" variant="outline"
onClick={handleSendInvitation} onClick={handleImpersonate}
disabled={sendInvitation.isPending} disabled={startImpersonation.isPending}
> >
{sendInvitation.isPending ? ( {startImpersonation.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> <Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : ( ) : (
<Mail className="mr-2 h-4 w-4" /> <LogIn className="mr-2 h-4 w-4" />
)} )}
Send Invitation Impersonate
</Button> </Button>
)} </div>
</div> </div>
<Tabs defaultValue="profile" className="space-y-6"> <Tabs defaultValue="profile" className="space-y-6">
@@ -252,351 +317,369 @@ export default function MemberDetailPage() {
</TabsList> </TabsList>
<TabsContent value="profile" className="space-y-6"> <TabsContent value="profile" className="space-y-6">
{/* Profile Details (read-only) */} <div className="grid gap-6 lg:grid-cols-3">
{(user.nationality || user.country || user.institution || user.bio) && ( {/* Left column: Profile info + Projects */}
<Card> <div className="lg:col-span-2 space-y-6">
<CardHeader> {/* Profile Details (read-only) */}
<CardTitle className="flex items-center gap-2"> {(user.nationality || user.country || user.institution || user.bio) && (
<Globe className="h-5 w-5" /> <Card>
Profile Details <CardHeader className="pb-3">
</CardTitle> <CardTitle className="flex items-center gap-2 text-base">
<CardDescription>Information provided during onboarding</CardDescription> <div className="rounded-lg bg-blue-500/10 p-1.5">
</CardHeader> <Globe className="h-4 w-4 text-blue-500" />
<CardContent> </div>
<div className="grid gap-4 sm:grid-cols-2"> Profile Details
{user.nationality && ( </CardTitle>
<div className="flex items-start gap-2"> <CardDescription>Information provided during onboarding</CardDescription>
<span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.nationality)}</span> </CardHeader>
<div> <CardContent>
<p className="text-xs font-medium text-muted-foreground">Nationality</p> <div className="grid gap-4 sm:grid-cols-2">
<p className="text-sm">{getCountryName(user.nationality)}</p> {user.nationality && (
</div> <div className="flex items-start gap-3 rounded-lg border p-3">
</div> <span className="text-xl mt-0.5 shrink-0" role="img">{getCountryFlag(user.nationality)}</span>
)} <div>
{user.country && ( <p className="text-xs font-medium text-muted-foreground">Nationality</p>
<div className="flex items-start gap-2"> <p className="text-sm font-medium">{getCountryName(user.nationality)}</p>
<span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.country)}</span> </div>
<div> </div>
<p className="text-xs font-medium text-muted-foreground">Country of Residence</p>
<p className="text-sm">{getCountryName(user.country)}</p>
</div>
</div>
)}
{user.institution && (
<div className="flex items-start gap-2">
<Building2 className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
<div>
<p className="text-xs font-medium text-muted-foreground">Institution / Organization</p>
<p className="text-sm">{user.institution}</p>
</div>
</div>
)}
{user.bio && (
<div className="flex items-start gap-2 sm:col-span-2">
<FileText className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
<div>
<p className="text-xs font-medium text-muted-foreground">Bio</p>
<p className="text-sm whitespace-pre-line">{user.bio}</p>
</div>
</div>
)}
</div>
</CardContent>
</Card>
)}
{/* Team Memberships / Projects */}
{user.teamMemberships && user.teamMemberships.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FolderOpen className="h-5 w-5" />
Projects ({user.teamMemberships.length})
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid gap-2">
{user.teamMemberships.map((tm) => (
<Link
key={tm.id}
href={`/admin/projects/${tm.project.id}`}
className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors"
>
<div className="min-w-0">
<p className="font-medium text-sm truncate">{tm.project.title}</p>
{tm.project.teamName && (
<p className="text-xs text-muted-foreground">{tm.project.teamName}</p>
)}
</div>
<div className="flex items-center gap-2 shrink-0 ml-2">
{tm.project.competitionCategory && (
<Badge variant="outline" className="text-xs">
{tm.project.competitionCategory.replace('_', ' ')}
</Badge>
)}
<Badge variant="secondary" className="text-xs">
{tm.role === 'LEAD' ? 'Lead' : tm.role === 'ADVISOR' ? 'Advisor' : 'Member'}
</Badge>
</div>
</Link>
))}
</div>
</CardContent>
</Card>
)}
{/* Jury Groups (for jury members) */}
{user.juryGroupMemberships && user.juryGroupMemberships.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Shield className="h-5 w-5" />
Jury Groups ({user.juryGroupMemberships.length})
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{user.juryGroupMemberships.map((m: { id: string; role: string; juryGroup: { id: string; name: string } }) => (
<Badge key={m.id} variant="outline" className="text-sm py-1 px-3">
{m.juryGroup.name}
<span className="ml-1.5 text-xs text-muted-foreground">
({m.role === 'CHAIR' ? 'Chair' : m.role === 'OBSERVER' ? 'Observer' : 'Member'})
</span>
</Badge>
))}
</div>
</CardContent>
</Card>
)}
<div className="grid gap-6 md:grid-cols-2">
{/* Basic Info */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<User className="h-5 w-5" />
Basic Information
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter name"
/>
</div>
<div className="space-y-2">
<Label htmlFor="role">Role</Label>
<Select
value={role}
onValueChange={(v) => {
if (v === 'SUPER_ADMIN') {
setPendingSuperAdminRole(true)
setShowSuperAdminConfirm(true)
} else {
setRole(v)
}
}}
disabled={!isSuperAdmin && (user.role === 'SUPER_ADMIN' || user.role === 'PROGRAM_ADMIN')}
>
<SelectTrigger id="role">
<SelectValue />
</SelectTrigger>
<SelectContent>
{isSuperAdmin && (
<SelectItem value="SUPER_ADMIN">Super Admin</SelectItem>
)}
{isSuperAdmin && (
<SelectItem value="PROGRAM_ADMIN">Program Admin</SelectItem>
)}
<SelectItem value="JURY_MEMBER">Jury Member</SelectItem>
<SelectItem value="MENTOR">Mentor</SelectItem>
<SelectItem value="OBSERVER">Observer</SelectItem>
<SelectItem value="APPLICANT">Applicant</SelectItem>
<SelectItem value="AWARD_MASTER">Award Master</SelectItem>
<SelectItem value="AUDIENCE">Audience</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="status">Status</Label>
<Select value={status} onValueChange={setStatus}>
<SelectTrigger id="status">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="NONE">Not Invited</SelectItem>
<SelectItem value="INVITED">Invited</SelectItem>
<SelectItem value="ACTIVE">Active</SelectItem>
<SelectItem value="SUSPENDED">Suspended</SelectItem>
</SelectContent>
</Select>
</div>
</CardContent>
</Card>
{/* Expertise & Capacity — only for jury/mentor/observer/admin roles */}
{!['APPLICANT', 'AUDIENCE'].includes(user.role) && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Shield className="h-5 w-5" />
Expertise & Capacity
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label>Expertise Tags</Label>
<TagInput
value={expertiseTags}
onChange={setExpertiseTags}
placeholder="Select expertise tags..."
maxTags={15}
/>
</div>
<div className="space-y-2">
<Label htmlFor="maxAssignments">Max Assignments</Label>
<Input
id="maxAssignments"
type="number"
min="1"
max="100"
value={maxAssignments}
onChange={(e) => setMaxAssignments(e.target.value)}
placeholder="Unlimited"
/>
</div>
{user._count && (
<div className="pt-4 border-t">
<h4 className="font-medium mb-2">Statistics</h4>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<p className="text-muted-foreground">Jury Assignments</p>
<p className="text-2xl font-semibold">{user._count.assignments}</p>
</div>
<div>
<p className="text-muted-foreground">Mentor Assignments</p>
<p className="text-2xl font-semibold">{user._count.mentorAssignments}</p>
</div>
</div>
</div>
)}
</CardContent>
</Card>
)}
</div>
{/* Mentor Assignments Section */}
{user.role === 'MENTOR' && mentorAssignments && mentorAssignments.assignments.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Mentored Projects</CardTitle>
<CardDescription>
Projects this mentor is assigned to
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Project</TableHead>
<TableHead>Category</TableHead>
<TableHead>Status</TableHead>
<TableHead>Assigned</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mentorAssignments.assignments.map((assignment) => (
<TableRow key={assignment.id}>
<TableCell>
<Link
href={`/admin/projects/${assignment.project.id}`}
className="font-medium hover:underline"
>
{assignment.project.title}
</Link>
{assignment.project.teamName && (
<p className="text-sm text-muted-foreground">
{assignment.project.teamName}
</p>
)} )}
</TableCell> {user.country && (
<TableCell> <div className="flex items-start gap-3 rounded-lg border p-3">
{assignment.project.competitionCategory ? ( <span className="text-xl mt-0.5 shrink-0" role="img">{getCountryFlag(user.country)}</span>
<Badge variant="outline"> <div>
{assignment.project.competitionCategory.replace('_', ' ')} <p className="text-xs font-medium text-muted-foreground">Country of Residence</p>
<p className="text-sm font-medium">{getCountryName(user.country)}</p>
</div>
</div>
)}
{user.institution && (
<div className="flex items-start gap-3 rounded-lg border p-3">
<Building2 className="h-5 w-5 mt-0.5 text-muted-foreground shrink-0" />
<div>
<p className="text-xs font-medium text-muted-foreground">Institution / Organization</p>
<p className="text-sm font-medium">{user.institution}</p>
</div>
</div>
)}
{user.bio && (
<div className="sm:col-span-2 rounded-lg border p-3">
<div className="flex items-start gap-3">
<FileText className="h-5 w-5 mt-0.5 text-muted-foreground shrink-0" />
<div>
<p className="text-xs font-medium text-muted-foreground">Bio</p>
<p className="text-sm whitespace-pre-line mt-1">{user.bio}</p>
</div>
</div>
</div>
)}
</div>
</CardContent>
</Card>
)}
{/* Projects */}
{user.teamMemberships && user.teamMemberships.length > 0 && (
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2 text-base">
<div className="rounded-lg bg-emerald-500/10 p-1.5">
<FolderOpen className="h-4 w-4 text-emerald-500" />
</div>
Projects ({user.teamMemberships.length})
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<div className="divide-y">
{user.teamMemberships.map((tm) => (
<Link
key={tm.id}
href={`/admin/projects/${tm.project.id}`}
className="flex items-center justify-between px-6 py-3 hover:bg-muted/50 transition-colors"
>
<div className="min-w-0">
<p className="font-medium text-sm truncate">{tm.project.title}</p>
{tm.project.teamName && (
<p className="text-xs text-muted-foreground">{tm.project.teamName}</p>
)}
</div>
<div className="flex items-center gap-2 shrink-0 ml-2">
{tm.project.competitionCategory && (
<Badge variant="outline" className="text-xs">
{tm.project.competitionCategory.replace('_', ' ')}
</Badge>
)}
<Badge variant="secondary" className="text-xs">
{tm.role === 'LEAD' ? 'Lead' : tm.role === 'ADVISOR' ? 'Advisor' : 'Member'}
</Badge>
</div>
</Link>
))}
</div>
</CardContent>
</Card>
)}
{/* Jury Groups */}
{user.juryGroupMemberships && user.juryGroupMemberships.length > 0 && (
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2 text-base">
<div className="rounded-lg bg-violet-500/10 p-1.5">
<Shield className="h-4 w-4 text-violet-500" />
</div>
Jury Groups ({user.juryGroupMemberships.length})
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{user.juryGroupMemberships.map((m: { id: string; role: string; juryGroup: { id: string; name: string } }) => (
<Badge key={m.id} variant="outline" className="text-sm py-1.5 px-3">
{m.juryGroup.name}
<span className="ml-1.5 text-xs text-muted-foreground">
({m.role === 'CHAIR' ? 'Chair' : m.role === 'OBSERVER' ? 'Observer' : 'Member'})
</span>
</Badge> </Badge>
) : ( ))}
'-' </div>
)} </CardContent>
</TableCell> </Card>
<TableCell> )}
<Badge variant="secondary">
{assignment.project.status ?? 'SUBMITTED'}
</Badge>
</TableCell>
<TableCell className="text-sm text-muted-foreground">
{new Date(assignment.assignedAt).toLocaleDateString()}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
)}
{/* Activity Log */} {/* Mentor Assignments */}
<UserActivityLog userId={userId} /> {user.role === 'MENTOR' && mentorAssignments && mentorAssignments.assignments.length > 0 && (
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2 text-base">
<div className="rounded-lg bg-amber-500/10 p-1.5">
<ClipboardList className="h-4 w-4 text-amber-500" />
</div>
Mentored Projects
</CardTitle>
<CardDescription>
{mentorAssignments.assignments.length} project{mentorAssignments.assignments.length !== 1 ? 's' : ''} assigned
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Project</TableHead>
<TableHead>Category</TableHead>
<TableHead>Status</TableHead>
<TableHead>Assigned</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mentorAssignments.assignments.map((assignment) => (
<TableRow key={assignment.id}>
<TableCell>
<Link
href={`/admin/projects/${assignment.project.id}`}
className="font-medium hover:underline"
>
{assignment.project.title}
</Link>
{assignment.project.teamName && (
<p className="text-sm text-muted-foreground">{assignment.project.teamName}</p>
)}
</TableCell>
<TableCell>
{assignment.project.competitionCategory ? (
<Badge variant="outline">{assignment.project.competitionCategory.replace('_', ' ')}</Badge>
) : '-'}
</TableCell>
<TableCell>
<Badge variant="secondary">{assignment.project.status ?? 'SUBMITTED'}</Badge>
</TableCell>
<TableCell className="text-sm text-muted-foreground">
{new Date(assignment.assignedAt).toLocaleDateString()}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
)}
{/* Status Alert */} {/* Activity Log */}
{user.status === 'NONE' && ( <UserActivityLog userId={userId} />
<Alert> </div>
<Mail className="h-4 w-4" />
<AlertTitle>Not Yet Invited</AlertTitle>
<AlertDescription>
This member was added to the platform via project import but hasn&apos;t been
invited yet. Send them an invitation using the button above.
</AlertDescription>
</Alert>
)}
{user.status === 'INVITED' && (
<Alert>
<Mail className="h-4 w-4" />
<AlertTitle>Invitation Pending</AlertTitle>
<AlertDescription>
This member hasn&apos;t accepted their invitation yet. You can resend the
invitation email using the button above.
</AlertDescription>
</Alert>
)}
{/* Save Button */} {/* Right sidebar: Edit form + Quick info */}
<div className="flex justify-end gap-4"> <div className="space-y-6">
<Button variant="outline" asChild> {/* Quick Info Card */}
<Link href="/admin/members">Cancel</Link> <Card>
</Button> <CardHeader className="pb-3">
<Button onClick={handleSave} disabled={updateUser.isPending}> <CardTitle className="flex items-center gap-2 text-base">
{updateUser.isPending ? ( <div className="rounded-lg bg-slate-500/10 p-1.5">
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> <Clock className="h-4 w-4 text-slate-500" />
) : ( </div>
<Save className="mr-2 h-4 w-4" /> Quick Info
)} </CardTitle>
Save Changes </CardHeader>
</Button> <CardContent className="space-y-3">
</div> <div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Created</span>
<span>{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Last Login</span>
<span>
{user.lastLoginAt ? (
<span title={new Date(user.lastLoginAt).toLocaleString()}>
{formatRelativeTime(user.lastLoginAt)}
</span>
) : 'Never'}
</span>
</div>
{user._count && !['APPLICANT', 'AUDIENCE'].includes(user.role) && (
<>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Jury Assignments</span>
<span className="font-semibold">{user._count.assignments}</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Mentor Assignments</span>
<span className="font-semibold">{user._count.mentorAssignments}</span>
</div>
</>
)}
</CardContent>
</Card>
{/* Status Alerts */}
{user.status === 'NONE' && (
<Alert>
<Mail className="h-4 w-4" />
<AlertTitle>Not Yet Invited</AlertTitle>
<AlertDescription>
This member was added via import but hasn&apos;t been invited yet.
</AlertDescription>
</Alert>
)}
{user.status === 'INVITED' && (
<Alert>
<Mail className="h-4 w-4" />
<AlertTitle>Invitation Pending</AlertTitle>
<AlertDescription>
This member hasn&apos;t accepted their invitation yet.
</AlertDescription>
</Alert>
)}
{/* Basic Info Edit */}
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2 text-base">
<div className="rounded-lg bg-blue-500/10 p-1.5">
<User className="h-4 w-4 text-blue-500" />
</div>
Edit Details
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter name"
/>
</div>
<div className="space-y-2">
<Label htmlFor="role">Role</Label>
<Select
value={role}
onValueChange={(v) => {
if (v === 'SUPER_ADMIN') {
setPendingSuperAdminRole(true)
setShowSuperAdminConfirm(true)
} else {
setRole(v)
}
}}
disabled={!isSuperAdmin && (user.role === 'SUPER_ADMIN' || user.role === 'PROGRAM_ADMIN')}
>
<SelectTrigger id="role">
<SelectValue />
</SelectTrigger>
<SelectContent>
{isSuperAdmin && <SelectItem value="SUPER_ADMIN">Super Admin</SelectItem>}
{isSuperAdmin && <SelectItem value="PROGRAM_ADMIN">Program Admin</SelectItem>}
<SelectItem value="JURY_MEMBER">Jury Member</SelectItem>
<SelectItem value="MENTOR">Mentor</SelectItem>
<SelectItem value="OBSERVER">Observer</SelectItem>
<SelectItem value="APPLICANT">Applicant</SelectItem>
<SelectItem value="AWARD_MASTER">Award Master</SelectItem>
<SelectItem value="AUDIENCE">Audience</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="status">Status</Label>
<Select value={status} onValueChange={setStatus}>
<SelectTrigger id="status">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="NONE">Not Invited</SelectItem>
<SelectItem value="INVITED">Invited</SelectItem>
<SelectItem value="ACTIVE">Active</SelectItem>
<SelectItem value="SUSPENDED">Suspended</SelectItem>
</SelectContent>
</Select>
</div>
{/* Expertise & Capacity for non-applicant */}
{!['APPLICANT', 'AUDIENCE'].includes(user.role) && (
<>
<div className="border-t pt-4 space-y-2">
<Label>Expertise Tags</Label>
<TagInput
value={expertiseTags}
onChange={setExpertiseTags}
placeholder="Select expertise tags..."
maxTags={15}
/>
</div>
<div className="space-y-2">
<Label htmlFor="maxAssignments">Max Assignments</Label>
<Input
id="maxAssignments"
type="number"
min="1"
max="100"
value={maxAssignments}
onChange={(e) => setMaxAssignments(e.target.value)}
placeholder="Unlimited"
/>
</div>
</>
)}
<Button onClick={handleSave} disabled={updateUser.isPending} className="w-full">
{updateUser.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Save className="mr-2 h-4 w-4" />
)}
Save Changes
</Button>
</CardContent>
</Card>
</div>
</div>
</TabsContent> </TabsContent>
{/* Evaluations Tab */} {/* Evaluations Tab */}
@@ -611,7 +694,6 @@ export default function MemberDetailPage() {
</Card> </Card>
) : ( ) : (
(() => { (() => {
// Group evaluations by round
const byRound = new Map<string, typeof jurorEvaluations>() const byRound = new Map<string, typeof jurorEvaluations>()
for (const ev of jurorEvaluations) { for (const ev of jurorEvaluations) {
const key = ev.roundName const key = ev.roundName
@@ -712,7 +794,6 @@ export default function MemberDetailPage() {
)} )}
</Tabs> </Tabs>
{/* Super Admin Confirmation Dialog */} {/* Super Admin Confirmation Dialog */}
<AlertDialog open={showSuperAdminConfirm} onOpenChange={setShowSuperAdminConfirm}> <AlertDialog open={showSuperAdminConfirm} onOpenChange={setShowSuperAdminConfirm}>
<AlertDialogContent> <AlertDialogContent>
@@ -725,11 +806,7 @@ export default function MemberDetailPage() {
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel <AlertDialogCancel onClick={() => setPendingSuperAdminRole(false)}>
onClick={() => {
setPendingSuperAdminRole(false)
}}
>
Cancel Cancel
</AlertDialogCancel> </AlertDialogCancel>
<AlertDialogAction <AlertDialogAction

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

@@ -23,6 +23,7 @@ import {
ClipboardList, ClipboardList,
Upload, Upload,
Users, Users,
Trophy,
} from 'lucide-react' } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
@@ -103,6 +104,158 @@ function RoundPanel({ roundType, roundId, programId }: { roundType: string; roun
} }
} }
type RoundOverviewItem = {
roundId: string
roundName: string
roundType: string
roundStatus: string
totalProjects: number
completionRate: number
specialAwardId?: string | null
specialAwardName?: string | null
}
function RoundNode({
round,
isSelected,
onClick,
}: {
round: RoundOverviewItem
isSelected: boolean
onClick: () => void
}) {
const isActive = round.roundStatus === 'ROUND_ACTIVE'
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',
isSelected && 'ring-2 ring-brand-teal shadow-md',
)}>
<CardContent className="p-3 space-y-2">
<div className="flex items-center gap-1.5">
<p className="text-xs font-semibold leading-tight truncate flex-1" title={round.roundName}>
{round.roundName}
</p>
{isActive && (
<span className="relative flex h-2.5 w-2.5 shrink-0">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
</span>
)}
</div>
<div className="flex flex-wrap gap-1">
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
{round.roundType.replace(/_/g, ' ')}
</Badge>
<Badge
variant={STATUS_BADGE_VARIANT[round.roundStatus] ?? 'outline'}
className="text-[10px] px-1.5 py-0"
>
{round.roundStatus === 'ROUND_ACTIVE'
? 'Active'
: round.roundStatus === 'ROUND_CLOSED'
? 'Closed'
: round.roundStatus === 'ROUND_DRAFT'
? 'Draft'
: round.roundStatus === 'ROUND_ARCHIVED'
? 'Archived'
: round.roundStatus}
</Badge>
</div>
<p className="text-xs text-muted-foreground">
{round.totalProjects} project{round.totalProjects !== 1 ? 's' : ''}
</p>
<div className="space-y-1">
<Progress value={round.completionRate} className="h-1.5" />
<p className="text-[10px] text-muted-foreground tabular-nums">
{round.completionRate}% complete
</p>
</div>
</CardContent>
</Card>
</button>
)
}
function PipelineView({
rounds,
selectedRoundId,
onSelectRound,
}: {
rounds: RoundOverviewItem[]
selectedRoundId: string
onSelectRound: (id: string) => void
}) {
// Split main pipeline from award tracks
const mainRounds = rounds.filter((r) => !r.specialAwardId)
const awardGroups = new Map<string, { name: string; rounds: RoundOverviewItem[] }>()
for (const r of rounds) {
if (!r.specialAwardId) continue
if (!awardGroups.has(r.specialAwardId)) {
awardGroups.set(r.specialAwardId, { name: r.specialAwardName ?? 'Special Award', rounds: [] })
}
awardGroups.get(r.specialAwardId)!.rounds.push(r)
}
return (
<div className="space-y-4">
{/* Main Competition Pipeline */}
{mainRounds.length > 0 && (
<div className="flex items-stretch gap-0 overflow-x-auto py-1 -my-1">
{mainRounds.map((round, idx) => (
<div key={round.roundId} className="flex items-center">
<RoundNode
round={round}
isSelected={selectedRoundId === round.roundId}
onClick={() => onSelectRound(round.roundId)}
/>
{idx < mainRounds.length - 1 && (
<div className="h-px w-6 shrink-0 border-t-2 border-brand-teal" />
)}
</div>
))}
</div>
)}
{/* Award Tracks */}
{awardGroups.size > 0 && (
<div className="space-y-3 pt-1">
{Array.from(awardGroups.entries()).map(([awardId, group]) => (
<div
key={awardId}
className="rounded-lg border border-amber-200/80 bg-amber-50/30 p-3"
>
<div className="flex items-center gap-2 mb-3">
<div className="flex items-center justify-center h-6 w-6 rounded-full bg-amber-100 shrink-0">
<Trophy className="h-3.5 w-3.5 text-amber-600" />
</div>
<p className="text-xs font-semibold text-amber-800">{group.name}</p>
<Badge variant="outline" className="text-[10px] px-1.5 py-0 border-amber-300 text-amber-700">
Award Track
</Badge>
</div>
<div className="flex items-stretch gap-0 overflow-x-auto">
{group.rounds.map((round, idx) => (
<div key={round.roundId} className="flex items-center">
<RoundNode
round={round}
isSelected={selectedRoundId === round.roundId}
onClick={() => onSelectRound(round.roundId)}
/>
{idx < group.rounds.length - 1 && (
<div className="h-px w-6 shrink-0 border-t-2 border-amber-400" />
)}
</div>
))}
</div>
</div>
))}
</div>
)}
</div>
)
}
export function ObserverDashboardContent({ userName }: { userName?: string }) { export function ObserverDashboardContent({ userName }: { userName?: string }) {
const { const {
programs, programs,
@@ -197,71 +350,11 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
))} ))}
</div> </div>
) : roundOverview && roundOverview.rounds.length > 0 ? ( ) : roundOverview && roundOverview.rounds.length > 0 ? (
<div className="flex items-stretch gap-0 overflow-x-auto py-1 -my-1"> <PipelineView
{roundOverview.rounds.map((round, idx) => { rounds={roundOverview.rounds}
const isSelected = selectedRoundId === round.roundId selectedRoundId={selectedRoundId}
const isActive = round.roundStatus === 'ROUND_ACTIVE' onSelectRound={setSelectedRoundId}
return ( />
<div key={round.roundId ?? round.roundName + idx} className="flex items-center">
<button
type="button"
onClick={() => setSelectedRoundId(round.roundId)}
className="text-left focus:outline-none"
>
<Card className={cn(
'w-44 shrink-0 border shadow-sm transition-all cursor-pointer hover:shadow-md',
isSelected && 'ring-2 ring-brand-teal shadow-md',
)}>
<CardContent className="p-3 space-y-2">
<div className="flex items-center gap-1.5">
<p className="text-xs font-semibold leading-tight truncate flex-1" title={round.roundName}>
{round.roundName}
</p>
{isActive && (
<span className="relative flex h-2.5 w-2.5 shrink-0">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
</span>
)}
</div>
<div className="flex flex-wrap gap-1">
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
{round.roundType.replace(/_/g, ' ')}
</Badge>
<Badge
variant={STATUS_BADGE_VARIANT[round.roundStatus] ?? 'outline'}
className="text-[10px] px-1.5 py-0"
>
{round.roundStatus === 'ROUND_ACTIVE'
? 'Active'
: round.roundStatus === 'ROUND_CLOSED'
? 'Closed'
: round.roundStatus === 'ROUND_DRAFT'
? 'Draft'
: round.roundStatus === 'ROUND_ARCHIVED'
? 'Archived'
: round.roundStatus}
</Badge>
</div>
<p className="text-xs text-muted-foreground">
{round.totalProjects} project{round.totalProjects !== 1 ? 's' : ''}
</p>
<div className="space-y-1">
<Progress value={round.completionRate} className="h-1.5" />
<p className="text-[10px] text-muted-foreground tabular-nums">
{round.completionRate}% complete
</p>
</div>
</CardContent>
</Card>
</button>
{idx < roundOverview.rounds.length - 1 && (
<div className="h-px w-6 shrink-0 border-t-2 border-brand-teal" />
)}
</div>
)
})}
</div>
) : ( ) : (
<p className="text-sm text-muted-foreground">No round data available for this competition.</p> <p className="text-sm text-muted-foreground">No round data available for this competition.</p>
)} )}

4
src/server/routers/analytics.ts
View File

@@ -867,6 +867,8 @@ export const analyticsRouter = router({
roundType: true, roundType: true,
status: true, status: true,
sortOrder: true, sortOrder: true,
specialAwardId: true,
specialAward: { select: { name: true } },
}, },
}) })
@@ -943,6 +945,8 @@ export const analyticsRouter = router({
roundType: round.roundType, roundType: round.roundType,
roundStatus: round.status, roundStatus: round.status,
sortOrder: round.sortOrder, sortOrder: round.sortOrder,
specialAwardId: round.specialAwardId,
specialAwardName: round.specialAward?.name ?? null,
totalProjects, totalProjects,
stateBreakdown, stateBreakdown,
totalAssignments, totalAssignments,