auth rework

2025-12-17 15:34:56 +01:00
parent a213a5cf9f
commit 75eaa1aa9f
24 changed files with 6115 additions and 1992 deletions
--- a/apps/website/app/sponsor/dashboard/page.tsx
+++ b/apps/website/app/sponsor/dashboard/page.tsx
@@ -1,355 +1,652 @@
 'use client';

 import { useState, useEffect } from 'react';
+import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { 
-  BarChart3, 
-  Eye, 
-  Users, 
-  Trophy, 
-  TrendingUp, 
+import StatusBadge from '@/components/ui/StatusBadge';
+import InfoBanner from '@/components/ui/InfoBanner';
+import {
+  BarChart3,
+  Eye,
+  Users,
+  Trophy,
+  TrendingUp,
  Calendar,
  DollarSign,
  Target,
  ArrowUpRight,
  ArrowDownRight,
  ExternalLink,
-  Loader2
+  Loader2,
+  Car,
+  Flag,
+  Megaphone,
+  ChevronRight,
+  Plus,
+  Bell,
+  Settings,
+  CreditCard,
+  FileText,
+  RefreshCw
 } from 'lucide-react';
 import Link from 'next/link';

-interface SponsorshipMetrics {
-  impressions: number;
-  impressionsChange: number;
-  uniqueViewers: number;
-  viewersChange: number;
-  races: number;
-  drivers: number;
-  exposure: number;
-  exposureChange: number;
-}
-
-interface SponsoredLeague {
-  id: string;
-  name: string;
-  tier: 'main' | 'secondary';
-  drivers: number;
-  races: number;
-  impressions: number;
-  status: 'active' | 'upcoming' | 'completed';
-}
-
-interface SponsorDashboardData {
-  sponsorId: string;
-  sponsorName: string;
-  metrics: SponsorshipMetrics;
-  sponsoredLeagues: SponsoredLeague[];
-  investment: {
-    activeSponsorships: number;
-    totalInvestment: number;
-    costPerThousandViews: number;
-  };
-}
-
+// Static mock data for prototype
+const MOCK_SPONSOR_DATA = {
+  sponsorId: 'demo-sponsor-1',
+  sponsorName: 'Acme Racing Co.',
+  metrics: {
+    totalImpressions: 127450,
+    impressionsChange: 12.5,
+    uniqueViewers: 34200,
+    viewersChange: 8.3,
+    activeSponsors: 7,
+    totalInvestment: 4850,
+    avgEngagement: 4.2,
+    engagementChange: 0.8,
+  },
+  sponsorships: {
+    leagues: [
+      { id: 'l1', name: 'GT3 Masters Championship', tier: 'main', drivers: 48, impressions: 45200, status: 'active' },
+      { id: 'l2', name: 'Endurance Pro Series', tier: 'secondary', drivers: 72, impressions: 38400, status: 'active' },
+    ],
+    teams: [
+      { id: 't1', name: 'Velocity Racing', drivers: 4, impressions: 12300, status: 'active' },
+      { id: 't2', name: 'Storm Motorsport', drivers: 3, impressions: 8900, status: 'active' },
+    ],
+    drivers: [
+      { id: 'd1', name: 'Max Velocity', team: 'Velocity Racing', impressions: 8200, status: 'active' },
+      { id: 'd2', name: 'Sarah Storm', team: 'Storm Motorsport', impressions: 6100, status: 'active' },
+    ],
+    races: [
+      { id: 'r1', name: 'Spa 24 Hours', league: 'Endurance Pro', impressions: 15600, date: '2025-12-20', status: 'upcoming' },
+    ],
+    platform: [
+      { id: 'p1', name: 'Homepage Banner', placement: 'Header', impressions: 52000, status: 'active' },
+    ],
+  },
+  recentActivity: [
+    { id: 'a1', type: 'race', message: 'GT3 Masters Championship race completed', time: '2 hours ago', impressions: 1240 },
+    { id: 'a2', type: 'driver', message: 'Max Velocity finished P1 at Monza', time: '5 hours ago', impressions: 890 },
+    { id: 'a3', type: 'league', message: 'New driver joined Endurance Pro Series', time: '1 day ago', impressions: null },
+    { id: 'a4', type: 'team', message: 'Velocity Racing won team championship', time: '2 days ago', impressions: 2100 },
+  ],
+  upcomingRenewals: [
+    { id: 'ren1', name: 'GT3 Masters Championship', type: 'league', renewDate: '2026-01-15', price: 1200 },
+    { id: 'ren2', name: 'Homepage Banner', type: 'platform', renewDate: '2025-12-31', price: 500 },
+  ],
+};

+// Metric Card Component
 function MetricCard({ 
  title, 
  value, 
  change, 
  icon: Icon,
  suffix = '',
+  prefix = '',
+  delay = 0,
 }: { 
  title: string; 
  value: number | string; 
  change?: number;
  icon: typeof Eye;
  suffix?: string;
+  prefix?: string;
+  delay?: number;
 }) {
+  const shouldReduceMotion = useReducedMotion();
  const isPositive = change && change > 0;
  const isNegative = change && change < 0;

  return (
-    <Card className="p-4">
-      <div className="flex items-start justify-between mb-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
-          <Icon className="w-5 h-5 text-primary-blue" />
-        </div>
-        {change !== undefined && (
-          <div className={`flex items-center gap-1 text-sm ${
-            isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
-          }`}>
-            {isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
-            {Math.abs(change)}%
+    <motion.div
+      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay }}
+    >
+      <Card className="p-5 h-full">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
+            <Icon className="w-5 h-5 text-primary-blue" />
          </div>
-        )}
-      </div>
-      <div className="text-2xl font-bold text-white mb-1">
-        {typeof value === 'number' ? value.toLocaleString() : value}{suffix}
-      </div>
-      <div className="text-sm text-gray-400">{title}</div>
-    </Card>
+          {change !== undefined && (
+            <div className={`flex items-center gap-1 text-sm font-medium ${
+              isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
+            }`}>
+              {isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
+              {Math.abs(change)}%
+            </div>
+          )}
+        </div>
+        <div className="text-2xl font-bold text-white mb-1">
+          {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
+        </div>
+        <div className="text-sm text-gray-400">{title}</div>
+      </Card>
+    </motion.div>
  );
 }

-function LeagueRow({ league }: { league: SponsoredLeague }) {
-  const statusColors = {
-    active: 'bg-performance-green/20 text-performance-green',
-    upcoming: 'bg-warning-amber/20 text-warning-amber',
-    completed: 'bg-gray-500/20 text-gray-400',
-  };
+// Sponsorship Category Card
+function SponsorshipCategoryCard({ 
+  icon: Icon, 
+  title, 
+  count, 
+  impressions, 
+  color, 
+  href 
+}: { 
+  icon: typeof Trophy; 
+  title: string; 
+  count: number; 
+  impressions: number;
+  color: string;
+  href: string;
+}) {
+  return (
+    <Link href={href}>
+      <Card className="p-4 hover:border-primary-blue/50 transition-all duration-300 cursor-pointer group">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className={`w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center group-hover:bg-primary-blue/10 transition-colors`}>
+              <Icon className={`w-5 h-5 ${color}`} />
+            </div>
+            <div>
+              <p className="text-white font-medium">{title}</p>
+              <p className="text-sm text-gray-500">{count} active</p>
+            </div>
+          </div>
+          <div className="text-right">
+            <p className="text-white font-semibold">{impressions.toLocaleString()}</p>
+            <p className="text-xs text-gray-500">impressions</p>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

-  const tierColors = {
-    main: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
-    secondary: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
+// Activity Item
+function ActivityItem({ activity }: { activity: typeof MOCK_SPONSOR_DATA.recentActivity[0] }) {
+  const typeColors = {
+    race: 'bg-warning-amber',
+    league: 'bg-primary-blue',
+    team: 'bg-purple-400',
+    driver: 'bg-performance-green',
+    platform: 'bg-racing-red',
  };

  return (
-    <div className="flex items-center justify-between p-4 border-b border-charcoal-outline last:border-b-0 hover:bg-iron-gray/30 transition-colors">
-      <div className="flex items-center gap-4">
-        <div className={`px-2 py-1 rounded text-xs font-medium border ${tierColors[league.tier]}`}>
-          {league.tier === 'main' ? 'Main Sponsor' : 'Secondary'}
-        </div>
-        <div>
-          <div className="font-medium text-white">{league.name}</div>
-          <div className="text-sm text-gray-400">
-            {league.drivers} drivers • {league.races} races
-          </div>
+    <div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
+      <div className={`w-2 h-2 rounded-full mt-2 ${typeColors[activity.type as keyof typeof typeColors] || 'bg-gray-500'}`} />
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-white truncate">{activity.message}</p>
+        <div className="flex items-center gap-2 mt-1">
+          <span className="text-xs text-gray-500">{activity.time}</span>
+          {activity.impressions && (
+            <>
+              <span className="text-xs text-gray-600">•</span>
+              <span className="text-xs text-gray-400">{activity.impressions.toLocaleString()} views</span>
+            </>
+          )}
        </div>
      </div>
-      <div className="flex items-center gap-6">
-        <div className="text-right">
-          <div className="text-sm font-medium text-white">{league.impressions.toLocaleString()}</div>
-          <div className="text-xs text-gray-500">impressions</div>
+    </div>
+  );
+}
+
+// Renewal Alert
+function RenewalAlert({ renewal }: { renewal: typeof MOCK_SPONSOR_DATA.upcomingRenewals[0] }) {
+  const typeIcons = {
+    league: Trophy,
+    team: Users,
+    driver: Car,
+    race: Flag,
+    platform: Megaphone,
+  };
+  const Icon = typeIcons[renewal.type as keyof typeof typeIcons] || Trophy;
+
+  return (
+    <div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
+      <div className="flex items-center gap-3">
+        <Icon className="w-4 h-4 text-warning-amber" />
+        <div>
+          <p className="text-sm text-white">{renewal.name}</p>
+          <p className="text-xs text-gray-400">Renews {renewal.renewDate}</p>
        </div>
-        <div className={`px-2 py-1 rounded text-xs font-medium ${statusColors[league.status]}`}>
-          {league.status}
-        </div>
-        <Link href={`/leagues/${league.id}`}>
-          <Button variant="secondary" className="text-xs">
-            <ExternalLink className="w-3 h-3 mr-1" />
-            View
-          </Button>
-        </Link>
+      </div>
+      <div className="text-right">
+        <p className="text-sm font-semibold text-white">${renewal.price}</p>
+        <Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
+          Renew
+        </Button>
      </div>
    </div>
  );
 }

 export default function SponsorDashboardPage() {
+  const shouldReduceMotion = useReducedMotion();
  const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | 'all'>('30d');
-  const [data, setData] = useState<SponsorDashboardData | null>(null);
  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);

+  // Simulate loading
  useEffect(() => {
-    async function fetchDashboard() {
-      try {
-        const response = await fetch('/api/sponsors/dashboard');
-        if (response.ok) {
-          const dashboardData: SponsorDashboardData = await response.json();
-          setData(dashboardData);
-        } else {
-          setError('Failed to load sponsor dashboard');
-        }
-      } catch {
-        setError('Failed to load sponsor dashboard');
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchDashboard();
+    const timer = setTimeout(() => setLoading(false), 500);
+    return () => clearTimeout(timer);
  }, []);

+  const data = MOCK_SPONSOR_DATA;
+
+  // Calculate category totals
+  const categoryData = {
+    leagues: {
+      count: data.sponsorships.leagues.length,
+      impressions: data.sponsorships.leagues.reduce((sum, l) => sum + l.impressions, 0),
+    },
+    teams: {
+      count: data.sponsorships.teams.length,
+      impressions: data.sponsorships.teams.reduce((sum, t) => sum + t.impressions, 0),
+    },
+    drivers: {
+      count: data.sponsorships.drivers.length,
+      impressions: data.sponsorships.drivers.reduce((sum, d) => sum + d.impressions, 0),
+    },
+    races: {
+      count: data.sponsorships.races.length,
+      impressions: data.sponsorships.races.reduce((sum, r) => sum + r.impressions, 0),
+    },
+    platform: {
+      count: data.sponsorships.platform.length,
+      impressions: data.sponsorships.platform.reduce((sum, p) => sum + p.impressions, 0),
+    },
+  };
+
  if (loading) {
    return (
-      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-blue" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <div className="max-w-7xl mx-auto py-8 px-4">
-        <div className="rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
-          <p className="text-sm text-warning-amber">
-            {error ?? 'No sponsor dashboard data available yet.'}
-          </p>
+      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
+        <div className="text-center">
+          <Loader2 className="w-8 h-8 animate-spin text-primary-blue mx-auto mb-4" />
+          <p className="text-gray-400">Loading dashboard...</p>
        </div>
      </div>
    );
  }

-  const dashboardData = data;
-
  return (
    <div className="max-w-7xl mx-auto py-8 px-4">
      {/* Header */}
-      <div className="flex items-center justify-between mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
        <div>
          <h1 className="text-2xl font-bold text-white">Sponsor Dashboard</h1>
-          <p className="text-gray-400">Track your sponsorship performance and exposure</p>
+          <p className="text-gray-400">Welcome back, {data.sponsorName}</p>
        </div>
-        <div className="flex items-center gap-2">
-          {(['7d', '30d', '90d', 'all'] as const).map((range) => (
-            <button
-              key={range}
-              onClick={() => setTimeRange(range)}
-              className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
-                timeRange === range
-                  ? 'bg-primary-blue text-white'
-                  : 'bg-iron-gray/50 text-gray-400 hover:bg-iron-gray'
-              }`}
-            >
-              {range === 'all' ? 'All Time' : range}
-            </button>
-          ))}
+        <div className="flex items-center gap-3">
+          {/* Time Range Selector */}
+          <div className="flex items-center bg-iron-gray/50 rounded-lg p-1">
+            {(['7d', '30d', '90d', 'all'] as const).map((range) => (
+              <button
+                key={range}
+                onClick={() => setTimeRange(range)}
+                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                  timeRange === range
+                    ? 'bg-primary-blue text-white'
+                    : 'text-gray-400 hover:text-white'
+                }`}
+              >
+                {range === 'all' ? 'All' : range}
+              </button>
+            ))}
+          </div>
+          
+          {/* Quick Actions */}
+          <Button variant="secondary" className="hidden sm:flex">
+            <RefreshCw className="w-4 h-4" />
+          </Button>
+          <Link href="/sponsor/settings">
+            <Button variant="secondary" className="hidden sm:flex">
+              <Settings className="w-4 h-4" />
+            </Button>
+          </Link>
        </div>
      </div>

-      {/* Metrics Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+      {/* Key Metrics */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <MetricCard
          title="Total Impressions"
-          value={dashboardData.metrics.impressions}
-          change={dashboardData.metrics.impressionsChange}
+          value={data.metrics.totalImpressions}
+          change={data.metrics.impressionsChange}
          icon={Eye}
+          delay={0}
        />
        <MetricCard
          title="Unique Viewers"
-          value={dashboardData.metrics.uniqueViewers}
-          change={dashboardData.metrics.viewersChange}
+          value={data.metrics.uniqueViewers}
+          change={data.metrics.viewersChange}
          icon={Users}
+          delay={0.1}
        />
        <MetricCard
-          title="Exposure Score"
-          value={dashboardData.metrics.exposure}
-          change={dashboardData.metrics.exposureChange}
-          icon={Target}
+          title="Engagement Rate"
+          value={data.metrics.avgEngagement}
+          change={data.metrics.engagementChange}
+          icon={TrendingUp}
          suffix="%"
+          delay={0.2}
        />
        <MetricCard
-          title="Active Drivers"
-          value={dashboardData.metrics.drivers}
-          icon={Trophy}
+          title="Total Investment"
+          value={data.metrics.totalInvestment}
+          icon={DollarSign}
+          prefix="$"
+          delay={0.3}
        />
      </div>

+      {/* Sponsorship Categories */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-white">Your Sponsorships</h2>
+          <Link href="/sponsor/campaigns">
+            <Button variant="secondary" className="text-sm">
+              View All
+              <ChevronRight className="w-4 h-4 ml-1" />
+            </Button>
+          </Link>
+        </div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <SponsorshipCategoryCard
+            icon={Trophy}
+            title="Leagues"
+            count={categoryData.leagues.count}
+            impressions={categoryData.leagues.impressions}
+            color="text-primary-blue"
+            href="/sponsor/campaigns?type=leagues"
+          />
+          <SponsorshipCategoryCard
+            icon={Users}
+            title="Teams"
+            count={categoryData.teams.count}
+            impressions={categoryData.teams.impressions}
+            color="text-purple-400"
+            href="/sponsor/campaigns?type=teams"
+          />
+          <SponsorshipCategoryCard
+            icon={Car}
+            title="Drivers"
+            count={categoryData.drivers.count}
+            impressions={categoryData.drivers.impressions}
+            color="text-performance-green"
+            href="/sponsor/campaigns?type=drivers"
+          />
+          <SponsorshipCategoryCard
+            icon={Flag}
+            title="Races"
+            count={categoryData.races.count}
+            impressions={categoryData.races.impressions}
+            color="text-warning-amber"
+            href="/sponsor/campaigns?type=races"
+          />
+          <SponsorshipCategoryCard
+            icon={Megaphone}
+            title="Platform Ads"
+            count={categoryData.platform.count}
+            impressions={categoryData.platform.impressions}
+            color="text-racing-red"
+            href="/sponsor/campaigns?type=platform"
+          />
+        </div>
+      </div>
+
+      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Sponsored Leagues */}
-        <div className="lg:col-span-2">
+        {/* Left Column - Sponsored Entities */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Top Performing Sponsorships */}
          <Card>
            <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
-              <h2 className="text-lg font-semibold text-white">Sponsored Leagues</h2>
+              <h2 className="text-lg font-semibold text-white">Top Performing</h2>
              <Link href="/leagues">
                <Button variant="secondary" className="text-sm">
-                  Browse Leagues
+                  <Plus className="w-4 h-4 mr-1" />
+                  Find More
                </Button>
              </Link>
            </div>
-            <div>
-              {dashboardData.sponsoredLeagues.length > 0 ? (
-                dashboardData.sponsoredLeagues.map((league) => (
-                  <LeagueRow key={league.id} league={league} />
-                ))
+            <div className="divide-y divide-charcoal-outline/50">
+              {/* Leagues */}
+              {data.sponsorships.leagues.map((league) => (
+                <div key={league.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
+                  <div className="flex items-center gap-4">
+                    <div className={`px-2 py-1 rounded text-xs font-medium ${
+                      league.tier === 'main' 
+                        ? 'bg-primary-blue/20 text-primary-blue border border-primary-blue/30'
+                        : 'bg-purple-500/20 text-purple-400 border border-purple-500/30'
+                    }`}>
+                      {league.tier === 'main' ? 'Main' : 'Secondary'}
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <Trophy className="w-4 h-4 text-gray-500" />
+                        <span className="font-medium text-white">{league.name}</span>
+                      </div>
+                      <div className="text-sm text-gray-500">{league.drivers} drivers</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <div className="text-right">
+                      <div className="font-semibold text-white">{league.impressions.toLocaleString()}</div>
+                      <div className="text-xs text-gray-500">impressions</div>
+                    </div>
+                    <Link href={`/sponsor/leagues/${league.id}`}>
+                      <Button variant="secondary" className="text-xs">
+                        <ExternalLink className="w-3 h-3" />
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              ))}
+              
+              {/* Teams */}
+              {data.sponsorships.teams.map((team) => (
+                <div key={team.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
+                  <div className="flex items-center gap-4">
+                    <div className="px-2 py-1 rounded text-xs font-medium bg-purple-500/20 text-purple-400 border border-purple-500/30">
+                      Team
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <Users className="w-4 h-4 text-gray-500" />
+                        <span className="font-medium text-white">{team.name}</span>
+                      </div>
+                      <div className="text-sm text-gray-500">{team.drivers} drivers</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <div className="text-right">
+                      <div className="font-semibold text-white">{team.impressions.toLocaleString()}</div>
+                      <div className="text-xs text-gray-500">impressions</div>
+                    </div>
+                    <Button variant="secondary" className="text-xs">
+                      <ExternalLink className="w-3 h-3" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+
+              {/* Drivers */}
+              {data.sponsorships.drivers.slice(0, 2).map((driver) => (
+                <div key={driver.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
+                  <div className="flex items-center gap-4">
+                    <div className="px-2 py-1 rounded text-xs font-medium bg-performance-green/20 text-performance-green border border-performance-green/30">
+                      Driver
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <Car className="w-4 h-4 text-gray-500" />
+                        <span className="font-medium text-white">{driver.name}</span>
+                      </div>
+                      <div className="text-sm text-gray-500">{driver.team}</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <div className="text-right">
+                      <div className="font-semibold text-white">{driver.impressions.toLocaleString()}</div>
+                      <div className="text-xs text-gray-500">impressions</div>
+                    </div>
+                    <Button variant="secondary" className="text-xs">
+                      <ExternalLink className="w-3 h-3" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* Upcoming Events */}
+          <Card>
+            <div className="p-4 border-b border-charcoal-outline">
+              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+                <Calendar className="w-5 h-5 text-warning-amber" />
+                Upcoming Sponsored Events
+              </h2>
+            </div>
+            <div className="p-4">
+              {data.sponsorships.races.length > 0 ? (
+                <div className="space-y-3">
+                  {data.sponsorships.races.map((race) => (
+                    <div key={race.id} className="flex items-center justify-between p-3 rounded-lg bg-iron-gray/30">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-warning-amber/10 flex items-center justify-center">
+                          <Flag className="w-5 h-5 text-warning-amber" />
+                        </div>
+                        <div>
+                          <p className="font-medium text-white">{race.name}</p>
+                          <p className="text-sm text-gray-500">{race.league} • {race.date}</p>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <span className="px-2 py-1 rounded text-xs font-medium bg-warning-amber/20 text-warning-amber">
+                          {race.status}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
              ) : (
-                <div className="p-8 text-center text-gray-400">
-                  <p>No active sponsorships yet.</p>
-                  <Link href="/leagues" className="text-primary-blue hover:underline mt-2 inline-block">
-                    Browse leagues to sponsor
-                  </Link>
+                <div className="text-center py-8 text-gray-500">
+                  <Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                  <p>No upcoming sponsored events</p>
                </div>
              )}
            </div>
          </Card>
        </div>

-        {/* Quick Stats & Actions */}
+        {/* Right Column - Activity & Quick Actions */}
        <div className="space-y-6">
-          {/* Investment Summary */}
-          <Card className="p-4">
-            <h3 className="text-lg font-semibold text-white mb-4">Investment Summary</h3>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Active Sponsorships</span>
-                <span className="font-medium text-white">{dashboardData.investment.activeSponsorships}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Total Investment</span>
-                <span className="font-medium text-white">${dashboardData.investment.totalInvestment.toLocaleString()}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Cost per 1K Views</span>
-                <span className="font-medium text-performance-green">${dashboardData.investment.costPerThousandViews.toFixed(2)}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Next Payment</span>
-                <span className="font-medium text-white">Dec 15, 2025</span>
-              </div>
-            </div>
-          </Card>
-
-          {/* Recent Activity */}
-          <Card className="p-4">
-            <h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
-            <div className="space-y-3">
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 rounded-full bg-performance-green mt-2" />
-                <div>
-                  <p className="text-sm text-white">GT3 Pro Championship race completed</p>
-                  <p className="text-xs text-gray-500">2 hours ago • 1,240 views</p>
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 rounded-full bg-primary-blue mt-2" />
-                <div>
-                  <p className="text-sm text-white">New driver joined Endurance Masters</p>
-                  <p className="text-xs text-gray-500">5 hours ago</p>
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 rounded-full bg-warning-amber mt-2" />
-                <div>
-                  <p className="text-sm text-white">Touring Car Cup season starting soon</p>
-                  <p className="text-xs text-gray-500">1 day ago</p>
-                </div>
-              </div>
-            </div>
-          </Card>
-
          {/* Quick Actions */}
          <Card className="p-4">
            <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
            <div className="space-y-2">
-              <Button variant="secondary" className="w-full justify-start">
-                <BarChart3 className="w-4 h-4 mr-2" />
-                View Detailed Analytics
-              </Button>
-              <Link href="/sponsor/billing" className="block">
-                <Button variant="secondary" className="w-full justify-start">
-                  <DollarSign className="w-4 h-4 mr-2" />
-                  Manage Payments
-                </Button>
-              </Link>
              <Link href="/leagues" className="block">
                <Button variant="secondary" className="w-full justify-start">
                  <Target className="w-4 h-4 mr-2" />
-                  Find New Leagues
+                  Find Leagues to Sponsor
+                </Button>
+              </Link>
+              <Link href="/teams" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <Users className="w-4 h-4 mr-2" />
+                  Browse Teams
+                </Button>
+              </Link>
+              <Link href="/drivers" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <Car className="w-4 h-4 mr-2" />
+                  Discover Drivers
+                </Button>
+              </Link>
+              <Link href="/sponsor/billing" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <CreditCard className="w-4 h-4 mr-2" />
+                  Manage Billing
+                </Button>
+              </Link>
+              <Link href="/sponsor/campaigns" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <BarChart3 className="w-4 h-4 mr-2" />
+                  View Analytics
                </Button>
              </Link>
            </div>
          </Card>
-        </div>
-      </div>

-      {/* Alpha Notice */}
-      <div className="mt-8 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
-        <p className="text-xs text-gray-400">
-          <strong className="text-warning-amber">Alpha Note:</strong> Sponsor analytics data shown here is demonstration-only.
-          Real analytics will be available when the sponsorship system is fully implemented.
-        </p>
+          {/* Renewal Alerts */}
+          {data.upcomingRenewals.length > 0 && (
+            <Card className="p-4">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Bell className="w-5 h-5 text-warning-amber" />
+                Upcoming Renewals
+              </h3>
+              <div className="space-y-3">
+                {data.upcomingRenewals.map((renewal) => (
+                  <RenewalAlert key={renewal.id} renewal={renewal} />
+                ))}
+              </div>
+            </Card>
+          )}
+
+          {/* Recent Activity */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
+            <div>
+              {data.recentActivity.map((activity) => (
+                <ActivityItem key={activity.id} activity={activity} />
+              ))}
+            </div>
+          </Card>
+
+          {/* Investment Summary */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <FileText className="w-5 h-5 text-primary-blue" />
+              Investment Summary
+            </h3>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Active Sponsorships</span>
+                <span className="font-medium text-white">{data.metrics.activeSponsors}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Total Investment</span>
+                <span className="font-medium text-white">${data.metrics.totalInvestment.toLocaleString()}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Cost per 1K Views</span>
+                <span className="font-medium text-performance-green">
+                  ${(data.metrics.totalInvestment / data.metrics.totalImpressions * 1000).toFixed(2)}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Next Invoice</span>
+                <span className="font-medium text-white">Jan 1, 2026</span>
+              </div>
+              <div className="pt-3 border-t border-charcoal-outline">
+                <Link href="/sponsor/billing">
+                  <Button variant="secondary" className="w-full text-sm">
+                    <CreditCard className="w-4 h-4 mr-2" />
+                    View Billing Details
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </Card>
+        </div>
      </div>
    </div>
  );