Dashboard layout overhaul + fix Tremor chart colors and tooltips

- Restructure dashboard: score distribution + recently reviewed stacked in left column,
  full-width map at bottom, activity feed in middle row
- Show all jurors in scrollable workload list (not just top 5)
- Filter recently reviewed to exclude rejected/not-reviewed projects
- Filter transition audit logs from activity feed
- Remove completion progress bar from stat tile for equal card heights
- Fix all Tremor charts: switch hex colors to named palette (cyan/teal/emerald/amber/rose)
  to fix black bar rendering
- Fix transparent chart tooltips with global CSS overrides
- Remove tilted text labels from cross-round comparison charts

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

src/app/globals.css

@@ -294,3 +294,22 @@
     background: hsl(var(--muted-foreground) / 0.5);
   }
 }
+
+/* Tremor chart tooltip fix — ensure solid background */
+[class*="tremor-"] [role="tooltip"],
+.recharts-tooltip-wrapper .recharts-default-tooltip,
+div[class*="tremor"][class*="tooltip"],
+div[class*="recharts-tooltip"] {
+  background-color: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
+  opacity: 1 !important;
+}
+
+.dark div[class*="tremor"][class*="tooltip"],
+.dark .recharts-tooltip-wrapper .recharts-default-tooltip,
+.dark div[class*="recharts-tooltip"] {
+  background-color: hsl(var(--card)) !important;
+  border-color: hsl(var(--border)) !important;
+}

src/components/charts/chart-theme.ts

@@ -18,6 +18,35 @@ export const BRAND_COLORS = [
   '#a83240', // Rose
 ] as const
 
+// Tremor named colors for chart components
+// These are the official Tremor palette names that render correctly
+export const TREMOR_BRAND = 'cyan' as const
+export const TREMOR_ACCENT = 'teal' as const
+export const TREMOR_CHART_COLORS = [
+  'cyan',
+  'teal',
+  'blue',
+  'emerald',
+  'amber',
+  'violet',
+  'rose',
+  'indigo',
+  'lime',
+  'fuchsia',
+] as const
+
+// Donut / status chart colors (mapped to Tremor names)
+export const TREMOR_STATUS_COLORS: Record<string, string> = {
+  SUBMITTED: 'slate',
+  ELIGIBLE: 'cyan',
+  ASSIGNED: 'violet',
+  SEMIFINALIST: 'amber',
+  FINALIST: 'emerald',
+  REJECTED: 'rose',
+  DRAFT: 'gray',
+  WITHDRAWN: 'neutral',
+}
+
 // Project status colors — mapped to actual ProjectStatus enum values
 export const STATUS_COLORS: Record<string, string> = {
   SUBMITTED: '#557f8c',    // Teal
@@ -76,7 +105,7 @@ function lerpColor(a: string, b: string, t: number): string {
  * Falls back to a neutral gray
  */
 export function getStatusColor(status: string): string {
-  return STATUS_COLORS[status] || '#9ca3af'
+  return TREMOR_STATUS_COLORS[status] || 'gray'
 }
 
 /**

src/components/charts/criteria-scores.tsx

@@ -2,7 +2,6 @@
 
 import { BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BRAND_TEAL } from './chart-theme'
 
 interface CriteriaScoreData {
   id: string
@@ -44,7 +43,7 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
           data={chartData}
           index="criterion"
           categories={['Avg Score']}
-          colors={[BRAND_TEAL] as string[]}
+          colors={['teal']}
           maxValue={10}
           layout="vertical"
           yAxisWidth={160}

src/components/charts/cross-round-comparison.tsx

@@ -2,7 +2,6 @@
 
 import { BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BRAND_COLORS } from './chart-theme'
 
 interface StageComparison {
   roundId: string
@@ -32,10 +31,7 @@ export function CrossStageComparisonChart({
   }
 
   const baseData = data.map((round) => ({
-    name:
-      round.roundName.length > 20
-        ? round.roundName.slice(0, 20) + '...'
-        : round.roundName,
+    name: round.roundName,
     Projects: round.projectCount,
     Evaluations: round.evaluationCount,
     'Completion Rate': round.completionRate,
@@ -50,7 +46,7 @@ export function CrossStageComparisonChart({
         <CardTitle>Round Metrics Comparison</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <Card>
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium">Projects</CardTitle>
@@ -60,11 +56,10 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Projects']}
-                colors={[BRAND_COLORS[0]] as string[]}
+                colors={['cyan']}
                 showLegend={false}
                 yAxisWidth={40}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>
@@ -80,11 +75,10 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Evaluations']}
-                colors={[BRAND_COLORS[2]] as string[]}
+                colors={['teal']}
                 showLegend={false}
                 yAxisWidth={40}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>
@@ -100,13 +94,12 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Completion Rate']}
-                colors={[BRAND_COLORS[1]] as string[]}
+                colors={['emerald']}
                 showLegend={false}
                 maxValue={100}
                 yAxisWidth={40}
                 valueFormatter={(v) => `${v}%`}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>
@@ -122,12 +115,11 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Avg Score']}
-                colors={[BRAND_COLORS[0]] as string[]}
+                colors={['amber']}
                 showLegend={false}
                 maxValue={10}
                 yAxisWidth={40}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>

src/components/charts/diversity-metrics.tsx

@@ -3,7 +3,7 @@
 import { DonutChart, BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { BRAND_COLORS } from './chart-theme'
+import { TREMOR_CHART_COLORS } from './chart-theme'
 
 interface DiversityData {
   total: number
@@ -116,7 +116,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
                 data={donutData}
                 category="value"
                 index="name"
-                colors={[...BRAND_COLORS] as string[]}
+                colors={[...TREMOR_CHART_COLORS]}
                 className="h-[400px]"
               />
             ) : (
@@ -136,7 +136,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
                 data={categoryData}
                 index="category"
                 categories={['Count']}
-                colors={[BRAND_COLORS[0]] as string[]}
+                colors={['cyan']}
                 layout="horizontal"
                 yAxisWidth={120}
                 showLegend={false}
@@ -160,7 +160,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
               data={oceanIssueData}
               index="issue"
               categories={['Count']}
-              colors={[BRAND_COLORS[2]] as string[]}
+              colors={['teal']}
               showLegend={false}
               yAxisWidth={40}
               className="h-[400px]"

src/components/charts/evaluation-timeline.tsx

@@ -2,7 +2,6 @@
 
 import { AreaChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BRAND_DARK_BLUE, BRAND_TEAL } from './chart-theme'
 
 interface TimelineDataPoint {
   date: string
@@ -44,7 +43,7 @@ export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
           data={chartData}
           index="date"
           categories={['Cumulative', 'Daily']}
-          colors={[BRAND_DARK_BLUE, BRAND_TEAL] as string[]}
+          colors={['cyan', 'teal']}
           curveType="monotone"
           showGradient={true}
           yAxisWidth={50}

src/components/charts/juror-consistency.tsx

@@ -12,7 +12,6 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { AlertTriangle } from 'lucide-react'
-import { BRAND_DARK_BLUE, BRAND_RED } from './chart-theme'
 
 interface JurorMetric {
   userId: string
@@ -77,7 +76,7 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
             y="Std Deviation"
             category="category"
             size="size"
-            colors={[BRAND_DARK_BLUE, BRAND_RED] as string[]}
+            colors={['cyan', 'rose']}
             className="h-[400px]"
           />
           <p className="text-xs text-muted-foreground mt-2 text-center">

src/components/charts/juror-workload.tsx

@@ -2,7 +2,6 @@
 
 import { BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BRAND_DARK_BLUE } from './chart-theme'
 
 interface JurorWorkloadData {
   id: string
@@ -49,7 +48,7 @@ export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
           data={chartData}
           index="juror"
           categories={['Completed', 'Remaining']}
-          colors={[BRAND_DARK_BLUE, '#e5e7eb'] as string[]}
+          colors={['cyan', 'gray']}
           layout="horizontal"
           stack={true}
           yAxisWidth={160}

src/components/charts/project-rankings.tsx

@@ -2,7 +2,6 @@
 
 import { BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BRAND_TEAL } from './chart-theme'
 
 interface ProjectRankingData {
   id: string
@@ -52,7 +51,7 @@ export function ProjectRankingsChart({
           data={chartData}
           index="project"
           categories={['Score']}
-          colors={[BRAND_TEAL] as string[]}
+          colors={['teal']}
           layout="horizontal"
           yAxisWidth={200}
           maxValue={10}

src/components/charts/score-distribution.tsx

@@ -2,7 +2,6 @@
 
 import { BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BRAND_TEAL } from './chart-theme'
 
 interface ScoreDistributionProps {
   data: { score: number; count: number }[]
@@ -37,7 +36,7 @@ export function ScoreDistributionChart({
           data={chartData}
           index="score"
           categories={['Count']}
-          colors={[BRAND_TEAL] as (string)[]}
+          colors={['cyan']}
           yAxisWidth={40}
           showLegend={false}
           className="h-[300px]"

src/components/charts/status-breakdown.tsx

@@ -2,7 +2,7 @@
 
 import { DonutChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { getStatusColor, formatStatus } from './chart-theme'
+import { formatStatus, getStatusColor } from './chart-theme'
 
 interface StatusDataPoint {
   status: string
@@ -40,7 +40,7 @@ export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
           data={chartData}
           category="value"
           index="name"
-          colors={colors as string[]}
+          colors={colors}
           showLabel={true}
           className="h-[300px]"
         />

src/components/observer/observer-dashboard-content.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, Fragment } from 'react'
+import { useState } from 'react'
 import Link from 'next/link'
 import type { Route } from 'next'
 import { trpc } from '@/lib/trpc/client'
@@ -172,7 +172,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
 
   const avgScore = stats ? computeAvgScore(stats.scoreDistribution) : '—'
 
-  const topJurors = (jurorWorkload ?? []).slice(0, 5)
+  const allJurors = jurorWorkload ?? []
 
   const scoreColors: Record<string, string> = {
     '9-10': '#053d57',
@@ -186,6 +186,13 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
     ? Math.max(...stats.scoreDistribution.map((b) => b.count), 1)
     : 1
 
+  const recentlyReviewed = (projectsData?.projects ?? []).filter(
+    (p) => {
+      const status = p.observerStatus ?? p.status
+      return status !== 'REJECTED' && status !== 'NOT_REVIEWED' && status !== 'SUBMITTED'
+    },
+  )
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -243,10 +250,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                 <CheckCircle2 className="h-5 w-5 text-teal-600" />
               </div>
               <p className="text-2xl font-bold tabular-nums">{stats.completionRate}%</p>
-              <div className="mt-1">
-                <Progress value={stats.completionRate} className="h-1.5" />
-              </div>
-              <p className="mt-1 text-xs text-muted-foreground">Completion</p>
+              <p className="text-xs text-muted-foreground">Completion</p>
             </Card>
           </AnimatedCard>
 
@@ -345,27 +349,28 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
 
       {/* Middle Row */}
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* Left column: Score Distribution + Recently Reviewed stacked */}
+        <div className="space-y-6">
           {/* Score Distribution */}
           <AnimatedCard index={7}>
-          <Card className="h-full">
-            <CardHeader className="pb-3">
+            <Card>
+              <CardHeader className="pb-2">
                 <CardTitle className="flex items-center gap-2.5 text-base">
                   <div className="rounded-lg bg-amber-500/10 p-1.5">
                     <TrendingUp className="h-4 w-4 text-amber-500" />
                   </div>
                   Score Distribution
                 </CardTitle>
-              <CardDescription>Evaluation score buckets</CardDescription>
               </CardHeader>
               <CardContent>
                 {stats ? (
-                <div className="space-y-2.5">
+                  <div className="space-y-1.5">
                     {stats.scoreDistribution.map((bucket) => (
-                    <div key={bucket.label} className="flex items-center gap-3">
-                      <span className="w-10 text-right text-xs font-medium tabular-nums text-muted-foreground">
+                      <div key={bucket.label} className="flex items-center gap-2">
+                        <span className="w-8 text-right text-[11px] font-medium tabular-nums text-muted-foreground">
                           {bucket.label}
                         </span>
-                      <div className="flex-1 overflow-hidden rounded-full bg-muted" style={{ height: 20 }}>
+                        <div className="flex-1 overflow-hidden rounded-full bg-muted" style={{ height: 14 }}>
                           <div
                             className="h-full rounded-full transition-all duration-500"
                             style={{
@@ -374,16 +379,16 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                             }}
                           />
                         </div>
-                      <span className="w-8 text-right text-xs tabular-nums text-muted-foreground">
+                        <span className="w-6 text-right text-[11px] tabular-nums text-muted-foreground">
                           {bucket.count}
                         </span>
                       </div>
                     ))}
                   </div>
                 ) : (
-                <div className="space-y-2.5">
+                  <div className="space-y-1.5">
                     {[...Array(5)].map((_, i) => (
-                    <Skeleton key={i} className="h-5 w-full" />
+                      <Skeleton key={i} className="h-4 w-full" />
                     ))}
                   </div>
                 )}
@@ -391,9 +396,77 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
             </Card>
           </AnimatedCard>
 
-        {/* Juror Workload */}
+          {/* Recently Reviewed */}
+          <AnimatedCard index={10}>
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2.5 text-base">
+                  <div className="rounded-lg bg-emerald-500/10 p-1.5">
+                    <ClipboardList className="h-4 w-4 text-emerald-500" />
+                  </div>
+                  Recently Reviewed
+                </CardTitle>
+                <CardDescription>Latest project reviews</CardDescription>
+              </CardHeader>
+              <CardContent className="p-0">
+                {recentlyReviewed.length > 0 ? (
+                  <>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Project</TableHead>
+                          <TableHead>Status</TableHead>
+                          <TableHead className="text-right whitespace-nowrap">Score</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {recentlyReviewed.map((project) => (
+                          <TableRow key={project.id}>
+                            <TableCell className="max-w-[140px]">
+                              <Link
+                                href={`/observer/projects/${project.id}` as Route}
+                                className="block truncate text-sm font-medium hover:underline"
+                                title={project.title}
+                              >
+                                {project.title}
+                              </Link>
+                            </TableCell>
+                            <TableCell>
+                              <StatusBadge status={project.observerStatus ?? project.status} size="sm" />
+                            </TableCell>
+                            <TableCell className="text-right tabular-nums text-sm whitespace-nowrap">
+                              {project.evaluationCount > 0 && project.averageScore !== null
+                                ? project.averageScore.toFixed(1)
+                                : '—'}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                    <div className="border-t px-4 py-3">
+                      <Link
+                        href={"/observer/projects" as Route}
+                        className="flex items-center gap-1 text-sm font-medium text-brand-teal hover:underline"
+                      >
+                        View All <ChevronRight className="h-4 w-4" />
+                      </Link>
+                    </div>
+                  </>
+                ) : (
+                  <div className="space-y-2 p-4">
+                    {[...Array(3)].map((_, i) => (
+                      <Skeleton key={i} className="h-10 w-full" />
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </AnimatedCard>
+        </div>
+
+        {/* Juror Workload — scrollable list of all jurors */}
         <AnimatedCard index={8}>
-          <Card className="h-full">
+          <Card className="h-full flex flex-col">
             <CardHeader className="pb-3">
               <CardTitle className="flex items-center gap-2.5 text-base">
                 <div className="rounded-lg bg-violet-500/10 p-1.5">
@@ -401,12 +474,12 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                 </div>
                 Juror Workload
               </CardTitle>
-              <CardDescription>Top 5 jurors by assignment</CardDescription>
+              <CardDescription>All jurors by assignment</CardDescription>
             </CardHeader>
-            <CardContent>
-              {topJurors.length > 0 ? (
-                <div className="space-y-3">
-                  {topJurors.map((juror) => {
+            <CardContent className="flex-1 overflow-hidden">
+              {allJurors.length > 0 ? (
+                <div className="max-h-[500px] overflow-y-auto -mr-2 pr-2 space-y-3">
+                  {allJurors.map((juror) => {
                     const isExpanded = expandedJurorId === juror.id
                     return (
                       <div key={juror.id}>
@@ -467,102 +540,9 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
           </Card>
         </AnimatedCard>
 
-        {/* Project Origins */}
-        <AnimatedCard index={9}>
-          {selectedProgramId ? (
-            <GeographicSummaryCard programId={selectedProgramId} />
-          ) : (
-            <Card className="h-full">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-base">
-                  <Globe className="h-5 w-5" />
-                  Project Origins
-                </CardTitle>
-                <CardDescription>Geographic distribution of projects</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Skeleton className="h-[250px] w-full rounded-md" />
-              </CardContent>
-            </Card>
-          )}
-        </AnimatedCard>
-      </div>
-
-      {/* Bottom Row */}
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-        {/* Recent Projects Table */}
-        <AnimatedCard index={10}>
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="flex items-center gap-2.5 text-base">
-                <div className="rounded-lg bg-emerald-500/10 p-1.5">
-                  <ClipboardList className="h-4 w-4 text-emerald-500" />
-                </div>
-                Recently Reviewed
-              </CardTitle>
-              <CardDescription>Latest project reviews</CardDescription>
-            </CardHeader>
-            <CardContent className="p-0">
-              {projectsData && projectsData.projects.length > 0 ? (
-                <>
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>Project</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead className="text-right whitespace-nowrap">Score</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {projectsData.projects.map((project) => (
-                        <TableRow key={project.id}>
-                          <TableCell className="max-w-[180px]">
-                            <Link
-                              href={`/observer/projects/${project.id}` as Route}
-                              className="block truncate text-sm font-medium hover:underline"
-                              title={project.title}
-                            >
-                              {project.title}
-                            </Link>
-                            {project.teamName && (
-                              <p className="truncate text-[11px] text-muted-foreground">{project.teamName}</p>
-                            )}
-                          </TableCell>
-                          <TableCell>
-                            <StatusBadge status={project.observerStatus ?? project.status} />
-                          </TableCell>
-                          <TableCell className="text-right tabular-nums text-sm whitespace-nowrap">
-                            {project.evaluationCount > 0 && project.averageScore !== null
-                              ? project.averageScore.toFixed(1)
-                              : '—'}
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                  <div className="border-t px-4 py-3">
-                    <Link
-                      href={"/observer/projects" as Route}
-                      className="flex items-center gap-1 text-sm font-medium text-brand-teal hover:underline"
-                    >
-                      View All <ChevronRight className="h-4 w-4" />
-                    </Link>
-                  </div>
-                </>
-              ) : (
-                <div className="space-y-2 p-4">
-                  {[...Array(5)].map((_, i) => (
-                    <Skeleton key={i} className="h-10 w-full" />
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </AnimatedCard>
-
         {/* Activity Feed */}
-        <AnimatedCard index={11}>
-          <Card>
+        <AnimatedCard index={9}>
+          <Card className="h-full">
             <CardHeader className="pb-3">
               <CardTitle className="flex items-center gap-2.5 text-base">
                 <div className="rounded-lg bg-blue-500/10 p-1.5">
@@ -575,7 +555,10 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
             <CardContent>
               {activityFeed && activityFeed.length > 0 ? (
                 <div className="space-y-3">
-                  {activityFeed.slice(0, 5).map((item) => {
+                  {activityFeed
+                    .filter((item) => !item.eventType.includes('transitioned') && !item.eventType.includes('transition'))
+                    .slice(0, 5)
+                    .map((item) => {
                     const iconDef = ACTIVITY_ICONS[item.eventType]
                     const IconComponent = iconDef?.icon ?? Activity
                     const iconColor = iconDef?.color ?? 'text-slate-400'
@@ -607,6 +590,26 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
           </Card>
         </AnimatedCard>
       </div>
+
+      {/* Full-width Map */}
+      <AnimatedCard index={11}>
+        {selectedProgramId ? (
+          <GeographicSummaryCard programId={selectedProgramId} />
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-base">
+                <Globe className="h-5 w-5" />
+                Project Origins
+              </CardTitle>
+              <CardDescription>Geographic distribution of projects</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-[300px] w-full rounded-md" />
+            </CardContent>
+          </Card>
+        )}
+      </AnimatedCard>
     </div>
   )
 }