Overhaul applicant portal: timeline, evaluations, nav, resources

- Fix programId/competitionId bug in competition timeline
- Add applicantVisibility config to EvaluationConfigSchema (JSONB)
- Add admin UI card for controlling applicant feedback visibility
- Add 6 new tRPC procedures: getNavFlags, getMyCompetitionTimeline,
  getMyEvaluations, getUpcomingDeadlines, getDocumentCompleteness,
  and extend getMyDashboard with hasPassedIntake
- Rewrite competition timeline to show only EVALUATION + Grand Finale,
  synthesize FILTERING rejections, handle manually-created projects
- Dynamic ApplicantNav with conditional Evaluations/Mentoring/Resources
- Dashboard: conditional timeline, jury feedback card, deadlines,
  document completeness, conditional mentor tile
- New /applicant/evaluations page with anonymous jury feedback
- New /applicant/resources pages (clone of jury learning hub)
- Rename /applicant/competitions → /applicant/competition
- Remove broken /applicant/competitions/[windowId] page
- Add permission info banner to team invite dialog

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(applicant)/applicant/competition/page.tsx

@@ -4,14 +4,13 @@ import { useSession } from 'next-auth/react'
 import Link from 'next/link'
 import type { Route } from 'next'
 import { trpc } from '@/lib/trpc/client'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { ApplicantCompetitionTimeline } from '@/components/applicant/competition-timeline'
 import { ArrowLeft, FileText, Calendar } from 'lucide-react'
-import { toast } from 'sonner'
 
-export default function ApplicantCompetitionsPage() {
+export default function ApplicantCompetitionPage() {
   const { data: session } = useSession()
   const { data: myProject, isLoading } = trpc.applicant.getMyDashboard.useQuery(undefined, {
     enabled: !!session,
@@ -26,7 +25,7 @@ export default function ApplicantCompetitionsPage() {
     )
   }
 
-  const competitionId = myProject?.project?.programId
+  const hasProject = !!myProject?.project
 
   return (
     <div className="space-y-6">
@@ -45,7 +44,7 @@ export default function ApplicantCompetitionsPage() {
         </Button>
       </div>
 
-      {!competitionId ? (
+      {!hasProject ? (
         <Card>
           <CardContent className="flex flex-col items-center justify-center py-12">
             <FileText className="h-12 w-12 text-muted-foreground/50 mb-4" />
@@ -59,7 +58,7 @@ export default function ApplicantCompetitionsPage() {
       ) : (
         <div className="grid gap-6 lg:grid-cols-3">
           <div className="lg:col-span-2">
-            <ApplicantCompetitionTimeline competitionId={competitionId} />
+            <ApplicantCompetitionTimeline />
           </div>
           <div className="space-y-4">
             <Card>

src/app/(applicant)/applicant/competitions/[windowId]/page.tsx

@@ -1,180 +0,0 @@
-'use client'
-
-import { useParams, useRouter } from 'next/navigation'
-import Link from 'next/link'
-import type { Route } from 'next'
-import { trpc } from '@/lib/trpc/client'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { FileUploadSlot } from '@/components/applicant/file-upload-slot'
-import { ArrowLeft, Lock, Clock, Calendar, AlertCircle } from 'lucide-react'
-import { toast } from 'sonner'
-import { useState } from 'react'
-
-export default function ApplicantSubmissionWindowPage() {
-  const params = useParams()
-  const router = useRouter()
-  const windowId = params.windowId as string
-
-  const [uploadedFiles, setUploadedFiles] = useState<Record<string, File>>({})
-
-  const { data: window, isLoading } = trpc.round.getById.useQuery(
-    { id: windowId },
-    { enabled: !!windowId }
-  )
-
-  const { data: deadlineStatus } = trpc.round.checkDeadline.useQuery(
-    { windowId },
-    {
-      enabled: !!windowId,
-      refetchInterval: 60000, // Refresh every minute
-    }
-  )
-
-  const handleUpload = (requirementId: string, file: File) => {
-    setUploadedFiles(prev => ({ ...prev, [requirementId]: file }))
-    toast.success(`File "${file.name}" selected for upload`)
-    // In a real implementation, this would trigger file upload
-  }
-
-  if (isLoading) {
-    return (
-      <div className="space-y-6">
-        <Skeleton className="h-8 w-64" />
-        <Skeleton className="h-96" />
-      </div>
-    )
-  }
-
-  if (!window) {
-    return (
-      <div className="space-y-6">
-        <Button variant="ghost" size="sm" asChild>
-          <Link href={'/applicant/competitions' as Route}>
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back
-          </Link>
-        </Button>
-        <Card>
-          <CardContent className="flex flex-col items-center justify-center py-12">
-            <AlertCircle className="h-12 w-12 text-muted-foreground/50 mb-3" />
-            <p className="font-medium">Submission window not found</p>
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-
-  const isLocked = deadlineStatus?.status === 'LOCKED' || deadlineStatus?.status === 'CLOSED'
-  const deadline = window.windowCloseAt
-    ? new Date(window.windowCloseAt)
-    : null
-  const timeRemaining = deadline ? deadline.getTime() - Date.now() : null
-  const daysRemaining = timeRemaining ? Math.floor(timeRemaining / (1000 * 60 * 60 * 24)) : null
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" size="sm" asChild>
-          <Link href={'/applicant/competitions' as Route}>
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back
-          </Link>
-        </Button>
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">{window.name}</h1>
-          <p className="text-muted-foreground mt-1">
-            Upload required documents for this submission window
-          </p>
-        </div>
-      </div>
-
-      {/* Deadline card */}
-      {deadline && (
-        <Card className={isLocked ? 'border-red-200 bg-red-50/50' : 'border-l-4 border-l-amber-500'}>
-          <CardContent className="flex items-start gap-3 p-4">
-            {isLocked ? (
-              <>
-                <Lock className="h-5 w-5 text-red-600 shrink-0 mt-0.5" />
-                <div className="flex-1">
-                  <p className="font-medium text-sm text-red-900">Submission Window Closed</p>
-                  <p className="text-sm text-red-700 mt-1">
-                    This submission window closed on {deadline.toLocaleDateString()}. No further
-                    uploads are allowed.
-                  </p>
-                </div>
-              </>
-            ) : (
-              <>
-                <Clock className="h-5 w-5 text-amber-600 shrink-0 mt-0.5" />
-                <div className="flex-1">
-                  <p className="font-medium text-sm">Deadline Countdown</p>
-                  <div className="flex items-baseline gap-2 mt-1">
-                    <span className="text-2xl font-bold tabular-nums text-amber-600">
-                      {daysRemaining !== null ? daysRemaining : '—'}
-                    </span>
-                    <span className="text-sm text-muted-foreground">
-                      day{daysRemaining !== 1 ? 's' : ''} remaining
-                    </span>
-                  </div>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Due: {deadline.toLocaleString()}
-                  </p>
-                </div>
-              </>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* File requirements */}
-      <Card>
-        <CardHeader>
-          <CardTitle>File Requirements</CardTitle>
-          <CardDescription>
-            Upload the required files below. {isLocked && 'Viewing only - window is closed.'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* File requirements would be fetched separately in a real implementation */}
-          {false ? (
-            [].map((req: any) => (
-              <FileUploadSlot
-                key={req.id}
-                requirement={{
-                  id: req.id,
-                  label: req.label,
-                  description: req.description,
-                  mimeTypes: req.mimeTypes || [],
-                  maxSizeMb: req.maxSizeMb,
-                  required: req.required || false,
-                }}
-                isLocked={isLocked}
-                onUpload={(file) => handleUpload(req.id, file)}
-              />
-            ))
-          ) : (
-            <div className="text-center py-8">
-              <Calendar className="h-12 w-12 text-muted-foreground/50 mx-auto mb-3" />
-              <p className="text-sm text-muted-foreground">
-                No file requirements defined for this window
-              </p>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {!isLocked && (
-        <div className="flex justify-end gap-3">
-          <Button variant="outline">Save Draft</Button>
-          <Button className="bg-brand-blue hover:bg-brand-blue-light">
-            Submit All Files
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}

src/app/(applicant)/applicant/evaluations/page.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { trpc } from '@/lib/trpc/client'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Star, MessageSquare } from 'lucide-react'
+
+export default function ApplicantEvaluationsPage() {
+  const { data: rounds, isLoading } = trpc.applicant.getMyEvaluations.useQuery()
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold">Jury Feedback</h1>
+          <p className="text-muted-foreground">Anonymous evaluations from jury members</p>
+        </div>
+        <div className="space-y-4">
+          {[1, 2].map((i) => (
+            <Card key={i}>
+              <CardContent className="py-6">
+                <Skeleton className="h-6 w-48 mb-4" />
+                <Skeleton className="h-24 w-full" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  const hasEvaluations = rounds && rounds.length > 0
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Jury Feedback</h1>
+        <p className="text-muted-foreground">
+          Anonymous evaluations from jury members
+        </p>
+      </div>
+
+      {!hasEvaluations ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Star className="h-12 w-12 text-muted-foreground/50 mb-4" />
+            <h3 className="text-lg font-medium mb-2">No Evaluations Available</h3>
+            <p className="text-muted-foreground text-center max-w-md">
+              Evaluations will appear here once jury review is complete and results are published.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-6">
+          {rounds.map((round) => (
+            <Card key={round.roundId}>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>{round.roundName}</CardTitle>
+                  <Badge variant="secondary">
+                    {round.evaluationCount} evaluation{round.evaluationCount !== 1 ? 's' : ''}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {round.evaluations.map((ev, idx) => (
+                  <div
+                    key={ev.id}
+                    className="rounded-lg border p-4 space-y-3"
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="font-medium text-sm">
+                        Evaluator #{idx + 1}
+                      </span>
+                      {ev.submittedAt && (
+                        <span className="text-xs text-muted-foreground">
+                          {new Date(ev.submittedAt).toLocaleDateString()}
+                        </span>
+                      )}
+                    </div>
+
+                    {ev.globalScore !== null && (
+                      <div className="flex items-center gap-2">
+                        <Star className="h-4 w-4 text-yellow-500" />
+                        <span className="text-lg font-semibold">{ev.globalScore}</span>
+                        <span className="text-sm text-muted-foreground">/ 100</span>
+                      </div>
+                    )}
+
+                    {ev.criterionScores && ev.criteria && (
+                      <div className="space-y-2">
+                        <p className="text-sm font-medium text-muted-foreground">Criterion Scores</p>
+                        <div className="grid gap-2">
+                          {(() => {
+                            const criteria = ev.criteria as Array<{ id?: string; label?: string; name?: string; maxScore?: number }>
+                            const scores = ev.criterionScores as Record<string, number>
+                            return criteria
+                              .filter((c) => c.id || c.label || c.name)
+                              .map((c, ci) => {
+                                const key = c.id || String(ci)
+                                const score = scores[key]
+                                return (
+                                  <div key={ci} className="flex items-center justify-between text-sm">
+                                    <span>{c.label || c.name || `Criterion ${ci + 1}`}</span>
+                                    <span className="font-medium">
+                                      {score !== undefined ? score : '—'}
+                                      {c.maxScore ? ` / ${c.maxScore}` : ''}
+                                    </span>
+                                  </div>
+                                )
+                              })
+                          })()}
+                        </div>
+                      </div>
+                    )}
+
+                    {ev.feedbackText && (
+                      <div className="space-y-1.5">
+                        <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                          <MessageSquare className="h-3.5 w-3.5" />
+                          Written Feedback
+                        </div>
+                        <blockquote className="border-l-2 border-muted pl-4 text-sm italic text-muted-foreground">
+                          {ev.feedbackText}
+                        </blockquote>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          ))}
+
+          <p className="text-xs text-muted-foreground text-center">
+            Evaluator identities are kept confidential.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

src/app/(applicant)/applicant/page.tsx

@@ -9,25 +9,26 @@ import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { StatusTracker } from '@/components/shared/status-tracker'
+import { CompetitionTimelineSidebar } from '@/components/applicant/competition-timeline'
 import { AnimatedCard } from '@/components/shared/animated-container'
 import {
   FileText,
   Calendar,
   Clock,
-  AlertCircle,
   CheckCircle,
   Users,
   Crown,
   MessageSquare,
   Upload,
   ArrowRight,
+  Star,
+  AlertCircle,
 } from 'lucide-react'
 
 const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive' | 'warning'> = {
@@ -49,6 +50,18 @@ export default function ApplicantDashboardPage() {
     enabled: isAuthenticated,
   })
 
+  const { data: deadlines } = trpc.applicant.getUpcomingDeadlines.useQuery(undefined, {
+    enabled: isAuthenticated,
+  })
+
+  const { data: docCompleteness } = trpc.applicant.getDocumentCompleteness.useQuery(undefined, {
+    enabled: isAuthenticated,
+  })
+
+  const { data: evaluations } = trpc.applicant.getMyEvaluations.useQuery(undefined, {
+    enabled: isAuthenticated,
+  })
+
   if (sessionStatus === 'loading' || isLoading) {
     return (
       <div className="space-y-6">
@@ -98,10 +111,11 @@ export default function ApplicantDashboardPage() {
     )
   }
 
-  const { project, timeline, currentStatus, openRounds } = data
+  const { project, timeline, currentStatus, openRounds, hasPassedIntake } = data
   const isDraft = !project.submittedAt
   const programYear = project.program?.year
   const programName = project.program?.name
+  const totalEvaluations = evaluations?.reduce((sum, r) => sum + r.evaluationCount, 0) ?? 0
 
   return (
     <div className="space-y-6">
@@ -213,7 +227,7 @@ export default function ApplicantDashboardPage() {
 
           {/* Quick actions */}
           <AnimatedCard index={1}>
-            <div className="grid gap-4 sm:grid-cols-3">
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               <Link href={"/applicant/documents" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/30 hover:bg-blue-500/5">
                 <div className="rounded-xl bg-blue-500/10 p-2.5 transition-colors group-hover:bg-blue-500/20">
                   <Upload className="h-5 w-5 text-blue-600 dark:text-blue-400" />
@@ -240,41 +254,108 @@ export default function ApplicantDashboardPage() {
                 <ArrowRight className="h-4 w-4 text-muted-foreground" />
               </Link>
 
-              <Link href={"/applicant/mentor" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-green-500/30 hover:bg-green-500/5">
-                <div className="rounded-xl bg-green-500/10 p-2.5 transition-colors group-hover:bg-green-500/20">
-                  <MessageSquare className="h-5 w-5 text-green-600 dark:text-green-400" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium">Mentor</p>
-                  <p className="text-xs text-muted-foreground">
-                    {project.mentorAssignment?.mentor?.name || 'Not assigned'}
-                  </p>
-                </div>
-                <ArrowRight className="h-4 w-4 text-muted-foreground" />
-              </Link>
+              {project.mentorAssignment && (
+                <Link href={"/applicant/mentor" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-green-500/30 hover:bg-green-500/5">
+                  <div className="rounded-xl bg-green-500/10 p-2.5 transition-colors group-hover:bg-green-500/20">
+                    <MessageSquare className="h-5 w-5 text-green-600 dark:text-green-400" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium">Mentor</p>
+                    <p className="text-xs text-muted-foreground">
+                      {project.mentorAssignment.mentor?.name || 'Assigned'}
+                    </p>
+                  </div>
+                  <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                </Link>
+              )}
             </div>
           </AnimatedCard>
+
+          {/* Document Completeness */}
+          {docCompleteness && docCompleteness.length > 0 && (
+            <AnimatedCard index={2}>
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <FileText className="h-5 w-5" />
+                    Document Progress
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {docCompleteness.map((dc) => (
+                    <div key={dc.roundId}>
+                      <div className="flex items-center justify-between text-sm mb-1.5">
+                        <span className="font-medium">{dc.roundName}</span>
+                        <span className="text-muted-foreground">
+                          {dc.uploaded}/{dc.required} files
+                        </span>
+                      </div>
+                      <div className="h-2 rounded-full bg-muted overflow-hidden">
+                        <div
+                          className="h-full rounded-full bg-primary transition-all"
+                          style={{ width: `${dc.required > 0 ? Math.round((dc.uploaded / dc.required) * 100) : 0}%` }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            </AnimatedCard>
+          )}
         </div>
 
         {/* Sidebar */}
         <div className="space-y-6">
-          {/* Status timeline */}
-          <AnimatedCard index={2}>
+          {/* Competition timeline or status tracker */}
+          <AnimatedCard index={3}>
           <Card>
             <CardHeader>
-              <CardTitle>Status Timeline</CardTitle>
+              <CardTitle>
+                {hasPassedIntake ? 'Competition Progress' : 'Status Timeline'}
+              </CardTitle>
             </CardHeader>
             <CardContent>
-              <StatusTracker
-                timeline={timeline}
-                currentStatus={currentStatus || 'SUBMITTED'}
-              />
+              {hasPassedIntake ? (
+                <CompetitionTimelineSidebar />
+              ) : (
+                <StatusTracker
+                  timeline={timeline}
+                  currentStatus={currentStatus || 'SUBMITTED'}
+                />
+              )}
             </CardContent>
           </Card>
           </AnimatedCard>
 
+          {/* Jury Feedback Card */}
+          {totalEvaluations > 0 && (
+            <AnimatedCard index={4}>
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="flex items-center gap-2">
+                      <Star className="h-5 w-5" />
+                      Jury Feedback
+                    </CardTitle>
+                    <Button variant="ghost" size="sm" asChild>
+                      <Link href={"/applicant/evaluations" as Route}>
+                        View All
+                      </Link>
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-muted-foreground">
+                    {totalEvaluations} evaluation{totalEvaluations !== 1 ? 's' : ''} available from{' '}
+                    {evaluations?.length ?? 0} round{(evaluations?.length ?? 0) !== 1 ? 's' : ''}.
+                  </p>
+                </CardContent>
+              </Card>
+            </AnimatedCard>
+          )}
+
           {/* Team overview */}
-          <AnimatedCard index={3}>
+          <AnimatedCard index={5}>
           <Card>
             <CardHeader>
               <div className="flex items-center justify-between">
@@ -326,8 +407,32 @@ export default function ApplicantDashboardPage() {
           </Card>
           </AnimatedCard>
 
+          {/* Upcoming Deadlines */}
+          {deadlines && deadlines.length > 0 && (
+            <AnimatedCard index={6}>
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <AlertCircle className="h-5 w-5" />
+                    Upcoming Deadlines
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {deadlines.map((dl, i) => (
+                    <div key={i} className="flex items-center justify-between text-sm">
+                      <span className="font-medium truncate mr-2">{dl.roundName}</span>
+                      <span className="text-muted-foreground shrink-0">
+                        {new Date(dl.windowCloseAt).toLocaleDateString()}
+                      </span>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            </AnimatedCard>
+          )}
+
           {/* Key dates */}
-          <AnimatedCard index={4}>
+          <AnimatedCard index={7}>
           <Card>
             <CardHeader>
               <CardTitle>Key Dates</CardTitle>
@@ -347,12 +452,6 @@ export default function ApplicantDashboardPage() {
                 <span className="text-muted-foreground">Last Updated</span>
                 <span>{new Date(project.updatedAt).toLocaleDateString()}</span>
               </div>
-              {openRounds.length > 0 && openRounds[0].windowCloseAt && (
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">Deadline</span>
-                  <span>{new Date(openRounds[0].windowCloseAt).toLocaleDateString()}</span>
-                </div>
-              )}
             </CardContent>
           </Card>
           </AnimatedCard>

src/app/(applicant)/applicant/resources/[id]/page.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { trpc } from '@/lib/trpc/client'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import {
+  ArrowLeft,
+  Download,
+  ExternalLink,
+  AlertCircle,
+} from 'lucide-react'
+
+const ResourceRenderer = dynamic(
+  () => import('@/components/shared/resource-renderer').then((mod) => mod.ResourceRenderer),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="mx-auto max-w-3xl min-h-[200px] rounded-lg border bg-muted/20 animate-pulse" />
+    ),
+  }
+)
+
+export default function ApplicantResourceDetailPage() {
+  const params = useParams()
+  const resourceId = params.id as string
+
+  const { data: resource, isLoading, error } = trpc.learningResource.get.useQuery({ id: resourceId })
+  const logAccess = trpc.learningResource.logAccess.useMutation()
+  const utils = trpc.useUtils()
+
+  // Log access on mount
+  useEffect(() => {
+    if (resourceId) {
+      logAccess.mutate({ id: resourceId })
+    }
+  }, [resourceId])
+
+  const handleDownload = async () => {
+    try {
+      const { url } = await utils.learningResource.getDownloadUrl.fetch({ id: resourceId })
+      window.open(url, '_blank')
+    } catch {
+      // silently fail
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-20" />
+        <div className="mx-auto max-w-3xl space-y-4">
+          <Skeleton className="h-10 w-2/3" />
+          <Skeleton className="h-6 w-1/3" />
+          <Skeleton className="h-px w-full" />
+          <Skeleton className="h-64 w-full" />
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !resource) {
+    return (
+      <div className="space-y-6">
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Resource not found</AlertTitle>
+          <AlertDescription>
+            This resource may have been removed or you don&apos;t have access.
+          </AlertDescription>
+        </Alert>
+        <Button asChild>
+          <Link href="/applicant/resources">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Resources
+          </Link>
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <Button variant="ghost" asChild className="-ml-4">
+          <Link href="/applicant/resources">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Resources
+          </Link>
+        </Button>
+        <div className="flex items-center gap-2">
+          {resource.externalUrl && (
+            <a href={resource.externalUrl} target="_blank" rel="noopener noreferrer">
+              <Button variant="outline" size="sm">
+                <ExternalLink className="mr-2 h-4 w-4" />
+                Open Link
+              </Button>
+            </a>
+          )}
+          {resource.objectKey && (
+            <Button variant="outline" size="sm" onClick={handleDownload}>
+              <Download className="mr-2 h-4 w-4" />
+              Download
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      <ResourceRenderer
+        title={resource.title}
+        description={resource.description}
+        contentJson={resource.contentJson}
+      />
+    </div>
+  )
+}

src/app/(applicant)/applicant/resources/page.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { useState } from 'react'
+import type { Route } from 'next'
+import Link from 'next/link'
+import { trpc } from '@/lib/trpc/client'
+import {
+  Card,
+  CardContent,
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  FileText,
+  Download,
+  ExternalLink,
+  BookOpen,
+} from 'lucide-react'
+
+export default function ApplicantResourcesPage() {
+  const [downloadingId, setDownloadingId] = useState<string | null>(null)
+
+  const { data, isLoading } = trpc.learningResource.myResources.useQuery({})
+  const utils = trpc.useUtils()
+
+  const handleDownload = async (resourceId: string) => {
+    setDownloadingId(resourceId)
+    try {
+      const { url } = await utils.learningResource.getDownloadUrl.fetch({ id: resourceId })
+      window.open(url, '_blank')
+    } catch (error) {
+      console.error('Download failed:', error)
+    } finally {
+      setDownloadingId(null)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold">Resources</h1>
+          <p className="text-muted-foreground">
+            Resources and materials for applicants
+          </p>
+        </div>
+        <div className="grid gap-4">
+          {[1, 2, 3].map((i) => (
+            <Card key={i}>
+              <CardContent className="flex items-center gap-4 py-4">
+                <Skeleton className="h-10 w-10 rounded-lg" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="h-5 w-48" />
+                  <Skeleton className="h-4 w-32" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  const resources = data?.resources || []
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Resources</h1>
+        <p className="text-muted-foreground">
+          Resources and materials for applicants
+        </p>
+      </div>
+
+      {resources.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <BookOpen className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium mb-2">No resources available</h3>
+            <p className="text-muted-foreground">
+              Check back later for learning materials
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-4">
+          {resources.map((resource) => {
+            const isDownloading = downloadingId === resource.id
+            const hasContent = !!resource.contentJson
+
+            return (
+              <Card key={resource.id}>
+                <CardContent className="flex items-center gap-4 py-4">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted shrink-0">
+                    <FileText className="h-5 w-5" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-medium">{resource.title}</h3>
+                    {resource.description && (
+                      <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                        {resource.description}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {hasContent && (
+                      <Link href={`/applicant/resources/${resource.id}` as Route}>
+                        <Button variant="outline" size="sm">
+                          <BookOpen className="mr-2 h-4 w-4" />
+                          Read
+                        </Button>
+                      </Link>
+                    )}
+                    {resource.externalUrl && (
+                      <a
+                        href={resource.externalUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button variant="outline" size="sm">
+                          <ExternalLink className="mr-2 h-4 w-4" />
+                          Open
+                        </Button>
+                      </a>
+                    )}
+                    {resource.objectKey && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDownload(resource.id)}
+                        disabled={isDownloading}
+                      >
+                        <Download className="mr-2 h-4 w-4" />
+                        {isDownloading ? 'Loading...' : 'Download'}
+                      </Button>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

src/app/(applicant)/applicant/team/page.tsx

@@ -280,6 +280,15 @@ export default function ApplicantTeamPage() {
                     />
                   </div>
                 </div>
+                <div className="rounded-lg bg-muted/50 border p-3 text-sm">
+                  <p className="font-medium mb-1">What invited members can do:</p>
+                  <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+                    <li>Upload documents for submission rounds</li>
+                    <li>View project status and competition progress</li>
+                    <li>Receive email notifications about round updates</li>
+                  </ul>
+                  <p className="mt-2 text-muted-foreground">Only the Team Lead can invite or remove members.</p>
+                </div>
                 <DialogFooter>
                   <Button
                     type="button"