Comprehensive platform audit: security, UX, performance, and visual polish

Phase 1: Security - status transition validation, Zod tightening, DB indexes, transactions

Phase 2: Admin UX - search/filter for awards, learning, partners pages

Phase 3: Dashboard - Recent Activity feed, Pending Actions card, quick actions

Phase 4: Jury - assignments progress/urgency, autosave indicator, divergence highlighting

Phase 5: Portals - observer charts, mentor search, login/onboarding polish

Phase 6: Messages preview dialog, CsvExportDialog with column selection

Phase 7: Performance - query optimizations, loading skeletons, useDebounce hook

Phase 8: Visual - AnimatedCard, hover effects, StatusBadge, empty state CTAs

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

src/app/(admin)/admin/audit/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useCallback } from 'react'
 import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
 import {
@@ -53,6 +53,7 @@ import {
   ArrowLeftRight,
 } from 'lucide-react'
 import { Switch } from '@/components/ui/switch'
+import { CsvExportDialog } from '@/components/shared/csv-export-dialog'
 import { formatDate } from '@/lib/utils'
 import { cn } from '@/lib/utils'
 
@@ -163,7 +164,7 @@ export default function AuditLogPage() {
     retry: false,
   })
 
-  // Export mutation
+  // Export query
   const exportLogs = trpc.export.auditLogs.useQuery(
     {
       userId: filters.userId || undefined,
@@ -176,41 +177,18 @@ export default function AuditLogPage() {
     },
     { enabled: false }
   )
+  const [showExportDialog, setShowExportDialog] = useState(false)
 
   // Handle export
-  const handleExport = async () => {
-    const result = await exportLogs.refetch()
-    if (result.data) {
-      const { data: rows, columns } = result.data
-
-      // Build CSV
-      const csvContent = [
-        columns.join(','),
-        ...rows.map((row) =>
-          columns
-            .map((col) => {
-              const value = row[col as keyof typeof row]
-              // Escape quotes and wrap in quotes if contains comma
-              if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
-                return `"${value.replace(/"/g, '""')}"`
-              }
-              return value ?? ''
-            })
-            .join(',')
-        ),
-      ].join('\n')
-
-      // Download
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
-      const url = URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = url
-      link.download = `audit-logs-${new Date().toISOString().split('T')[0]}.csv`
-      link.click()
-      URL.revokeObjectURL(url)
-    }
+  const handleExport = () => {
+    setShowExportDialog(true)
   }
 
+  const handleRequestExportData = useCallback(async () => {
+    const result = await exportLogs.refetch()
+    return result.data ?? undefined
+  }, [exportLogs])
+
   // Reset filters
   const resetFilters = () => {
     setFilters({
@@ -701,6 +679,16 @@ export default function AuditLogPage() {
           </CardContent>
         </Card>
       )}
+
+      {/* CSV Export Dialog with Column Selection */}
+      <CsvExportDialog
+        open={showExportDialog}
+        onOpenChange={setShowExportDialog}
+        exportData={exportLogs.data ?? undefined}
+        isLoading={exportLogs.isFetching}
+        filename="audit-logs"
+        onRequestData={handleRequestExportData}
+      />
     </div>
   )
 }

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { use, useState } from 'react'
+import { use, useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { trpc } from '@/lib/trpc/client'
@@ -53,9 +53,21 @@ import {
 } from '@/components/ui/dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Input } from '@/components/ui/input'
+import { Progress } from '@/components/ui/progress'
 import { UserAvatar } from '@/components/shared/user-avatar'
 import { Pagination } from '@/components/shared/pagination'
 import { toast } from 'sonner'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
 import {
   ArrowLeft,
   Trophy,
@@ -73,6 +85,9 @@ import {
   Trash2,
   Plus,
   Search,
+  Vote,
+  ChevronDown,
+  AlertCircle,
 } from 'lucide-react'
 
 const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
@@ -83,6 +98,41 @@ const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'o
   ARCHIVED: 'secondary',
 }
 
+// Status workflow steps for the step indicator
+const WORKFLOW_STEPS = [
+  { key: 'DRAFT', label: 'Draft' },
+  { key: 'NOMINATIONS_OPEN', label: 'Nominations' },
+  { key: 'VOTING_OPEN', label: 'Voting' },
+  { key: 'CLOSED', label: 'Closed' },
+] as const
+
+function getStepIndex(status: string): number {
+  const idx = WORKFLOW_STEPS.findIndex((s) => s.key === status)
+  return idx >= 0 ? idx : (status === 'ARCHIVED' ? 3 : 0)
+}
+
+function ConfidenceBadge({ confidence }: { confidence: number }) {
+  if (confidence > 0.8) {
+    return (
+      <Badge variant="outline" className="border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-xs tabular-nums">
+        {Math.round(confidence * 100)}%
+      </Badge>
+    )
+  }
+  if (confidence >= 0.5) {
+    return (
+      <Badge variant="outline" className="border-amber-300 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-400 text-xs tabular-nums">
+        {Math.round(confidence * 100)}%
+      </Badge>
+    )
+  }
+  return (
+    <Badge variant="outline" className="border-red-300 bg-red-50 text-red-700 dark:border-red-700 dark:bg-red-950/30 dark:text-red-400 text-xs tabular-nums">
+      {Math.round(confidence * 100)}%
+    </Badge>
+  )
+}
+
 export default function AwardDetailPage({
   params,
 }: {
@@ -111,6 +161,53 @@ export default function AwardDetailPage({
     { enabled: !!award?.programId }
   )
 
+  const [isPollingJob, setIsPollingJob] = useState(false)
+  const pollingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  // Eligibility job polling
+  const { data: jobStatus, refetch: refetchJobStatus } =
+    trpc.specialAward.getEligibilityJobStatus.useQuery(
+      { awardId },
+      { enabled: isPollingJob }
+    )
+
+  useEffect(() => {
+    if (!isPollingJob) return
+
+    pollingIntervalRef.current = setInterval(() => {
+      refetchJobStatus()
+    }, 2000)
+
+    return () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current)
+        pollingIntervalRef.current = null
+      }
+    }
+  }, [isPollingJob, refetchJobStatus])
+
+  // React to job status changes
+  useEffect(() => {
+    if (!jobStatus || !isPollingJob) return
+
+    if (jobStatus.eligibilityJobStatus === 'COMPLETED') {
+      setIsPollingJob(false)
+      toast.success('Eligibility processing completed')
+      refetchEligibility()
+      refetch()
+    } else if (jobStatus.eligibilityJobStatus === 'FAILED') {
+      setIsPollingJob(false)
+      toast.error(jobStatus.eligibilityJobError || 'Eligibility processing failed')
+    }
+  }, [jobStatus, isPollingJob, refetchEligibility, refetch])
+
+  // Check on mount if there's an ongoing job
+  useEffect(() => {
+    if (award?.eligibilityJobStatus === 'PROCESSING' || award?.eligibilityJobStatus === 'PENDING') {
+      setIsPollingJob(true)
+    }
+  }, [award?.eligibilityJobStatus])
+
   const updateStatus = trpc.specialAward.updateStatus.useMutation()
   const runEligibility = trpc.specialAward.runEligibility.useMutation()
   const setEligibility = trpc.specialAward.setEligibility.useMutation()
@@ -123,6 +220,7 @@ export default function AwardDetailPage({
   const [includeSubmitted, setIncludeSubmitted] = useState(true)
   const [addProjectDialogOpen, setAddProjectDialogOpen] = useState(false)
   const [projectSearchQuery, setProjectSearchQuery] = useState('')
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
 
   const handleStatusChange = async (
     status: 'DRAFT' | 'NOMINATIONS_OPEN' | 'VOTING_OPEN' | 'CLOSED' | 'ARCHIVED'
@@ -140,15 +238,12 @@ export default function AwardDetailPage({
 
   const handleRunEligibility = async () => {
     try {
-      const result = await runEligibility.mutateAsync({ awardId, includeSubmitted })
-      toast.success(
-        `Eligibility run: ${result.eligible} eligible, ${result.ineligible} ineligible`
-      )
-      refetchEligibility()
-      refetch()
+      await runEligibility.mutateAsync({ awardId, includeSubmitted })
+      toast.success('Eligibility processing started')
+      setIsPollingJob(true)
     } catch (error) {
       toast.error(
-        error instanceof Error ? error.message : 'Failed to run eligibility'
+        error instanceof Error ? error.message : 'Failed to start eligibility'
       )
     }
   }
@@ -369,6 +464,110 @@ export default function AwardDetailPage({
         <p className="text-muted-foreground">{award.description}</p>
       )}
 
+      {/* Status Workflow Step Indicator */}
+      <div className="relative">
+        <div className="flex items-center justify-between">
+          {WORKFLOW_STEPS.map((step, i) => {
+            const currentIdx = getStepIndex(award.status)
+            const isComplete = i < currentIdx
+            const isCurrent = i === currentIdx
+            return (
+              <div key={step.key} className="flex flex-1 items-center">
+                <div className="flex flex-col items-center gap-1.5 relative z-10">
+                  <div
+                    className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold transition-colors ${
+                      isCurrent
+                        ? 'bg-brand-blue text-white ring-2 ring-brand-blue/20 ring-offset-2 ring-offset-background'
+                        : isComplete
+                          ? 'bg-brand-blue/90 text-white'
+                          : 'bg-muted text-muted-foreground'
+                    }`}
+                  >
+                    {isComplete ? (
+                      <CheckCircle2 className="h-4 w-4" />
+                    ) : (
+                      i + 1
+                    )}
+                  </div>
+                  <span
+                    className={`text-xs font-medium whitespace-nowrap ${
+                      isCurrent ? 'text-foreground' : isComplete ? 'text-muted-foreground' : 'text-muted-foreground/60'
+                    }`}
+                  >
+                    {step.label}
+                  </span>
+                </div>
+                {i < WORKFLOW_STEPS.length - 1 && (
+                  <div className="flex-1 mx-2 mt-[-18px]">
+                    <div
+                      className={`h-0.5 w-full rounded-full transition-colors ${
+                        i < currentIdx ? 'bg-brand-blue/70' : 'bg-muted'
+                      }`}
+                    />
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <Card className="border-l-4 border-l-emerald-500">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Eligible</p>
+                <p className="text-2xl font-bold tabular-nums">{award.eligibleCount}</p>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/40">
+                <CheckCircle2 className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="border-l-4 border-l-blue-500">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Evaluated</p>
+                <p className="text-2xl font-bold tabular-nums">{award._count.eligibilities}</p>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-950/40">
+                <Brain className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="border-l-4 border-l-violet-500">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Jurors</p>
+                <p className="text-2xl font-bold tabular-nums">{award._count.jurors}</p>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-violet-100 dark:bg-violet-950/40">
+                <Users className="h-5 w-5 text-violet-600 dark:text-violet-400" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="border-l-4 border-l-amber-500">
+          <CardContent className="pt-4 pb-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Votes</p>
+                <p className="text-2xl font-bold tabular-nums">{award._count.votes}</p>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-950/40">
+                <Vote className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
       {/* Tabs */}
       <Tabs defaultValue="eligibility">
         <TabsList>
@@ -407,27 +606,27 @@ export default function AwardDetailPage({
               {award.useAiEligibility ? (
                 <Button
                   onClick={handleRunEligibility}
-                  disabled={runEligibility.isPending}
+                  disabled={runEligibility.isPending || isPollingJob}
                 >
-                  {runEligibility.isPending ? (
+                  {runEligibility.isPending || isPollingJob ? (
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   ) : (
                     <Brain className="mr-2 h-4 w-4" />
                   )}
-                  Run AI Eligibility
+                  {isPollingJob ? 'Processing...' : 'Run AI Eligibility'}
                 </Button>
               ) : (
                 <Button
                   onClick={handleRunEligibility}
-                  disabled={runEligibility.isPending}
+                  disabled={runEligibility.isPending || isPollingJob}
                   variant="outline"
                 >
-                  {runEligibility.isPending ? (
+                  {runEligibility.isPending || isPollingJob ? (
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   ) : (
                     <CheckCircle2 className="mr-2 h-4 w-4" />
                   )}
-                  Load All Projects
+                  {isPollingJob ? 'Processing...' : 'Load All Projects'}
                 </Button>
               )}
               <Dialog open={addProjectDialogOpen} onOpenChange={setAddProjectDialogOpen}>
@@ -527,6 +726,59 @@ export default function AwardDetailPage({
               </Dialog>
             </div>
           </div>
+          {/* Eligibility job progress */}
+          {isPollingJob && jobStatus && (
+            <Card>
+              <CardContent className="py-4">
+                <div className="flex items-center gap-3">
+                  <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                  <div className="flex-1 space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="font-medium">
+                        {jobStatus.eligibilityJobStatus === 'PENDING'
+                          ? 'Preparing...'
+                          : `Processing... ${jobStatus.eligibilityJobDone ?? 0} of ${jobStatus.eligibilityJobTotal ?? '?'} projects`}
+                      </span>
+                      {jobStatus.eligibilityJobTotal && jobStatus.eligibilityJobTotal > 0 && (
+                        <span className="text-muted-foreground">
+                          {Math.round(
+                            ((jobStatus.eligibilityJobDone ?? 0) / jobStatus.eligibilityJobTotal) * 100
+                          )}%
+                        </span>
+                      )}
+                    </div>
+                    <Progress
+                      value={
+                        jobStatus.eligibilityJobTotal && jobStatus.eligibilityJobTotal > 0
+                          ? ((jobStatus.eligibilityJobDone ?? 0) / jobStatus.eligibilityJobTotal) * 100
+                          : 0
+                      }
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Failed job notice */}
+          {!isPollingJob && award.eligibilityJobStatus === 'FAILED' && (
+            <Card className="border-destructive/50">
+              <CardContent className="py-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-destructive">
+                    <X className="h-4 w-4" />
+                    <span className="text-sm font-medium">
+                      Last eligibility run failed: {award.eligibilityJobError || 'Unknown error'}
+                    </span>
+                  </div>
+                  <Button size="sm" variant="outline" onClick={handleRunEligibility} disabled={runEligibility.isPending}>
+                    Retry
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
           {!award.useAiEligibility && (
             <p className="text-sm text-muted-foreground italic">
               AI eligibility is off for this award. Projects are loaded for manual selection.
@@ -542,67 +794,146 @@ export default function AwardDetailPage({
                     <TableHead>Category</TableHead>
                     <TableHead>Country</TableHead>
                     <TableHead>Method</TableHead>
+                    {award.useAiEligibility && <TableHead>AI Confidence</TableHead>}
                     <TableHead>Eligible</TableHead>
                     <TableHead className="text-right">Actions</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {eligibilityData.eligibilities.map((e) => (
-                    <TableRow key={e.id} className={!e.eligible ? 'opacity-50' : ''}>
-                      <TableCell>
-                        <div>
-                          <p className="font-medium">{e.project.title}</p>
-                          <p className="text-sm text-muted-foreground">
-                            {e.project.teamName}
-                          </p>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        {e.project.competitionCategory ? (
-                          <Badge variant="outline">
-                            {e.project.competitionCategory.replace('_', ' ')}
-                          </Badge>
-                        ) : (
-                          '-'
-                        )}
-                      </TableCell>
-                      <TableCell>{e.project.country || '-'}</TableCell>
-                      <TableCell>
-                        <Badge variant={e.method === 'MANUAL' ? 'secondary' : 'outline'} className="text-xs">
-                          {e.method === 'MANUAL' ? 'Manual' : 'Auto'}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>
-                        <Switch
-                          checked={e.eligible}
-                          onCheckedChange={(checked) =>
-                            handleToggleEligibility(e.projectId, checked)
-                          }
-                        />
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleRemoveFromEligibility(e.projectId)}
-                          className="text-destructive hover:text-destructive"
-                        >
-                          <X className="h-4 w-4" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
+                  {eligibilityData.eligibilities.map((e) => {
+                    const aiReasoning = e.aiReasoningJson as { confidence?: number; reasoning?: string } | null
+                    const hasReasoning = !!aiReasoning?.reasoning
+                    const isExpanded = expandedRows.has(e.id)
+
+                    return (
+                      <Collapsible key={e.id} open={isExpanded} onOpenChange={(open) => {
+                        setExpandedRows((prev) => {
+                          const next = new Set(prev)
+                          if (open) next.add(e.id)
+                          else next.delete(e.id)
+                          return next
+                        })
+                      }} asChild>
+                        <>
+                          <TableRow className={`${!e.eligible ? 'opacity-50' : ''} ${hasReasoning ? 'cursor-pointer' : ''}`}>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                {hasReasoning && (
+                                  <CollapsibleTrigger asChild>
+                                    <button className="flex-shrink-0 p-0.5 rounded hover:bg-muted transition-colors">
+                                      <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} />
+                                    </button>
+                                  </CollapsibleTrigger>
+                                )}
+                                <div>
+                                  <p className="font-medium">{e.project.title}</p>
+                                  <p className="text-sm text-muted-foreground">
+                                    {e.project.teamName}
+                                  </p>
+                                </div>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              {e.project.competitionCategory ? (
+                                <Badge variant="outline">
+                                  {e.project.competitionCategory.replace('_', ' ')}
+                                </Badge>
+                              ) : (
+                                '-'
+                              )}
+                            </TableCell>
+                            <TableCell>{e.project.country || '-'}</TableCell>
+                            <TableCell>
+                              <Badge variant={e.method === 'MANUAL' ? 'secondary' : 'outline'} className="text-xs">
+                                {e.method === 'MANUAL' ? 'Manual' : 'Auto'}
+                              </Badge>
+                            </TableCell>
+                            {award.useAiEligibility && (
+                              <TableCell>
+                                {aiReasoning?.confidence != null ? (
+                                  <TooltipProvider>
+                                    <Tooltip>
+                                      <TooltipTrigger>
+                                        <ConfidenceBadge confidence={aiReasoning.confidence} />
+                                      </TooltipTrigger>
+                                      <TooltipContent>
+                                        AI confidence: {Math.round(aiReasoning.confidence * 100)}%
+                                      </TooltipContent>
+                                    </Tooltip>
+                                  </TooltipProvider>
+                                ) : (
+                                  <span className="text-xs text-muted-foreground">-</span>
+                                )}
+                              </TableCell>
+                            )}
+                            <TableCell>
+                              <Switch
+                                checked={e.eligible}
+                                onCheckedChange={(checked) =>
+                                  handleToggleEligibility(e.projectId, checked)
+                                }
+                              />
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleRemoveFromEligibility(e.projectId)}
+                                className="text-destructive hover:text-destructive"
+                              >
+                                <X className="h-4 w-4" />
+                              </Button>
+                            </TableCell>
+                          </TableRow>
+                          {hasReasoning && (
+                            <CollapsibleContent asChild>
+                              <tr>
+                                <td colSpan={award.useAiEligibility ? 7 : 6} className="p-0">
+                                  <div className="border-t bg-muted/30 px-6 py-3">
+                                    <div className="flex items-start gap-2">
+                                      <Brain className="h-4 w-4 text-brand-teal mt-0.5 flex-shrink-0" />
+                                      <div className="space-y-1">
+                                        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">AI Reasoning</p>
+                                        <p className="text-sm leading-relaxed">{aiReasoning?.reasoning}</p>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </td>
+                              </tr>
+                            </CollapsibleContent>
+                          )}
+                        </>
+                      </Collapsible>
+                    )
+                  })}
                 </TableBody>
               </Table>
             </Card>
           ) : (
             <Card>
-              <CardContent className="flex flex-col items-center justify-center py-12 text-center">
-                <Brain className="h-12 w-12 text-muted-foreground/50" />
-                <p className="mt-2 font-medium">No eligibility data</p>
-                <p className="text-sm text-muted-foreground">
-                  Run AI eligibility to evaluate projects or manually add projects
+              <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+                  <Brain className="h-8 w-8 text-muted-foreground/60" />
+                </div>
+                <p className="text-lg font-medium">No eligibility data yet</p>
+                <p className="text-sm text-muted-foreground mt-1 max-w-sm">
+                  {award.useAiEligibility
+                    ? 'Run AI eligibility to automatically evaluate projects against this award\'s criteria, or manually add projects.'
+                    : 'Load all eligible projects into the evaluation list, or manually add specific projects.'}
                 </p>
+                <div className="flex gap-2 mt-4">
+                  <Button onClick={handleRunEligibility} disabled={runEligibility.isPending || isPollingJob} size="sm">
+                    {award.useAiEligibility ? (
+                      <><Brain className="mr-2 h-4 w-4" />Run AI Eligibility</>
+                    ) : (
+                      <><CheckCircle2 className="mr-2 h-4 w-4" />Load Projects</>
+                    )}
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setAddProjectDialogOpen(true)}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    Add Manually
+                  </Button>
+                </div>
               </CardContent>
             </Card>
           )}
@@ -680,11 +1011,13 @@ export default function AwardDetailPage({
             </Card>
           ) : (
             <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 jurors assigned</p>
-                <p className="text-sm text-muted-foreground">
-                  Add members as jurors for this award
+              <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+                  <Users className="h-8 w-8 text-muted-foreground/60" />
+                </div>
+                <p className="text-lg font-medium">No jurors assigned</p>
+                <p className="text-sm text-muted-foreground mt-1 max-w-sm">
+                  Add jury members who will vote on eligible projects for this award. Select from existing jury members above.
                 </p>
               </CardContent>
             </Card>
@@ -693,84 +1026,134 @@ export default function AwardDetailPage({
 
         {/* Results Tab */}
         <TabsContent value="results" className="space-y-4">
-          {voteResults && voteResults.results.length > 0 ? (
-            <>
-              <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                <span>
-                  {voteResults.votedJurorCount} of {voteResults.jurorCount}{' '}
-                  jurors voted
-                </span>
-                <Badge variant="outline">
-                  {voteResults.scoringMode.replace('_', ' ')}
-                </Badge>
-              </div>
+          {voteResults && voteResults.results.length > 0 ? (() => {
+            const maxPoints = Math.max(...voteResults.results.map((r) => r.points), 1)
+            return (
+              <>
+                <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                  <span>
+                    {voteResults.votedJurorCount} of {voteResults.jurorCount}{' '}
+                    jurors voted
+                  </span>
+                  <Badge variant="outline">
+                    {voteResults.scoringMode.replace('_', ' ')}
+                  </Badge>
+                </div>
 
-              <Card>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-12">#</TableHead>
-                      <TableHead>Project</TableHead>
-                      <TableHead>Votes</TableHead>
-                      <TableHead>Points</TableHead>
-                      <TableHead className="text-right">Actions</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {voteResults.results.map((r, i) => (
-                      <TableRow
-                        key={r.project.id}
-                        className={
-                          r.project.id === voteResults.winnerId
-                            ? 'bg-amber-50 dark:bg-amber-950/20'
-                            : ''
-                        }
-                      >
-                        <TableCell className="font-bold">{i + 1}</TableCell>
-                        <TableCell>
-                          <div className="flex items-center gap-2">
-                            {r.project.id === voteResults.winnerId && (
-                              <Crown className="h-4 w-4 text-amber-500" />
-                            )}
-                            <div>
-                              <p className="font-medium">{r.project.title}</p>
-                              <p className="text-sm text-muted-foreground">
-                                {r.project.teamName}
-                              </p>
-                            </div>
-                          </div>
-                        </TableCell>
-                        <TableCell>{r.votes}</TableCell>
-                        <TableCell className="font-semibold">
-                          {r.points}
-                        </TableCell>
-                        <TableCell className="text-right">
-                          {r.project.id !== voteResults.winnerId && (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleSetWinner(r.project.id)}
-                              disabled={setWinner.isPending}
-                            >
-                              <Crown className="mr-1 h-3 w-3" />
-                              Set Winner
-                            </Button>
-                          )}
-                        </TableCell>
+                <Card>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-12">#</TableHead>
+                        <TableHead>Project</TableHead>
+                        <TableHead>Votes</TableHead>
+                        <TableHead className="min-w-[200px]">Score</TableHead>
+                        <TableHead className="text-right">Actions</TableHead>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </Card>
-            </>
-          ) : (
+                    </TableHeader>
+                    <TableBody>
+                      {voteResults.results.map((r, i) => {
+                        const isWinner = r.project.id === voteResults.winnerId
+                        const barPercent = (r.points / maxPoints) * 100
+                        return (
+                          <TableRow
+                            key={r.project.id}
+                            className={isWinner ? 'bg-amber-50/80 dark:bg-amber-950/20' : ''}
+                          >
+                            <TableCell>
+                              <span className={`inline-flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold ${
+                                i === 0
+                                  ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
+                                  : i === 1
+                                    ? 'bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-300'
+                                    : i === 2
+                                      ? 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300'
+                                      : 'text-muted-foreground'
+                              }`}>
+                                {i + 1}
+                              </span>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                {isWinner && (
+                                  <Crown className="h-4 w-4 text-amber-500 flex-shrink-0" />
+                                )}
+                                <div>
+                                  <p className="font-medium">{r.project.title}</p>
+                                  <p className="text-sm text-muted-foreground">
+                                    {r.project.teamName}
+                                  </p>
+                                </div>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <span className="tabular-nums">{r.votes}</span>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-3">
+                                <div className="flex-1 h-2.5 rounded-full bg-muted overflow-hidden">
+                                  <div
+                                    className={`h-full rounded-full transition-all duration-500 ${
+                                      isWinner
+                                        ? 'bg-gradient-to-r from-amber-400 to-amber-500'
+                                        : i === 0
+                                          ? 'bg-gradient-to-r from-brand-blue to-brand-teal'
+                                          : 'bg-brand-teal/60'
+                                    }`}
+                                    style={{ width: `${barPercent}%` }}
+                                  />
+                                </div>
+                                <span className="text-sm font-semibold tabular-nums w-10 text-right">
+                                  {r.points}
+                                </span>
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-right">
+                              {!isWinner && (
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => handleSetWinner(r.project.id)}
+                                  disabled={setWinner.isPending}
+                                >
+                                  <Crown className="mr-1 h-3 w-3" />
+                                  Set Winner
+                                </Button>
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        )
+                      })}
+                    </TableBody>
+                  </Table>
+                </Card>
+              </>
+            )
+          })() : (
             <Card>
-              <CardContent className="flex flex-col items-center justify-center py-12 text-center">
-                <BarChart3 className="h-12 w-12 text-muted-foreground/50" />
-                <p className="mt-2 font-medium">No votes yet</p>
-                <p className="text-sm text-muted-foreground">
-                  Votes will appear here once jurors submit their selections
+              <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+                  <BarChart3 className="h-8 w-8 text-muted-foreground/60" />
+                </div>
+                <p className="text-lg font-medium">No votes yet</p>
+                <p className="text-sm text-muted-foreground mt-1 max-w-sm">
+                  {award._count.jurors === 0
+                    ? 'Assign jurors to this award first, then open voting to collect their selections.'
+                    : award.status === 'DRAFT' || award.status === 'NOMINATIONS_OPEN'
+                      ? 'Open voting to allow jurors to submit their selections for this award.'
+                      : 'Votes will appear here as jurors submit their selections.'}
                 </p>
+                {award.status === 'NOMINATIONS_OPEN' && (
+                  <Button
+                    className="mt-4"
+                    size="sm"
+                    onClick={() => handleStatusChange('VOTING_OPEN')}
+                    disabled={updateStatus.isPending}
+                  >
+                    <Play className="mr-2 h-4 w-4" />
+                    Open Voting
+                  </Button>
+                )}
               </CardContent>
             </Card>
           )}

src/app/(admin)/admin/awards/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useState, useMemo } from 'react'
+import { useDebounce } from '@/hooks/use-debounce'
 import Link from 'next/link'
 import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
@@ -12,7 +14,15 @@ import {
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import { Plus, Trophy, Users, CheckCircle2 } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Plus, Trophy, Users, CheckCircle2, Search } from 'lucide-react'
 
 const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
   DRAFT: 'secondary',
@@ -31,16 +41,46 @@ const SCORING_LABELS: Record<string, string> = {
 export default function AwardsListPage() {
   const { data: awards, isLoading } = trpc.specialAward.list.useQuery({})
 
+  const [search, setSearch] = useState('')
+  const debouncedSearch = useDebounce(search, 300)
+  const [statusFilter, setStatusFilter] = useState('all')
+  const [scoringFilter, setScoringFilter] = useState('all')
+
+  const filteredAwards = useMemo(() => {
+    if (!awards) return []
+    return awards.filter((award) => {
+      const matchesSearch =
+        !debouncedSearch ||
+        award.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+        award.description?.toLowerCase().includes(debouncedSearch.toLowerCase())
+      const matchesStatus = statusFilter === 'all' || award.status === statusFilter
+      const matchesScoring = scoringFilter === 'all' || award.scoringMode === scoringFilter
+      return matchesSearch && matchesStatus && matchesScoring
+    })
+  }, [awards, debouncedSearch, statusFilter, scoringFilter])
+
   if (isLoading) {
     return (
       <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <Skeleton className="h-9 w-48" />
+          <div>
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="mt-2 h-4 w-72" />
+          </div>
           <Skeleton className="h-9 w-32" />
         </div>
+        {/* Toolbar skeleton */}
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <Skeleton className="h-10 flex-1" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-10 w-[180px]" />
+            <Skeleton className="h-10 w-[160px]" />
+          </div>
+        </div>
+        {/* Cards skeleton */}
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {[...Array(3)].map((_, i) => (
-            <Skeleton key={i} className="h-48" />
+          {[...Array(6)].map((_, i) => (
+            <Skeleton key={i} className="h-48 rounded-lg" />
           ))}
         </div>
       </div>
@@ -67,12 +107,58 @@ export default function AwardsListPage() {
         </Button>
       </div>
 
+      {/* Toolbar */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <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 awards..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="DRAFT">Draft</SelectItem>
+              <SelectItem value="NOMINATIONS_OPEN">Nominations Open</SelectItem>
+              <SelectItem value="VOTING_OPEN">Voting Open</SelectItem>
+              <SelectItem value="CLOSED">Closed</SelectItem>
+              <SelectItem value="ARCHIVED">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={scoringFilter} onValueChange={setScoringFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All scoring" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All scoring</SelectItem>
+              <SelectItem value="PICK_WINNER">Pick Winner</SelectItem>
+              <SelectItem value="RANKED">Ranked</SelectItem>
+              <SelectItem value="SCORED">Scored</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Results count */}
+      {awards && (
+        <p className="text-sm text-muted-foreground">
+          {filteredAwards.length} of {awards.length} awards
+        </p>
+      )}
+
       {/* Awards Grid */}
-      {awards && awards.length > 0 ? (
+      {filteredAwards.length > 0 ? (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {awards.map((award) => (
+          {filteredAwards.map((award) => (
             <Link key={award.id} href={`/admin/awards/${award.id}`}>
-              <Card className="transition-colors hover:bg-muted/50 cursor-pointer h-full">
+              <Card className="transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-md cursor-pointer h-full">
                 <CardHeader className="pb-3">
                   <div className="flex items-start justify-between">
                     <CardTitle className="text-lg flex items-center gap-2">
@@ -118,13 +204,22 @@ export default function AwardsListPage() {
             </Link>
           ))}
         </div>
+      ) : awards && awards.length > 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+            <Search className="h-8 w-8 text-muted-foreground/40" />
+            <p className="mt-2 text-sm text-muted-foreground">
+              No awards match your filters
+            </p>
+          </CardContent>
+        </Card>
       ) : (
         <Card>
           <CardContent className="flex flex-col items-center justify-center py-12 text-center">
-            <Trophy className="h-12 w-12 text-muted-foreground/50" />
-            <p className="mt-2 font-medium">No awards yet</p>
-            <p className="text-sm text-muted-foreground">
-              Create special awards for outstanding projects
+            <Trophy className="h-12 w-12 text-muted-foreground/40" />
+            <h3 className="mt-3 text-lg font-medium">No awards yet</h3>
+            <p className="mt-1 text-sm text-muted-foreground max-w-sm">
+              Create special awards with eligibility criteria and jury voting for outstanding projects.
             </p>
             <Button className="mt-4" asChild>
               <Link href="/admin/awards/new">

src/app/(admin)/admin/learning/page.tsx

@@ -1,27 +1,34 @@
-import { Suspense } from 'react'
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useDebounce } from '@/hooks/use-debounce'
 import Link from 'next/link'
-import { api } from '@/lib/trpc/server'
+import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   Plus,
   FileText,
   Video,
   Link as LinkIcon,
   File,
-  Eye,
   Pencil,
   ExternalLink,
+  Search,
 } from 'lucide-react'
-import { formatDate } from '@/lib/utils'
 
 const resourceTypeIcons = {
   PDF: FileText,
@@ -31,111 +38,73 @@ const resourceTypeIcons = {
   OTHER: File,
 }
 
-const cohortColors = {
+const cohortColors: Record<string, string> = {
   ALL: 'bg-gray-100 text-gray-800',
   SEMIFINALIST: 'bg-blue-100 text-blue-800',
   FINALIST: 'bg-purple-100 text-purple-800',
 }
 
-async function LearningResourcesList() {
-  const caller = await api()
-  const { data: resources } = await caller.learningResource.list({
-    perPage: 50,
-  })
+export default function LearningHubPage() {
+  const { data, isLoading } = trpc.learningResource.list.useQuery({ perPage: 50 })
+  const resources = data?.data
 
-  if (resources.length === 0) {
+  const [search, setSearch] = useState('')
+  const debouncedSearch = useDebounce(search, 300)
+  const [typeFilter, setTypeFilter] = useState('all')
+  const [cohortFilter, setCohortFilter] = useState('all')
+
+  const filteredResources = useMemo(() => {
+    if (!resources) return []
+    return resources.filter((resource) => {
+      const matchesSearch =
+        !debouncedSearch ||
+        resource.title.toLowerCase().includes(debouncedSearch.toLowerCase())
+      const matchesType = typeFilter === 'all' || resource.resourceType === typeFilter
+      const matchesCohort = cohortFilter === 'all' || resource.cohortLevel === cohortFilter
+      return matchesSearch && matchesType && matchesCohort
+    })
+  }, [resources, debouncedSearch, typeFilter, cohortFilter])
+
+  if (isLoading) {
     return (
-      <Card>
-        <CardContent className="flex flex-col items-center justify-center py-12">
-          <FileText className="h-12 w-12 text-muted-foreground mb-4" />
-          <h3 className="text-lg font-medium mb-2">No resources yet</h3>
-          <p className="text-muted-foreground mb-4">
-            Start by adding your first learning resource
-          </p>
-          <Link href="/admin/learning/new">
-            <Button>
-              <Plus className="mr-2 h-4 w-4" />
-              Add Resource
-            </Button>
-          </Link>
-        </CardContent>
-      </Card>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="mt-2 h-4 w-72" />
+          </div>
+          <Skeleton className="h-9 w-32" />
+        </div>
+        {/* Toolbar skeleton */}
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <Skeleton className="h-10 flex-1" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-10 w-[160px]" />
+            <Skeleton className="h-10 w-[160px]" />
+          </div>
+        </div>
+        {/* Resource list skeleton */}
+        <div className="grid gap-4">
+          {[...Array(5)].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>
+                <Skeleton className="h-8 w-8 rounded" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
     )
   }
 
-  return (
-    <div className="grid gap-4">
-      {resources.map((resource) => {
-        const Icon = resourceTypeIcons[resource.resourceType]
-        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">
-                <Icon className="h-5 w-5" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <h3 className="font-medium truncate">{resource.title}</h3>
-                  {!resource.isPublished && (
-                    <Badge variant="secondary">Draft</Badge>
-                  )}
-                </div>
-                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Badge className={cohortColors[resource.cohortLevel]} variant="outline">
-                    {resource.cohortLevel}
-                  </Badge>
-                  <span>{resource.resourceType}</span>
-                  <span>-</span>
-                  <span>{resource._count.accessLogs} views</span>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                {resource.externalUrl && (
-                  <a
-                    href={resource.externalUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="ghost" size="icon">
-                      <ExternalLink className="h-4 w-4" />
-                    </Button>
-                  </a>
-                )}
-                <Link href={`/admin/learning/${resource.id}`}>
-                  <Button variant="ghost" size="icon">
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                </Link>
-              </div>
-            </CardContent>
-          </Card>
-        )
-      })}
-    </div>
-  )
-}
-
-function LoadingSkeleton() {
-  return (
-    <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>
-  )
-}
-
-export default function LearningHubPage() {
   return (
     <div className="space-y-6">
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Learning Hub</h1>
@@ -151,9 +120,128 @@ export default function LearningHubPage() {
         </Link>
       </div>
 
-      <Suspense fallback={<LoadingSkeleton />}>
-        <LearningResourcesList />
-      </Suspense>
+      {/* Toolbar */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <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 resources..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={typeFilter} onValueChange={setTypeFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All types" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All types</SelectItem>
+              <SelectItem value="PDF">PDF</SelectItem>
+              <SelectItem value="VIDEO">Video</SelectItem>
+              <SelectItem value="DOCUMENT">Document</SelectItem>
+              <SelectItem value="LINK">Link</SelectItem>
+              <SelectItem value="OTHER">Other</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={cohortFilter} onValueChange={setCohortFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All cohorts" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All cohorts</SelectItem>
+              <SelectItem value="ALL">All (cohort)</SelectItem>
+              <SelectItem value="SEMIFINALIST">Semifinalist</SelectItem>
+              <SelectItem value="FINALIST">Finalist</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Results count */}
+      {resources && (
+        <p className="text-sm text-muted-foreground">
+          {filteredResources.length} of {resources.length} resources
+        </p>
+      )}
+
+      {/* Resource List */}
+      {filteredResources.length > 0 ? (
+        <div className="grid gap-4">
+          {filteredResources.map((resource) => {
+            const Icon = resourceTypeIcons[resource.resourceType as keyof typeof resourceTypeIcons] || File
+            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">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-medium truncate">{resource.title}</h3>
+                      {!resource.isPublished && (
+                        <Badge variant="secondary">Draft</Badge>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Badge className={cohortColors[resource.cohortLevel] || ''} variant="outline">
+                        {resource.cohortLevel}
+                      </Badge>
+                      <span>{resource.resourceType}</span>
+                      <span>-</span>
+                      <span>{resource._count.accessLogs} views</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {resource.externalUrl && (
+                      <a
+                        href={resource.externalUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button variant="ghost" size="icon">
+                          <ExternalLink className="h-4 w-4" />
+                        </Button>
+                      </a>
+                    )}
+                    <Link href={`/admin/learning/${resource.id}`}>
+                      <Button variant="ghost" size="icon">
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    </Link>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      ) : resources && resources.length > 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+            <Search className="h-8 w-8 text-muted-foreground/40" />
+            <p className="mt-2 text-sm text-muted-foreground">
+              No resources match your filters
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+            <FileText className="h-12 w-12 text-muted-foreground/40" />
+            <h3 className="mt-3 text-lg font-medium">No resources yet</h3>
+            <p className="mt-1 text-sm text-muted-foreground max-w-sm">
+              Add learning materials like videos, documents, and links for program participants.
+            </p>
+            <Button className="mt-4" asChild>
+              <Link href="/admin/learning/new">
+                <Plus className="mr-2 h-4 w-4" />
+                Add Resource
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }

src/app/(admin)/admin/messages/page.tsx

@@ -41,6 +41,14 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import {
   Send,
   Mail,
@@ -51,6 +59,7 @@ import {
   AlertCircle,
   Inbox,
   CheckCircle2,
+  Eye,
 } from 'lucide-react'
 import { toast } from 'sonner'
 import { formatDate } from '@/lib/utils'
@@ -79,6 +88,7 @@ export default function MessagesPage() {
   const [deliveryChannels, setDeliveryChannels] = useState<string[]>(['EMAIL', 'IN_APP'])
   const [isScheduled, setIsScheduled] = useState(false)
   const [scheduledAt, setScheduledAt] = useState('')
+  const [showPreview, setShowPreview] = useState(false)
 
   const utils = trpc.useUtils()
 
@@ -152,7 +162,42 @@ export default function MessagesPage() {
     }
   }
 
-  const handleSend = () => {
+  const getRecipientDescription = (): string => {
+    switch (recipientType) {
+      case 'ALL':
+        return 'All platform users'
+      case 'ROLE': {
+        const roleLabel = selectedRole ? selectedRole.replace(/_/g, ' ') : ''
+        return roleLabel ? `All ${roleLabel}s` : 'By Role (none selected)'
+      }
+      case 'ROUND_JURY': {
+        if (!roundId) return 'Round Jury (none selected)'
+        const round = (rounds as Array<{ id: string; name: string; program?: { name: string } }> | undefined)?.find(
+          (r) => r.id === roundId
+        )
+        return round
+          ? `Jury of ${round.program ? `${round.program.name} - ` : ''}${round.name}`
+          : 'Round Jury'
+      }
+      case 'PROGRAM_TEAM': {
+        if (!selectedProgramId) return 'Program Team (none selected)'
+        const program = (programs as Array<{ id: string; name: string }> | undefined)?.find(
+          (p) => p.id === selectedProgramId
+        )
+        return program ? `Team of ${program.name}` : 'Program Team'
+      }
+      case 'USER': {
+        if (!selectedUserId) return 'Specific User (none selected)'
+        const userList = (users as { users: Array<{ id: string; name: string | null; email: string }> } | undefined)?.users
+        const user = userList?.find((u) => u.id === selectedUserId)
+        return user ? (user.name || user.email) : 'Specific User'
+      }
+      default:
+        return 'Unknown'
+    }
+  }
+
+  const handlePreview = () => {
     if (!subject.trim()) {
       toast.error('Subject is required')
       return
@@ -182,6 +227,10 @@ export default function MessagesPage() {
       return
     }
 
+    setShowPreview(true)
+  }
+
+  const handleActualSend = () => {
     sendMutation.mutate({
       recipientType,
       recipientFilter: buildRecipientFilter(),
@@ -192,6 +241,7 @@ export default function MessagesPage() {
       scheduledAt: isScheduled && scheduledAt ? new Date(scheduledAt).toISOString() : undefined,
       templateId: selectedTemplateId && selectedTemplateId !== '__none__' ? selectedTemplateId : undefined,
     })
+    setShowPreview(false)
   }
 
   return (
@@ -474,13 +524,13 @@ export default function MessagesPage() {
 
               {/* Send button */}
               <div className="flex justify-end">
-                <Button onClick={handleSend} disabled={sendMutation.isPending}>
+                <Button onClick={handlePreview} disabled={sendMutation.isPending}>
                   {sendMutation.isPending ? (
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   ) : (
-                    <Send className="mr-2 h-4 w-4" />
+                    <Eye className="mr-2 h-4 w-4" />
                   )}
-                  {isScheduled ? 'Schedule' : 'Send Message'}
+                  {isScheduled ? 'Preview & Schedule' : 'Preview & Send'}
                 </Button>
               </div>
             </CardContent>
@@ -581,6 +631,68 @@ export default function MessagesPage() {
           </Card>
         </TabsContent>
       </Tabs>
+
+      {/* Preview Dialog */}
+      <Dialog open={showPreview} onOpenChange={setShowPreview}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Preview Message</DialogTitle>
+            <DialogDescription>Review your message before sending</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Recipients</p>
+              <p className="text-sm mt-1">{getRecipientDescription()}</p>
+            </div>
+            <div>
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Subject</p>
+              <p className="text-sm font-medium mt-1">{subject}</p>
+            </div>
+            <div>
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Message</p>
+              <div className="mt-1 rounded-lg border bg-muted/30 p-4">
+                <p className="text-sm whitespace-pre-wrap">{body}</p>
+              </div>
+            </div>
+            <div>
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Delivery Channels</p>
+              <div className="flex items-center gap-2 mt-1">
+                {deliveryChannels.includes('EMAIL') && (
+                  <Badge variant="outline" className="text-xs">
+                    <Mail className="mr-1 h-3 w-3" />
+                    Email
+                  </Badge>
+                )}
+                {deliveryChannels.includes('IN_APP') && (
+                  <Badge variant="outline" className="text-xs">
+                    <Bell className="mr-1 h-3 w-3" />
+                    In-App
+                  </Badge>
+                )}
+              </div>
+            </div>
+            {isScheduled && scheduledAt && (
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Scheduled For</p>
+                <p className="text-sm mt-1">{formatDate(new Date(scheduledAt))}</p>
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowPreview(false)}>
+              Edit
+            </Button>
+            <Button onClick={handleActualSend} disabled={sendMutation.isPending}>
+              {sendMutation.isPending ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Send className="mr-2 h-4 w-4" />
+              )}
+              {isScheduled ? 'Confirm & Schedule' : 'Confirm & Send'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

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

@@ -16,6 +16,7 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Button } from '@/components/ui/button'
 import {
   CircleDot,
   ClipboardList,
@@ -25,13 +26,27 @@ import {
   TrendingUp,
   ArrowRight,
   Layers,
+  Activity,
+  AlertTriangle,
+  ShieldAlert,
+  Plus,
+  Upload,
+  UserPlus,
+  FileEdit,
+  LogIn,
+  Send,
+  Eye,
+  Trash2,
 } from 'lucide-react'
 import { GeographicSummaryCard } from '@/components/charts'
+import { AnimatedCard } from '@/components/shared/animated-container'
+import { StatusBadge } from '@/components/shared/status-badge'
 import { ProjectLogo } from '@/components/shared/project-logo'
 import { getCountryName } from '@/lib/countries'
 import {
   formatDateOnly,
   formatEnumLabel,
+  formatRelativeTime,
   truncate,
   daysUntil,
 } from '@/lib/utils'
@@ -104,6 +119,10 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
     latestProjects,
     categoryBreakdown,
     oceanIssueBreakdown,
+    recentActivity,
+    pendingCOIs,
+    draftRounds,
+    unassignedProjects,
   ] = await Promise.all([
     prisma.round.count({
       where: { programId: editionId, status: 'ACTIVE' },
@@ -146,7 +165,13 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
       where: { programId: editionId },
       orderBy: { createdAt: 'desc' },
       take: 5,
-      include: {
+      select: {
+        id: true,
+        name: true,
+        status: true,
+        votingStartAt: true,
+        votingEndAt: true,
+        submissionEndDate: true,
         _count: {
           select: {
             projects: true,
@@ -188,6 +213,40 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
       where: { round: { programId: editionId } },
       _count: true,
     }),
+    // Recent activity feed (scoped to last 7 days for performance)
+    prisma.auditLog.findMany({
+      where: {
+        timestamp: { gte: sevenDaysAgo },
+      },
+      orderBy: { timestamp: 'desc' },
+      take: 8,
+      select: {
+        id: true,
+        action: true,
+        entityType: true,
+        timestamp: true,
+        user: { select: { name: true } },
+      },
+    }),
+    // Pending COI declarations (hasConflict declared but not yet reviewed)
+    prisma.conflictOfInterest.count({
+      where: {
+        hasConflict: true,
+        reviewedAt: null,
+        assignment: { round: { programId: editionId } },
+      },
+    }),
+    // Draft rounds needing activation
+    prisma.round.count({
+      where: { programId: editionId, status: 'DRAFT' },
+    }),
+    // Projects without assignments in active rounds
+    prisma.project.count({
+      where: {
+        round: { programId: editionId, status: 'ACTIVE' },
+        assignments: { none: {} },
+      },
+    }),
   ])
 
   const submittedCount =
@@ -253,6 +312,40 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
   const maxCategoryCount = Math.max(...categories.map((c) => c.count), 1)
   const maxIssueCount = Math.max(...issues.map((i) => i.count), 1)
 
+  // Helper: human-readable action descriptions for audit log
+  function formatAction(action: string, entityType: string | null): string {
+    const entity = entityType?.toLowerCase() || 'record'
+    const actionMap: Record<string, string> = {
+      CREATE: `created a ${entity}`,
+      UPDATE: `updated a ${entity}`,
+      DELETE: `deleted a ${entity}`,
+      LOGIN: 'logged in',
+      EXPORT: `exported ${entity} data`,
+      SUBMIT: `submitted an ${entity}`,
+      ASSIGN: `assigned a ${entity}`,
+      INVITE: `invited a user`,
+      STATUS_CHANGE: `changed ${entity} status`,
+      BULK_UPDATE: `bulk updated ${entity}s`,
+      IMPORT: `imported ${entity}s`,
+    }
+    return actionMap[action] || `${action.toLowerCase()} ${entity}`
+  }
+
+  // Helper: pick an icon for an audit action
+  function getActionIcon(action: string) {
+    switch (action) {
+      case 'CREATE': return <Plus className="h-3.5 w-3.5" />
+      case 'UPDATE': return <FileEdit className="h-3.5 w-3.5" />
+      case 'DELETE': return <Trash2 className="h-3.5 w-3.5" />
+      case 'LOGIN': return <LogIn className="h-3.5 w-3.5" />
+      case 'EXPORT': return <ArrowRight className="h-3.5 w-3.5" />
+      case 'SUBMIT': return <Send className="h-3.5 w-3.5" />
+      case 'ASSIGN': return <Users className="h-3.5 w-3.5" />
+      case 'INVITE': return <UserPlus className="h-3.5 w-3.5" />
+      default: return <Eye className="h-3.5 w-3.5" />
+    }
+  }
+
   return (
     <>
       {/* Header */}
@@ -265,69 +358,99 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
 
       {/* Stats Grid */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Rounds</CardTitle>
-            <CircleDot className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{totalRoundCount}</div>
-            <p className="text-xs text-muted-foreground">
-              {activeRoundCount} active round{activeRoundCount !== 1 ? 's' : ''}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Projects</CardTitle>
-            <ClipboardList className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{projectCount}</div>
-            <p className="text-xs text-muted-foreground">
-              {newProjectsThisWeek > 0
-                ? `${newProjectsThisWeek} new this week`
-                : 'In this edition'}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
-            <Users className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{totalJurors}</div>
-            <p className="text-xs text-muted-foreground">
-              {activeJurors} active{invitedJurors > 0 && `, ${invitedJurors} invited`}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
-            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {submittedCount}
-              {totalAssignments > 0 && (
-                <span className="text-sm font-normal text-muted-foreground">
-                  {' '}/ {totalAssignments}
-                </span>
-              )}
-            </div>
-            <div className="mt-2">
-              <Progress value={completionRate} className="h-2" />
-              <p className="mt-1 text-xs text-muted-foreground">
-                {completionRate.toFixed(0)}% completion rate
+        <AnimatedCard index={0}>
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Rounds</CardTitle>
+              <CircleDot className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{totalRoundCount}</div>
+              <p className="text-xs text-muted-foreground">
+                {activeRoundCount} active round{activeRoundCount !== 1 ? 's' : ''}
               </p>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        </AnimatedCard>
+
+        <AnimatedCard index={1}>
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Projects</CardTitle>
+              <ClipboardList className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{projectCount}</div>
+              <p className="text-xs text-muted-foreground">
+                {newProjectsThisWeek > 0
+                  ? `${newProjectsThisWeek} new this week`
+                  : 'In this edition'}
+              </p>
+            </CardContent>
+          </Card>
+        </AnimatedCard>
+
+        <AnimatedCard index={2}>
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
+              <Users className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{totalJurors}</div>
+              <p className="text-xs text-muted-foreground">
+                {activeJurors} active{invitedJurors > 0 && `, ${invitedJurors} invited`}
+              </p>
+            </CardContent>
+          </Card>
+        </AnimatedCard>
+
+        <AnimatedCard index={3}>
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
+              <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {submittedCount}
+                {totalAssignments > 0 && (
+                  <span className="text-sm font-normal text-muted-foreground">
+                    {' '}/ {totalAssignments}
+                  </span>
+                )}
+              </div>
+              <div className="mt-2">
+                <Progress value={completionRate} className="h-2" />
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {completionRate.toFixed(0)}% completion rate
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </AnimatedCard>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="flex flex-wrap gap-2">
+        <Button variant="outline" size="sm" asChild>
+          <Link href="/admin/rounds/new">
+            <Plus className="mr-1.5 h-3.5 w-3.5" />
+            New Round
+          </Link>
+        </Button>
+        <Button variant="outline" size="sm" asChild>
+          <Link href="/admin/projects/new">
+            <Upload className="mr-1.5 h-3.5 w-3.5" />
+            Import Projects
+          </Link>
+        </Button>
+        <Button variant="outline" size="sm" asChild>
+          <Link href="/admin/members">
+            <UserPlus className="mr-1.5 h-3.5 w-3.5" />
+            Invite Jury
+          </Link>
+        </Button>
       </div>
 
       {/* Two-Column Content */}
@@ -374,22 +497,12 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
                       href={`/admin/rounds/${round.id}`}
                       className="block"
                     >
-                      <div className="rounded-lg border p-4 transition-colors hover:bg-muted/50">
+                      <div className="rounded-lg border p-4 transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-md">
                         <div className="flex items-start justify-between gap-2">
                           <div className="space-y-1.5 flex-1 min-w-0">
                             <div className="flex items-center gap-2">
                               <p className="font-medium">{round.name}</p>
-                              <Badge
-                                variant={
-                                  round.status === 'ACTIVE'
-                                    ? 'default'
-                                    : round.status === 'CLOSED'
-                                      ? 'success'
-                                      : 'secondary'
-                                }
-                              >
-                                {round.status}
-                              </Badge>
+                              <StatusBadge status={round.status} />
                             </div>
                             <p className="text-sm text-muted-foreground">
                               {round._count.projects} projects &middot; {round._count.assignments} assignments
@@ -447,7 +560,7 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
                       href={`/admin/projects/${project.id}`}
                       className="block"
                     >
-                      <div className="flex items-start gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50">
+                      <div className="flex items-start gap-3 rounded-lg p-3 transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-sm">
                         <ProjectLogo
                           project={project}
                           size="sm"
@@ -458,12 +571,11 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
                             <p className="font-medium text-sm leading-tight truncate">
                               {truncate(project.title, 45)}
                             </p>
-                            <Badge
-                              variant={statusColors[project.status ?? 'SUBMITTED'] || 'secondary'}
-                              className="shrink-0 text-[10px] px-1.5 py-0"
-                            >
-                              {(project.status ?? 'SUBMITTED').replace('_', ' ')}
-                            </Badge>
+                            <StatusBadge
+                              status={project.status ?? 'SUBMITTED'}
+                              size="sm"
+                              className="shrink-0"
+                            />
                           </div>
                           <p className="text-xs text-muted-foreground mt-0.5">
                             {[
@@ -500,6 +612,53 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
 
         {/* Right Column */}
         <div className="space-y-6 lg:col-span-5">
+          {/* Pending Actions Card */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <AlertTriangle className="h-4 w-4" />
+                Pending Actions
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {pendingCOIs > 0 && (
+                  <Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
+                    <div className="flex items-center gap-2">
+                      <ShieldAlert className="h-4 w-4 text-amber-500" />
+                      <span className="text-sm">COI declarations to review</span>
+                    </div>
+                    <Badge variant="warning">{pendingCOIs}</Badge>
+                  </Link>
+                )}
+                {unassignedProjects > 0 && (
+                  <Link href="/admin/projects" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
+                    <div className="flex items-center gap-2">
+                      <ClipboardList className="h-4 w-4 text-orange-500" />
+                      <span className="text-sm">Projects without assignments</span>
+                    </div>
+                    <Badge variant="warning">{unassignedProjects}</Badge>
+                  </Link>
+                )}
+                {draftRounds > 0 && (
+                  <Link href="/admin/rounds" className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
+                    <div className="flex items-center gap-2">
+                      <CircleDot className="h-4 w-4 text-blue-500" />
+                      <span className="text-sm">Draft rounds to activate</span>
+                    </div>
+                    <Badge variant="secondary">{draftRounds}</Badge>
+                  </Link>
+                )}
+                {pendingCOIs === 0 && unassignedProjects === 0 && draftRounds === 0 && (
+                  <div className="flex flex-col items-center py-4 text-center">
+                    <CheckCircle2 className="h-6 w-6 text-emerald-500" />
+                    <p className="mt-1.5 text-sm text-muted-foreground">All caught up!</p>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
           {/* Evaluation Progress Card */}
           <Card>
             <CardHeader>
@@ -604,6 +763,45 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
             </CardContent>
           </Card>
 
+          {/* Recent Activity Card */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Activity className="h-4 w-4" />
+                Recent Activity
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {recentActivity.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-6 text-center">
+                  <Activity className="h-8 w-8 text-muted-foreground/40" />
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    No recent activity
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {recentActivity.map((log) => (
+                    <div key={log.id} className="flex items-start gap-3">
+                      <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted">
+                        {getActionIcon(log.action)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm">
+                          <span className="font-medium">{log.user?.name || 'System'}</span>
+                          {' '}{formatAction(log.action, log.entityType)}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {formatRelativeTime(log.timestamp)}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
           {/* Upcoming Deadlines Card */}
           <Card>
             <CardHeader>

src/app/(admin)/admin/partners/page.tsx

@@ -1,6 +1,9 @@
-import { Suspense } from 'react'
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useDebounce } from '@/hooks/use-debounce'
 import Link from 'next/link'
-import { api } from '@/lib/trpc/server'
+import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -8,6 +11,14 @@ import {
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   Plus,
   Pencil,
@@ -16,6 +27,7 @@ import {
   Eye,
   EyeOff,
   Globe,
+  Search,
 } from 'lucide-react'
 
 const visibilityIcons = {
@@ -24,7 +36,7 @@ const visibilityIcons = {
   PUBLIC: Globe,
 }
 
-const partnerTypeColors = {
+const partnerTypeColors: Record<string, string> = {
   SPONSOR: 'bg-yellow-100 text-yellow-800',
   PARTNER: 'bg-blue-100 text-blue-800',
   SUPPORTER: 'bg-green-100 text-green-800',
@@ -32,115 +44,73 @@ const partnerTypeColors = {
   OTHER: 'bg-gray-100 text-gray-800',
 }
 
-async function PartnersList() {
-  const caller = await api()
-  const { data: partners } = await caller.partner.list({
-    perPage: 50,
-  })
+export default function PartnersPage() {
+  const { data, isLoading } = trpc.partner.list.useQuery({ perPage: 50 })
+  const partners = data?.data
 
-  if (partners.length === 0) {
+  const [search, setSearch] = useState('')
+  const debouncedSearch = useDebounce(search, 300)
+  const [typeFilter, setTypeFilter] = useState('all')
+  const [activeFilter, setActiveFilter] = useState('all')
+
+  const filteredPartners = useMemo(() => {
+    if (!partners) return []
+    return partners.filter((partner) => {
+      const matchesSearch =
+        !debouncedSearch ||
+        partner.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+        partner.description?.toLowerCase().includes(debouncedSearch.toLowerCase())
+      const matchesType = typeFilter === 'all' || partner.partnerType === typeFilter
+      const matchesActive =
+        activeFilter === 'all' ||
+        (activeFilter === 'active' && partner.isActive) ||
+        (activeFilter === 'inactive' && !partner.isActive)
+      return matchesSearch && matchesType && matchesActive
+    })
+  }, [partners, debouncedSearch, typeFilter, activeFilter])
+
+  if (isLoading) {
     return (
-      <Card>
-        <CardContent className="flex flex-col items-center justify-center py-12">
-          <Building2 className="h-12 w-12 text-muted-foreground mb-4" />
-          <h3 className="text-lg font-medium mb-2">No partners yet</h3>
-          <p className="text-muted-foreground mb-4">
-            Start by adding your first partner organization
-          </p>
-          <Link href="/admin/partners/new">
-            <Button>
-              <Plus className="mr-2 h-4 w-4" />
-              Add Partner
-            </Button>
-          </Link>
-        </CardContent>
-      </Card>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="mt-2 h-4 w-72" />
+          </div>
+          <Skeleton className="h-9 w-32" />
+        </div>
+        {/* Toolbar skeleton */}
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <Skeleton className="h-10 flex-1" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-10 w-[160px]" />
+            <Skeleton className="h-10 w-[160px]" />
+          </div>
+        </div>
+        {/* Partner cards skeleton */}
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {[...Array(6)].map((_, i) => (
+            <Card key={i}>
+              <CardContent className="p-4">
+                <div className="flex items-start gap-4">
+                  <Skeleton className="h-12 w-12 rounded-lg" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-5 w-32" />
+                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="h-4 w-full" />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
     )
   }
 
-  return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-      {partners.map((partner) => {
-        const VisibilityIcon = visibilityIcons[partner.visibility]
-        return (
-          <Card key={partner.id} className={!partner.isActive ? 'opacity-60' : ''}>
-            <CardContent className="p-4">
-              <div className="flex items-start gap-4">
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-muted shrink-0">
-                  <Building2 className="h-6 w-6" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <h3 className="font-medium truncate">{partner.name}</h3>
-                    {!partner.isActive && (
-                      <Badge variant="secondary">Inactive</Badge>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-2 mt-1">
-                    <Badge className={partnerTypeColors[partner.partnerType]} variant="outline">
-                      {partner.partnerType}
-                    </Badge>
-                    <VisibilityIcon className="h-3 w-3 text-muted-foreground" />
-                  </div>
-                  {partner.description && (
-                    <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
-                      {partner.description}
-                    </p>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-center justify-end gap-2 mt-4 pt-4 border-t">
-                {partner.website && (
-                  <a
-                    href={partner.website}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="ghost" size="sm">
-                      <ExternalLink className="h-4 w-4 mr-1" />
-                      Website
-                    </Button>
-                  </a>
-                )}
-                <Link href={`/admin/partners/${partner.id}`}>
-                  <Button variant="ghost" size="sm">
-                    <Pencil className="h-4 w-4 mr-1" />
-                    Edit
-                  </Button>
-                </Link>
-              </div>
-            </CardContent>
-          </Card>
-        )
-      })}
-    </div>
-  )
-}
-
-function LoadingSkeleton() {
-  return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-      {[1, 2, 3, 4, 5, 6].map((i) => (
-        <Card key={i}>
-          <CardContent className="p-4">
-            <div className="flex items-start gap-4">
-              <Skeleton className="h-12 w-12 rounded-lg" />
-              <div className="flex-1 space-y-2">
-                <Skeleton className="h-5 w-32" />
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-4 w-full" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  )
-}
-
-export default function PartnersPage() {
   return (
     <div className="space-y-6">
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Partners</h1>
@@ -156,9 +126,134 @@ export default function PartnersPage() {
         </Link>
       </div>
 
-      <Suspense fallback={<LoadingSkeleton />}>
-        <PartnersList />
-      </Suspense>
+      {/* Toolbar */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <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 partners..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={typeFilter} onValueChange={setTypeFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All types" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All types</SelectItem>
+              <SelectItem value="SPONSOR">Sponsor</SelectItem>
+              <SelectItem value="PARTNER">Partner</SelectItem>
+              <SelectItem value="SUPPORTER">Supporter</SelectItem>
+              <SelectItem value="MEDIA">Media</SelectItem>
+              <SelectItem value="OTHER">Other</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={activeFilter} onValueChange={setActiveFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="active">Active</SelectItem>
+              <SelectItem value="inactive">Inactive</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Results count */}
+      {partners && (
+        <p className="text-sm text-muted-foreground">
+          {filteredPartners.length} of {partners.length} partners
+        </p>
+      )}
+
+      {/* Partners Grid */}
+      {filteredPartners.length > 0 ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {filteredPartners.map((partner) => {
+            const VisibilityIcon = visibilityIcons[partner.visibility as keyof typeof visibilityIcons] || Eye
+            return (
+              <Card key={partner.id} className={!partner.isActive ? 'opacity-60' : ''}>
+                <CardContent className="p-4">
+                  <div className="flex items-start gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-muted shrink-0">
+                      <Building2 className="h-6 w-6" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-medium truncate">{partner.name}</h3>
+                        {!partner.isActive && (
+                          <Badge variant="secondary">Inactive</Badge>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 mt-1">
+                        <Badge className={partnerTypeColors[partner.partnerType] || ''} variant="outline">
+                          {partner.partnerType}
+                        </Badge>
+                        <VisibilityIcon className="h-3 w-3 text-muted-foreground" />
+                      </div>
+                      {partner.description && (
+                        <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
+                          {partner.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-end gap-2 mt-4 pt-4 border-t">
+                    {partner.website && (
+                      <a
+                        href={partner.website}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button variant="ghost" size="sm">
+                          <ExternalLink className="h-4 w-4 mr-1" />
+                          Website
+                        </Button>
+                      </a>
+                    )}
+                    <Link href={`/admin/partners/${partner.id}`}>
+                      <Button variant="ghost" size="sm">
+                        <Pencil className="h-4 w-4 mr-1" />
+                        Edit
+                      </Button>
+                    </Link>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      ) : partners && partners.length > 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+            <Search className="h-8 w-8 text-muted-foreground/40" />
+            <p className="mt-2 text-sm text-muted-foreground">
+              No partners match your filters
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+            <Building2 className="h-12 w-12 text-muted-foreground/40" />
+            <h3 className="mt-3 text-lg font-medium">No partners yet</h3>
+            <p className="mt-1 text-sm text-muted-foreground max-w-sm">
+              Add sponsor and partner organizations to showcase on the platform.
+            </p>
+            <Button className="mt-4" asChild>
+              <Link href="/admin/partners/new">
+                <Plus className="mr-2 h-4 w-4" />
+                Add Partner
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }

src/app/(admin)/admin/programs/[id]/apply-settings/page.tsx

@@ -57,6 +57,7 @@ import {
   RotateCcw,
   Download,
   Upload,
+  ExternalLink,
 } from 'lucide-react'
 import {
   DndContext,
@@ -643,7 +644,7 @@ export default function ApplySettingsPage() {
           {program?.name} {program?.year}
         </Link>
         <span>/</span>
-        <span className="text-foreground">Apply Settings</span>
+        <span className="text-foreground">Apply Page</span>
       </div>
 
       {/* Header */}
@@ -665,6 +666,15 @@ export default function ApplySettingsPage() {
         </div>
 
         <div className="flex items-center gap-2 shrink-0 flex-wrap justify-end">
+          {/* View public apply page */}
+          {program?.slug && (
+            <Button variant="outline" size="sm" asChild>
+              <a href={`/apply/edition/${program.slug}`} target="_blank" rel="noopener noreferrer">
+                <ExternalLink className="mr-2 h-4 w-4" />
+                View Public Page
+              </a>
+            </Button>
+          )}
           {/* Template controls */}
           <Select
             onValueChange={(value) => {

src/app/(admin)/admin/projects/new/page.tsx

@@ -24,6 +24,8 @@ import {
 } from '@/components/ui/select'
 import { Skeleton } from '@/components/ui/skeleton'
 import { TagInput } from '@/components/shared/tag-input'
+import { CountrySelect } from '@/components/ui/country-select'
+import { PhoneInput } from '@/components/ui/phone-input'
 import { toast } from 'sonner'
 import {
   ArrowLeft,
@@ -31,15 +33,15 @@ import {
   Loader2,
   AlertCircle,
   FolderPlus,
-  Plus,
-  X,
 } from 'lucide-react'
 
 function NewProjectPageContent() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const roundIdParam = searchParams.get('round')
+  const programIdParam = searchParams.get('program')
 
+  const [selectedProgramId, setSelectedProgramId] = useState<string>(programIdParam || '')
   const [selectedRoundId, setSelectedRoundId] = useState<string>(roundIdParam || '')
 
   // Form state
@@ -49,15 +51,25 @@ function NewProjectPageContent() {
   const [tags, setTags] = useState<string[]>([])
   const [contactEmail, setContactEmail] = useState('')
   const [contactName, setContactName] = useState('')
+  const [contactPhone, setContactPhone] = useState('')
   const [country, setCountry] = useState('')
-  const [customFields, setCustomFields] = useState<{ key: string; value: string }[]>([])
+  const [city, setCity] = useState('')
+  const [institution, setInstitution] = useState('')
+  const [competitionCategory, setCompetitionCategory] = useState<string>('')
+  const [oceanIssue, setOceanIssue] = useState<string>('')
 
-  // Fetch active programs with rounds
+  // Fetch programs
   const { data: programs, isLoading: loadingPrograms } = trpc.program.list.useQuery({
     status: 'ACTIVE',
     includeRounds: true,
   })
 
+  // Fetch wizard config for selected program (dropdown options)
+  const { data: wizardConfig } = trpc.program.getWizardConfig.useQuery(
+    { programId: selectedProgramId },
+    { enabled: !!selectedProgramId }
+  )
+
   // Create mutation
   const utils = trpc.useUtils()
   const createProject = trpc.project.create.useMutation({
@@ -65,68 +77,46 @@ function NewProjectPageContent() {
       toast.success('Project created successfully')
       utils.project.list.invalidate()
       utils.round.get.invalidate()
-      router.push(`/admin/projects?round=${selectedRoundId}`)
+      router.push('/admin/projects')
     },
     onError: (error) => {
       toast.error(error.message)
     },
   })
 
-  // Get all rounds from programs
-  const rounds = programs?.flatMap((p) =>
-    (p.rounds || []).map((r) => ({
-      ...r,
-      programId: p.id,
-      programName: `${p.year} Edition`,
-    }))
-  ) || []
+  // Get rounds for selected program
+  const selectedProgram = programs?.find((p) => p.id === selectedProgramId)
+  const rounds = selectedProgram?.rounds || []
 
-  const selectedRound = rounds.find((r) => r.id === selectedRoundId)
-
-  const addCustomField = () => {
-    setCustomFields([...customFields, { key: '', value: '' }])
-  }
-
-  const updateCustomField = (index: number, key: string, value: string) => {
-    const newFields = [...customFields]
-    newFields[index] = { key, value }
-    setCustomFields(newFields)
-  }
-
-  const removeCustomField = (index: number) => {
-    setCustomFields(customFields.filter((_, i) => i !== index))
-  }
+  // Get dropdown options from wizard config
+  const categoryOptions = wizardConfig?.competitionCategories || []
+  const oceanIssueOptions = wizardConfig?.oceanIssues || []
 
   const handleSubmit = () => {
     if (!title.trim()) {
       toast.error('Please enter a project title')
       return
     }
-    if (!selectedRoundId) {
-      toast.error('Please select a round')
+    if (!selectedProgramId) {
+      toast.error('Please select a program')
       return
     }
 
-    // Build metadata
-    const metadataJson: Record<string, unknown> = {}
-    if (contactEmail) metadataJson.contactEmail = contactEmail
-    if (contactName) metadataJson.contactName = contactName
-    if (country) metadataJson.country = country
-
-    // Add custom fields
-    customFields.forEach((field) => {
-      if (field.key.trim() && field.value.trim()) {
-        metadataJson[field.key.trim()] = field.value.trim()
-      }
-    })
-
     createProject.mutate({
-      roundId: selectedRoundId,
+      programId: selectedProgramId,
+      roundId: selectedRoundId || undefined,
       title: title.trim(),
       teamName: teamName.trim() || undefined,
       description: description.trim() || undefined,
       tags: tags.length > 0 ? tags : undefined,
-      metadataJson: Object.keys(metadataJson).length > 0 ? metadataJson : undefined,
+      country: country || undefined,
+      competitionCategory: competitionCategory as 'STARTUP' | 'BUSINESS_CONCEPT' | undefined || undefined,
+      oceanIssue: oceanIssue as 'POLLUTION_REDUCTION' | 'CLIMATE_MITIGATION' | 'TECHNOLOGY_INNOVATION' | 'SUSTAINABLE_SHIPPING' | 'BLUE_CARBON' | 'HABITAT_RESTORATION' | 'COMMUNITY_CAPACITY' | 'SUSTAINABLE_FISHING' | 'CONSUMER_AWARENESS' | 'OCEAN_ACIDIFICATION' | 'OTHER' | undefined || undefined,
+      institution: institution.trim() || undefined,
+      contactPhone: contactPhone.trim() || undefined,
+      contactEmail: contactEmail.trim() || undefined,
+      contactName: contactName.trim() || undefined,
+      city: city.trim() || undefined,
     })
   }
 
@@ -156,64 +146,67 @@ function NewProjectPageContent() {
         </div>
       </div>
 
-      {/* Round selection */}
-      {!selectedRoundId ? (
-        <Card>
-          <CardHeader>
-            <CardTitle>Select Round</CardTitle>
-            <CardDescription>
-              Choose the round for this project submission
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {rounds.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-8 text-center">
-                <AlertCircle className="h-12 w-12 text-muted-foreground/50" />
-                <p className="mt-2 font-medium">No Active Rounds</p>
-                <p className="text-sm text-muted-foreground">
-                  Create a round first before adding projects
-                </p>
-                <Button asChild className="mt-4">
-                  <Link href="/admin/rounds/new">Create Round</Link>
-                </Button>
-              </div>
-            ) : (
-              <>
-                <Select value={selectedRoundId} onValueChange={setSelectedRoundId}>
+      {/* Program & Round selection */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Program & Round</CardTitle>
+          <CardDescription>
+            Select the program for this project. Round assignment is optional.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!programs || programs.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <AlertCircle className="h-12 w-12 text-muted-foreground/50" />
+              <p className="mt-2 font-medium">No Active Programs</p>
+              <p className="text-sm text-muted-foreground">
+                Create a program first before adding projects
+              </p>
+            </div>
+          ) : (
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label>Program *</Label>
+                <Select value={selectedProgramId} onValueChange={(v) => {
+                  setSelectedProgramId(v)
+                  setSelectedRoundId('') // Reset round on program change
+                }}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select a round" />
+                    <SelectValue placeholder="Select a program" />
                   </SelectTrigger>
                   <SelectContent>
-                    {rounds.map((round) => (
-                      <SelectItem key={round.id} value={round.id}>
-                        {round.programName} - {round.name}
+                    {programs.map((p) => (
+                      <SelectItem key={p.id} value={p.id}>
+                        {p.name} {p.year}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-              </>
-            )}
-          </CardContent>
-        </Card>
-      ) : (
-        <>
-          {/* Selected round info */}
-          <Card>
-            <CardContent className="flex items-center justify-between py-4">
-              <div>
-                <p className="font-medium">{selectedRound?.programName}</p>
-                <p className="text-sm text-muted-foreground">{selectedRound?.name}</p>
               </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setSelectedRoundId('')}
-              >
-                Change Round
-              </Button>
-            </CardContent>
-          </Card>
 
+              <div className="space-y-2">
+                <Label>Round (optional)</Label>
+                <Select value={selectedRoundId || '__none__'} onValueChange={(v) => setSelectedRoundId(v === '__none__' ? '' : v)} disabled={!selectedProgramId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="No round assigned" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">No round assigned</SelectItem>
+                    {rounds.map((r: { id: string; name: string }) => (
+                      <SelectItem key={r.id} value={r.id}>
+                        {r.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {selectedProgramId && (
+        <>
           <div className="grid gap-6 lg:grid-cols-2">
             {/* Basic Info */}
             <Card>
@@ -265,6 +258,52 @@ function NewProjectPageContent() {
                     maxTags={10}
                   />
                 </div>
+
+                {categoryOptions.length > 0 && (
+                  <div className="space-y-2">
+                    <Label>Competition Category</Label>
+                    <Select value={competitionCategory} onValueChange={setCompetitionCategory}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select category..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categoryOptions.map((opt: { value: string; label: string }) => (
+                          <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+
+                {oceanIssueOptions.length > 0 && (
+                  <div className="space-y-2">
+                    <Label>Ocean Issue</Label>
+                    <Select value={oceanIssue} onValueChange={setOceanIssue}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select ocean issue..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {oceanIssueOptions.map((opt: { value: string; label: string }) => (
+                          <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+
+                <div className="space-y-2">
+                  <Label htmlFor="institution">Institution</Label>
+                  <Input
+                    id="institution"
+                    value={institution}
+                    onChange={(e) => setInstitution(e.target.value)}
+                    placeholder="e.g., University of Monaco"
+                  />
+                </div>
               </CardContent>
             </Card>
 
@@ -299,11 +338,28 @@ function NewProjectPageContent() {
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="country">Country</Label>
-                  <Input
-                    id="country"
+                  <Label>Contact Phone</Label>
+                  <PhoneInput
+                    value={contactPhone}
+                    onChange={setContactPhone}
+                    defaultCountry="MC"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Country</Label>
+                  <CountrySelect
                     value={country}
-                    onChange={(e) => setCountry(e.target.value)}
+                    onChange={setCountry}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="city">City</Label>
+                  <Input
+                    id="city"
+                    value={city}
+                    onChange={(e) => setCity(e.target.value)}
                     placeholder="e.g., Monaco"
                   />
                 </div>
@@ -311,65 +367,6 @@ function NewProjectPageContent() {
             </Card>
           </div>
 
-          {/* Custom Fields */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center justify-between">
-                <span>Additional Information</span>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={addCustomField}
-                >
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add Field
-                </Button>
-              </CardTitle>
-              <CardDescription>
-                Add custom metadata fields for this project
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              {customFields.length === 0 ? (
-                <p className="text-sm text-muted-foreground text-center py-4">
-                  No additional fields. Click &quot;Add Field&quot; to add custom information.
-                </p>
-              ) : (
-                <div className="space-y-3">
-                  {customFields.map((field, index) => (
-                    <div key={index} className="flex gap-2">
-                      <Input
-                        placeholder="Field name"
-                        value={field.key}
-                        onChange={(e) =>
-                          updateCustomField(index, e.target.value, field.value)
-                        }
-                        className="flex-1"
-                      />
-                      <Input
-                        placeholder="Value"
-                        value={field.value}
-                        onChange={(e) =>
-                          updateCustomField(index, field.key, e.target.value)
-                        }
-                        className="flex-1"
-                      />
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => removeCustomField(index)}
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-
           {/* Actions */}
           <div className="flex justify-end gap-4">
             <Button variant="outline" asChild>
@@ -377,7 +374,7 @@ function NewProjectPageContent() {
             </Button>
             <Button
               onClick={handleSubmit}
-              disabled={createProject.isPending || !title.trim()}
+              disabled={createProject.isPending || !title.trim() || !selectedProgramId}
             >
               {createProject.isPending ? (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />

src/app/(admin)/admin/projects/page.tsx

@@ -81,6 +81,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 import { truncate } from '@/lib/utils'
 import { ProjectLogo } from '@/components/shared/project-logo'
+import { StatusBadge } from '@/components/shared/status-badge'
 import { Pagination } from '@/components/shared/pagination'
 import {
   ProjectFiltersBar,
@@ -256,6 +257,11 @@ export default function ProjectsPage() {
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
   const [projectToDelete, setProjectToDelete] = useState<{ id: string; title: string } | null>(null)
+  // Assign to round dialog state
+  const [assignDialogOpen, setAssignDialogOpen] = useState(false)
+  const [projectToAssign, setProjectToAssign] = useState<{ id: string; title: string } | null>(null)
+  const [assignRoundId, setAssignRoundId] = useState('')
+
   const [aiTagDialogOpen, setAiTagDialogOpen] = useState(false)
   const [taggingScope, setTaggingScope] = useState<'round' | 'program'>('round')
   const [selectedRoundForTagging, setSelectedRoundForTagging] = useState<string>('')
@@ -420,6 +426,19 @@ export default function ProjectsPage() {
     ? data.projects.some((p) => selectedIds.has(p.id)) && !allVisibleSelected
     : false
 
+  const assignToRound = trpc.projectPool.assignToRound.useMutation({
+    onSuccess: () => {
+      toast.success('Project assigned to round')
+      utils.project.list.invalidate()
+      setAssignDialogOpen(false)
+      setProjectToAssign(null)
+      setAssignRoundId('')
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Failed to assign project')
+    },
+  })
+
   const deleteProject = trpc.project.delete.useMutation({
     onSuccess: () => {
       toast.success('Project deleted successfully')
@@ -448,6 +467,12 @@ export default function ProjectsPage() {
           </p>
         </div>
         <div className="flex gap-2">
+          <Button variant="outline" asChild>
+            <Link href="/admin/projects/pool">
+              <Layers className="mr-2 h-4 w-4" />
+              Project Pool
+            </Link>
+          </Button>
           <Button variant="outline" onClick={() => setAiTagDialogOpen(true)}>
             <Sparkles className="mr-2 h-4 w-4" />
             AI Tags
@@ -600,7 +625,13 @@ export default function ProjectsPage() {
                     <TableCell>
                       <div>
                         <div className="flex items-center gap-2">
-                          <p>{project.round?.name ?? '-'}</p>
+                          {project.round ? (
+                            <p>{project.round.name}</p>
+                          ) : (
+                            <Badge variant="outline" className="text-xs text-amber-600 border-amber-300 bg-amber-50">
+                              Unassigned
+                            </Badge>
+                          )}
                           {project.status === 'REJECTED' && (
                             <Badge variant="destructive" className="text-xs">
                               Eliminated
@@ -620,11 +651,7 @@ export default function ProjectsPage() {
                       </div>
                     </TableCell>
                     <TableCell>
-                      <Badge
-                        variant={statusColors[project.status ?? 'SUBMITTED'] || 'secondary'}
-                      >
-                        {(project.status ?? 'SUBMITTED').replace('_', ' ')}
-                      </Badge>
+                      <StatusBadge status={project.status ?? 'SUBMITTED'} />
                     </TableCell>
                     <TableCell className="relative z-10 text-right">
                       <DropdownMenu>
@@ -647,6 +674,18 @@ export default function ProjectsPage() {
                               Edit
                             </Link>
                           </DropdownMenuItem>
+                          {!project.round && (
+                            <DropdownMenuItem
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                setProjectToAssign({ id: project.id, title: project.title })
+                                setAssignDialogOpen(true)
+                              }}
+                            >
+                              <FolderOpen className="mr-2 h-4 w-4" />
+                              Assign to Round
+                            </DropdownMenuItem>
+                          )}
                           <DropdownMenuSeparator />
                           <DropdownMenuItem
                             className="text-destructive focus:text-destructive"
@@ -697,14 +736,10 @@ export default function ProjectsPage() {
                           <CardTitle className="text-base line-clamp-2">
                             {project.title}
                           </CardTitle>
-                          <Badge
-                            variant={
-                              statusColors[project.status ?? 'SUBMITTED'] || 'secondary'
-                            }
+                          <StatusBadge
+                            status={project.status ?? 'SUBMITTED'}
                             className="shrink-0"
-                          >
-                            {(project.status ?? 'SUBMITTED').replace('_', ' ')}
-                          </Badge>
+                          />
                         </div>
                         <CardDescription>{project.teamName}</CardDescription>
                       </div>
@@ -857,6 +892,59 @@ export default function ProjectsPage() {
         </AlertDialogContent>
       </AlertDialog>
 
+      {/* Assign to Round Dialog */}
+      <Dialog open={assignDialogOpen} onOpenChange={(open) => {
+        setAssignDialogOpen(open)
+        if (!open) { setProjectToAssign(null); setAssignRoundId('') }
+      }}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Assign to Round</DialogTitle>
+            <DialogDescription>
+              Assign &quot;{projectToAssign?.title}&quot; to a round.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>Select Round</Label>
+              <Select value={assignRoundId} onValueChange={setAssignRoundId}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Choose a round..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {programs?.flatMap((p) =>
+                    (p.rounds || []).map((r: { id: string; name: string }) => (
+                      <SelectItem key={r.id} value={r.id}>
+                        {p.name} {p.year} - {r.name}
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setAssignDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                if (projectToAssign && assignRoundId) {
+                  assignToRound.mutate({
+                    projectIds: [projectToAssign.id],
+                    roundId: assignRoundId,
+                  })
+                }
+              }}
+              disabled={!assignRoundId || assignToRound.isPending}
+            >
+              {assignToRound.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Assign
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       {/* AI Tagging Dialog */}
       <Dialog open={aiTagDialogOpen} onOpenChange={handleCloseTaggingDialog}>
         <DialogContent className="sm:max-w-lg">

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

@@ -32,7 +32,17 @@ import {
   type Criterion,
 } from '@/components/forms/evaluation-form-builder'
 import { RoundTypeSettings } from '@/components/forms/round-type-settings'
-import { ArrowLeft, Loader2, AlertCircle, AlertTriangle, Bell, GitCompare, MessageSquare, FileText, Calendar } from 'lucide-react'
+import { ArrowLeft, Loader2, AlertCircle, AlertTriangle, Bell, GitCompare, MessageSquare, FileText, Calendar, LayoutTemplate } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { toast } from 'sonner'
 import { Switch } from '@/components/ui/switch'
 import { Slider } from '@/components/ui/slider'
 import { Label } from '@/components/ui/label'
@@ -113,9 +123,23 @@ function EditRoundContent({ roundId }: { roundId: string }) {
     roundId,
   })
 
+  const [saveTemplateOpen, setSaveTemplateOpen] = useState(false)
+  const [templateName, setTemplateName] = useState('')
+
   const utils = trpc.useUtils()
 
   // Mutations
+  const saveAsTemplate = trpc.roundTemplate.create.useMutation({
+    onSuccess: () => {
+      toast.success('Round saved as template')
+      setSaveTemplateOpen(false)
+      setTemplateName('')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
   const updateRound = trpc.round.update.useMutation({
     onSuccess: () => {
       // Invalidate cache to ensure fresh data
@@ -825,6 +849,58 @@ function EditRoundContent({ roundId }: { roundId: string }) {
 
           {/* Actions */}
           <div className="flex justify-end gap-3">
+            <Dialog open={saveTemplateOpen} onOpenChange={setSaveTemplateOpen}>
+              <DialogTrigger asChild>
+                <Button type="button" variant="outline">
+                  <LayoutTemplate className="mr-2 h-4 w-4" />
+                  Save as Template
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                  <DialogTitle>Save as Template</DialogTitle>
+                  <DialogDescription>
+                    Save the current round configuration as a reusable template.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="templateName">Template Name</Label>
+                    <Input
+                      id="templateName"
+                      value={templateName}
+                      onChange={(e) => setTemplateName(e.target.value)}
+                      placeholder="e.g., Standard Evaluation Round"
+                    />
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setSaveTemplateOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    disabled={!templateName.trim() || saveAsTemplate.isPending}
+                    onClick={() => {
+                      saveAsTemplate.mutate({
+                        name: templateName.trim(),
+                        roundType: roundType,
+                        criteriaJson: criteria,
+                        settingsJson: roundSettings,
+                        programId: round?.programId,
+                      })
+                    }}
+                  >
+                    {saveAsTemplate.isPending && (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    )}
+                    Save Template
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
             <Button type="button" variant="outline" asChild>
               <Link href={`/admin/rounds/${roundId}`}>Cancel</Link>
             </Button>

src/app/(admin)/admin/rounds/[id]/filtering/results/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { use, useState } from 'react'
+import { use, useState, useCallback } from 'react'
 import Link from 'next/link'
 import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
@@ -43,6 +43,7 @@ import {
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
 import { Pagination } from '@/components/shared/pagination'
+import { CsvExportDialog } from '@/components/shared/csv-export-dialog'
 import { toast } from 'sonner'
 import {
   ArrowLeft,
@@ -114,37 +115,17 @@ export default function FilteringResultsPage({
     { roundId },
     { enabled: false }
   )
+  const [showExportDialog, setShowExportDialog] = useState(false)
 
-  const handleExport = async () => {
-    const result = await exportResults.refetch()
-    if (result.data) {
-      const { data: rows, columns } = result.data
-
-      const csvContent = [
-        columns.join(','),
-        ...rows.map((row) =>
-          columns
-            .map((col) => {
-              const value = row[col as keyof typeof row]
-              if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
-                return `"${value.replace(/"/g, '""')}"`
-              }
-              return value ?? ''
-            })
-            .join(',')
-        ),
-      ].join('\n')
-
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
-      const url = URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = url
-      link.download = `filtering-results-${new Date().toISOString().split('T')[0]}.csv`
-      link.click()
-      URL.revokeObjectURL(url)
-    }
+  const handleExport = () => {
+    setShowExportDialog(true)
   }
 
+  const handleRequestExportData = useCallback(async () => {
+    const result = await exportResults.refetch()
+    return result.data ?? undefined
+  }, [exportResults])
+
   const toggleRow = (id: string) => {
     const next = new Set(expandedRows)
     if (next.has(id)) next.delete(id)
@@ -601,6 +582,16 @@ export default function FilteringResultsPage({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* CSV Export Dialog with Column Selection */}
+      <CsvExportDialog
+        open={showExportDialog}
+        onOpenChange={setShowExportDialog}
+        exportData={exportResults.data ?? undefined}
+        isLoading={exportResults.isFetching}
+        filename="filtering-results"
+        onRequestData={handleRequestExportData}
+      />
     </div>
   )
 }