feat: revamp admin member detail page, observer dashboard round timeline
All checks were successful
Build and Push Docker Image / build (push) Successful in 13m37s
All checks were successful
Build and Push Docker Image / build (push) Successful in 13m37s
- 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:
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { directSessionUpdate } from '@/lib/session-update'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
@@ -64,8 +65,40 @@ import {
|
||||
Building2,
|
||||
FileText,
|
||||
FolderOpen,
|
||||
LogIn,
|
||||
Calendar,
|
||||
Clock,
|
||||
} from 'lucide-react'
|
||||
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() {
|
||||
const params = useParams()
|
||||
@@ -78,6 +111,7 @@ export default function MemberDetailPage() {
|
||||
const isSuperAdmin = currentUser?.role === 'SUPER_ADMIN'
|
||||
const updateUser = trpc.user.update.useMutation()
|
||||
const sendInvitation = trpc.user.sendInvitation.useMutation()
|
||||
const startImpersonation = trpc.user.startImpersonation.useMutation()
|
||||
|
||||
// Mentor assignments (only fetched for mentors)
|
||||
const { data: mentorAssignments } = trpc.mentor.listAssignments.useQuery(
|
||||
@@ -129,7 +163,6 @@ export default function MemberDetailPage() {
|
||||
utils.user.get.invalidate({ id: userId })
|
||||
utils.user.list.invalidate()
|
||||
toast.success('Member updated successfully')
|
||||
router.push('/admin/members')
|
||||
} catch (error) {
|
||||
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) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-9 w-32" />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-4">
|
||||
<Skeleton className="h-16 w-16 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-48" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Skeleton className="h-48 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-64 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -172,11 +222,6 @@ export default function MemberDetailPage() {
|
||||
<AlertTitle>Error Loading Member</AlertTitle>
|
||||
<AlertDescription>
|
||||
{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>
|
||||
</Alert>
|
||||
<Button asChild>
|
||||
@@ -189,47 +234,67 @@ export default function MemberDetailPage() {
|
||||
)
|
||||
}
|
||||
|
||||
const displayRoles = user.roles?.length ? user.roles : [user.role]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href="/admin/members">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Members
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
{/* Back nav */}
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href="/admin/members">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Members
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<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">
|
||||
<UserAvatar user={user} avatarUrl={user.avatarUrl} size="lg" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
{user.name || 'Unnamed Member'}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<p className="text-muted-foreground">{user.email}</p>
|
||||
<Badge variant={user.status === 'ACTIVE' ? 'success' : user.status === 'SUSPENDED' ? 'destructive' : 'secondary'}>
|
||||
<p className="text-muted-foreground">{user.email}</p>
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<Badge variant={statusVariant[user.status] || 'secondary'}>
|
||||
{user.status === 'NONE' ? 'Not Invited' : user.status}
|
||||
</Badge>
|
||||
{displayRoles.map((r) => (
|
||||
<Badge key={r} variant={roleColors[r] || 'secondary'} className="text-xs">
|
||||
{r.replace(/_/g, ' ')}
|
||||
</Badge>
|
||||
))}
|
||||
</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
|
||||
variant="outline"
|
||||
onClick={handleSendInvitation}
|
||||
disabled={sendInvitation.isPending}
|
||||
onClick={handleImpersonate}
|
||||
disabled={startImpersonation.isPending}
|
||||
>
|
||||
{sendInvitation.isPending ? (
|
||||
{startImpersonation.isPending ? (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="profile" className="space-y-6">
|
||||
@@ -252,351 +317,369 @@ export default function MemberDetailPage() {
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="profile" className="space-y-6">
|
||||
{/* Profile Details (read-only) */}
|
||||
{(user.nationality || user.country || user.institution || user.bio) && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Globe className="h-5 w-5" />
|
||||
Profile Details
|
||||
</CardTitle>
|
||||
<CardDescription>Information provided during onboarding</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{user.nationality && (
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.nationality)}</span>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground">Nationality</p>
|
||||
<p className="text-sm">{getCountryName(user.nationality)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{user.country && (
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.country)}</span>
|
||||
<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>
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Left column: Profile info + Projects */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Profile Details (read-only) */}
|
||||
{(user.nationality || user.country || user.institution || user.bio) && (
|
||||
<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">
|
||||
<Globe className="h-4 w-4 text-blue-500" />
|
||||
</div>
|
||||
Profile Details
|
||||
</CardTitle>
|
||||
<CardDescription>Information provided during onboarding</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{user.nationality && (
|
||||
<div className="flex items-start gap-3 rounded-lg border p-3">
|
||||
<span className="text-xl mt-0.5 shrink-0" role="img">{getCountryFlag(user.nationality)}</span>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground">Nationality</p>
|
||||
<p className="text-sm font-medium">{getCountryName(user.nationality)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{assignment.project.competitionCategory ? (
|
||||
<Badge variant="outline">
|
||||
{assignment.project.competitionCategory.replace('_', ' ')}
|
||||
{user.country && (
|
||||
<div className="flex items-start gap-3 rounded-lg border p-3">
|
||||
<span className="text-xl mt-0.5 shrink-0" role="img">{getCountryFlag(user.country)}</span>
|
||||
<div>
|
||||
<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>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Activity Log */}
|
||||
<UserActivityLog userId={userId} />
|
||||
{/* Mentor Assignments */}
|
||||
{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 */}
|
||||
{user.status === 'NONE' && (
|
||||
<Alert>
|
||||
<Mail className="h-4 w-4" />
|
||||
<AlertTitle>Not Yet Invited</AlertTitle>
|
||||
<AlertDescription>
|
||||
This member was added to the platform via project import but hasn'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't accepted their invitation yet. You can resend the
|
||||
invitation email using the button above.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{/* Activity Log */}
|
||||
<UserActivityLog userId={userId} />
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button variant="outline" asChild>
|
||||
<Link href="/admin/members">Cancel</Link>
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={updateUser.isPending}>
|
||||
{updateUser.isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
{/* Right sidebar: Edit form + Quick info */}
|
||||
<div className="space-y-6">
|
||||
{/* Quick Info Card */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<div className="rounded-lg bg-slate-500/10 p-1.5">
|
||||
<Clock className="h-4 w-4 text-slate-500" />
|
||||
</div>
|
||||
Quick Info
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<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't been invited yet.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{user.status === 'INVITED' && (
|
||||
<Alert>
|
||||
<Mail className="h-4 w-4" />
|
||||
<AlertTitle>Invitation Pending</AlertTitle>
|
||||
<AlertDescription>
|
||||
This member hasn'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>
|
||||
|
||||
{/* Evaluations Tab */}
|
||||
@@ -611,7 +694,6 @@ export default function MemberDetailPage() {
|
||||
</Card>
|
||||
) : (
|
||||
(() => {
|
||||
// Group evaluations by round
|
||||
const byRound = new Map<string, typeof jurorEvaluations>()
|
||||
for (const ev of jurorEvaluations) {
|
||||
const key = ev.roundName
|
||||
@@ -712,7 +794,6 @@ export default function MemberDetailPage() {
|
||||
)}
|
||||
</Tabs>
|
||||
|
||||
|
||||
{/* Super Admin Confirmation Dialog */}
|
||||
<AlertDialog open={showSuperAdminConfirm} onOpenChange={setShowSuperAdminConfirm}>
|
||||
<AlertDialogContent>
|
||||
@@ -725,11 +806,7 @@ export default function MemberDetailPage() {
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel
|
||||
onClick={() => {
|
||||
setPendingSuperAdminRole(false)
|
||||
}}
|
||||
>
|
||||
<AlertDialogCancel onClick={() => setPendingSuperAdminRole(false)}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
|
||||
Reference in New Issue
Block a user