feat: multi-role jury fix, country flags, applicant deadline banner, timeline

- Fix project list returning empty for users with both SUPER_ADMIN and JURY_MEMBER roles (jury filter now skips admins) in project, assignment, and evaluation routers - Add CountryDisplay component showing flag emoji + name everywhere country is displayed (admin, observer, jury, mentor views — 17 files) - Add countdown deadline banner on applicant dashboard for INTAKE, SUBMISSION, and MENTORING rounds with live timer - Remove quick action buttons from applicant dashboard - Fix competition timeline sidebar: green dots/connectors only up to current round, yellow dot for current round, red connector into rejected round, grey after Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 15:00:29 +01:00
parent a1e758bc39
commit 37351044ed
21 changed files with 172 additions and 79 deletions
--- a/src/app/(applicant)/applicant/page.tsx
+++ b/src/app/(applicant)/applicant/page.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
 import type { Route } from 'next'
@@ -38,9 +38,22 @@ import {
  UserCircle,
  Trophy,
  Vote,
+  Clock,
 } from 'lucide-react'
 import { toast } from 'sonner'

+function formatCountdown(ms: number): string {
+  if (ms <= 0) return 'Closed'
+  const days = Math.floor(ms / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((ms % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+  const minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60))
+  const parts: string[] = []
+  if (days > 0) parts.push(`${days}d`)
+  if (hours > 0) parts.push(`${hours}h`)
+  parts.push(`${minutes}m`)
+  return parts.join(' ')
+}
+
 const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive' | 'warning'> = {
  DRAFT: 'secondary',
  SUBMITTED: 'default',
@@ -80,6 +93,13 @@ export default function ApplicantDashboardPage() {
    enabled: isAuthenticated,
  })

+  // Live countdown timer for open rounds
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), 60_000)
+    return () => clearInterval(interval)
+  }, [])
+
  if (sessionStatus === 'loading' || (isAuthenticated && isLoading)) {
    return (
      <div className="space-y-6">
@@ -181,6 +201,48 @@ export default function ApplicantDashboardPage() {
        </div>
      </div>

+      {/* Active round deadline banner */}
+      {!isRejected && openRounds.length > 0 && (() => {
+        const submissionTypes = new Set(['INTAKE', 'SUBMISSION', 'MENTORING'])
+        const roundsWithDeadline = openRounds.filter((r) => r.windowCloseAt && submissionTypes.has(r.roundType))
+        if (roundsWithDeadline.length === 0) return null
+        return roundsWithDeadline.map((round) => {
+          const closeAt = new Date(round.windowCloseAt!).getTime()
+          const remaining = closeAt - now
+          const isUrgent = remaining > 0 && remaining < 1000 * 60 * 60 * 24 * 3 // < 3 days
+          return (
+            <div
+              key={round.id}
+              className={`flex flex-col sm:flex-row items-start sm:items-center gap-3 rounded-lg border px-4 py-3 ${
+                isUrgent
+                  ? 'border-amber-500/50 bg-amber-50 dark:bg-amber-950/20'
+                  : 'border-primary/20 bg-primary/5'
+              }`}
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <Clock className={`h-4 w-4 shrink-0 ${isUrgent ? 'text-amber-600 dark:text-amber-400' : 'text-primary'}`} />
+                <span className="font-medium text-sm truncate">{round.name}</span>
+                <Badge variant={isUrgent ? 'warning' : 'default'} className="shrink-0">
+                  {remaining > 0 ? formatCountdown(remaining) + ' left' : 'Closed'}
+                </Badge>
+              </div>
+              <span className="text-xs text-muted-foreground sm:ml-auto shrink-0">
+                Closes {new Date(round.windowCloseAt!).toLocaleDateString(undefined, {
+                  weekday: 'short',
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })}{' '}
+                at {new Date(round.windowCloseAt!).toLocaleTimeString(undefined, {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </span>
+            </div>
+          )
+        })
+      })()}
+
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Main content */}
        <div className="lg:col-span-2 space-y-6">
@@ -280,53 +342,6 @@ export default function ApplicantDashboardPage() {
            </AnimatedCard>
          )}

-          {/* Quick actions */}
-          {!isRejected && (
-          <AnimatedCard index={2}>
-            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              <Link href={"/applicant/documents" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/30 hover:bg-blue-500/5">
-                <div className="rounded-xl bg-blue-500/10 p-2.5 transition-colors group-hover:bg-blue-500/20">
-                  <Upload className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium">Documents</p>
-                  <p className="text-xs text-muted-foreground">
-                    {openRounds.length > 0 ? `${openRounds.length} round(s) open` : 'View uploads'}
-                  </p>
-                </div>
-                <ArrowRight className="h-4 w-4 text-muted-foreground" />
-              </Link>
-
-              <Link href={"/applicant/team" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-purple-500/30 hover:bg-purple-500/5">
-                <div className="rounded-xl bg-purple-500/10 p-2.5 transition-colors group-hover:bg-purple-500/20">
-                  <Users className="h-5 w-5 text-purple-600 dark:text-purple-400" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium">Team</p>
-                  <p className="text-xs text-muted-foreground">
-                    {project.teamMembers.length} member(s)
-                  </p>
-                </div>
-                <ArrowRight className="h-4 w-4 text-muted-foreground" />
-              </Link>
-
-              {project.mentorAssignment && (
-                <Link href={"/applicant/mentor" as Route} className="group flex items-center gap-3 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-green-500/30 hover:bg-green-500/5">
-                  <div className="rounded-xl bg-green-500/10 p-2.5 transition-colors group-hover:bg-green-500/20">
-                    <MessageSquare className="h-5 w-5 text-green-600 dark:text-green-400" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium">Mentor</p>
-                    <p className="text-xs text-muted-foreground">
-                      {project.mentorAssignment.mentor?.name || 'Assigned'}
-                    </p>
-                  </div>
-                  <ArrowRight className="h-4 w-4 text-muted-foreground" />
-                </Link>
-              )}
-            </div>
-          </AnimatedCard>
-          )}

          {/* Document Completeness */}
          {docCompleteness && docCompleteness.length > 0 && (
--- a/src/components/admin/members-content.tsx
+++ b/src/components/admin/members-content.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useSearchParams, usePathname } from 'next/navigation'
 import { trpc } from '@/lib/trpc/client'
 import { Badge } from '@/components/ui/badge'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -805,7 +806,7 @@ function ApplicantsTabContent({ search, searchInput, setSearchInput }: { search:
                  )}
                </TableCell>
                <TableCell>
-                  <span className="text-sm">{user.nationality || <span className="text-muted-foreground">-</span>}</span>
+                  <span className="text-sm">{user.nationality ? <CountryDisplay country={user.nationality} /> : <span className="text-muted-foreground">-</span>}</span>
                </TableCell>
                <TableCell>
                  <span className="text-sm">{user.institution || <span className="text-muted-foreground">-</span>}</span>
--- a/src/components/admin/round/award-shortlist.tsx
+++ b/src/components/admin/round/award-shortlist.tsx
@@ -35,6 +35,7 @@ import {
  AlertTriangle,
  Search,
 } from 'lucide-react'
+import { CountryDisplay } from '@/components/shared/country-display'

 type AwardShortlistProps = {
  awardId: string
@@ -342,7 +343,13 @@ export function AwardShortlist({
                                      </a>
                                    </p>
                                    <p className="text-xs text-muted-foreground">
-                                      {[e.project.teamName, e.project.country, e.project.competitionCategory].filter(Boolean).join(', ') || '—'}
+                                      {[e.project.teamName, e.project.competitionCategory].filter(Boolean).length > 0 || e.project.country ? (
+                                        <>
+                                          {[e.project.teamName, e.project.competitionCategory].filter(Boolean).join(', ')}
+                                          {(e.project.teamName || e.project.competitionCategory) && e.project.country ? ', ' : ''}
+                                          {e.project.country && <CountryDisplay country={e.project.country} />}
+                                        </>
+                                      ) : '—'}
                                    </p>
                                  </div>
                                </td>
--- a/src/components/admin/round/filtering-dashboard.tsx
+++ b/src/components/admin/round/filtering-dashboard.tsx
@@ -74,6 +74,7 @@ import { motion, AnimatePresence } from 'motion/react'
 import Link from 'next/link'
 import type { Route } from 'next'
 import { AwardShortlist } from './award-shortlist'
+import { CountryDisplay } from '@/components/shared/country-display'

 type FilteringDashboardProps = {
  competitionId: string
@@ -924,7 +925,7 @@ export function FilteringDashboard({ competitionId, roundId }: FilteringDashboar
                            </div>
                            <p className="text-xs text-muted-foreground truncate">
                              {result.project?.teamName}
-                              {result.project?.country && ` \u00b7 ${result.project.country}`}
+                              {result.project?.country && <> · <CountryDisplay country={result.project.country} /></>}
                            </p>
                          </div>
                        </div>
--- a/src/components/admin/round/finalization-tab.tsx
+++ b/src/components/admin/round/finalization-tab.tsx
@@ -44,6 +44,7 @@ import {
 import { cn } from '@/lib/utils'
 import { projectStateConfig } from '@/lib/round-config'
 import { EmailPreviewDialog } from './email-preview-dialog'
+import { CountryDisplay } from '@/components/shared/country-display'

 // ── Types ──────────────────────────────────────────────────────────────────

@@ -233,7 +234,7 @@ export function FinalizationTab({ roundId, roundStatus }: FinalizationTabProps)
        {project.category === 'STARTUP' ? 'Startup' : project.category === 'BUSINESS_CONCEPT' ? 'Concept' : project.category ?? '-'}
      </td>
      <td className="px-3 py-2.5 hidden md:table-cell text-muted-foreground">
-        {project.country ?? '-'}
+        {project.country ? <CountryDisplay country={project.country} /> : '-'}
      </td>
      <td className="px-3 py-2.5 text-center">
        <Badge variant="secondary" className={cn('text-xs', stateLabelColors[project.currentState] ?? '')}>
--- a/src/components/admin/round/project-states-table.tsx
+++ b/src/components/admin/round/project-states-table.tsx
@@ -63,6 +63,7 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import type { Route } from 'next'
+import { CountryDisplay } from '@/components/shared/country-display'

 const PROJECT_STATES = ['PENDING', 'IN_PROGRESS', 'PASSED', 'REJECTED', 'COMPLETED', 'WITHDRAWN'] as const
 type ProjectState = (typeof PROJECT_STATES)[number]
@@ -448,7 +449,7 @@ export function ProjectStatesTable({ competitionId, roundId, roundStatus, compet
                </Badge>
              </div>
              <div className="text-xs text-muted-foreground truncate">
-                {ps.project?.country || '—'}
+                {ps.project?.country ? <CountryDisplay country={ps.project.country} /> : '—'}
              </div>
              <div>
                <Badge variant="outline" className={`text-xs ${cfg.color}`}>
@@ -1087,7 +1088,7 @@ function AddProjectDialog({
                          <p className="text-sm font-medium truncate">{project.title}</p>
                          <p className="text-xs text-muted-foreground truncate">
                            {project.teamName}
-                            {project.country && <> &middot; {project.country}</>}
+                            {project.country && <> &middot; <CountryDisplay country={project.country} /></>}
                          </p>
                        </div>
                        {project.competitionCategory && (
@@ -1237,7 +1238,7 @@ function AddProjectDialog({
                                <p className="text-sm font-medium truncate">{project.title}</p>
                                <p className="text-xs text-muted-foreground truncate">
                                  {project.teamName}
-                                  {project.country && <> &middot; {project.country}</>}
+                                  {project.country && <> &middot; <CountryDisplay country={project.country} /></>}
                                </p>
                              </div>
                              <div className="flex items-center gap-1.5 ml-2 shrink-0">
--- a/src/components/admin/round/ranking-dashboard.tsx
+++ b/src/components/admin/round/ranking-dashboard.tsx
@@ -55,6 +55,7 @@ import {
  Download,
 } from 'lucide-react'
 import type { RankedProjectEntry } from '@/server/services/ai-ranking'
+import { CountryDisplay } from '@/components/shared/country-display'

 // ─── Types ────────────────────────────────────────────────────────────────────

@@ -163,7 +164,7 @@ function SortableProjectRow({
        {projectInfo?.teamName && (
          <p className="text-xs text-muted-foreground truncate">
            {projectInfo.teamName}
-            {projectInfo.country ? ` · ${projectInfo.country}` : ''}
+            {projectInfo.country ? <> · <CountryDisplay country={projectInfo.country} /></> : ''}
          </p>
        )}
      </div>
--- a/src/components/admin/semi-finalists-content.tsx
+++ b/src/components/admin/semi-finalists-content.tsx
@@ -6,6 +6,7 @@ import type { Route } from 'next'
 import { useRouter } from 'next/navigation'
 import { trpc } from '@/lib/trpc/client'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -214,7 +215,7 @@ export function SemiFinalistsContent({ editionId }: SemiFinalistsContentProps) {
                          {categoryLabels[project.category ?? ''] ?? project.category}
                        </Badge>
                      </TableCell>
-                      <TableCell className="text-sm">{project.country || '—'}</TableCell>
+                      <TableCell className="text-sm">{project.country ? <CountryDisplay country={project.country} /> : '—'}</TableCell>
                      <TableCell className="text-sm">{project.currentRound}</TableCell>
                      <TableCell>
                        <TooltipProvider>
--- a/src/components/applicant/competition-timeline.tsx
+++ b/src/components/applicant/competition-timeline.tsx
@@ -202,13 +202,35 @@ export function CompetitionTimelineSidebar() {
          // Is this entry after the elimination point?
          const isAfterElimination = eliminationIndex >= 0 && index > eliminationIndex

-          // Is this the current round the project is in (regardless of round status)?
-          const isCurrent = !!entry.projectState && entry.projectState !== 'PASSED' && entry.projectState !== 'COMPLETED' && entry.projectState !== 'REJECTED'
+          // Is this the current round? Either has an active project state,
+          // or is the first round the project hasn't passed yet (for seed data
+          // where project states may be missing).
+          const hasActiveProjectState = !!entry.projectState && entry.projectState !== 'PASSED' && entry.projectState !== 'COMPLETED' && entry.projectState !== 'REJECTED'
+          const isCurrent = !isAfterElimination && (hasActiveProjectState || (
+            !isPassed && !isRejected && !isCompleted &&
+            data.entries.slice(0, index).every((prev) =>
+              prev.projectState === 'PASSED' || prev.projectState === 'COMPLETED' ||
+              prev.status === 'ROUND_CLOSED' || prev.status === 'ROUND_ARCHIVED'
+            ) && index > 0
+          ))

-          // Determine connector segment color (no icons, just colored lines)
+          // Connector color: green up to and including the current round,
+          // red leading into the rejected round, neutral after.
          let connectorColor = 'bg-border'
-          if ((isPassed || isCompleted) && !isAfterElimination) connectorColor = 'bg-emerald-400'
-          else if (isRejected) connectorColor = 'bg-destructive/30'
+          const nextEntry = data.entries[index + 1]
+          const nextIsRejected = nextEntry?.projectState === 'REJECTED'
+          if (isAfterElimination) {
+            connectorColor = 'bg-border'
+          } else if (isRejected) {
+            // From rejected round onward = neutral
+            connectorColor = 'bg-border'
+          } else if (nextIsRejected) {
+            // Connector leading INTO the rejected round = red
+            connectorColor = 'bg-destructive/40'
+          } else if (isCompleted || isPassed) {
+            // Rounds the project has passed through = green
+            connectorColor = 'bg-emerald-400'
+          }

          // Dot inner content
          let dotInner: React.ReactNode = null
@@ -222,7 +244,7 @@ export function CompetitionTimelineSidebar() {
          } else if (isGrandFinale && (isCompleted || isPassed)) {
            dotClasses = 'bg-yellow-500 border-2 border-yellow-500'
            dotInner = <Trophy className="h-3.5 w-3.5 text-white" />
-          } else if (isCompleted || isPassed) {
+          } else if (isPassed || (isCompleted && !isCurrent)) {
            dotClasses = 'bg-emerald-500 border-2 border-emerald-500'
            dotInner = <Check className="h-3.5 w-3.5 text-white" />
          } else if (isCurrent) {
--- a/src/components/observer/dashboard/filtering-panel.tsx
+++ b/src/components/observer/dashboard/filtering-panel.tsx
@@ -9,6 +9,7 @@ import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Button } from '@/components/ui/button'
 import { AnimatedCard } from '@/components/shared/animated-container'
+import { CountryDisplay } from '@/components/shared/country-display'
 import {
  Select,
  SelectContent,
@@ -200,7 +201,7 @@ export function FilteringPanel({ roundId }: { roundId: string }) {
                              {r.project?.title ?? 'Unknown'}
                            </Link>
                            <p className="text-xs text-muted-foreground truncate">
-                              {formatCategory(r.project?.competitionCategory)} · {r.project?.country ?? ''}
+                              {formatCategory(r.project?.competitionCategory)} · {r.project?.country ? <CountryDisplay country={r.project.country} /> : ''}
                            </p>
                          </div>
                          <div className="flex items-center gap-2 shrink-0">
--- a/src/components/observer/dashboard/intake-panel.tsx
+++ b/src/components/observer/dashboard/intake-panel.tsx
@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Badge } from '@/components/ui/badge'
 import { AnimatedCard } from '@/components/shared/animated-container'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { Inbox, Globe, FolderOpen } from 'lucide-react'

 function relativeTime(date: Date | string): string {
@@ -87,11 +88,11 @@ export function IntakePanel({ roundId, programId }: { roundId: string; programId
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium truncate">{p.title}</p>
                      <p className="text-xs text-muted-foreground truncate">
-                        {p.teamName ?? 'No team'} · {p.country ?? ''}
+                        {p.teamName ?? 'No team'} · {p.country ? <CountryDisplay country={p.country} /> : ''}
                      </p>
                    </div>
                    <span className="text-[11px] tabular-nums text-muted-foreground shrink-0">
-                      {p.country ?? ''}
+                      {p.country ? <CountryDisplay country={p.country} /> : ''}
                    </span>
                  </Link>
                ))}
--- a/src/components/observer/dashboard/previous-round-section.tsx
+++ b/src/components/observer/dashboard/previous-round-section.tsx
@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
 import { AnimatedCard } from '@/components/shared/animated-container'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { ArrowDown, ChevronDown, ChevronUp, TrendingDown } from 'lucide-react'
 import { cn, formatCategory } from '@/lib/utils'

@@ -107,7 +108,7 @@ export function PreviousRoundSection({ currentRoundId }: { currentRoundId: strin
                <div className="grid grid-cols-2 gap-x-4 gap-y-1">
                  {countryAttrition.map((c: any) => (
                    <div key={c.country} className="flex items-center justify-between text-sm py-0.5">
-                      <span className="truncate">{c.country}</span>
+                      <span className="truncate"><CountryDisplay country={c.country} /></span>
                      <Badge variant="destructive" className="tabular-nums text-xs">
                        -{c.lost}
                      </Badge>
--- a/src/components/observer/dashboard/submission-panel.tsx
+++ b/src/components/observer/dashboard/submission-panel.tsx
@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Badge } from '@/components/ui/badge'
 import { AnimatedCard } from '@/components/shared/animated-container'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { FileText, Upload, Users } from 'lucide-react'

 function relativeTime(date: Date | string): string {
@@ -146,11 +147,11 @@ export function SubmissionPanel({ roundId, programId }: { roundId: string; progr
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium truncate">{p.title}</p>
                      <p className="text-xs text-muted-foreground truncate">
-                        {p.teamName ?? 'No team'} · {p.country ?? ''}
+                        {p.teamName ?? 'No team'} · {p.country ? <CountryDisplay country={p.country} /> : ''}
                      </p>
                    </div>
                    <Badge variant="outline" className="text-xs shrink-0">
-                      {p.country ?? '—'}
+                      {p.country ? <CountryDisplay country={p.country} /> : '—'}
                    </Badge>
                  </Link>
                ))}
--- a/src/components/observer/observer-project-detail.tsx
+++ b/src/components/observer/observer-project-detail.tsx
@@ -22,6 +22,7 @@ import { ProjectLogoWithUrl } from '@/components/shared/project-logo-with-url'
 import { UserAvatar } from '@/components/shared/user-avatar'
 import { StatusBadge } from '@/components/shared/status-badge'
 import { AnimatedCard } from '@/components/shared/animated-container'
+import { CountryDisplay } from '@/components/shared/country-display'
 import {
  AlertCircle,
  Users,
@@ -174,7 +175,7 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
              {(project.country || project.geographicZone) && (
                <Badge variant="outline" className="gap-1">
                  <MapPin className="h-3 w-3" />
-                  {project.country || project.geographicZone}
+                  {project.country ? <CountryDisplay country={project.country} /> : project.geographicZone}
                </Badge>
              )}
              {project.competitionCategory && (
@@ -392,7 +393,7 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
                      <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">Location</p>
-                        <p className="text-sm">{project.geographicZone || project.country}</p>
+                        <p className="text-sm">{project.geographicZone}{project.geographicZone && project.country ? ', ' : ''}{project.country ? <CountryDisplay country={project.country} /> : null}</p>
                      </div>
                    </div>
                  )}
--- a/src/components/observer/observer-projects-content.tsx
+++ b/src/components/observer/observer-projects-content.tsx
@@ -13,6 +13,7 @@ import {
  CardDescription,
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -394,7 +395,7 @@ export function ObserverProjectsContent() {
                          </div>
                        </TableCell>
                        <TableCell className="text-sm">
-                          {project.country ?? '-'}
+                          {project.country ? <CountryDisplay country={project.country} /> : '-'}
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="text-xs whitespace-nowrap">
--- a/src/components/observer/reports/filtering-report-tabs.tsx
+++ b/src/components/observer/reports/filtering-report-tabs.tsx
@@ -26,6 +26,7 @@ import { ChevronLeft, ChevronRight, ChevronDown, ChevronUp } from 'lucide-react'
 import { RoundTypeStatsCards } from '@/components/observer/round-type-stats'
 import { FilteringScreeningBar } from './filtering-screening-bar'
 import { ProjectPreviewDialog } from './project-preview-dialog'
+import { CountryDisplay } from '@/components/shared/country-display'

 interface FilteringReportTabsProps {
  roundId: string
@@ -176,7 +177,7 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
                          {formatCategory(r.project.competitionCategory) || '—'}
                        </TableCell>
                        <TableCell className="text-muted-foreground">
-                          {r.project.country ?? '—'}
+                          {r.project.country ? <CountryDisplay country={r.project.country} /> : '—'}
                        </TableCell>
                        <TableCell>{outcomeBadge(effectiveOutcome)}</TableCell>
                      </TableRow>
@@ -258,7 +259,7 @@ export function FilteringReportTabs({ roundId }: FilteringReportTabsProps) {
                      </div>
                      <div className="flex gap-3 text-xs text-muted-foreground mt-1">
                        {r.project.competitionCategory && <span>{formatCategory(r.project.competitionCategory)}</span>}
-                        {r.project.country && <span>{r.project.country}</span>}
+                        {r.project.country && <span><CountryDisplay country={r.project.country} /></span>}
                      </div>
                    </div>

--- a/src/components/observer/reports/project-preview-dialog.tsx
+++ b/src/components/observer/reports/project-preview-dialog.tsx
@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Separator } from '@/components/ui/separator'
 import { StatusBadge } from '@/components/shared/status-badge'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { ExternalLink, MapPin, Waves, Users } from 'lucide-react'
 import Link from 'next/link'
 import type { Route } from 'next'
@@ -78,7 +79,7 @@ export function ProjectPreviewDialog({ projectId, open, onOpenChange }: ProjectP
                {data.project.country && (
                  <Badge variant="outline" className="gap-1">
                    <MapPin className="h-3 w-3" />
-                    {data.project.country}
+                    <CountryDisplay country={data.project.country} />
                  </Badge>
                )}
                {data.project.competitionCategory && (
--- a/src/components/shared/country-display.tsx
+++ b/src/components/shared/country-display.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { getCountryFlag, getCountryName, normalizeCountryToCode } from '@/lib/countries'
+
+/**
+ * Displays a country flag emoji followed by the country name.
+ * Accepts either an ISO-2 code or a full country name.
+ */
+export function CountryDisplay({
+  country,
+  showName = true,
+  className,
+}: {
+  country: string | null | undefined
+  showName?: boolean
+  className?: string
+}) {
+  if (!country) return null
+
+  const code = normalizeCountryToCode(country)
+  const flag = code ? getCountryFlag(code) : null
+  const name = code ? getCountryName(code) : country
+
+  return (
+    <span className={className}>
+      {flag && <span className="mr-1">{flag}</span>}
+      {showName && name}
+    </span>
+  )
+}
--- a/src/server/routers/assignment.ts
+++ b/src/server/routers/assignment.ts
@@ -907,6 +907,7 @@ export const assignmentRouter = router({
      // Verify access
      if (
        userHasRole(ctx.user, 'JURY_MEMBER') &&
+        !userHasRole(ctx.user, 'SUPER_ADMIN', 'PROGRAM_ADMIN') &&
        assignment.userId !== ctx.user.id
      ) {
        throw new TRPCError({
--- a/src/server/routers/evaluation.ts
+++ b/src/server/routers/evaluation.ts
@@ -115,6 +115,7 @@ export const evaluationRouter = router({

      if (
        userHasRole(ctx.user, 'JURY_MEMBER') &&
+        !userHasRole(ctx.user, 'SUPER_ADMIN', 'PROGRAM_ADMIN') &&
        assignment.userId !== ctx.user.id
      ) {
        throw new TRPCError({ code: 'FORBIDDEN' })
--- a/src/server/routers/project.ts
+++ b/src/server/routers/project.ts
@@ -177,8 +177,11 @@ export const projectRouter = router({
        ]
      }

-      // Jury members can only see assigned projects
-      if (userHasRole(ctx.user, 'JURY_MEMBER')) {
+      // Jury members can only see assigned projects (but not if they also have admin roles)
+      if (
+        userHasRole(ctx.user, 'JURY_MEMBER') &&
+        !userHasRole(ctx.user, 'SUPER_ADMIN', 'PROGRAM_ADMIN')
+      ) {
        where.assignments = {
          ...((where.assignments as Record<string, unknown>) || {}),
          some: { userId: ctx.user.id },
@@ -506,8 +509,8 @@ export const projectRouter = router({
        // ProjectTag table may not exist yet
      }

-      // Check access for jury members
-      if (userHasRole(ctx.user, 'JURY_MEMBER')) {
+      // Check access for jury members (but not if they also have admin roles)
+      if (userHasRole(ctx.user, 'JURY_MEMBER') && !userHasRole(ctx.user, 'SUPER_ADMIN', 'PROGRAM_ADMIN')) {
        const assignment = await ctx.prisma.assignment.findFirst({
          where: {
            projectId: input.id,