feat: applicant onboarding, bulk invite, team management enhancements
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m50s
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m50s
- Add nationality/institution fields to User model with migration - Applicant onboarding wizard (name, photo, nationality, country, institution, bio, project logo, preferences) - Project logo upload from applicant context with team membership verification - APPLICANT redirects in set-password, onboarding, and auth layout - Mask evaluation round names as "Evaluation Round 1/2/..." for applicants - Extend inviteTeamMember with nationality/country/institution/sendInvite fields - Admin getApplicants query with search/filter/pagination - Admin bulkInviteApplicants mutation with token generation and emails - Applicants tab on Members page with bulk select and floating invite bar Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -34,7 +34,7 @@ import { formatRelativeTime } from '@/lib/utils'
|
||||
import { AnimatePresence, motion } from 'motion/react'
|
||||
type RoleValue = 'SUPER_ADMIN' | 'PROGRAM_ADMIN' | 'JURY_MEMBER' | 'MENTOR' | 'OBSERVER'
|
||||
|
||||
type TabKey = 'all' | 'jury' | 'mentors' | 'observers' | 'admins'
|
||||
type TabKey = 'all' | 'jury' | 'mentors' | 'observers' | 'admins' | 'applicants'
|
||||
|
||||
const TAB_ROLES: Record<TabKey, RoleValue[] | undefined> = {
|
||||
all: undefined,
|
||||
@@ -42,6 +42,7 @@ const TAB_ROLES: Record<TabKey, RoleValue[] | undefined> = {
|
||||
mentors: ['MENTOR'],
|
||||
observers: ['OBSERVER'],
|
||||
admins: ['SUPER_ADMIN', 'PROGRAM_ADMIN'],
|
||||
applicants: undefined, // handled separately
|
||||
}
|
||||
|
||||
const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive'> = {
|
||||
@@ -265,6 +266,7 @@ export function MembersContent() {
|
||||
<TabsTrigger value="mentors">Mentors</TabsTrigger>
|
||||
<TabsTrigger value="observers">Observers</TabsTrigger>
|
||||
<TabsTrigger value="admins">Admins</TabsTrigger>
|
||||
<TabsTrigger value="applicants">Applicants</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Search */}
|
||||
@@ -280,8 +282,11 @@ export function MembersContent() {
|
||||
</div>
|
||||
</Tabs>
|
||||
|
||||
{/* Content */}
|
||||
{isLoading ? (
|
||||
{/* Applicants tab */}
|
||||
{tab === 'applicants' && <ApplicantsTabContent search={search} searchInput={searchInput} setSearchInput={setSearchInput} />}
|
||||
|
||||
{/* Content (non-applicant tabs) */}
|
||||
{tab !== 'applicants' && isLoading ? (
|
||||
<MembersSkeleton />
|
||||
) : data && data.users.length > 0 ? (
|
||||
<>
|
||||
@@ -535,7 +540,7 @@ export function MembersContent() {
|
||||
onPageChange={(newPage) => updateParams({ page: String(newPage) })}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
) : tab !== 'applicants' ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Users className="h-12 w-12 text-muted-foreground/50" />
|
||||
@@ -553,7 +558,7 @@ export function MembersContent() {
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{/* Floating bulk invite toolbar */}
|
||||
<AnimatePresence>
|
||||
@@ -602,6 +607,227 @@ export function MembersContent() {
|
||||
)
|
||||
}
|
||||
|
||||
function ApplicantsTabContent({ search, searchInput, setSearchInput }: { search: string; searchInput: string; setSearchInput: (v: string) => void }) {
|
||||
const [page, setPage] = useState(1)
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const { data, isLoading } = trpc.user.getApplicants.useQuery({
|
||||
search: search || undefined,
|
||||
page,
|
||||
perPage: 20,
|
||||
})
|
||||
|
||||
const bulkInvite = trpc.user.bulkInviteApplicants.useMutation({
|
||||
onSuccess: (result) => {
|
||||
const msg = `Sent ${result.sent} invite${result.sent !== 1 ? 's' : ''}`
|
||||
if (result.failed.length > 0) {
|
||||
toast.warning(`${msg}, ${result.failed.length} failed`)
|
||||
} else {
|
||||
toast.success(msg)
|
||||
}
|
||||
setSelectedIds(new Set())
|
||||
utils.user.getApplicants.invalidate()
|
||||
},
|
||||
onError: (error) => toast.error(error.message),
|
||||
})
|
||||
|
||||
const toggleUser = useCallback((id: string) => {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const users = data?.users ?? []
|
||||
const allSelected = users.length > 0 && users.every((u) => selectedIds.has(u.id))
|
||||
const someSelected = users.some((u) => selectedIds.has(u.id)) && !allSelected
|
||||
|
||||
const toggleAll = useCallback(() => {
|
||||
if (allSelected) {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
users.forEach((u) => next.delete(u.id))
|
||||
return next
|
||||
})
|
||||
} else {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
users.forEach((u) => next.add(u.id))
|
||||
return next
|
||||
})
|
||||
}
|
||||
}, [allSelected, users])
|
||||
|
||||
if (isLoading) return <MembersSkeleton />
|
||||
|
||||
if (!data || data.users.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Users className="h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="mt-2 font-medium">No applicants found</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{search ? 'Try adjusting your search' : 'Applicant users will appear here after CSV import or project submission'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Desktop table */}
|
||||
<Card className="hidden md:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-10">
|
||||
<Checkbox
|
||||
checked={allSelected ? true : someSelected ? 'indeterminate' : false}
|
||||
onCheckedChange={toggleAll}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead>Applicant</TableHead>
|
||||
<TableHead>Project</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Last Login</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedIds.has(user.id)}
|
||||
onCheckedChange={() => toggleUser(user.id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{user.name || 'Unnamed'}</p>
|
||||
<p className="text-sm text-muted-foreground">{user.email}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.projectName ? (
|
||||
<span className="text-sm">{user.projectName}</span>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={statusColors[user.status] || 'secondary'}>
|
||||
{statusLabels[user.status] || user.status}
|
||||
</Badge>
|
||||
{user.status === 'NONE' && (
|
||||
<InlineSendInvite userId={user.id} userEmail={user.email} />
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.lastLoginAt ? (
|
||||
<span title={new Date(user.lastLoginAt).toLocaleString()}>
|
||||
{formatRelativeTime(user.lastLoginAt)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">Never</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
{/* Mobile cards */}
|
||||
<div className="space-y-4 md:hidden">
|
||||
{data.users.map((user) => (
|
||||
<Card key={user.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Checkbox
|
||||
checked={selectedIds.has(user.id)}
|
||||
onCheckedChange={() => toggleUser(user.id)}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium">{user.name || 'Unnamed'}</p>
|
||||
<p className="text-sm text-muted-foreground truncate">{user.email}</p>
|
||||
{user.projectName && (
|
||||
<p className="text-sm text-muted-foreground mt-1">{user.projectName}</p>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant={statusColors[user.status] || 'secondary'}>
|
||||
{statusLabels[user.status] || user.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{data.totalPages > 1 && (
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={data.totalPages}
|
||||
total={data.total}
|
||||
perPage={data.perPage}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Floating bulk invite bar */}
|
||||
<AnimatePresence>
|
||||
{selectedIds.size > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50"
|
||||
>
|
||||
<Card className="shadow-lg border-2">
|
||||
<CardContent className="flex items-center gap-3 px-4 py-3">
|
||||
<span className="text-sm font-medium whitespace-nowrap">
|
||||
{selectedIds.size} selected
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => bulkInvite.mutate({ userIds: Array.from(selectedIds) })}
|
||||
disabled={bulkInvite.isPending}
|
||||
className="gap-1.5"
|
||||
>
|
||||
{bulkInvite.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
Send Invites
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedIds(new Set())}
|
||||
disabled={bulkInvite.isPending}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Clear
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function MembersSkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
|
||||
Reference in New Issue
Block a user