website refactor
This commit is contained in:
@@ -6,38 +6,32 @@ import { Button } from '@/ui/Button';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { GridItem } from '@/ui/GridItem';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
|
||||
import { SponsorContractCard } from '@/components/sponsors/SponsorContractCard';
|
||||
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 { BillingSummaryPanel } from '@/components/sponsors/BillingSummaryPanel';
|
||||
import { SponsorActivityPanel, Activity } from '@/components/sponsors/SponsorActivityPanel';
|
||||
import {
|
||||
Eye,
|
||||
Users,
|
||||
Trophy,
|
||||
TrendingUp,
|
||||
DollarSign,
|
||||
Target,
|
||||
ExternalLink,
|
||||
Car,
|
||||
Flag,
|
||||
Megaphone,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Bell,
|
||||
Settings,
|
||||
CreditCard,
|
||||
FileText,
|
||||
RefreshCw,
|
||||
BarChart3,
|
||||
Calendar
|
||||
Clock,
|
||||
Car,
|
||||
Flag,
|
||||
Megaphone,
|
||||
LucideIcon
|
||||
} from 'lucide-react';
|
||||
import type { SponsorDashboardViewData } from '@/lib/view-data/SponsorDashboardViewData';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
@@ -49,43 +43,59 @@ interface SponsorDashboardTemplateProps {
|
||||
export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateProps) {
|
||||
const categoryData = viewData.categoryData;
|
||||
|
||||
const billingStats: Array<{
|
||||
label: string;
|
||||
value: string | number;
|
||||
icon: LucideIcon;
|
||||
variant: 'info' | 'success' | 'default' | 'warning';
|
||||
}> = [
|
||||
{
|
||||
label: 'Total Investment',
|
||||
value: viewData.formattedTotalInvestment,
|
||||
icon: DollarSign,
|
||||
variant: 'info',
|
||||
},
|
||||
{
|
||||
label: 'Active Sponsorships',
|
||||
value: viewData.activeSponsorships,
|
||||
icon: Trophy,
|
||||
variant: 'success',
|
||||
},
|
||||
{
|
||||
label: 'Cost per 1K Views',
|
||||
value: viewData.costPerThousandViews,
|
||||
icon: Eye,
|
||||
variant: 'default',
|
||||
},
|
||||
{
|
||||
label: 'Upcoming Renewals',
|
||||
value: viewData.upcomingRenewals.length,
|
||||
icon: Bell,
|
||||
variant: viewData.upcomingRenewals.length > 0 ? 'warning' : 'default',
|
||||
},
|
||||
];
|
||||
|
||||
const activities: Activity[] = viewData.recentActivity.map(a => ({
|
||||
id: a.id,
|
||||
type: 'sponsorship_approved', // Mapping logic would go here
|
||||
title: a.message,
|
||||
description: a.formattedImpressions ? `${a.formattedImpressions} impressions` : '',
|
||||
timestamp: a.time,
|
||||
icon: Clock,
|
||||
color: a.typeColor || 'text-primary-blue',
|
||||
}));
|
||||
|
||||
return (
|
||||
<Container size="lg" py={8}>
|
||||
<Stack gap={8}>
|
||||
{/* Header */}
|
||||
<Stack direction="row" align="center" justify="between" wrap gap={4}>
|
||||
<Box>
|
||||
<Heading level={2}>Sponsor Dashboard</Heading>
|
||||
<Text color="text-gray-400" block mt={1}>Welcome back, {viewData.sponsorName}</Text>
|
||||
</Box>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
{/* Time Range Selector */}
|
||||
<Surface variant="muted" rounded="lg" padding={1}>
|
||||
<Stack direction="row" align="center">
|
||||
{(['7d', '30d', '90d', 'all'] as const).map((range) => (
|
||||
<Button
|
||||
key={range}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
{range === 'all' ? 'All' : range}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Surface>
|
||||
<SponsorDashboardHeader
|
||||
sponsorName={viewData.sponsorName}
|
||||
onRefresh={() => console.log('Refresh')}
|
||||
/>
|
||||
|
||||
<Button variant="secondary">
|
||||
<Icon icon={RefreshCw} size={4} />
|
||||
</Button>
|
||||
<Box>
|
||||
<Link href={routes.sponsor.settings} variant="ghost">
|
||||
<Button variant="secondary">
|
||||
<Icon icon={Settings} size={4} />
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Billing Summary */}
|
||||
<BillingSummaryPanel stats={billingStats} />
|
||||
|
||||
{/* Key Metrics */}
|
||||
<Grid cols={4} gap={4}>
|
||||
@@ -120,167 +130,135 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* Sponsorship Categories */}
|
||||
<Box>
|
||||
<Stack direction="row" align="center" justify="between" mb={4}>
|
||||
<Heading level={3}>Your Sponsorships</Heading>
|
||||
<Box>
|
||||
<Link href={routes.sponsor.campaigns} variant="primary">
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={ChevronRight} size={4} />}>
|
||||
View All
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Grid cols={5} gap={4}>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Trophy}
|
||||
title="Leagues"
|
||||
count={categoryData.leagues.count}
|
||||
impressions={categoryData.leagues.impressions}
|
||||
color="#3b82f6"
|
||||
href="/sponsor/campaigns?type=leagues"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Users}
|
||||
title="Teams"
|
||||
count={categoryData.teams.count}
|
||||
impressions={categoryData.teams.impressions}
|
||||
color="#a855f7"
|
||||
href="/sponsor/campaigns?type=teams"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Car}
|
||||
title="Drivers"
|
||||
count={categoryData.drivers.count}
|
||||
impressions={categoryData.drivers.impressions}
|
||||
color="#10b981"
|
||||
href="/sponsor/campaigns?type=drivers"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Flag}
|
||||
title="Races"
|
||||
count={categoryData.races.count}
|
||||
impressions={categoryData.races.impressions}
|
||||
color="#f59e0b"
|
||||
href="/sponsor/campaigns?type=races"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Megaphone}
|
||||
title="Platform Ads"
|
||||
count={categoryData.platform.count}
|
||||
impressions={categoryData.platform.impressions}
|
||||
color="#ef4444"
|
||||
href="/sponsor/campaigns?type=platform"
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<Grid cols={12} gap={6}>
|
||||
<GridItem colSpan={12} lgSpan={8}>
|
||||
<Stack gap={6}>
|
||||
{/* Top Performing Sponsorships */}
|
||||
<Card p={0}>
|
||||
<Box p={4} borderBottom borderColor="border-neutral-800">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading level={3}>Top Performing</Heading>
|
||||
<Box>
|
||||
<Link href={routes.public.leagues} variant="primary">
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
|
||||
Find More
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box p={4}>
|
||||
<Surface variant="muted" rounded="lg" padding={4}>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Badge variant="primary">Main</Badge>
|
||||
<Box>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Trophy} size={4} color="#737373" />
|
||||
<Text weight="medium" color="text-white">Sample League</Text>
|
||||
</Stack>
|
||||
<Text size="sm" color="text-gray-500" block mt={1}>Sample details</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Box textAlign="right">
|
||||
<Text weight="semibold" color="text-white" block>1.2k</Text>
|
||||
<Text size="xs" color="text-gray-500">impressions</Text>
|
||||
</Box>
|
||||
<Button variant="secondary" size="sm">
|
||||
<Icon icon={ExternalLink} size={3} />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Surface>
|
||||
</Box>
|
||||
</Card>
|
||||
{/* Sponsorship Categories */}
|
||||
<Box>
|
||||
<Stack direction="row" align="center" justify="between" mb={4}>
|
||||
<Heading level={3}>Your Sponsorships</Heading>
|
||||
<Link href={routes.sponsor.campaigns}>
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={ChevronRight} size={4} />}>
|
||||
View All
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<Card p={0}>
|
||||
<Box p={4} borderBottom borderColor="border-neutral-800">
|
||||
<Heading level={3} icon={<Icon icon={Calendar} size={5} color="#f59e0b" />}>
|
||||
Upcoming Sponsored Events
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box p={4}>
|
||||
<Stack align="center" gap={2} py={8}>
|
||||
<Icon icon={Calendar} size={8} color="#737373" />
|
||||
<Text color="text-gray-400">No upcoming sponsored events</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Card>
|
||||
<Grid cols={5} gap={4}>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Trophy}
|
||||
title="Leagues"
|
||||
count={categoryData.leagues.count}
|
||||
impressions={categoryData.leagues.impressions}
|
||||
color="#3b82f6"
|
||||
href="/sponsor/campaigns?type=leagues"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Users}
|
||||
title="Teams"
|
||||
count={categoryData.teams.count}
|
||||
impressions={categoryData.teams.impressions}
|
||||
color="#a855f7"
|
||||
href="/sponsor/campaigns?type=teams"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Car}
|
||||
title="Drivers"
|
||||
count={categoryData.drivers.count}
|
||||
impressions={categoryData.drivers.impressions}
|
||||
color="#10b981"
|
||||
href="/sponsor/campaigns?type=drivers"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Flag}
|
||||
title="Races"
|
||||
count={categoryData.races.count}
|
||||
impressions={categoryData.races.impressions}
|
||||
color="#f59e0b"
|
||||
href="/sponsor/campaigns?type=races"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Megaphone}
|
||||
title="Platform Ads"
|
||||
count={categoryData.platform.count}
|
||||
impressions={categoryData.platform.impressions}
|
||||
color="#ef4444"
|
||||
href="/sponsor/campaigns?type=platform"
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Top Performing Sponsorships */}
|
||||
<Box>
|
||||
<Stack direction="row" align="center" justify="between" mb={4}>
|
||||
<Heading level={3}>Top Performing</Heading>
|
||||
<Link href={routes.public.leagues}>
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
|
||||
Find More
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
<Grid cols={2} gap={4}>
|
||||
<SponsorContractCard
|
||||
id="sample-1"
|
||||
type="league"
|
||||
status="active"
|
||||
title="Sample League"
|
||||
subtitle="Season 5 • GT3 Series"
|
||||
tier="Main Sponsor"
|
||||
investment="$2,500"
|
||||
impressions="1.2M"
|
||||
startDate="2025-10-01"
|
||||
endDate="2026-02-15"
|
||||
/>
|
||||
<SponsorContractCard
|
||||
id="sample-2"
|
||||
type="team"
|
||||
status="active"
|
||||
title="Apex Racing Team"
|
||||
subtitle="Endurance Championship"
|
||||
tier="Secondary Sponsor"
|
||||
investment="$1,200"
|
||||
impressions="450k"
|
||||
startDate="2025-11-15"
|
||||
endDate="2026-03-20"
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
|
||||
<GridItem colSpan={12} lgSpan={4}>
|
||||
<Stack gap={6}>
|
||||
{/* Recent Activity */}
|
||||
<SponsorActivityPanel activities={activities} />
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
<Heading level={3}>Quick Actions</Heading>
|
||||
<Stack gap={2}>
|
||||
<Box>
|
||||
<Link href={routes.public.leagues} variant="ghost">
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Target} size={4} />}>
|
||||
Find Leagues to Sponsor
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box>
|
||||
<Link href={routes.public.teams} variant="ghost">
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Users} size={4} />}>
|
||||
Browse Teams
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box>
|
||||
<Link href={routes.public.drivers} variant="ghost">
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Car} size={4} />}>
|
||||
Discover Drivers
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box>
|
||||
<Link href={routes.sponsor.billing} variant="ghost">
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={CreditCard} size={4} />}>
|
||||
Manage Billing
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box>
|
||||
<Link href={routes.sponsor.campaigns} variant="ghost">
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={BarChart3} size={4} />}>
|
||||
View Analytics
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Link href={routes.public.leagues}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Trophy} size={4} />}>
|
||||
Find Leagues to Sponsor
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={routes.public.teams}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Users} size={4} />}>
|
||||
Browse Teams
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={routes.public.drivers}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Car} size={4} />}>
|
||||
Discover Drivers
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={routes.sponsor.billing}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={DollarSign} size={4} />}>
|
||||
Manage Billing
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
@@ -300,56 +278,6 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
</Stack>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
<Heading level={3}>Recent Activity</Heading>
|
||||
<Box>
|
||||
{viewData.recentActivity.map((activity) => (
|
||||
<ActivityItem key={activity.id} activity={activity} />
|
||||
))}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Investment Summary */}
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
<Heading level={3} icon={<Icon icon={FileText} size={5} color="#3b82f6" />}>
|
||||
Investment Summary
|
||||
</Heading>
|
||||
<Stack gap={3}>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Text color="text-gray-400">Active Sponsorships</Text>
|
||||
<Text weight="medium" color="text-white">{viewData.activeSponsorships}</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Text color="text-gray-400">Total Investment</Text>
|
||||
<Text weight="medium" color="text-white">{viewData.formattedTotalInvestment}</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Text color="text-gray-400">Cost per 1K Views</Text>
|
||||
<Text weight="medium" color="text-performance-green">
|
||||
{viewData.costPerThousandViews}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Text color="text-gray-400">Next Invoice</Text>
|
||||
<Text weight="medium" color="text-white">Jan 1, 2026</Text>
|
||||
</Stack>
|
||||
<Box pt={3} borderTop borderColor="border-neutral-800">
|
||||
<Box>
|
||||
<Link href={routes.sponsor.billing} variant="ghost">
|
||||
<Button variant="secondary" fullWidth size="sm" icon={<Icon icon={CreditCard} size={4} />}>
|
||||
View Billing Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
|
||||
Reference in New Issue
Block a user