mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-10 12:38:55 +01:00
parent 0f7fe67d3c
commit fbbcf414a4
87 changed files with 11972 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
apps/website/app/sponsor/billing/page.tsx Normal file
View File

@@ -0,0 +1,267 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import {
CreditCard,
DollarSign,
Calendar,
Download,
Plus,
Check,
AlertTriangle,
FileText,
ArrowRight
} from 'lucide-react';
interface PaymentMethod {
id: string;
type: 'card' | 'bank';
last4: string;
brand?: string;
isDefault: boolean;
expiryMonth?: number;
expiryYear?: number;
}
interface Invoice {
id: string;
date: Date;
amount: number;
status: 'paid' | 'pending' | 'failed';
description: string;
}
// Mock data
const MOCK_PAYMENT_METHODS: PaymentMethod[] = [
{
id: 'pm-1',
type: 'card',
last4: '4242',
brand: 'Visa',
isDefault: true,
expiryMonth: 12,
expiryYear: 2027,
},
{
id: 'pm-2',
type: 'card',
last4: '5555',
brand: 'Mastercard',
isDefault: false,
expiryMonth: 6,
expiryYear: 2026,
},
];
const MOCK_INVOICES: Invoice[] = [
{
id: 'inv-1',
date: new Date('2025-11-01'),
amount: 1200,
status: 'paid',
description: 'GT3 Pro Championship - Main Sponsor (Q4 2025)',
},
{
id: 'inv-2',
date: new Date('2025-10-01'),
amount: 400,
status: 'paid',
description: 'Formula Sim Series - Secondary Sponsor (Q4 2025)',
},
{
id: 'inv-3',
date: new Date('2025-12-01'),
amount: 350,
status: 'pending',
description: 'Touring Car Cup - Secondary Sponsor (Q1 2026)',
},
];
function PaymentMethodCard({ method, onSetDefault }: { method: PaymentMethod; onSetDefault: () => void }) {
return (
<div className={`p-4 rounded-lg border ${method.isDefault ? 'border-primary-blue/50 bg-primary-blue/5' : 'border-charcoal-outline bg-iron-gray/30'}`}>
<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">
<CreditCard className="w-5 h-5 text-gray-400" />
</div>
<div>
<div className="flex items-center gap-2">
<span className="font-medium text-white">{method.brand} •••• {method.last4}</span>
{method.isDefault && (
<span className="px-2 py-0.5 rounded text-xs bg-primary-blue/20 text-primary-blue">Default</span>
)}
</div>
{method.expiryMonth && method.expiryYear && (
<span className="text-sm text-gray-500">Expires {method.expiryMonth}/{method.expiryYear}</span>
)}
</div>
</div>
<div className="flex items-center gap-2">
{!method.isDefault && (
<Button variant="secondary" onClick={onSetDefault} className="text-xs">
Set Default
</Button>
)}
<Button variant="secondary" className="text-xs text-gray-400">
Remove
</Button>
</div>
</div>
</div>
);
}
function InvoiceRow({ invoice }: { invoice: Invoice }) {
const statusConfig = {
paid: { icon: Check, color: 'text-performance-green', bg: 'bg-performance-green/10' },
pending: { icon: AlertTriangle, color: 'text-warning-amber', bg: 'bg-warning-amber/10' },
failed: { icon: AlertTriangle, color: 'text-racing-red', bg: 'bg-racing-red/10' },
};
const status = statusConfig[invoice.status];
const StatusIcon = status.icon;
return (
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline last:border-b-0 hover:bg-iron-gray/20 transition-colors">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center">
<FileText className="w-5 h-5 text-gray-400" />
</div>
<div>
<div className="font-medium text-white">{invoice.description}</div>
<div className="text-sm text-gray-500">
{invoice.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
</div>
</div>
</div>
<div className="flex items-center gap-4">
<div className="text-right">
<div className="font-semibold text-white">${invoice.amount.toLocaleString()}</div>
<div className={`flex items-center gap-1 text-xs ${status.color}`}>
<StatusIcon className="w-3 h-3" />
{invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
</div>
</div>
<Button variant="secondary" className="text-xs">
<Download className="w-3 h-3 mr-1" />
PDF
</Button>
</div>
</div>
);
}
export default function SponsorBillingPage() {
const router = useRouter();
const [paymentMethods, setPaymentMethods] = useState(MOCK_PAYMENT_METHODS);
const handleSetDefault = (methodId: string) => {
setPaymentMethods(methods =>
methods.map(m => ({ ...m, isDefault: m.id === methodId }))
);
};
const totalSpent = MOCK_INVOICES.filter(i => i.status === 'paid').reduce((sum, i) => sum + i.amount, 0);
const pendingAmount = MOCK_INVOICES.filter(i => i.status === 'pending').reduce((sum, i) => sum + i.amount, 0);
return (
<div className="max-w-4xl mx-auto py-8 px-4">
{/* Header */}
<div className="mb-8">
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
<CreditCard className="w-7 h-7 text-warning-amber" />
Billing & Payments
</h1>
<p className="text-gray-400 mt-1">Manage payment methods and view invoices</p>
</div>
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<Card className="p-4">
<div className="flex items-center gap-3 mb-2">
<DollarSign className="w-5 h-5 text-performance-green" />
<span className="text-sm text-gray-400">Total Spent</span>
</div>
<div className="text-2xl font-bold text-white">${totalSpent.toLocaleString()}</div>
</Card>
<Card className="p-4">
<div className="flex items-center gap-3 mb-2">
<AlertTriangle className="w-5 h-5 text-warning-amber" />
<span className="text-sm text-gray-400">Pending</span>
</div>
<div className="text-2xl font-bold text-warning-amber">${pendingAmount.toLocaleString()}</div>
</Card>
<Card className="p-4">
<div className="flex items-center gap-3 mb-2">
<Calendar className="w-5 h-5 text-primary-blue" />
<span className="text-sm text-gray-400">Next Payment</span>
</div>
<div className="text-lg font-bold text-white">Dec 15, 2025</div>
</Card>
</div>
{/* Payment Methods */}
<Card className="mb-8">
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
<h2 className="text-lg font-semibold text-white">Payment Methods</h2>
<Button variant="secondary" className="text-sm">
<Plus className="w-4 h-4 mr-2" />
Add Payment Method
</Button>
</div>
<div className="p-4 space-y-3">
{paymentMethods.map((method) => (
<PaymentMethodCard
key={method.id}
method={method}
onSetDefault={() => handleSetDefault(method.id)}
/>
))}
</div>
</Card>
{/* Billing History */}
<Card>
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
<h2 className="text-lg font-semibold text-white">Billing History</h2>
<Button variant="secondary" className="text-sm">
<Download className="w-4 h-4 mr-2" />
Export All
</Button>
</div>
<div>
{MOCK_INVOICES.map((invoice) => (
<InvoiceRow key={invoice.id} invoice={invoice} />
))}
</div>
<div className="p-4 border-t border-charcoal-outline">
<Button variant="secondary" className="w-full">
View All Invoices
<ArrowRight className="w-4 h-4 ml-2" />
</Button>
</div>
</Card>
{/* Platform Fee Notice */}
<div className="mt-6 rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
<h3 className="font-medium text-white mb-2">Platform Fee</h3>
<p className="text-sm text-gray-400">
A 10% platform fee is applied to all sponsorship payments. This fee helps maintain the platform,
provide analytics, and ensure quality sponsorship placements.
</p>
</div>
{/* Alpha Notice */}
<div className="mt-6 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> Payment processing is demonstration-only.
Real billing will be available when the payment system is fully implemented.
</p>
</div>
</div>
);
}

278
apps/website/app/sponsor/campaigns/page.tsx Normal file
View File

@@ -0,0 +1,278 @@
'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import {
Megaphone,
Trophy,
Users,
Eye,
Calendar,
ExternalLink,
Plus,
ChevronRight,
Check,
Clock,
XCircle
} from 'lucide-react';
interface Sponsorship {
id: string;
leagueId: string;
leagueName: string;
tier: 'main' | 'secondary';
status: 'active' | 'pending' | 'expired';
startDate: Date;
endDate: Date;
price: number;
impressions: number;
drivers: number;
}
// Mock data - in production would come from repository
const MOCK_SPONSORSHIPS: Sponsorship[] = [
{
id: 'sp-1',
leagueId: 'league-1',
leagueName: 'GT3 Pro Championship',
tier: 'main',
status: 'active',
startDate: new Date('2025-01-01'),
endDate: new Date('2025-06-30'),
price: 1200,
impressions: 45200,
drivers: 32,
},
{
id: 'sp-2',
leagueId: 'league-2',
leagueName: 'Endurance Masters',
tier: 'main',
status: 'active',
startDate: new Date('2025-02-01'),
endDate: new Date('2025-07-31'),
price: 1000,
impressions: 38100,
drivers: 48,
},
{
id: 'sp-3',
leagueId: 'league-3',
leagueName: 'Formula Sim Series',
tier: 'secondary',
status: 'active',
startDate: new Date('2025-03-01'),
endDate: new Date('2025-08-31'),
price: 400,
impressions: 22800,
drivers: 24,
},
{
id: 'sp-4',
leagueId: 'league-4',
leagueName: 'Touring Car Cup',
tier: 'secondary',
status: 'pending',
startDate: new Date('2025-04-01'),
endDate: new Date('2025-09-30'),
price: 350,
impressions: 0,
drivers: 28,
},
];
function SponsorshipCard({ sponsorship }: { sponsorship: Sponsorship }) {
const router = useRouter();
const statusConfig = {
active: { icon: Check, color: 'text-performance-green', bg: 'bg-performance-green/10', label: 'Active' },
pending: { icon: Clock, color: 'text-warning-amber', bg: 'bg-warning-amber/10', label: 'Pending' },
expired: { icon: XCircle, color: 'text-gray-400', bg: 'bg-gray-400/10', label: 'Expired' },
};
const tierConfig = {
main: { color: 'text-primary-blue', bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', label: 'Main Sponsor' },
secondary: { color: 'text-purple-400', bg: 'bg-purple-400/10', border: 'border-purple-400/30', label: 'Secondary' },
};
const status = statusConfig[sponsorship.status];
const tier = tierConfig[sponsorship.tier];
const StatusIcon = status.icon;
return (
<Card className="hover:border-charcoal-outline/80 transition-colors">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
<div className={`px-2 py-1 rounded text-xs font-medium border ${tier.bg} ${tier.color} ${tier.border}`}>
{tier.label}
</div>
<div className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium ${status.bg} ${status.color}`}>
<StatusIcon className="w-3 h-3" />
{status.label}
</div>
</div>
<Button
variant="secondary"
onClick={() => router.push(`/leagues/${sponsorship.leagueId}`)}
className="text-xs"
>
<ExternalLink className="w-3 h-3 mr-1" />
View League
</Button>
</div>
<h3 className="text-lg font-semibold text-white mb-2">{sponsorship.leagueName}</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
<div className="bg-iron-gray/50 rounded-lg p-3">
<div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
<Eye className="w-3 h-3" />
Impressions
</div>
<div className="text-white font-semibold">{sponsorship.impressions.toLocaleString()}</div>
</div>
<div className="bg-iron-gray/50 rounded-lg p-3">
<div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
<Users className="w-3 h-3" />
Drivers
</div>
<div className="text-white font-semibold">{sponsorship.drivers}</div>
</div>
<div className="bg-iron-gray/50 rounded-lg p-3">
<div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
<Calendar className="w-3 h-3" />
Period
</div>
<div className="text-white font-semibold text-xs">
{sponsorship.startDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })} - {sponsorship.endDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
</div>
</div>
<div className="bg-iron-gray/50 rounded-lg p-3">
<div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
<Trophy className="w-3 h-3" />
Investment
</div>
<div className="text-white font-semibold">${sponsorship.price}</div>
</div>
</div>
<div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50">
<span className="text-xs text-gray-500">
{Math.ceil((sponsorship.endDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24))} days remaining
</span>
<Button
variant="secondary"
className="text-xs"
onClick={() => router.push(`/sponsor/campaigns/${sponsorship.id}`)}
>
View Details
<ChevronRight className="w-3 h-3 ml-1" />
</Button>
</div>
</Card>
);
}
export default function SponsorCampaignsPage() {
const router = useRouter();
const [filter, setFilter] = useState<'all' | 'active' | 'pending' | 'expired'>('all');
const filteredSponsorships = filter === 'all'
? MOCK_SPONSORSHIPS
: MOCK_SPONSORSHIPS.filter(s => s.status === filter);
const stats = {
total: MOCK_SPONSORSHIPS.length,
active: MOCK_SPONSORSHIPS.filter(s => s.status === 'active').length,
pending: MOCK_SPONSORSHIPS.filter(s => s.status === 'pending').length,
totalInvestment: MOCK_SPONSORSHIPS.reduce((sum, s) => sum + s.price, 0),
};
return (
<div className="max-w-6xl mx-auto py-8 px-4">
{/* Header */}
<div className="flex items-center justify-between mb-8">
<div>
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
<Megaphone className="w-7 h-7 text-primary-blue" />
My Sponsorships
</h1>
<p className="text-gray-400 mt-1">Manage your league sponsorships</p>
</div>
<Button
variant="primary"
onClick={() => router.push('/leagues')}
>
<Plus className="w-4 h-4 mr-2" />
Find Leagues to Sponsor
</Button>
</div>
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<Card className="p-4">
<div className="text-2xl font-bold text-white">{stats.total}</div>
<div className="text-sm text-gray-400">Total Sponsorships</div>
</Card>
<Card className="p-4">
<div className="text-2xl font-bold text-performance-green">{stats.active}</div>
<div className="text-sm text-gray-400">Active</div>
</Card>
<Card className="p-4">
<div className="text-2xl font-bold text-warning-amber">{stats.pending}</div>
<div className="text-sm text-gray-400">Pending</div>
</Card>
<Card className="p-4">
<div className="text-2xl font-bold text-white">${stats.totalInvestment.toLocaleString()}</div>
<div className="text-sm text-gray-400">Total Investment</div>
</Card>
</div>
{/* Filters */}
<div className="flex items-center gap-2 mb-6">
{(['all', 'active', 'pending', 'expired'] as const).map((f) => (
<button
key={f}
onClick={() => setFilter(f)}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
filter === f
? 'bg-primary-blue text-white'
: 'bg-iron-gray/50 text-gray-400 hover:bg-iron-gray'
}`}
>
{f.charAt(0).toUpperCase() + f.slice(1)}
</button>
))}
</div>
{/* Sponsorship List */}
{filteredSponsorships.length === 0 ? (
<Card className="text-center py-12">
<Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" />
<h3 className="text-lg font-semibold text-white mb-2">No sponsorships found</h3>
<p className="text-gray-400 mb-6">Start sponsoring leagues to grow your brand visibility</p>
<Button variant="primary" onClick={() => router.push('/leagues')}>
Browse Leagues
</Button>
</Card>
) : (
<div className="space-y-4">
{filteredSponsorships.map((sponsorship) => (
<SponsorshipCard key={sponsorship.id} sponsorship={sponsorship} />
))}
</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> Sponsorship data shown here is demonstration-only.
Real sponsorship management will be available when the system is fully implemented.
</p>
</div>
</div>
);
}

404
apps/website/app/sponsor/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,404 @@
'use client';
import { useState, useEffect } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import {
BarChart3,
Eye,
Users,
Trophy,
TrendingUp,
Calendar,
DollarSign,
Target,
ArrowUpRight,
ArrowDownRight,
ExternalLink,
Loader2
} 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;
};
}
// Fallback mock data for demo mode
const MOCK_DASHBOARD: SponsorDashboardData = {
sponsorId: 'demo-sponsor',
sponsorName: 'Demo Sponsor',
metrics: {
impressions: 124500,
impressionsChange: 12.5,
uniqueViewers: 8420,
viewersChange: 8.3,
races: 24,
drivers: 156,
exposure: 87.5,
exposureChange: 5.2,
},
sponsoredLeagues: [
{
id: 'league-1',
name: 'GT3 Pro Championship',
tier: 'main',
drivers: 32,
races: 12,
impressions: 45200,
status: 'active',
},
{
id: 'league-2',
name: 'Endurance Masters',
tier: 'main',
drivers: 48,
races: 6,
impressions: 38100,
status: 'active',
},
{
id: 'league-3',
name: 'Formula Sim Series',
tier: 'secondary',
drivers: 24,
races: 8,
impressions: 22800,
status: 'active',
},
{
id: 'league-4',
name: 'Touring Car Cup',
tier: 'secondary',
drivers: 28,
races: 10,
impressions: 18400,
status: 'upcoming',
},
],
investment: {
activeSponsorships: 4,
totalInvestment: 2400,
costPerThousandViews: 19.28,
},
};
function MetricCard({
title,
value,
change,
icon: Icon,
suffix = '',
}: {
title: string;
value: number | string;
change?: number;
icon: typeof Eye;
suffix?: string;
}) {
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)}%
</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>
);
}
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',
};
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',
};
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>
</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>
<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>
);
}
export default function SponsorDashboardPage() {
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);
useEffect(() => {
async function fetchDashboard() {
try {
const response = await fetch('/api/sponsors/dashboard');
if (response.ok) {
const dashboardData = await response.json();
setData(dashboardData);
} else {
// Use mock data for demo mode
setData(MOCK_DASHBOARD);
}
} catch {
// Use mock data on error
setData(MOCK_DASHBOARD);
} finally {
setLoading(false);
}
}
fetchDashboard();
}, []);
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>
);
}
const dashboardData = data || MOCK_DASHBOARD;
return (
<div className="max-w-7xl mx-auto py-8 px-4">
{/* Header */}
<div className="flex items-center justify-between 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>
</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>
</div>
{/* Metrics Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<MetricCard
title="Total Impressions"
value={dashboardData.metrics.impressions}
change={dashboardData.metrics.impressionsChange}
icon={Eye}
/>
<MetricCard
title="Unique Viewers"
value={dashboardData.metrics.uniqueViewers}
change={dashboardData.metrics.viewersChange}
icon={Users}
/>
<MetricCard
title="Exposure Score"
value={dashboardData.metrics.exposure}
change={dashboardData.metrics.exposureChange}
icon={Target}
suffix="%"
/>
<MetricCard
title="Active Drivers"
value={dashboardData.metrics.drivers}
icon={Trophy}
/>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Sponsored Leagues */}
<div className="lg:col-span-2">
<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>
<Link href="/leagues">
<Button variant="secondary" className="text-sm">
Browse Leagues
</Button>
</Link>
</div>
<div>
{dashboardData.sponsoredLeagues.length > 0 ? (
dashboardData.sponsoredLeagues.map((league) => (
<LeagueRow key={league.id} league={league} />
))
) : (
<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>
)}
</div>
</Card>
</div>
{/* Quick Stats & 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
</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>
</div>
</div>
);
}

311
apps/website/app/sponsor/leagues/[id]/page.tsx Normal file
View File

@@ -0,0 +1,311 @@
'use client';
import { useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import {
Trophy,
Users,
Calendar,
Eye,
TrendingUp,
Download,
Image as ImageIcon,
ExternalLink,
ChevronRight
} from 'lucide-react';
interface LeagueDriver {
id: string;
name: string;
country: string;
position: number;
races: number;
impressions: number;
}
// Mock data
const MOCK_LEAGUE = {
id: 'league-1',
name: 'GT3 Pro Championship',
tier: 'main' as const,
season: 'Season 3',
drivers: 32,
races: 12,
completedRaces: 8,
impressions: 45200,
avgViewsPerRace: 5650,
logoPlacement: 'Primary hood placement + League page banner',
status: 'active' as const,
};
const MOCK_DRIVERS: LeagueDriver[] = [
{ id: 'd1', name: 'Max Verstappen', country: 'NL', position: 1, races: 8, impressions: 4200 },
{ id: 'd2', name: 'Lewis Hamilton', country: 'GB', position: 2, races: 8, impressions: 3980 },
{ id: 'd3', name: 'Charles Leclerc', country: 'MC', position: 3, races: 8, impressions: 3750 },
{ id: 'd4', name: 'Lando Norris', country: 'GB', position: 4, races: 7, impressions: 3420 },
{ id: 'd5', name: 'Carlos Sainz', country: 'ES', position: 5, races: 8, impressions: 3100 },
];
const MOCK_RACES = [
{ id: 'r1', name: 'Spa-Francorchamps', date: '2025-12-01', views: 6200, status: 'completed' },
{ id: 'r2', name: 'Monza', date: '2025-12-08', views: 5800, status: 'completed' },
{ id: 'r3', name: 'Nürburgring', date: '2025-12-15', views: 0, status: 'upcoming' },
{ id: 'r4', name: 'Suzuka', date: '2025-12-22', views: 0, status: 'upcoming' },
];
export default function SponsorLeagueDetailPage() {
const params = useParams();
const [activeTab, setActiveTab] = useState<'overview' | 'drivers' | 'races' | 'assets'>('overview');
return (
<div className="max-w-7xl mx-auto py-8 px-4">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
<Link href="/sponsor/dashboard" className="hover:text-white">Dashboard</Link>
<ChevronRight className="w-4 h-4" />
<Link href="/sponsor/leagues" className="hover:text-white">Leagues</Link>
<ChevronRight className="w-4 h-4" />
<span className="text-white">{MOCK_LEAGUE.name}</span>
</div>
{/* Header */}
<div className="flex items-start justify-between mb-8">
<div>
<div className="flex items-center gap-3 mb-2">
<h1 className="text-2xl font-bold text-white">{MOCK_LEAGUE.name}</h1>
<span className="px-2 py-1 rounded text-xs font-medium bg-primary-blue/20 text-primary-blue border border-primary-blue/30">
Main Sponsor
</span>
</div>
<p className="text-gray-400">{MOCK_LEAGUE.season} • {MOCK_LEAGUE.completedRaces}/{MOCK_LEAGUE.races} races completed</p>
</div>
<div className="flex items-center gap-2">
<Button variant="secondary">
<ExternalLink className="w-4 h-4 mr-2" />
View League Page
</Button>
<Button variant="primary">
<Download className="w-4 h-4 mr-2" />
Download Report
</Button>
</div>
</div>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
<Eye className="w-5 h-5 text-primary-blue" />
</div>
<div>
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.impressions.toLocaleString()}</div>
<div className="text-sm text-gray-400">Total Impressions</div>
</div>
</div>
</Card>
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
<TrendingUp className="w-5 h-5 text-performance-green" />
</div>
<div>
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.avgViewsPerRace.toLocaleString()}</div>
<div className="text-sm text-gray-400">Avg Views/Race</div>
</div>
</div>
</Card>
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10">
<Users className="w-5 h-5 text-purple-400" />
</div>
<div>
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.drivers}</div>
<div className="text-sm text-gray-400">Active Drivers</div>
</div>
</div>
</Card>
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10">
<Calendar className="w-5 h-5 text-warning-amber" />
</div>
<div>
<div className="text-xl font-bold text-white">{MOCK_LEAGUE.races - MOCK_LEAGUE.completedRaces}</div>
<div className="text-sm text-gray-400">Races Remaining</div>
</div>
</div>
</Card>
</div>
{/* Tabs */}
<div className="flex gap-1 mb-6 border-b border-charcoal-outline">
{(['overview', 'drivers', 'races', 'assets'] as const).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`px-4 py-2 text-sm font-medium capitalize transition-colors border-b-2 -mb-px ${
activeTab === tab
? 'text-primary-blue border-primary-blue'
: 'text-gray-400 border-transparent hover:text-white'
}`}
>
{tab}
</button>
))}
</div>
{/* Tab Content */}
{activeTab === 'overview' && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="p-4">
<h3 className="text-lg font-semibold text-white mb-4">Sponsorship Details</h3>
<div className="space-y-3">
<div className="flex justify-between">
<span className="text-gray-400">Tier</span>
<span className="text-white">Main Sponsor</span>
</div>
<div className="flex justify-between">
<span className="text-gray-400">Logo Placement</span>
<span className="text-white">{MOCK_LEAGUE.logoPlacement}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-400">Season Duration</span>
<span className="text-white">Oct 2025 - Feb 2026</span>
</div>
<div className="flex justify-between">
<span className="text-gray-400">Investment</span>
<span className="text-white">$800/season</span>
</div>
</div>
</Card>
<Card className="p-4">
<h3 className="text-lg font-semibold text-white mb-4">Performance Metrics</h3>
<div className="space-y-3">
<div className="flex justify-between">
<span className="text-gray-400">Cost per 1K Impressions</span>
<span className="text-performance-green">$17.70</span>
</div>
<div className="flex justify-between">
<span className="text-gray-400">Engagement Rate</span>
<span className="text-white">4.2%</span>
</div>
<div className="flex justify-between">
<span className="text-gray-400">Brand Recall Score</span>
<span className="text-white">78/100</span>
</div>
<div className="flex justify-between">
<span className="text-gray-400">ROI Estimate</span>
<span className="text-performance-green">+24%</span>
</div>
</div>
</Card>
</div>
)}
{activeTab === 'drivers' && (
<Card>
<div className="p-4 border-b border-charcoal-outline">
<h3 className="text-lg font-semibold text-white">Drivers Carrying Your Brand</h3>
<p className="text-sm text-gray-400">Top performing drivers with your sponsorship</p>
</div>
<div className="divide-y divide-charcoal-outline">
{MOCK_DRIVERS.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="w-8 h-8 rounded-full bg-iron-gray flex items-center justify-center text-sm font-bold text-white">
{driver.position}
</div>
<div>
<div className="font-medium text-white">{driver.name}</div>
<div className="text-sm text-gray-400">{driver.country} • {driver.races} races</div>
</div>
</div>
<div className="text-right">
<div className="font-medium text-white">{driver.impressions.toLocaleString()}</div>
<div className="text-xs text-gray-500">impressions</div>
</div>
</div>
))}
</div>
</Card>
)}
{activeTab === 'races' && (
<Card>
<div className="p-4 border-b border-charcoal-outline">
<h3 className="text-lg font-semibold text-white">Race Schedule & Performance</h3>
</div>
<div className="divide-y divide-charcoal-outline">
{MOCK_RACES.map((race) => (
<div key={race.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={`w-3 h-3 rounded-full ${
race.status === 'completed' ? 'bg-performance-green' : 'bg-warning-amber'
}`} />
<div>
<div className="font-medium text-white">{race.name}</div>
<div className="text-sm text-gray-400">{race.date}</div>
</div>
</div>
<div className="flex items-center gap-4">
{race.status === 'completed' ? (
<div className="text-right">
<div className="font-medium text-white">{race.views.toLocaleString()}</div>
<div className="text-xs text-gray-500">views</div>
</div>
) : (
<span className="text-sm text-warning-amber">Upcoming</span>
)}
</div>
</div>
))}
</div>
</Card>
)}
{activeTab === 'assets' && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card className="p-4">
<h3 className="text-lg font-semibold text-white mb-4">Your Logo Assets</h3>
<div className="space-y-4">
<div className="aspect-video bg-iron-gray rounded-lg flex items-center justify-center border border-charcoal-outline">
<ImageIcon className="w-12 h-12 text-gray-500" aria-label="Logo placeholder" />
</div>
<div className="flex gap-2">
<Button variant="secondary" className="flex-1">
<Download className="w-4 h-4 mr-2" />
Download Logo Pack
</Button>
<Button variant="secondary">
Update Logo
</Button>
</div>
</div>
</Card>
<Card className="p-4">
<h3 className="text-lg font-semibold text-white mb-4">Livery Preview</h3>
<div className="space-y-4">
<div className="aspect-video bg-iron-gray rounded-lg flex items-center justify-center border border-charcoal-outline">
<Trophy className="w-12 h-12 text-gray-500" />
</div>
<p className="text-sm text-gray-400">
Your logo appears on the primary hood position for all 32 drivers in this league.
</p>
<Button variant="secondary" className="w-full">
<Download className="w-4 h-4 mr-2" />
Download Sample Livery
</Button>
</div>
</Card>
</div>
)}
</div>
);
}

298
apps/website/app/sponsor/leagues/page.tsx Normal file
View File

@@ -0,0 +1,298 @@
'use client';
import { useState } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import {
Trophy,
Users,
Eye,
Search,
Filter,
Star,
ChevronRight
} from 'lucide-react';
interface AvailableLeague {
id: string;
name: string;
game: string;
drivers: number;
avgViewsPerRace: number;
mainSponsorSlot: { available: boolean; price: number };
secondarySlots: { available: number; total: number; price: number };
rating: number;
tier: 'premium' | 'standard' | 'starter';
}
const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
{
id: 'league-1',
name: 'GT3 Masters Championship',
game: 'iRacing',
drivers: 48,
avgViewsPerRace: 8200,
mainSponsorSlot: { available: true, price: 1200 },
secondarySlots: { available: 1, total: 2, price: 400 },
rating: 4.8,
tier: 'premium',
},
{
id: 'league-2',
name: 'Endurance Pro Series',
game: 'ACC',
drivers: 72,
avgViewsPerRace: 12500,
mainSponsorSlot: { available: false, price: 1500 },
secondarySlots: { available: 2, total: 2, price: 500 },
rating: 4.9,
tier: 'premium',
},
{
id: 'league-3',
name: 'Formula Sim League',
game: 'iRacing',
drivers: 24,
avgViewsPerRace: 5400,
mainSponsorSlot: { available: true, price: 800 },
secondarySlots: { available: 2, total: 2, price: 300 },
rating: 4.5,
tier: 'standard',
},
{
id: 'league-4',
name: 'Touring Car Masters',
game: 'rFactor 2',
drivers: 32,
avgViewsPerRace: 3200,
mainSponsorSlot: { available: true, price: 500 },
secondarySlots: { available: 2, total: 2, price: 200 },
rating: 4.2,
tier: 'starter',
},
{
id: 'league-5',
name: 'LMP Challenge',
game: 'Le Mans Ultimate',
drivers: 36,
avgViewsPerRace: 6800,
mainSponsorSlot: { available: true, price: 900 },
secondarySlots: { available: 1, total: 2, price: 350 },
rating: 4.6,
tier: 'standard',
},
];
function LeagueCard({ league }: { league: AvailableLeague }) {
const tierColors = {
premium: 'bg-gradient-to-r from-yellow-500/20 to-amber-500/20 border-yellow-500/30',
standard: 'bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border-blue-500/30',
starter: 'bg-gradient-to-r from-gray-500/20 to-slate-500/20 border-gray-500/30',
};
const tierBadgeColors = {
premium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
standard: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
starter: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
};
return (
<Card className={`overflow-hidden border ${tierColors[league.tier]}`}>
<div className="p-4">
<div className="flex items-start justify-between mb-3">
<div>
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-white">{league.name}</h3>
<span className={`px-2 py-0.5 rounded text-xs font-medium capitalize border ${tierBadgeColors[league.tier]}`}>
{league.tier}
</span>
</div>
<p className="text-sm text-gray-400">{league.game}</p>
</div>
<div className="flex items-center gap-1">
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
<span className="text-sm text-white">{league.rating}</span>
</div>
</div>
<div className="grid grid-cols-3 gap-3 mb-4">
<div className="text-center p-2 bg-iron-gray/50 rounded">
<div className="text-lg font-bold text-white">{league.drivers}</div>
<div className="text-xs text-gray-500">Drivers</div>
</div>
<div className="text-center p-2 bg-iron-gray/50 rounded">
<div className="text-lg font-bold text-white">{(league.avgViewsPerRace / 1000).toFixed(1)}k</div>
<div className="text-xs text-gray-500">Avg Views</div>
</div>
<div className="text-center p-2 bg-iron-gray/50 rounded">
<div className="text-lg font-bold text-white">${(league.mainSponsorSlot.price / league.avgViewsPerRace * 1000).toFixed(0)}</div>
<div className="text-xs text-gray-500">CPM</div>
</div>
</div>
<div className="space-y-2 mb-4">
<div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
<div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${league.mainSponsorSlot.available ? 'bg-performance-green' : 'bg-racing-red'}`} />
<span className="text-sm text-gray-300">Main Sponsor</span>
</div>
<div className="text-sm">
{league.mainSponsorSlot.available ? (
<span className="text-white font-medium">${league.mainSponsorSlot.price}/season</span>
) : (
<span className="text-gray-500">Taken</span>
)}
</div>
</div>
<div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
<div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${league.secondarySlots.available > 0 ? 'bg-performance-green' : 'bg-racing-red'}`} />
<span className="text-sm text-gray-300">Secondary Slots</span>
</div>
<div className="text-sm">
{league.secondarySlots.available > 0 ? (
<span className="text-white font-medium">{league.secondarySlots.available}/{league.secondarySlots.total} @ ${league.secondarySlots.price}</span>
) : (
<span className="text-gray-500">Full</span>
)}
</div>
</div>
</div>
<div className="flex gap-2">
<Button variant="secondary" className="flex-1">
View Details
</Button>
{(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
<Button variant="primary" className="flex-1">
Sponsor
</Button>
)}
</div>
</div>
</Card>
);
}
export default function SponsorLeaguesPage() {
const [searchQuery, setSearchQuery] = useState('');
const [tierFilter, setTierFilter] = useState<'all' | 'premium' | 'standard' | 'starter'>('all');
const [availabilityFilter, setAvailabilityFilter] = useState<'all' | 'main' | 'secondary'>('all');
const filteredLeagues = MOCK_AVAILABLE_LEAGUES.filter(league => {
if (searchQuery && !league.name.toLowerCase().includes(searchQuery.toLowerCase())) {
return false;
}
if (tierFilter !== 'all' && league.tier !== tierFilter) {
return false;
}
if (availabilityFilter === 'main' && !league.mainSponsorSlot.available) {
return false;
}
if (availabilityFilter === 'secondary' && league.secondarySlots.available === 0) {
return false;
}
return true;
});
return (
<div className="max-w-7xl mx-auto py-8 px-4">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
<a href="/sponsor/dashboard" className="hover:text-white">Dashboard</a>
<ChevronRight className="w-4 h-4" />
<span className="text-white">Browse Leagues</span>
</div>
{/* Header */}
<div className="mb-8">
<h1 className="text-2xl font-bold text-white mb-2">Find Leagues to Sponsor</h1>
<p className="text-gray-400">Discover racing leagues looking for sponsors and grow your brand</p>
</div>
{/* Filters */}
<div className="flex flex-col md:flex-row gap-4 mb-6">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
<input
type="text"
placeholder="Search leagues..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
/>
</div>
<div className="flex gap-2">
<select
value={tierFilter}
onChange={(e) => setTierFilter(e.target.value as typeof tierFilter)}
className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
>
<option value="all">All Tiers</option>
<option value="premium">Premium</option>
<option value="standard">Standard</option>
<option value="starter">Starter</option>
</select>
<select
value={availabilityFilter}
onChange={(e) => setAvailabilityFilter(e.target.value as typeof availabilityFilter)}
className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
>
<option value="all">All Slots</option>
<option value="main">Main Available</option>
<option value="secondary">Secondary Available</option>
</select>
</div>
</div>
{/* Stats Banner */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<Card className="p-4 text-center">
<div className="text-2xl font-bold text-white">{MOCK_AVAILABLE_LEAGUES.length}</div>
<div className="text-sm text-gray-400">Available Leagues</div>
</Card>
<Card className="p-4 text-center">
<div className="text-2xl font-bold text-performance-green">
{MOCK_AVAILABLE_LEAGUES.filter(l => l.mainSponsorSlot.available).length}
</div>
<div className="text-sm text-gray-400">Main Slots Open</div>
</Card>
<Card className="p-4 text-center">
<div className="text-2xl font-bold text-primary-blue">
{MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.secondarySlots.available, 0)}
</div>
<div className="text-sm text-gray-400">Secondary Slots Open</div>
</Card>
<Card className="p-4 text-center">
<div className="text-2xl font-bold text-white">
{MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.drivers, 0)}
</div>
<div className="text-sm text-gray-400">Total Drivers</div>
</Card>
</div>
{/* League Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredLeagues.map((league) => (
<LeagueCard key={league.id} league={league} />
))}
</div>
{filteredLeagues.length === 0 && (
<div className="text-center py-12">
<Trophy className="w-12 h-12 text-gray-500 mx-auto mb-4" />
<h3 className="text-lg font-medium text-white mb-2">No leagues found</h3>
<p className="text-gray-400">Try adjusting your filters to see more results</p>
</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> League sponsorship marketplace is demonstration-only.
Actual sponsorship purchases will be available when the payment system is fully implemented.
</p>
</div>
</div>
);
}

5
apps/website/app/sponsor/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { redirect } from 'next/navigation';
export default function SponsorPage() {
redirect('/sponsor/dashboard');
}

333
apps/website/app/sponsor/settings/page.tsx Normal file
View File

@@ -0,0 +1,333 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import {
Settings,
Building2,
Mail,
Globe,
Upload,
Save,
Bell,
Shield,
Eye,
Trash2
} from 'lucide-react';
interface SponsorProfile {
name: string;
email: string;
website: string;
description: string;
logoUrl: string | null;
}
interface NotificationSettings {
emailNewSponsorships: boolean;
emailWeeklyReport: boolean;
emailRaceAlerts: boolean;
emailPaymentAlerts: boolean;
}
// Mock data
const MOCK_PROFILE: SponsorProfile = {
name: 'Acme Racing Co.',
email: 'sponsor@acme-racing.com',
website: 'https://acme-racing.com',
description: 'Premium sim racing equipment and accessories for competitive drivers.',
logoUrl: null,
};
const MOCK_NOTIFICATIONS: NotificationSettings = {
emailNewSponsorships: true,
emailWeeklyReport: true,
emailRaceAlerts: false,
emailPaymentAlerts: true,
};
function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (checked: boolean) => void; label: string }) {
return (
<label className="flex items-center justify-between cursor-pointer">
<span className="text-gray-300">{label}</span>
<button
type="button"
onClick={() => onChange(!checked)}
className={`relative w-11 h-6 rounded-full transition-colors ${checked ? 'bg-primary-blue' : 'bg-iron-gray'}`}
>
<span
className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${checked ? 'translate-x-5' : ''}`}
/>
</button>
</label>
);
}
export default function SponsorSettingsPage() {
const router = useRouter();
const [profile, setProfile] = useState(MOCK_PROFILE);
const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
const [saving, setSaving] = useState(false);
const [saved, setSaved] = useState(false);
const handleSaveProfile = async () => {
setSaving(true);
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 800));
setSaving(false);
setSaved(true);
setTimeout(() => setSaved(false), 3000);
};
const handleDeleteAccount = () => {
if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone.')) {
// Clear demo cookies and redirect
document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
document.cookie = 'gridpilot_sponsor_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
router.push('/');
}
};
return (
<div className="max-w-3xl mx-auto py-8 px-4">
{/* Header */}
<div className="mb-8">
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
<Settings className="w-7 h-7 text-gray-400" />
Sponsor Settings
</h1>
<p className="text-gray-400 mt-1">Manage your sponsor profile and preferences</p>
</div>
{/* Company Profile */}
<Card className="mb-6">
<div className="p-4 border-b border-charcoal-outline">
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<Building2 className="w-5 h-5 text-primary-blue" />
Company Profile
</h2>
</div>
<div className="p-4 space-y-4">
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">Company Name</label>
<Input
type="text"
value={profile.name}
onChange={(e) => setProfile({ ...profile, name: e.target.value })}
placeholder="Your company name"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<div className="flex items-center gap-2">
<Mail className="w-4 h-4 text-gray-500" />
Contact Email
</div>
</label>
<Input
type="email"
value={profile.email}
onChange={(e) => setProfile({ ...profile, email: e.target.value })}
placeholder="sponsor@company.com"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<div className="flex items-center gap-2">
<Globe className="w-4 h-4 text-gray-500" />
Website
</div>
</label>
<Input
type="url"
value={profile.website}
onChange={(e) => setProfile({ ...profile, website: e.target.value })}
placeholder="https://company.com"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">Company Description</label>
<textarea
value={profile.description}
onChange={(e) => setProfile({ ...profile, description: e.target.value })}
placeholder="Tell leagues about your company..."
rows={3}
className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<div className="flex items-center gap-2">
<Upload className="w-4 h-4 text-gray-500" />
Company Logo
</div>
</label>
<div className="flex items-center gap-4">
<div className="w-20 h-20 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center">
<Building2 className="w-8 h-8 text-gray-500" />
</div>
<div>
<input
type="file"
accept="image/png,image/jpeg,image/svg+xml"
className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
/>
<p className="text-xs text-gray-500 mt-1">PNG, JPEG, or SVG. Max 2MB.</p>
</div>
</div>
</div>
<div className="pt-4 border-t border-charcoal-outline flex items-center justify-between">
<Button
variant="primary"
onClick={handleSaveProfile}
disabled={saving}
>
{saving ? (
'Saving...'
) : saved ? (
<>
<Save className="w-4 h-4 mr-2" />
Saved!
</>
) : (
<>
<Save className="w-4 h-4 mr-2" />
Save Changes
</>
)}
</Button>
</div>
</div>
</Card>
{/* Notification Preferences */}
<Card className="mb-6">
<div className="p-4 border-b border-charcoal-outline">
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<Bell className="w-5 h-5 text-warning-amber" />
Notifications
</h2>
</div>
<div className="p-4 space-y-4">
<Toggle
checked={notifications.emailNewSponsorships}
onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
label="Email when a sponsorship is approved"
/>
<Toggle
checked={notifications.emailWeeklyReport}
onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
label="Weekly analytics report"
/>
<Toggle
checked={notifications.emailRaceAlerts}
onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
label="Race day alerts for sponsored leagues"
/>
<Toggle
checked={notifications.emailPaymentAlerts}
onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
label="Payment and invoice notifications"
/>
</div>
</Card>
{/* Privacy & Visibility */}
<Card className="mb-6">
<div className="p-4 border-b border-charcoal-outline">
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<Eye className="w-5 h-5 text-performance-green" />
Privacy & Visibility
</h2>
</div>
<div className="p-4 space-y-4">
<div className="flex items-center justify-between">
<div>
<p className="text-gray-300">Public Profile</p>
<p className="text-sm text-gray-500">Allow leagues to see your sponsor profile</p>
</div>
<Toggle checked={true} onChange={() => {}} label="" />
</div>
<div className="flex items-center justify-between">
<div>
<p className="text-gray-300">Show Sponsorship Stats</p>
<p className="text-sm text-gray-500">Display your total sponsorships and investment on profile</p>
</div>
<Toggle checked={false} onChange={() => {}} label="" />
</div>
</div>
</Card>
{/* Security */}
<Card className="mb-6">
<div className="p-4 border-b border-charcoal-outline">
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<Shield className="w-5 h-5 text-primary-blue" />
Security
</h2>
</div>
<div className="p-4 space-y-4">
<div className="flex items-center justify-between">
<div>
<p className="text-gray-300">Change Password</p>
<p className="text-sm text-gray-500">Update your account password</p>
</div>
<Button variant="secondary" className="text-sm">
Change
</Button>
</div>
<div className="flex items-center justify-between">
<div>
<p className="text-gray-300">Two-Factor Authentication</p>
<p className="text-sm text-gray-500">Add an extra layer of security</p>
</div>
<Button variant="secondary" className="text-sm">
Enable
</Button>
</div>
</div>
</Card>
{/* Danger Zone */}
<Card className="border-racing-red/30">
<div className="p-4 border-b border-racing-red/30">
<h2 className="text-lg font-semibold text-racing-red flex items-center gap-2">
<Trash2 className="w-5 h-5" />
Danger Zone
</h2>
</div>
<div className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-gray-300">Delete Sponsor Account</p>
<p className="text-sm text-gray-500">Permanently delete your account and all sponsorship data</p>
</div>
<Button
variant="secondary"
onClick={handleDeleteAccount}
className="text-sm text-racing-red border-racing-red/30 hover:bg-racing-red/10"
>
Delete Account
</Button>
</div>
</div>
</Card>
{/* Alpha Notice */}
<div className="mt-6 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> Settings are demonstration-only and won't persist.
Full account management will be available when the system is fully implemented.
</p>
</div>
</div>
);
}

429
apps/website/app/sponsor/signup/page.tsx Normal file
View File

@@ -0,0 +1,429 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { Building2, Mail, Globe, Upload, Zap, Eye, TrendingUp, Users, ArrowRight } from 'lucide-react';
export default function SponsorSignupPage() {
const router = useRouter();
const [mode, setMode] = useState<'landing' | 'signup' | 'login'>('landing');
const [formData, setFormData] = useState({
name: '',
contactEmail: '',
websiteUrl: '',
logoFile: null as File | null,
password: '',
});
const [errors, setErrors] = useState<Record<string, string>>({});
const [submitting, setSubmitting] = useState(false);
const handleDemoLogin = async () => {
setSubmitting(true);
try {
// Demo: Set cookie to indicate sponsor mode
document.cookie = 'gridpilot_demo_mode=sponsor; path=/; max-age=86400';
document.cookie = 'gridpilot_sponsor_id=demo-sponsor-1; path=/; max-age=86400';
await new Promise(resolve => setTimeout(resolve, 500));
router.push('/leagues');
} finally {
setSubmitting(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const newErrors: Record<string, string> = {};
if (!formData.name.trim()) {
newErrors.name = 'Company name required';
}
if (!formData.contactEmail.trim()) {
newErrors.contactEmail = 'Contact email required';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.contactEmail)) {
newErrors.contactEmail = 'Invalid email format';
}
if (mode === 'signup' && !formData.password.trim()) {
newErrors.password = 'Password required';
}
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
return;
}
setSubmitting(true);
try {
// Alpha: In-memory only, set demo sponsor cookie
console.log('Sponsor signup:', formData);
document.cookie = 'gridpilot_demo_mode=sponsor; path=/; max-age=86400';
document.cookie = `gridpilot_sponsor_name=${encodeURIComponent(formData.name)}; path=/; max-age=86400`;
await new Promise(resolve => setTimeout(resolve, 800));
router.push('/leagues');
} catch (err) {
console.error('Sponsor signup failed:', err);
alert('Registration failed. Try again.');
} finally {
setSubmitting(false);
}
};
// Landing page for sponsors
if (mode === 'landing') {
return (
<div className="max-w-4xl mx-auto py-12">
{/* Hero */}
<div className="text-center mb-12">
<div className="flex justify-center mb-6">
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-blue/10">
<Building2 className="w-8 h-8 text-primary-blue" />
</div>
</div>
<h1 className="text-4xl font-bold text-white mb-4">Sponsor Sim Racing Leagues</h1>
<p className="text-lg text-gray-400 max-w-2xl mx-auto">
Connect your brand with passionate sim racing communities. Get exposure through liveries, league branding, and engaged audiences.
</p>
</div>
{/* Benefits */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<Card>
<div className="flex flex-col items-center text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10 mb-4">
<Eye className="w-6 h-6 text-primary-blue" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">Brand Exposure</h3>
<p className="text-sm text-gray-400">
Your logo on liveries, league pages, and race broadcasts. Reach thousands of dedicated sim racers.
</p>
</div>
</Card>
<Card>
<div className="flex flex-col items-center text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-performance-green/10 mb-4">
<TrendingUp className="w-6 h-6 text-performance-green" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">Analytics Dashboard</h3>
<p className="text-sm text-gray-400">
Track impressions, clicks, and engagement. See exactly how your sponsorship performs.
</p>
</div>
</Card>
<Card>
<div className="flex flex-col items-center text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-warning-amber/10 mb-4">
<Users className="w-6 h-6 text-warning-amber" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">Engaged Audience</h3>
<p className="text-sm text-gray-400">
Connect with a passionate, tech-savvy community that values authentic partnerships.
</p>
</div>
</Card>
</div>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
<Button
variant="primary"
onClick={() => setMode('signup')}
className="px-8 py-3"
>
<Building2 className="w-5 h-5 mr-2" />
Create Sponsor Account
</Button>
<Button
variant="secondary"
onClick={() => setMode('login')}
className="px-8 py-3"
>
Sign In
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
</div>
{/* Demo Login */}
<div className="text-center">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-iron-gray/50 border border-charcoal-outline">
<Zap className="w-4 h-4 text-warning-amber" />
<span className="text-sm text-gray-400">Try it now:</span>
<button
onClick={handleDemoLogin}
disabled={submitting}
className="text-sm font-medium text-primary-blue hover:text-primary-blue/80 transition-colors disabled:opacity-50"
>
{submitting ? 'Loading...' : 'Demo Sponsor Login'}
</button>
</div>
</div>
{/* Alpha Notice */}
<div className="mt-12 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
<p className="text-xs text-gray-400 text-center">
<strong className="text-warning-amber">Alpha Preview:</strong> Sponsorship features are demonstration-only.
In production, you'll have access to payment processing, detailed analytics, and automated livery placement.
</p>
</div>
</div>
);
}
// Login form
if (mode === 'login') {
return (
<div className="max-w-md mx-auto py-12">
<div className="mb-8">
<button
onClick={() => setMode('landing')}
className="text-sm text-gray-400 hover:text-white mb-4"
>
← Back
</button>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
<Building2 className="w-6 h-6 text-primary-blue" />
</div>
<div>
<h1 className="text-2xl font-bold text-white">Sponsor Sign In</h1>
<p className="text-sm text-gray-400">Access your sponsor dashboard</p>
</div>
</div>
</div>
<Card>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<div className="flex items-center gap-2">
<Mail className="w-4 h-4 text-gray-500" />
Email
</div>
</label>
<Input
type="email"
value={formData.contactEmail}
onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
placeholder="sponsor@company.com"
error={!!errors.contactEmail}
errorMessage={errors.contactEmail}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Password
</label>
<Input
type="password"
value={formData.password}
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
placeholder="••••••••"
error={!!errors.password}
errorMessage={errors.password}
/>
</div>
<Button
type="submit"
variant="primary"
disabled={submitting}
className="w-full"
>
{submitting ? 'Signing in...' : 'Sign In'}
</Button>
</form>
<div className="mt-6 pt-6 border-t border-charcoal-outline text-center">
<p className="text-sm text-gray-400">
Don't have an account?{' '}
<button
onClick={() => setMode('signup')}
className="text-primary-blue hover:text-primary-blue/80"
>
Create one
</button>
</p>
</div>
<div className="mt-4 text-center">
<button
onClick={handleDemoLogin}
disabled={submitting}
className="text-sm text-gray-500 hover:text-gray-400"
>
Or use demo login
</button>
</div>
</Card>
</div>
);
}
// Signup form
return (
<div className="max-w-2xl mx-auto py-12">
{/* Header */}
<div className="mb-8">
<button
onClick={() => setMode('landing')}
className="text-sm text-gray-400 hover:text-white mb-4"
>
← Back
</button>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
<Building2 className="w-6 h-6 text-primary-blue" />
</div>
<div>
<h1 className="text-2xl font-bold text-white">Create Sponsor Account</h1>
<p className="text-sm text-gray-400">Register your company to sponsor leagues</p>
</div>
</div>
</div>
<Card>
<form onSubmit={handleSubmit} className="space-y-6">
{/* Company Name */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Company Name
</label>
<Input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="Your company name"
error={!!errors.name}
errorMessage={errors.name}
/>
</div>
{/* Contact Email */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<div className="flex items-center gap-2">
<Mail className="w-4 h-4 text-gray-500" />
Contact Email
</div>
</label>
<Input
type="email"
value={formData.contactEmail}
onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
placeholder="sponsor@company.com"
error={!!errors.contactEmail}
errorMessage={errors.contactEmail}
/>
</div>
{/* Website URL */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<div className="flex items-center gap-2">
<Globe className="w-4 h-4 text-gray-500" />
Website URL (optional)
</div>
</label>
<Input
type="url"
value={formData.websiteUrl}
onChange={(e) => setFormData({ ...formData, websiteUrl: e.target.value })}
placeholder="https://company.com"
/>
</div>
{/* Logo Upload */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<div className="flex items-center gap-2">
<Upload className="w-4 h-4 text-gray-500" />
Company Logo (optional)
</div>
</label>
<div className="flex items-center gap-3">
<input
type="file"
accept="image/png,image/jpeg,image/svg+xml"
onChange={(e) => {
const file = e.target.files?.[0] || null;
setFormData({ ...formData, logoFile: file });
}}
className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
/>
</div>
<p className="text-xs text-gray-500 mt-1">
PNG, JPEG, or SVG. Recommended: 500x500px transparent background.
</p>
</div>
{/* Password */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Password
</label>
<Input
type="password"
value={formData.password}
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
placeholder="Create a password"
error={!!errors.password}
errorMessage={errors.password}
/>
</div>
{/* Alpha Notice */}
<div className="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 registration is demonstration-only.
In production, you'll have access to full payment processing and analytics.
</p>
</div>
{/* Actions */}
<div className="flex gap-3 pt-4">
<Button
type="submit"
variant="primary"
disabled={submitting}
className="flex-1"
>
{submitting ? 'Creating Account...' : 'Create Account'}
</Button>
<Button
type="button"
variant="secondary"
onClick={() => setMode('landing')}
disabled={submitting}
>
Cancel
</Button>
</div>
</form>
<div className="mt-6 pt-6 border-t border-charcoal-outline text-center">
<p className="text-sm text-gray-400">
Already have an account?{' '}
<button
onClick={() => setMode('login')}
className="text-primary-blue hover:text-primary-blue/80"
>
Sign in
</button>
</p>
</div>
</Card>
</div>
);
}