website refactor
This commit is contained in:
@@ -1,450 +1,15 @@
|
||||
'use client';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SponsorDashboardPageQuery } from '@/lib/page-queries/SponsorDashboardPageQuery';
|
||||
import { SponsorDashboardTemplate } from '@/templates/SponsorDashboardTemplate';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
export default async function SponsorDashboardPage() {
|
||||
const pageQuery = new SponsorDashboardPageQuery();
|
||||
const result = await pageQuery.execute('demo-sponsor-1');
|
||||
|
||||
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 MetricCard from '@/components/sponsors/MetricCard';
|
||||
import SponsorshipCategoryCard from '@/components/sponsors/SponsorshipCategoryCard';
|
||||
import ActivityItem from '@/components/sponsors/ActivityItem';
|
||||
import RenewalAlert from '@/components/sponsors/RenewalAlert';
|
||||
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';
|
||||
import { useSponsorDashboard } from '@/lib/hooks/sponsor/useSponsorDashboard';
|
||||
|
||||
export default function SponsorDashboardPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
// Use the hook instead of manual query construction
|
||||
const { data: dashboardData, isLoading, error, retry } = useSponsorDashboard('demo-sponsor-1');
|
||||
|
||||
if (isLoading) {
|
||||
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>
|
||||
);
|
||||
if (result.isErr()) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
if (error || !dashboardData) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
|
||||
<div className="text-center">
|
||||
<p className="text-gray-400">{error?.getUserMessage() || 'Failed to load dashboard data'}</p>
|
||||
{error && (
|
||||
<Button variant="secondary" onClick={retry} className="mt-4">
|
||||
Retry
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const categoryData = dashboardData.categoryData;
|
||||
|
||||
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>
|
||||
<h2 className="text-2xl font-bold text-white">Sponsor Dashboard</h2>
|
||||
<p className="text-gray-400">Welcome back, {dashboardData.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={() => {}}
|
||||
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
||||
false
|
||||
? '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={dashboardData.totalImpressions}
|
||||
change={dashboardData.metrics.impressionsChange}
|
||||
icon={Eye}
|
||||
delay={0}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Unique Viewers"
|
||||
value={dashboardData.metrics.uniqueViewers}
|
||||
change={dashboardData.metrics.viewersChange}
|
||||
icon={Users}
|
||||
delay={0.1}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Engagement Rate"
|
||||
value={dashboardData.metrics.exposure}
|
||||
change={dashboardData.metrics.exposureChange}
|
||||
icon={TrendingUp}
|
||||
suffix="%"
|
||||
delay={0.2}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Total Investment"
|
||||
value={dashboardData.totalInvestment}
|
||||
icon={DollarSign}
|
||||
prefix="$"
|
||||
delay={0.3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sponsorship Categories */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white">Your Sponsorships</h3>
|
||||
<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">
|
||||
<h3 className="text-lg font-semibold text-white">Top Performing</h3>
|
||||
<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 */}
|
||||
{dashboardData.sponsorships.leagues.map((league: any) => (
|
||||
<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.entityName}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{league.details}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">{league.formattedImpressions}</div>
|
||||
<div className="text-xs text-gray-500">impressions</div>
|
||||
</div>
|
||||
<Link href={`/sponsor/leagues/${league.entityId}`}>
|
||||
<Button variant="secondary" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Teams */}
|
||||
{dashboardData.sponsorships.teams.map((team: any) => (
|
||||
<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.entityName}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{team.details}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">{team.formattedImpressions}</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 */}
|
||||
{dashboardData.sponsorships.drivers.slice(0, 2).map((driver: any) => (
|
||||
<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.entityName}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{driver.details}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">{driver.formattedImpressions}</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">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-warning-amber" />
|
||||
Upcoming Sponsored Events
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{dashboardData.sponsorships.races.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{dashboardData.sponsorships.races.map((race: any) => (
|
||||
<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.entityName}</p>
|
||||
<p className="text-sm text-gray-500">{race.details}</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 */}
|
||||
{dashboardData.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">
|
||||
{dashboardData.upcomingRenewals.map((renewal: any) => (
|
||||
<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>
|
||||
{dashboardData.recentActivity.map((activity: any) => (
|
||||
<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">{dashboardData.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.formattedTotalInvestment}</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.costPerThousandViews}
|
||||
</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>
|
||||
);
|
||||
const viewData = result.unwrap();
|
||||
return <SponsorDashboardTemplate viewData={viewData} />;
|
||||
}
|
||||
Reference in New Issue
Block a user