Reports general data, projects import fix, and Docker entrypoint cleanup

- Reports page now shows platform-wide stats even when no rounds exist
- Fix missing getCountryFlag import on projects page
- Clean up Docker entrypoint: remove hardcoded migrate resolve

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

docker/docker-entrypoint.sh

@@ -1,11 +1,11 @@
 #!/bin/sh
 set -e
 
-echo "==> Resolving any failed migrations..."
-npx prisma migrate resolve --rolled-back 20260207000000_universal_apply_programid 2>/dev/null || true
-
 echo "==> Running database migrations..."
 npx prisma migrate deploy
 
+echo "==> Generating Prisma client..."
+npx prisma generate
+
 echo "==> Starting application..."
 exec node server.js

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

@@ -92,7 +92,8 @@ 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 { getCountryFlag, getCountryName, normalizeCountryToCode } from '@/lib/countries'
+import { getCountryName, getCountryFlag, normalizeCountryToCode } from '@/lib/countries'
+import { CountryFlagImg } from '@/components/ui/country-select'
 import {
   ProjectFiltersBar,
   type ProjectFilters,

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

@@ -59,11 +59,12 @@ import { ExportPdfButton } from '@/components/shared/export-pdf-button'
 
 function ReportsOverview() {
   const { data: programs, isLoading } = trpc.program.list.useQuery({ includeRounds: true })
+  const { data: dashStats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery()
 
   // Flatten rounds from all programs
   const rounds = programs?.flatMap(p => p.rounds.map(r => ({ ...r, programId: p.id, programName: `${p.year} Edition` }))) || []
 
-  if (isLoading) {
+  if (isLoading || statsLoading) {
     return (
       <div className="space-y-6">
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -83,24 +84,13 @@ function ReportsOverview() {
     )
   }
 
-  if (!rounds || rounds.length === 0) {
+  const totalPrograms = dashStats?.programCount ?? programs?.length ?? 0
-    return (
+  const totalProjects = dashStats?.projectCount ?? 0
-      <Card>
+  const activeRounds = dashStats?.activeRoundCount ?? rounds.filter((r) => r.status === 'ACTIVE').length
-        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+  const jurorCount = dashStats?.jurorCount ?? 0
-          <FileSpreadsheet className="h-12 w-12 text-muted-foreground/50" />
+  const submittedEvaluations = dashStats?.submittedEvaluations ?? 0
-          <p className="mt-2 font-medium">No data to report</p>
+  const totalEvaluations = dashStats?.totalEvaluations ?? 0
-          <p className="text-sm text-muted-foreground">
+  const completionRate = dashStats?.completionRate ?? 0
-            Create rounds and assign jury members to generate reports
-          </p>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  // Calculate totals
-  const totalProjects = programs?.reduce((acc, p) => acc + (p._count?.rounds || 0), 0) || 0
-  const totalPrograms = programs?.length || 0
-  const activeRounds = rounds.filter((r) => r.status === 'ACTIVE').length
 
   return (
     <div className="space-y-6">
@@ -108,13 +98,13 @@ function ReportsOverview() {
       <div className="grid gap-4 sm: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">Total Rounds</CardTitle>
+            <CardTitle className="text-sm font-medium">Programs</CardTitle>
-            <BarChart3 className="h-4 w-4 text-muted-foreground" />
+            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{rounds.length}</div>
+            <div className="text-2xl font-bold">{totalPrograms}</div>
             <p className="text-xs text-muted-foreground">
-              {activeRounds} active
+              {activeRounds} active round{activeRounds !== 1 ? 's' : ''}
             </p>
           </CardContent>
         </Card>
@@ -126,33 +116,63 @@ function ReportsOverview() {
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">{totalProjects}</div>
-            <p className="text-xs text-muted-foreground">Across all rounds</p>
+            <p className="text-xs text-muted-foreground">Across all programs</p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Rounds</CardTitle>
+            <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">{activeRounds}</div>
+            <div className="text-2xl font-bold">{jurorCount}</div>
-            <p className="text-xs text-muted-foreground">Currently active</p>
+            <p className="text-xs text-muted-foreground">Active jurors</p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Programs</CardTitle>
+            <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
-            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+            <BarChart3 className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{totalPrograms}</div>
+            <div className="text-2xl font-bold">{submittedEvaluations}</div>
-            <p className="text-xs text-muted-foreground">Total programs</p>
+            <p className="text-xs text-muted-foreground">
+              {totalEvaluations > 0
+                ? `${completionRate}% completion rate`
+                : 'No assignments yet'}
+            </p>
           </CardContent>
         </Card>
       </div>
 
+      {/* Score Distribution (if any evaluations exist) */}
+      {dashStats?.scoreDistribution && dashStats.scoreDistribution.some(b => b.count > 0) && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Score Distribution</CardTitle>
+            <CardDescription>Overall score distribution across all evaluations</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {dashStats.scoreDistribution.map((bucket) => {
+                const maxCount = Math.max(...dashStats.scoreDistribution.map(b => b.count), 1)
+                return (
+                  <div key={bucket.label} className="flex items-center gap-3">
+                    <span className="w-10 text-sm font-medium text-right">{bucket.label}</span>
+                    <div className="flex-1">
+                      <Progress value={(bucket.count / maxCount) * 100} className="h-6" />
+                    </div>
+                    <span className="w-8 text-sm text-muted-foreground text-right">{bucket.count}</span>
+                  </div>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Rounds Table */}
       <Card>
         <CardHeader>
@@ -162,6 +182,14 @@ function ReportsOverview() {
           </CardDescription>
         </CardHeader>
         <CardContent>
+          {rounds.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <FileSpreadsheet className="h-10 w-10 text-muted-foreground/50" />
+              <p className="mt-2 text-sm text-muted-foreground">
+                No rounds created yet. Round-specific reports will appear here once rounds are set up.
+              </p>
+            </div>
+          ) : (
             <Table>
               <TableHeader>
                 <TableRow>
@@ -228,6 +256,7 @@ function ReportsOverview() {
                 ))}
               </TableBody>
             </Table>
+          )}
         </CardContent>
       </Card>
     </div>

src/components/ui/country-select.tsx

@@ -18,208 +18,29 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { COUNTRIES } from '@/lib/countries'
 
-// Country data with ISO codes and flag emojis
+// Build sorted country list from the canonical COUNTRIES source
-const countries = [
+const countryList = Object.entries(COUNTRIES)
-  { code: 'AF', name: 'Afghanistan', flag: '\uD83C\uDDE6\uD83C\uDDEB' },
+  .map(([code, info]) => ({ code, name: info.name }))
-  { code: 'AL', name: 'Albania', flag: '\uD83C\uDDE6\uD83C\uDDF1' },
+  .sort((a, b) => a.name.localeCompare(b.name))
-  { code: 'DZ', name: 'Algeria', flag: '\uD83C\uDDE9\uD83C\uDDFF' },
-  { code: 'AD', name: 'Andorra', flag: '\uD83C\uDDE6\uD83C\uDDE9' },
-  { code: 'AO', name: 'Angola', flag: '\uD83C\uDDE6\uD83C\uDDF4' },
-  { code: 'AR', name: 'Argentina', flag: '\uD83C\uDDE6\uD83C\uDDF7' },
-  { code: 'AM', name: 'Armenia', flag: '\uD83C\uDDE6\uD83C\uDDF2' },
-  { code: 'AU', name: 'Australia', flag: '\uD83C\uDDE6\uD83C\uDDFA' },
-  { code: 'AT', name: 'Austria', flag: '\uD83C\uDDE6\uD83C\uDDF9' },
-  { code: 'AZ', name: 'Azerbaijan', flag: '\uD83C\uDDE6\uD83C\uDDFF' },
-  { code: 'BS', name: 'Bahamas', flag: '\uD83C\uDDE7\uD83C\uDDF8' },
-  { code: 'BH', name: 'Bahrain', flag: '\uD83C\uDDE7\uD83C\uDDED' },
-  { code: 'BD', name: 'Bangladesh', flag: '\uD83C\uDDE7\uD83C\uDDE9' },
-  { code: 'BB', name: 'Barbados', flag: '\uD83C\uDDE7\uD83C\uDDE7' },
-  { code: 'BY', name: 'Belarus', flag: '\uD83C\uDDE7\uD83C\uDDFE' },
-  { code: 'BE', name: 'Belgium', flag: '\uD83C\uDDE7\uD83C\uDDEA' },
-  { code: 'BZ', name: 'Belize', flag: '\uD83C\uDDE7\uD83C\uDDFF' },
-  { code: 'BJ', name: 'Benin', flag: '\uD83C\uDDE7\uD83C\uDDEF' },
-  { code: 'BT', name: 'Bhutan', flag: '\uD83C\uDDE7\uD83C\uDDF9' },
-  { code: 'BO', name: 'Bolivia', flag: '\uD83C\uDDE7\uD83C\uDDF4' },
-  { code: 'BA', name: 'Bosnia and Herzegovina', flag: '\uD83C\uDDE7\uD83C\uDDE6' },
-  { code: 'BW', name: 'Botswana', flag: '\uD83C\uDDE7\uD83C\uDDFC' },
-  { code: 'BR', name: 'Brazil', flag: '\uD83C\uDDE7\uD83C\uDDF7' },
-  { code: 'BN', name: 'Brunei', flag: '\uD83C\uDDE7\uD83C\uDDF3' },
-  { code: 'BG', name: 'Bulgaria', flag: '\uD83C\uDDE7\uD83C\uDDEC' },
-  { code: 'BF', name: 'Burkina Faso', flag: '\uD83C\uDDE7\uD83C\uDDEB' },
-  { code: 'BI', name: 'Burundi', flag: '\uD83C\uDDE7\uD83C\uDDEE' },
-  { code: 'KH', name: 'Cambodia', flag: '\uD83C\uDDF0\uD83C\uDDED' },
-  { code: 'CM', name: 'Cameroon', flag: '\uD83C\uDDE8\uD83C\uDDF2' },
-  { code: 'CA', name: 'Canada', flag: '\uD83C\uDDE8\uD83C\uDDE6' },
-  { code: 'CV', name: 'Cape Verde', flag: '\uD83C\uDDE8\uD83C\uDDFB' },
-  { code: 'CF', name: 'Central African Republic', flag: '\uD83C\uDDE8\uD83C\uDDEB' },
-  { code: 'TD', name: 'Chad', flag: '\uD83C\uDDF9\uD83C\uDDE9' },
-  { code: 'CL', name: 'Chile', flag: '\uD83C\uDDE8\uD83C\uDDF1' },
-  { code: 'CN', name: 'China', flag: '\uD83C\uDDE8\uD83C\uDDF3' },
-  { code: 'CO', name: 'Colombia', flag: '\uD83C\uDDE8\uD83C\uDDF4' },
-  { code: 'KM', name: 'Comoros', flag: '\uD83C\uDDF0\uD83C\uDDF2' },
-  { code: 'CG', name: 'Congo', flag: '\uD83C\uDDE8\uD83C\uDDEC' },
-  { code: 'CR', name: 'Costa Rica', flag: '\uD83C\uDDE8\uD83C\uDDF7' },
-  { code: 'HR', name: 'Croatia', flag: '\uD83C\uDDED\uD83C\uDDF7' },
-  { code: 'CU', name: 'Cuba', flag: '\uD83C\uDDE8\uD83C\uDDFA' },
-  { code: 'CY', name: 'Cyprus', flag: '\uD83C\uDDE8\uD83C\uDDFE' },
-  { code: 'CZ', name: 'Czech Republic', flag: '\uD83C\uDDE8\uD83C\uDDFF' },
-  { code: 'DK', name: 'Denmark', flag: '\uD83C\uDDE9\uD83C\uDDF0' },
-  { code: 'DJ', name: 'Djibouti', flag: '\uD83C\uDDE9\uD83C\uDDEF' },
-  { code: 'DM', name: 'Dominica', flag: '\uD83C\uDDE9\uD83C\uDDF2' },
-  { code: 'DO', name: 'Dominican Republic', flag: '\uD83C\uDDE9\uD83C\uDDF4' },
-  { code: 'EC', name: 'Ecuador', flag: '\uD83C\uDDEA\uD83C\uDDE8' },
-  { code: 'EG', name: 'Egypt', flag: '\uD83C\uDDEA\uD83C\uDDEC' },
-  { code: 'SV', name: 'El Salvador', flag: '\uD83C\uDDF8\uD83C\uDDFB' },
-  { code: 'GQ', name: 'Equatorial Guinea', flag: '\uD83C\uDDEC\uD83C\uDDF6' },
-  { code: 'ER', name: 'Eritrea', flag: '\uD83C\uDDEA\uD83C\uDDF7' },
-  { code: 'EE', name: 'Estonia', flag: '\uD83C\uDDEA\uD83C\uDDEA' },
-  { code: 'ET', name: 'Ethiopia', flag: '\uD83C\uDDEA\uD83C\uDDF9' },
-  { code: 'FJ', name: 'Fiji', flag: '\uD83C\uDDEB\uD83C\uDDEF' },
-  { code: 'FI', name: 'Finland', flag: '\uD83C\uDDEB\uD83C\uDDEE' },
-  { code: 'FR', name: 'France', flag: '\uD83C\uDDEB\uD83C\uDDF7' },
-  { code: 'GA', name: 'Gabon', flag: '\uD83C\uDDEC\uD83C\uDDE6' },
-  { code: 'GM', name: 'Gambia', flag: '\uD83C\uDDEC\uD83C\uDDF2' },
-  { code: 'GE', name: 'Georgia', flag: '\uD83C\uDDEC\uD83C\uDDEA' },
-  { code: 'DE', name: 'Germany', flag: '\uD83C\uDDE9\uD83C\uDDEA' },
-  { code: 'GH', name: 'Ghana', flag: '\uD83C\uDDEC\uD83C\uDDED' },
-  { code: 'GR', name: 'Greece', flag: '\uD83C\uDDEC\uD83C\uDDF7' },
-  { code: 'GD', name: 'Grenada', flag: '\uD83C\uDDEC\uD83C\uDDE9' },
-  { code: 'GT', name: 'Guatemala', flag: '\uD83C\uDDEC\uD83C\uDDF9' },
-  { code: 'GN', name: 'Guinea', flag: '\uD83C\uDDEC\uD83C\uDDF3' },
-  { code: 'GW', name: 'Guinea-Bissau', flag: '\uD83C\uDDEC\uD83C\uDDFC' },
-  { code: 'GY', name: 'Guyana', flag: '\uD83C\uDDEC\uD83C\uDDFE' },
-  { code: 'HT', name: 'Haiti', flag: '\uD83C\uDDED\uD83C\uDDF9' },
-  { code: 'HN', name: 'Honduras', flag: '\uD83C\uDDED\uD83C\uDDF3' },
-  { code: 'HK', name: 'Hong Kong', flag: '\uD83C\uDDED\uD83C\uDDF0' },
-  { code: 'HU', name: 'Hungary', flag: '\uD83C\uDDED\uD83C\uDDFA' },
-  { code: 'IS', name: 'Iceland', flag: '\uD83C\uDDEE\uD83C\uDDF8' },
-  { code: 'IN', name: 'India', flag: '\uD83C\uDDEE\uD83C\uDDF3' },
-  { code: 'ID', name: 'Indonesia', flag: '\uD83C\uDDEE\uD83C\uDDE9' },
-  { code: 'IR', name: 'Iran', flag: '\uD83C\uDDEE\uD83C\uDDF7' },
-  { code: 'IQ', name: 'Iraq', flag: '\uD83C\uDDEE\uD83C\uDDF6' },
-  { code: 'IE', name: 'Ireland', flag: '\uD83C\uDDEE\uD83C\uDDEA' },
-  { code: 'IL', name: 'Israel', flag: '\uD83C\uDDEE\uD83C\uDDF1' },
-  { code: 'IT', name: 'Italy', flag: '\uD83C\uDDEE\uD83C\uDDF9' },
-  { code: 'CI', name: 'Ivory Coast', flag: '\uD83C\uDDE8\uD83C\uDDEE' },
-  { code: 'JM', name: 'Jamaica', flag: '\uD83C\uDDEF\uD83C\uDDF2' },
-  { code: 'JP', name: 'Japan', flag: '\uD83C\uDDEF\uD83C\uDDF5' },
-  { code: 'JO', name: 'Jordan', flag: '\uD83C\uDDEF\uD83C\uDDF4' },
-  { code: 'KZ', name: 'Kazakhstan', flag: '\uD83C\uDDF0\uD83C\uDDFF' },
-  { code: 'KE', name: 'Kenya', flag: '\uD83C\uDDF0\uD83C\uDDEA' },
-  { code: 'KI', name: 'Kiribati', flag: '\uD83C\uDDF0\uD83C\uDDEE' },
-  { code: 'KW', name: 'Kuwait', flag: '\uD83C\uDDF0\uD83C\uDDFC' },
-  { code: 'KG', name: 'Kyrgyzstan', flag: '\uD83C\uDDF0\uD83C\uDDEC' },
-  { code: 'LA', name: 'Laos', flag: '\uD83C\uDDF1\uD83C\uDDE6' },
-  { code: 'LV', name: 'Latvia', flag: '\uD83C\uDDF1\uD83C\uDDFB' },
-  { code: 'LB', name: 'Lebanon', flag: '\uD83C\uDDF1\uD83C\uDDE7' },
-  { code: 'LS', name: 'Lesotho', flag: '\uD83C\uDDF1\uD83C\uDDF8' },
-  { code: 'LR', name: 'Liberia', flag: '\uD83C\uDDF1\uD83C\uDDF7' },
-  { code: 'LY', name: 'Libya', flag: '\uD83C\uDDF1\uD83C\uDDFE' },
-  { code: 'LI', name: 'Liechtenstein', flag: '\uD83C\uDDF1\uD83C\uDDEE' },
-  { code: 'LT', name: 'Lithuania', flag: '\uD83C\uDDF1\uD83C\uDDF9' },
-  { code: 'LU', name: 'Luxembourg', flag: '\uD83C\uDDF1\uD83C\uDDFA' },
-  { code: 'MO', name: 'Macau', flag: '\uD83C\uDDF2\uD83C\uDDF4' },
-  { code: 'MK', name: 'Macedonia', flag: '\uD83C\uDDF2\uD83C\uDDF0' },
-  { code: 'MG', name: 'Madagascar', flag: '\uD83C\uDDF2\uD83C\uDDEC' },
-  { code: 'MW', name: 'Malawi', flag: '\uD83C\uDDF2\uD83C\uDDFC' },
-  { code: 'MY', name: 'Malaysia', flag: '\uD83C\uDDF2\uD83C\uDDFE' },
-  { code: 'MV', name: 'Maldives', flag: '\uD83C\uDDF2\uD83C\uDDFB' },
-  { code: 'ML', name: 'Mali', flag: '\uD83C\uDDF2\uD83C\uDDF1' },
-  { code: 'MT', name: 'Malta', flag: '\uD83C\uDDF2\uD83C\uDDF9' },
-  { code: 'MH', name: 'Marshall Islands', flag: '\uD83C\uDDF2\uD83C\uDDED' },
-  { code: 'MR', name: 'Mauritania', flag: '\uD83C\uDDF2\uD83C\uDDF7' },
-  { code: 'MU', name: 'Mauritius', flag: '\uD83C\uDDF2\uD83C\uDDFA' },
-  { code: 'MX', name: 'Mexico', flag: '\uD83C\uDDF2\uD83C\uDDFD' },
-  { code: 'FM', name: 'Micronesia', flag: '\uD83C\uDDEB\uD83C\uDDF2' },
-  { code: 'MD', name: 'Moldova', flag: '\uD83C\uDDF2\uD83C\uDDE9' },
-  { code: 'MC', name: 'Monaco', flag: '\uD83C\uDDF2\uD83C\uDDE8' },
-  { code: 'MN', name: 'Mongolia', flag: '\uD83C\uDDF2\uD83C\uDDF3' },
-  { code: 'ME', name: 'Montenegro', flag: '\uD83C\uDDF2\uD83C\uDDEA' },
-  { code: 'MA', name: 'Morocco', flag: '\uD83C\uDDF2\uD83C\uDDE6' },
-  { code: 'MZ', name: 'Mozambique', flag: '\uD83C\uDDF2\uD83C\uDDFF' },
-  { code: 'MM', name: 'Myanmar', flag: '\uD83C\uDDF2\uD83C\uDDF2' },
-  { code: 'NA', name: 'Namibia', flag: '\uD83C\uDDF3\uD83C\uDDE6' },
-  { code: 'NR', name: 'Nauru', flag: '\uD83C\uDDF3\uD83C\uDDF7' },
-  { code: 'NP', name: 'Nepal', flag: '\uD83C\uDDF3\uD83C\uDDF5' },
-  { code: 'NL', name: 'Netherlands', flag: '\uD83C\uDDF3\uD83C\uDDF1' },
-  { code: 'NZ', name: 'New Zealand', flag: '\uD83C\uDDF3\uD83C\uDDFF' },
-  { code: 'NI', name: 'Nicaragua', flag: '\uD83C\uDDF3\uD83C\uDDEE' },
-  { code: 'NE', name: 'Niger', flag: '\uD83C\uDDF3\uD83C\uDDEA' },
-  { code: 'NG', name: 'Nigeria', flag: '\uD83C\uDDF3\uD83C\uDDEC' },
-  { code: 'KP', name: 'North Korea', flag: '\uD83C\uDDF0\uD83C\uDDF5' },
-  { code: 'NO', name: 'Norway', flag: '\uD83C\uDDF3\uD83C\uDDF4' },
-  { code: 'OM', name: 'Oman', flag: '\uD83C\uDDF4\uD83C\uDDF2' },
-  { code: 'PK', name: 'Pakistan', flag: '\uD83C\uDDF5\uD83C\uDDF0' },
-  { code: 'PW', name: 'Palau', flag: '\uD83C\uDDF5\uD83C\uDDFC' },
-  { code: 'PS', name: 'Palestine', flag: '\uD83C\uDDF5\uD83C\uDDF8' },
-  { code: 'PA', name: 'Panama', flag: '\uD83C\uDDF5\uD83C\uDDE6' },
-  { code: 'PG', name: 'Papua New Guinea', flag: '\uD83C\uDDF5\uD83C\uDDEC' },
-  { code: 'PY', name: 'Paraguay', flag: '\uD83C\uDDF5\uD83C\uDDFE' },
-  { code: 'PE', name: 'Peru', flag: '\uD83C\uDDF5\uD83C\uDDEA' },
-  { code: 'PH', name: 'Philippines', flag: '\uD83C\uDDF5\uD83C\uDDED' },
-  { code: 'PL', name: 'Poland', flag: '\uD83C\uDDF5\uD83C\uDDF1' },
-  { code: 'PT', name: 'Portugal', flag: '\uD83C\uDDF5\uD83C\uDDF9' },
-  { code: 'QA', name: 'Qatar', flag: '\uD83C\uDDF6\uD83C\uDDE6' },
-  { code: 'RO', name: 'Romania', flag: '\uD83C\uDDF7\uD83C\uDDF4' },
-  { code: 'RU', name: 'Russia', flag: '\uD83C\uDDF7\uD83C\uDDFA' },
-  { code: 'RW', name: 'Rwanda', flag: '\uD83C\uDDF7\uD83C\uDDFC' },
-  { code: 'KN', name: 'Saint Kitts and Nevis', flag: '\uD83C\uDDF0\uD83C\uDDF3' },
-  { code: 'LC', name: 'Saint Lucia', flag: '\uD83C\uDDF1\uD83C\uDDE8' },
-  { code: 'VC', name: 'Saint Vincent and the Grenadines', flag: '\uD83C\uDDFB\uD83C\uDDE8' },
-  { code: 'WS', name: 'Samoa', flag: '\uD83C\uDDFC\uD83C\uDDF8' },
-  { code: 'SM', name: 'San Marino', flag: '\uD83C\uDDF8\uD83C\uDDF2' },
-  { code: 'ST', name: 'Sao Tome and Principe', flag: '\uD83C\uDDF8\uD83C\uDDF9' },
-  { code: 'SA', name: 'Saudi Arabia', flag: '\uD83C\uDDF8\uD83C\uDDE6' },
-  { code: 'SN', name: 'Senegal', flag: '\uD83C\uDDF8\uD83C\uDDF3' },
-  { code: 'RS', name: 'Serbia', flag: '\uD83C\uDDF7\uD83C\uDDF8' },
-  { code: 'SC', name: 'Seychelles', flag: '\uD83C\uDDF8\uD83C\uDDE8' },
-  { code: 'SL', name: 'Sierra Leone', flag: '\uD83C\uDDF8\uD83C\uDDF1' },
-  { code: 'SG', name: 'Singapore', flag: '\uD83C\uDDF8\uD83C\uDDEC' },
-  { code: 'SK', name: 'Slovakia', flag: '\uD83C\uDDF8\uD83C\uDDF0' },
-  { code: 'SI', name: 'Slovenia', flag: '\uD83C\uDDF8\uD83C\uDDEE' },
-  { code: 'SB', name: 'Solomon Islands', flag: '\uD83C\uDDF8\uD83C\uDDE7' },
-  { code: 'SO', name: 'Somalia', flag: '\uD83C\uDDF8\uD83C\uDDF4' },
-  { code: 'ZA', name: 'South Africa', flag: '\uD83C\uDDFF\uD83C\uDDE6' },
-  { code: 'KR', name: 'South Korea', flag: '\uD83C\uDDF0\uD83C\uDDF7' },
-  { code: 'SS', name: 'South Sudan', flag: '\uD83C\uDDF8\uD83C\uDDF8' },
-  { code: 'ES', name: 'Spain', flag: '\uD83C\uDDEA\uD83C\uDDF8' },
-  { code: 'LK', name: 'Sri Lanka', flag: '\uD83C\uDDF1\uD83C\uDDF0' },
-  { code: 'SD', name: 'Sudan', flag: '\uD83C\uDDF8\uD83C\uDDE9' },
-  { code: 'SR', name: 'Suriname', flag: '\uD83C\uDDF8\uD83C\uDDF7' },
-  { code: 'SZ', name: 'Swaziland', flag: '\uD83C\uDDF8\uD83C\uDDFF' },
-  { code: 'SE', name: 'Sweden', flag: '\uD83C\uDDF8\uD83C\uDDEA' },
-  { code: 'CH', name: 'Switzerland', flag: '\uD83C\uDDE8\uD83C\uDDED' },
-  { code: 'SY', name: 'Syria', flag: '\uD83C\uDDF8\uD83C\uDDFE' },
-  { code: 'TW', name: 'Taiwan', flag: '\uD83C\uDDF9\uD83C\uDDFC' },
-  { code: 'TJ', name: 'Tajikistan', flag: '\uD83C\uDDF9\uD83C\uDDEF' },
-  { code: 'TZ', name: 'Tanzania', flag: '\uD83C\uDDF9\uD83C\uDDFF' },
-  { code: 'TH', name: 'Thailand', flag: '\uD83C\uDDF9\uD83C\uDDED' },
-  { code: 'TL', name: 'Timor-Leste', flag: '\uD83C\uDDF9\uD83C\uDDF1' },
-  { code: 'TG', name: 'Togo', flag: '\uD83C\uDDF9\uD83C\uDDEC' },
-  { code: 'TO', name: 'Tonga', flag: '\uD83C\uDDF9\uD83C\uDDF4' },
-  { code: 'TT', name: 'Trinidad and Tobago', flag: '\uD83C\uDDF9\uD83C\uDDF9' },
-  { code: 'TN', name: 'Tunisia', flag: '\uD83C\uDDF9\uD83C\uDDF3' },
-  { code: 'TR', name: 'Turkey', flag: '\uD83C\uDDF9\uD83C\uDDF7' },
-  { code: 'TM', name: 'Turkmenistan', flag: '\uD83C\uDDF9\uD83C\uDDF2' },
-  { code: 'TV', name: 'Tuvalu', flag: '\uD83C\uDDF9\uD83C\uDDFB' },
-  { code: 'UG', name: 'Uganda', flag: '\uD83C\uDDFA\uD83C\uDDEC' },
-  { code: 'UA', name: 'Ukraine', flag: '\uD83C\uDDFA\uD83C\uDDE6' },
-  { code: 'AE', name: 'United Arab Emirates', flag: '\uD83C\uDDE6\uD83C\uDDEA' },
-  { code: 'GB', name: 'United Kingdom', flag: '\uD83C\uDDEC\uD83C\uDDE7' },
-  { code: 'US', name: 'United States', flag: '\uD83C\uDDFA\uD83C\uDDF8' },
-  { code: 'UY', name: 'Uruguay', flag: '\uD83C\uDDFA\uD83C\uDDFE' },
-  { code: 'UZ', name: 'Uzbekistan', flag: '\uD83C\uDDFA\uD83C\uDDFF' },
-  { code: 'VU', name: 'Vanuatu', flag: '\uD83C\uDDFB\uD83C\uDDFA' },
-  { code: 'VA', name: 'Vatican City', flag: '\uD83C\uDDFB\uD83C\uDDE6' },
-  { code: 'VE', name: 'Venezuela', flag: '\uD83C\uDDFB\uD83C\uDDEA' },
-  { code: 'VN', name: 'Vietnam', flag: '\uD83C\uDDFB\uD83C\uDDF3' },
-  { code: 'YE', name: 'Yemen', flag: '\uD83C\uDDFE\uD83C\uDDEA' },
-  { code: 'ZM', name: 'Zambia', flag: '\uD83C\uDDFF\uD83C\uDDF2' },
-  { code: 'ZW', name: 'Zimbabwe', flag: '\uD83C\uDDFF\uD83C\uDDFC' },
-]
 
-export type Country = (typeof countries)[number]
+/** Renders a country flag image from flagcdn.com CDN */
+function CountryFlagImg({ code, size = 20, className }: { code: string; size?: number; className?: string }) {
+  return (
+    <img
+      src={`https://flagcdn.com/w${size}/${code.toLowerCase()}.png`}
+      srcSet={`https://flagcdn.com/w${size * 2}/${code.toLowerCase()}.png 2x`}
+      width={size}
+      height={Math.round(size * 0.75)}
+      alt={code}
+      className={cn('inline-block rounded-[2px]', className)}
+      loading="lazy"
+    />
+  )
+}
+
+export type Country = { code: string; name: string }
 
 interface CountrySelectProps {
   value?: string
@@ -232,7 +53,7 @@ interface CountrySelectProps {
 const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
   ({ value, onChange, placeholder = 'Select country...', disabled, className }, ref) => {
     const [open, setOpen] = React.useState(false)
-    const selectedCountry = countries.find((c) => c.code === value)
+    const selectedCountry = countryList.find((c) => c.code === value)
 
     return (
       <Popover open={open} onOpenChange={setOpen}>
@@ -247,7 +68,7 @@ const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
           >
             {selectedCountry ? (
               <span className="flex items-center gap-2">
-                <span className="text-lg leading-none">{selectedCountry.flag}</span>
+                <CountryFlagImg code={selectedCountry.code} size={20} />
                 <span>{selectedCountry.name}</span>
               </span>
             ) : (
@@ -256,14 +77,14 @@ const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-[300px] p-0">
+        <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
           <Command>
             <CommandInput placeholder="Search country..." />
             <CommandList>
               <ScrollArea className="h-72">
                 <CommandEmpty>No country found.</CommandEmpty>
                 <CommandGroup>
-                  {countries.map((country) => (
+                  {countryList.map((country) => (
                     <CommandItem
                       key={country.code}
                       value={country.name}
@@ -273,7 +94,7 @@ const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
                       }}
                       className="gap-2"
                     >
-                      <span className="text-lg leading-none">{country.flag}</span>
+                      <CountryFlagImg code={country.code} size={20} />
                       <span className="flex-1">{country.name}</span>
                       <CheckIcon
                         className={cn(
@@ -294,4 +115,4 @@ const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
 )
 CountrySelect.displayName = 'CountrySelect'
 
-export { CountrySelect, countries }
+export { CountrySelect, countryList as countries, CountryFlagImg }