From ec30dc83d6ba31b916528e7e6d26b0e99f8970ac Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 6 Mar 2026 15:07:40 +0100
Subject: [PATCH] feat: country flag display in remaining app pages (mentor,
 jury, admin, applicant)

Extends CountryDisplay component usage to all remaining pages that showed
raw country codes: mentor dashboard/projects, jury competitions/awards,
admin awards/project detail, applicant team, and project-list-compact.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/(admin)/admin/awards/[id]/page.tsx    |  5 +++--
 src/app/(admin)/admin/projects/[id]/page.tsx  |  3 ++-
 src/app/(applicant)/applicant/team/page.tsx   |  3 ++-
 src/app/(jury)/jury/awards/[id]/page.tsx      |  5 +++--
 .../[roundId]/projects/[projectId]/page.tsx   |  3 ++-
 src/app/(jury)/jury/competitions/page.tsx     |  3 ++-
 src/app/(mentor)/mentor/page.tsx              |  3 ++-
 .../(mentor)/mentor/projects/[id]/page.tsx    |  3 ++-
 src/app/(mentor)/mentor/projects/page.tsx     |  3 ++-
 .../dashboard/project-list-compact.tsx        | 21 ++++++++++++-------
 10 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/app/(admin)/admin/awards/[id]/page.tsx b/src/app/(admin)/admin/awards/[id]/page.tsx
index 8bce89a..b413feb 100644
--- a/src/app/(admin)/admin/awards/[id]/page.tsx
+++ b/src/app/(admin)/admin/awards/[id]/page.tsx
@@ -113,6 +113,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
   DRAFT: 'secondary',
@@ -1022,7 +1023,7 @@ export default function AwardDetailPage({
                                     '-'
                                   )}
                                 </TableCell>
-                                <TableCell className="text-sm">{project.country || '-'}</TableCell>
+                                <TableCell className="text-sm">{project.country ? <CountryDisplay country={project.country} /> : '-'}</TableCell>
                                 <TableCell className="text-right">
                                   <Button
                                     size="sm"
@@ -1188,7 +1189,7 @@ export default function AwardDetailPage({
                                 '-'
                               )}
                             </TableCell>
-                            <TableCell>{e.project.country || '-'}</TableCell>
+                            <TableCell>{e.project.country ? <CountryDisplay country={e.project.country} /> : '-'}</TableCell>
                             <TableCell>
                               <Badge variant={e.method === 'MANUAL' ? 'secondary' : 'outline'} className="text-xs gap-1">
                                 {e.method === 'MANUAL' ? 'Manual' : <><Bot className="h-3 w-3" />AI Assessed</>}
diff --git a/src/app/(admin)/admin/projects/[id]/page.tsx b/src/app/(admin)/admin/projects/[id]/page.tsx
index 1b6ead5..51625bd 100644
--- a/src/app/(admin)/admin/projects/[id]/page.tsx
+++ b/src/app/(admin)/admin/projects/[id]/page.tsx
@@ -79,6 +79,7 @@ import {
 import { toast } from 'sonner'
 import { formatDateOnly } from '@/lib/utils'
 import { getCountryName, getCountryFlag } from '@/lib/countries'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 interface PageProps {
   params: Promise<{ id: string }>
@@ -373,7 +374,7 @@ function ProjectDetailContent({ 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>
             )}
diff --git a/src/app/(applicant)/applicant/team/page.tsx b/src/app/(applicant)/applicant/team/page.tsx
index 5082044..0a6528c 100644
--- a/src/app/(applicant)/applicant/team/page.tsx
+++ b/src/app/(applicant)/applicant/team/page.tsx
@@ -71,6 +71,7 @@ import {
   Pencil,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 const inviteSchema = z.object({
   name: z.string().min(1, 'Name is required'),
@@ -332,7 +333,7 @@ export default function ApplicantProjectPage() {
                 <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>
             )}
diff --git a/src/app/(jury)/jury/awards/[id]/page.tsx b/src/app/(jury)/jury/awards/[id]/page.tsx
index e93cc9f..502b116 100644
--- a/src/app/(jury)/jury/awards/[id]/page.tsx
+++ b/src/app/(jury)/jury/awards/[id]/page.tsx
@@ -22,6 +22,7 @@ import {
   GripVertical,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 export default function JuryAwardVotingPage({
   params,
@@ -191,7 +192,7 @@ export default function JuryAwardVotingPage({
                     )}
                     {project.country && (
                       <Badge variant="outline" className="text-xs">
-                        {project.country}
+                        <CountryDisplay country={project.country} />
                       </Badge>
                     )}
                   </div>
@@ -285,7 +286,7 @@ export default function JuryAwardVotingPage({
                       )}
                       {project.country && (
                         <Badge variant="outline" className="text-xs">
-                          {project.country}
+                          <CountryDisplay country={project.country} />
                         </Badge>
                       )}
                     </div>
diff --git a/src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/page.tsx b/src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/page.tsx
index b08ee77..e641cab 100644
--- a/src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/page.tsx
+++ b/src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/page.tsx
@@ -10,6 +10,7 @@ import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
 import { MultiWindowDocViewer } from '@/components/jury/multi-window-doc-viewer'
 import { ArrowLeft, FileText, Users, MapPin, Target, Tag } from 'lucide-react'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 export default function JuryProjectDetailPage() {
   const params = useParams()
@@ -107,7 +108,7 @@ export default function JuryProjectDetailPage() {
             {project.country && (
               <Badge variant="outline" className="gap-1">
                 <MapPin className="h-3 w-3" />
-                {project.country}
+                <CountryDisplay country={project.country} />
               </Badge>
             )}
           </div>
diff --git a/src/app/(jury)/jury/competitions/page.tsx b/src/app/(jury)/jury/competitions/page.tsx
index 6f94dee..8be5108 100644
--- a/src/app/(jury)/jury/competitions/page.tsx
+++ b/src/app/(jury)/jury/competitions/page.tsx
@@ -19,6 +19,7 @@ import {
   FileEdit,
 } from 'lucide-react'
 import { formatDateOnly, formatEnumLabel } from '@/lib/utils'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 export default function JuryAssignmentsPage() {
   const router = useRouter()
@@ -135,7 +136,7 @@ export default function JuryAssignmentsPage() {
                                 {project.title}
                               </p>
                               <p className="text-xs text-muted-foreground mt-0.5">
-                                {[project.teamName, project.country].filter(Boolean).join(' \u00b7 ')}
+                                {project.teamName}{project.teamName && project.country ? ' · ' : ''}{project.country ? <CountryDisplay country={project.country} /> : ''}
                               </p>
                             </div>
                             <div className="flex items-center gap-2 shrink-0">
diff --git a/src/app/(mentor)/mentor/page.tsx b/src/app/(mentor)/mentor/page.tsx
index aca14f8..b5073d4 100644
--- a/src/app/(mentor)/mentor/page.tsx
+++ b/src/app/(mentor)/mentor/page.tsx
@@ -40,6 +40,7 @@ import {
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
 import { AnimatedCard } from '@/components/shared/animated-container'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 // Status badge colors
 const statusColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
@@ -336,7 +337,7 @@ export default function MentorDashboard() {
                       {project.country && (
                         <Badge variant="outline" className="gap-1">
                           <MapPin className="h-3 w-3" />
-                          {project.country}
+                          <CountryDisplay country={project.country} />
                         </Badge>
                       )}
                     </div>
diff --git a/src/app/(mentor)/mentor/projects/[id]/page.tsx b/src/app/(mentor)/mentor/projects/[id]/page.tsx
index fa50e56..2176d38 100644
--- a/src/app/(mentor)/mentor/projects/[id]/page.tsx
+++ b/src/app/(mentor)/mentor/projects/[id]/page.tsx
@@ -57,6 +57,7 @@ import {
   EyeOff,
 } from 'lucide-react'
 import { formatDateOnly, getInitials } from '@/lib/utils'
+import { CountryDisplay } from '@/components/shared/country-display'
 import { toast } from 'sonner'
 
 interface PageProps {
@@ -251,7 +252,7 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Location</p>
                   <p className="text-sm">
-                    {[project.geographicZone, project.country].filter(Boolean).join(', ')}
+                    {project.geographicZone}{project.geographicZone && project.country ? ', ' : ''}{project.country ? <CountryDisplay country={project.country} /> : null}
                   </p>
                 </div>
               </div>
diff --git a/src/app/(mentor)/mentor/projects/page.tsx b/src/app/(mentor)/mentor/projects/page.tsx
index a05b561..992f158 100644
--- a/src/app/(mentor)/mentor/projects/page.tsx
+++ b/src/app/(mentor)/mentor/projects/page.tsx
@@ -23,6 +23,7 @@ import {
   Crown,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
+import { CountryDisplay } from '@/components/shared/country-display'
 
 // Status badge colors
 const statusColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
@@ -143,7 +144,7 @@ export default function MentorProjectsPage() {
                     {project.country && (
                       <Badge variant="outline" className="gap-1">
                         <MapPin className="h-3 w-3" />
-                        {project.country}
+                        <CountryDisplay country={project.country} />
                       </Badge>
                     )}
                   </div>
diff --git a/src/components/dashboard/project-list-compact.tsx b/src/components/dashboard/project-list-compact.tsx
index 18b594f..4fa9549 100644
--- a/src/components/dashboard/project-list-compact.tsx
+++ b/src/components/dashboard/project-list-compact.tsx
@@ -12,7 +12,7 @@ import {
 } from '@/components/ui/card'
 import { StatusBadge } from '@/components/shared/status-badge'
 import { ProjectLogo } from '@/components/shared/project-logo'
-import { getCountryName } from '@/lib/countries'
+import { getCountryName, getCountryFlag, normalizeCountryToCode } from '@/lib/countries'
 import { formatDateOnly, truncate, formatRelativeTime } from '@/lib/utils'
 
 type BaseProject = {
@@ -133,13 +133,18 @@ export function ProjectListCompact({
                               )}
                             </>
                           ) : (
-                            [
-                              project.teamName,
-                              project.country ? getCountryName(project.country) : null,
-                              formatDateOnly(project.submittedAt || project.createdAt),
-                            ]
-                              .filter(Boolean)
-                              .join(' \u00b7 ')
+                            <>
+                              {[
+                                project.teamName,
+                                formatDateOnly(project.submittedAt || project.createdAt),
+                              ].filter(Boolean).join(' \u00b7 ')}
+                              {project.country && (() => {
+                                const code = normalizeCountryToCode(project.country)
+                                const flag = code ? getCountryFlag(code) : null
+                                const name = code ? getCountryName(code) : project.country
+                                return <> · {flag && <span className="mr-0.5">{flag}</span>}{name}</>
+                              })()}
+                            </>
                           )}
                         </p>
                       </div>