feat: applicant onboarding, bulk invite, team management enhancements

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

src/components/admin/members-content.tsx

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

src/components/shared/project-logo-upload.tsx

@@ -0,0 +1,279 @@
+'use client'
+
+import { useState, useRef, useCallback } from 'react'
+import Cropper from 'react-easy-crop'
+import type { Area } from 'react-easy-crop'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Slider } from '@/components/ui/slider'
+import { Upload, Loader2, ZoomIn, ImageIcon } from 'lucide-react'
+import { trpc } from '@/lib/trpc/client'
+import { toast } from 'sonner'
+
+type ProjectLogoUploadProps = {
+  projectId: string
+  currentLogoUrl?: string | null
+  onUploadComplete?: () => void
+}
+
+const MAX_SIZE_MB = 5
+const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+
+async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<Blob> {
+  const image = new Image()
+  image.crossOrigin = 'anonymous'
+
+  await new Promise<void>((resolve, reject) => {
+    image.onload = () => resolve()
+    image.onerror = reject
+    image.src = imageSrc
+  })
+
+  const canvas = document.createElement('canvas')
+  canvas.width = pixelCrop.width
+  canvas.height = pixelCrop.height
+  const ctx = canvas.getContext('2d')!
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height
+  )
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob)
+        else reject(new Error('Canvas toBlob failed'))
+      },
+      'image/png',
+      0.9
+    )
+  })
+}
+
+export function ProjectLogoUpload({
+  projectId,
+  currentLogoUrl,
+  onUploadComplete,
+}: ProjectLogoUploadProps) {
+  const [open, setOpen] = useState(false)
+  const [imageSrc, setImageSrc] = useState<string | null>(null)
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
+  const [isUploading, setIsUploading] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const getUploadUrl = trpc.applicant.getProjectLogoUploadUrl.useMutation()
+  const confirmUpload = trpc.applicant.confirmProjectLogo.useMutation()
+
+  const onCropComplete = useCallback((_croppedArea: Area, croppedPixels: Area) => {
+    setCroppedAreaPixels(croppedPixels)
+  }, [])
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      toast.error('Invalid file type. Please upload a JPEG, PNG, GIF, or WebP image.')
+      return
+    }
+
+    if (file.size > MAX_SIZE_MB * 1024 * 1024) {
+      toast.error(`File too large. Maximum size is ${MAX_SIZE_MB}MB.`)
+      return
+    }
+
+    const reader = new FileReader()
+    reader.onload = (ev) => {
+      setImageSrc(ev.target?.result as string)
+      setCrop({ x: 0, y: 0 })
+      setZoom(1)
+    }
+    reader.readAsDataURL(file)
+  }, [])
+
+  const handleUpload = async () => {
+    if (!imageSrc || !croppedAreaPixels) return
+
+    setIsUploading(true)
+    try {
+      const croppedBlob = await getCroppedImg(imageSrc, croppedAreaPixels)
+
+      const { uploadUrl, key, providerType } = await getUploadUrl.mutateAsync({
+        projectId,
+        fileName: 'logo.png',
+        contentType: 'image/png',
+      })
+
+      const uploadResponse = await fetch(uploadUrl, {
+        method: 'PUT',
+        body: croppedBlob,
+        headers: { 'Content-Type': 'image/png' },
+      })
+
+      if (!uploadResponse.ok) {
+        throw new Error('Failed to upload file')
+      }
+
+      await confirmUpload.mutateAsync({ projectId, key, providerType })
+
+      toast.success('Project logo updated')
+      setOpen(false)
+      resetState()
+      onUploadComplete?.()
+    } catch (error) {
+      console.error('Upload error:', error)
+      toast.error('Failed to upload logo. Please try again.')
+    } finally {
+      setIsUploading(false)
+    }
+  }
+
+  const resetState = () => {
+    setImageSrc(null)
+    setCrop({ x: 0, y: 0 })
+    setZoom(1)
+    setCroppedAreaPixels(null)
+    if (fileInputRef.current) fileInputRef.current.value = ''
+  }
+
+  const handleCancel = () => {
+    resetState()
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="relative mx-auto flex h-24 w-24 items-center justify-center rounded-xl border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 transition-colors cursor-pointer overflow-hidden bg-muted"
+        >
+          {currentLogoUrl ? (
+            <img src={currentLogoUrl} alt="Project logo" className="h-full w-full object-cover" />
+          ) : (
+            <ImageIcon className="h-8 w-8 text-muted-foreground/50" />
+          )}
+        </button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Project Logo</DialogTitle>
+          <DialogDescription>
+            {imageSrc
+              ? 'Drag to reposition and use the slider to zoom.'
+              : 'Upload a logo for your project. Allowed formats: JPEG, PNG, GIF, WebP.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {imageSrc ? (
+            <>
+              <div className="relative w-full h-64 bg-muted rounded-lg overflow-hidden">
+                <Cropper
+                  image={imageSrc}
+                  crop={crop}
+                  zoom={zoom}
+                  aspect={1}
+                  showGrid={false}
+                  onCropChange={setCrop}
+                  onCropComplete={onCropComplete}
+                  onZoomChange={setZoom}
+                />
+              </div>
+
+              <div className="flex items-center gap-3 px-1">
+                <ZoomIn className="h-4 w-4 text-muted-foreground shrink-0" />
+                <Slider
+                  value={[zoom]}
+                  min={1}
+                  max={3}
+                  step={0.1}
+                  onValueChange={([val]) => setZoom(val)}
+                  className="flex-1"
+                />
+              </div>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  resetState()
+                  fileInputRef.current?.click()
+                }}
+                className="w-full"
+              >
+                Choose a different image
+              </Button>
+            </>
+          ) : (
+            <>
+              {currentLogoUrl && (
+                <div className="flex justify-center">
+                  <img
+                    src={currentLogoUrl}
+                    alt="Current logo"
+                    className="h-24 w-24 rounded-xl object-cover border"
+                  />
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="logo">Select image</Label>
+                <Input
+                  ref={fileInputRef}
+                  id="logo"
+                  type="file"
+                  accept={ALLOWED_TYPES.join(',')}
+                  onChange={handleFileSelect}
+                  className="cursor-pointer"
+                />
+              </div>
+            </>
+          )}
+        </div>
+
+        <DialogFooter className="flex-col gap-2 sm:flex-row">
+          <div className="flex gap-2 w-full sm:w-auto">
+            <Button variant="outline" onClick={handleCancel} className="flex-1">
+              Cancel
+            </Button>
+            {imageSrc && (
+              <Button
+                onClick={handleUpload}
+                disabled={!croppedAreaPixels || isUploading}
+                className="flex-1"
+              >
+                {isUploading ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Upload className="mr-2 h-4 w-4" />
+                )}
+                Upload
+              </Button>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}