feat: revamp admin member detail page, observer dashboard round timeline

- 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>

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

@@ -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>
+        <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-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>
     )
   }
@@ -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,33 +234,40 @@ export default function MemberDetailPage() {
     )
   }
 
+  const displayRoles = user.roles?.length ? user.roles : [user.role]
+
   return (
     <div className="space-y-6">
-      {/* Header */}
+      {/* Back nav */}
-      <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>
 
-      <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'}>
+            <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>
+        <div className="flex items-center gap-2 shrink-0">
           {(user.status === 'NONE' || user.status === 'INVITED') && (
             <Button
               variant="outline"
@@ -227,9 +279,22 @@ export default function MemberDetailPage() {
               ) : (
                 <Mail className="mr-2 h-4 w-4" />
               )}
-            Send Invitation
+              {user.status === 'INVITED' ? 'Resend Invite' : 'Send Invitation'}
             </Button>
           )}
+          <Button
+            variant="outline"
+            onClick={handleImpersonate}
+            disabled={startImpersonation.isPending}
+          >
+            {startImpersonation.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <LogIn className="mr-2 h-4 w-4" />
+            )}
+            Impersonate
+          </Button>
+        </div>
       </div>
 
       <Tabs defaultValue="profile" className="space-y-6">
@@ -252,12 +317,17 @@ export default function MemberDetailPage() {
         </TabsList>
 
         <TabsContent value="profile" className="space-y-6">
+          <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>
+                  <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2">
+                    <CardTitle className="flex items-center gap-2 text-base">
-              <Globe className="h-5 w-5" />
+                      <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>
@@ -265,38 +335,40 @@ export default function MemberDetailPage() {
                   <CardContent>
                     <div className="grid gap-4 sm:grid-cols-2">
                       {user.nationality && (
-                <div className="flex items-start gap-2">
+                        <div className="flex items-start gap-3 rounded-lg border p-3">
-                  <span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.nationality)}</span>
+                          <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">{getCountryName(user.nationality)}</p>
+                            <p className="text-sm font-medium">{getCountryName(user.nationality)}</p>
                           </div>
                         </div>
                       )}
                       {user.country && (
-                <div className="flex items-start gap-2">
+                        <div className="flex items-start gap-3 rounded-lg border p-3">
-                  <span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.country)}</span>
+                          <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">{getCountryName(user.country)}</p>
+                            <p className="text-sm font-medium">{getCountryName(user.country)}</p>
                           </div>
                         </div>
                       )}
                       {user.institution && (
-                <div className="flex items-start gap-2">
+                        <div className="flex items-start gap-3 rounded-lg border p-3">
-                  <Building2 className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+                          <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">{user.institution}</p>
+                            <p className="text-sm font-medium">{user.institution}</p>
                           </div>
                         </div>
                       )}
                       {user.bio && (
-                <div className="flex items-start gap-2 sm:col-span-2">
+                        <div className="sm:col-span-2 rounded-lg border p-3">
-                  <FileText className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+                          <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">{user.bio}</p>
+                              <p className="text-sm whitespace-pre-line mt-1">{user.bio}</p>
+                            </div>
                           </div>
                         </div>
                       )}
@@ -305,22 +377,24 @@ export default function MemberDetailPage() {
                 </Card>
               )}
 
-      {/* Team Memberships / Projects */}
+              {/* Projects */}
               {user.teamMemberships && user.teamMemberships.length > 0 && (
                 <Card>
-          <CardHeader>
+                  <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2">
+                    <CardTitle className="flex items-center gap-2 text-base">
-              <FolderOpen className="h-5 w-5" />
+                      <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>
+                  <CardContent className="p-0">
-            <div className="grid gap-2">
+                    <div className="divide-y">
                       {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"
+                          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>
@@ -345,19 +419,21 @@ export default function MemberDetailPage() {
                 </Card>
               )}
 
-      {/* Jury Groups (for jury members) */}
+              {/* Jury Groups */}
               {user.juryGroupMemberships && user.juryGroupMemberships.length > 0 && (
                 <Card>
-          <CardHeader>
+                  <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2">
+                    <CardTitle className="flex items-center gap-2 text-base">
-              <Shield className="h-5 w-5" />
+                      <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 px-3">
+                        <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'})
@@ -369,13 +445,137 @@ export default function MemberDetailPage() {
                 </Card>
               )}
 
-      <div className="grid gap-6 md:grid-cols-2">
+              {/* Mentor Assignments */}
-        {/* Basic Info */}
+              {user.role === 'MENTOR' && mentorAssignments && mentorAssignments.assignments.length > 0 && (
                 <Card>
-          <CardHeader>
+                  <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2">
+                    <CardTitle className="flex items-center gap-2 text-base">
-              <User className="h-5 w-5" />
+                      <div className="rounded-lg bg-amber-500/10 p-1.5">
-              Basic Information
+                        <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>
+              )}
+
+              {/* Activity Log */}
+              <UserActivityLog userId={userId} />
+            </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&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">
@@ -415,12 +615,8 @@ export default function MemberDetailPage() {
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                  {isSuperAdmin && (
+                        {isSuperAdmin && <SelectItem value="SUPER_ADMIN">Super Admin</SelectItem>}
-                    <SelectItem value="SUPER_ADMIN">Super Admin</SelectItem>
+                        {isSuperAdmin && <SelectItem value="PROGRAM_ADMIN">Program 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>
@@ -444,20 +640,11 @@ export default function MemberDetailPage() {
                       </SelectContent>
                     </Select>
                   </div>
-          </CardContent>
-        </Card>
 
-        {/* Expertise & Capacity — only for jury/mentor/observer/admin roles */}
+                  {/* Expertise & Capacity for non-applicant */}
                   {!['APPLICANT', 'AUDIENCE'].includes(user.role) && (
-        <Card>
+                    <>
-          <CardHeader>
+                      <div className="border-t pt-4 space-y-2">
-            <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}
@@ -478,117 +665,10 @@ export default function MemberDetailPage() {
                           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>
-                    <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>
                   )}
 
-      {/* Activity Log */}
+                  <Button onClick={handleSave} disabled={updateUser.isPending} className="w-full">
-      <UserActivityLog userId={userId} />
-
-      {/* 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&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 */}
-      <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" />
                     ) : (
@@ -596,6 +676,9 @@ export default function MemberDetailPage() {
                     )}
                     Save Changes
                   </Button>
+                </CardContent>
+              </Card>
+            </div>
           </div>
         </TabsContent>
 
@@ -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
+            <AlertDialogCancel onClick={() => setPendingSuperAdminRole(false)}>
-              onClick={() => {
-                setPendingSuperAdminRole(false)
-              }}
-            >
               Cancel
             </AlertDialogCancel>
             <AlertDialogAction

src/components/observer/observer-dashboard-content.tsx

@@ -23,6 +23,7 @@ import {
   ClipboardList,
   Upload,
   Users,
+  Trophy,
 } from 'lucide-react'
 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 }) {
   const {
     programs,
@@ -197,71 +350,11 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                 ))}
               </div>
             ) : 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>
             )}

src/server/routers/analytics.ts

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