MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: country flag display in remaining app pages (mentor, jury, admin, applicant)
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m23s
Details

Browse Source 
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>
This commit is contained in:
Matt
2026-03-06 15:07:40 +01:00
parent 37351044ed
commit ec30dc83d6
10 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

3
src/app/(admin)/admin/projects/[id]/page.tsx
View File

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

3
src/app/(applicant)/applicant/team/page.tsx
View File

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

5
src/app/(jury)/jury/awards/[id]/page.tsx
View File

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

3
src/app/(jury)/jury/competitions/[roundId]/projects/[projectId]/page.tsx
View File

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

3
src/app/(jury)/jury/competitions/page.tsx
View File

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

3
src/app/(mentor)/mentor/page.tsx
View File

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

3
src/app/(mentor)/mentor/projects/[id]/page.tsx
View File

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

3
src/app/(mentor)/mentor/projects/page.tsx
View File

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

21
src/components/dashboard/project-list-compact.tsx
View File

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