feat: impersonation system, semi-finalist detail page, tRPC resilience
- Add super-admin impersonation: "Login As" from user list, red banner with "Return to Admin", audit logged start/end, nested impersonation blocked, onboarding gate skipped during impersonation - Fix semi-finalist stats: check latest terminal state (not any PASSED), use passwordHash OR status=ACTIVE for activation check - Add /admin/semi-finalists detail page with search, category/status filters - Add account_reminder_days setting to notifications tab - Add tRPC resilience: retry on 503/HTML responses, custom fetch detects nginx error pages, exponential backoff (2s/4s/8s) - Reduce dashboard polling intervals (60s stats, 30s activity, 120s semi) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
265
src/components/admin/semi-finalists-content.tsx
Normal file
265
src/components/admin/semi-finalists-content.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import Link from 'next/link'
|
||||
import type { Route } from 'next'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import {
|
||||
Users,
|
||||
Search,
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
Clock,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
} from 'lucide-react'
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
STARTUP: 'Startup',
|
||||
BUSINESS_CONCEPT: 'Business Concept',
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
active: { label: 'Active', color: 'bg-emerald-500', icon: CheckCircle2 },
|
||||
invited: { label: 'Invited', color: 'bg-amber-500', icon: Clock },
|
||||
none: { label: 'No Account', color: 'bg-red-500', icon: AlertCircle },
|
||||
} as const
|
||||
|
||||
type SemiFinalistsContentProps = {
|
||||
editionId: string
|
||||
}
|
||||
|
||||
export function SemiFinalistsContent({ editionId }: SemiFinalistsContentProps) {
|
||||
const { data, isLoading } = trpc.dashboard.getSemiFinalistDetail.useQuery(
|
||||
{ editionId },
|
||||
{ enabled: !!editionId }
|
||||
)
|
||||
|
||||
const [search, setSearch] = useState('')
|
||||
const [categoryFilter, setCategoryFilter] = useState<string>('all')
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!data) return []
|
||||
let items = data
|
||||
|
||||
if (categoryFilter !== 'all') {
|
||||
items = items.filter(p => p.category === categoryFilter)
|
||||
}
|
||||
|
||||
if (statusFilter === 'activated') {
|
||||
items = items.filter(p => p.allActivated)
|
||||
} else if (statusFilter === 'pending') {
|
||||
items = items.filter(p => !p.allActivated)
|
||||
}
|
||||
|
||||
if (search.trim()) {
|
||||
const q = search.toLowerCase()
|
||||
items = items.filter(p =>
|
||||
p.title.toLowerCase().includes(q) ||
|
||||
p.teamName?.toLowerCase().includes(q) ||
|
||||
p.country?.toLowerCase().includes(q) ||
|
||||
p.teamMembers.some(tm =>
|
||||
tm.name?.toLowerCase().includes(q) ||
|
||||
tm.email.toLowerCase().includes(q)
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return items
|
||||
}, [data, search, categoryFilter, statusFilter])
|
||||
|
||||
const stats = useMemo(() => {
|
||||
if (!data) return { total: 0, activated: 0, pending: 0 }
|
||||
return {
|
||||
total: data.length,
|
||||
activated: data.filter(p => p.allActivated).length,
|
||||
pending: data.filter(p => !p.allActivated).length,
|
||||
}
|
||||
}, [data])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-24">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href={'/admin' as Route}>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold tracking-tight md:text-2xl">
|
||||
Semi-Finalists
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{stats.total} projects · {stats.activated} fully activated · {stats.pending} pending
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search by project, team, member name or email..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<SelectValue placeholder="Category" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Categories</SelectItem>
|
||||
<SelectItem value="STARTUP">Startup</SelectItem>
|
||||
<SelectItem value="BUSINESS_CONCEPT">Business Concept</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<SelectValue placeholder="Account Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
<SelectItem value="activated">Fully Activated</SelectItem>
|
||||
<SelectItem value="pending">Pending Setup</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Table */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Users className="h-4 w-4 text-brand-blue" />
|
||||
{filtered.length} project{filtered.length !== 1 ? 's' : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{filtered.length === 0 ? (
|
||||
<p className="py-8 text-center text-sm text-muted-foreground">
|
||||
No semi-finalist projects match your filters.
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Project</TableHead>
|
||||
<TableHead>Category</TableHead>
|
||||
<TableHead>Country</TableHead>
|
||||
<TableHead>Current Round</TableHead>
|
||||
<TableHead>Team Members</TableHead>
|
||||
<TableHead className="text-center">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((project) => (
|
||||
<TableRow key={project.projectId}>
|
||||
<TableCell>
|
||||
<Link
|
||||
href={`/admin/projects/${project.projectId}` as Route}
|
||||
className="font-medium text-brand-blue hover:underline"
|
||||
>
|
||||
{project.title}
|
||||
</Link>
|
||||
{project.teamName && (
|
||||
<p className="text-xs text-muted-foreground">{project.teamName}</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{categoryLabels[project.category ?? ''] ?? project.category}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{project.country || '—'}</TableCell>
|
||||
<TableCell className="text-sm">{project.currentRound}</TableCell>
|
||||
<TableCell>
|
||||
<TooltipProvider>
|
||||
<div className="space-y-1">
|
||||
{project.teamMembers.map((tm, idx) => {
|
||||
const cfg = statusConfig[tm.accountStatus]
|
||||
const Icon = cfg.icon
|
||||
return (
|
||||
<Tooltip key={idx}>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
<span className={`inline-block h-2 w-2 rounded-full ${cfg.color}`} />
|
||||
<span className="max-w-[180px] truncate">
|
||||
{tm.name || tm.email}
|
||||
</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{tm.email}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{cfg.label}
|
||||
{tm.lastLogin && ` · Last login: ${new Date(tm.lastLogin).toLocaleDateString()}`}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{project.allActivated ? (
|
||||
<CheckCircle2 className="mx-auto h-4 w-4 text-emerald-500" />
|
||||
) : (
|
||||
<AlertCircle className="mx-auto h-4 w-4 text-amber-500" />
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user