653 lines
25 KiB
TypeScript
653 lines
25 KiB
TypeScript
'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 StatusBadge from '@/components/ui/StatusBadge';
|
|
import InfoBanner from '@/components/ui/InfoBanner';
|
|
import {
|
|
BarChart3,
|
|
Eye,
|
|
Users,
|
|
Trophy,
|
|
TrendingUp,
|
|
Calendar,
|
|
DollarSign,
|
|
Target,
|
|
ArrowUpRight,
|
|
ArrowDownRight,
|
|
ExternalLink,
|
|
Loader2,
|
|
Car,
|
|
Flag,
|
|
Megaphone,
|
|
ChevronRight,
|
|
Plus,
|
|
Bell,
|
|
Settings,
|
|
CreditCard,
|
|
FileText,
|
|
RefreshCw
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
// 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 (
|
|
<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>
|
|
{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>
|
|
);
|
|
}
|
|
|
|
// 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>
|
|
);
|
|
}
|
|
|
|
// 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-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>
|
|
);
|
|
}
|
|
|
|
// 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>
|
|
<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 [loading, setLoading] = useState(true);
|
|
|
|
// Simulate loading
|
|
useEffect(() => {
|
|
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-[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>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto py-8 px-4">
|
|
{/* Header */}
|
|
<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">Welcome back, {data.sponsorName}</p>
|
|
</div>
|
|
<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>
|
|
|
|
{/* Key Metrics */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
<MetricCard
|
|
title="Total Impressions"
|
|
value={data.metrics.totalImpressions}
|
|
change={data.metrics.impressionsChange}
|
|
icon={Eye}
|
|
delay={0}
|
|
/>
|
|
<MetricCard
|
|
title="Unique Viewers"
|
|
value={data.metrics.uniqueViewers}
|
|
change={data.metrics.viewersChange}
|
|
icon={Users}
|
|
delay={0.1}
|
|
/>
|
|
<MetricCard
|
|
title="Engagement Rate"
|
|
value={data.metrics.avgEngagement}
|
|
change={data.metrics.engagementChange}
|
|
icon={TrendingUp}
|
|
suffix="%"
|
|
delay={0.2}
|
|
/>
|
|
<MetricCard
|
|
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">
|
|
{/* 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">Top Performing</h2>
|
|
<Link href="/leagues">
|
|
<Button variant="secondary" className="text-sm">
|
|
<Plus className="w-4 h-4 mr-1" />
|
|
Find More
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<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="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>
|
|
|
|
{/* Right Column - Activity & Quick Actions */}
|
|
<div className="space-y-6">
|
|
{/* Quick Actions */}
|
|
<Card className="p-4">
|
|
<h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
|
|
<div className="space-y-2">
|
|
<Link href="/leagues" className="block">
|
|
<Button variant="secondary" className="w-full justify-start">
|
|
<Target className="w-4 h-4 mr-2" />
|
|
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>
|
|
|
|
{/* 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>
|
|
);
|
|
} |