89 lines
3.7 KiB
TypeScript
89 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useSponsorSponsorships } from "@/hooks/sponsor/useSponsorSponsorships";
|
|
import { SponsorCampaignsTemplate, SponsorshipType, SponsorCampaignsViewData } from "@/templates/SponsorCampaignsTemplate";
|
|
import { Box } from "@/ui/Box";
|
|
import { Button } from "@/ui/Button";
|
|
import { Text } from "@/ui/Text";
|
|
import { useState } from 'react';
|
|
import { CurrencyDisplay } from "@/lib/display-objects/CurrencyDisplay";
|
|
import { NumberDisplay } from "@/lib/display-objects/NumberDisplay";
|
|
import { DateDisplay } from "@/lib/display-objects/DateDisplay";
|
|
import { StatusDisplay } from "@/lib/display-objects/StatusDisplay";
|
|
|
|
export default function SponsorCampaignsPage() {
|
|
const [typeFilter, setTypeFilter] = useState<SponsorshipType>('all');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const { data: sponsorshipsData, isLoading, error, retry } = useSponsorSponsorships('demo-sponsor-1');
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
|
|
<Box textAlign="center">
|
|
<Box w="8" h="8" border borderTop={false} borderColor="border-primary-blue" rounded="full" animate="spin" mx="auto" mb={4} />
|
|
<Text color="text-gray-400">Loading sponsorships...</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (error || !sponsorshipsData) {
|
|
return (
|
|
<Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
|
|
<Box textAlign="center">
|
|
<Text color="text-gray-400">{error?.getUserMessage() || 'No sponsorships data available'}</Text>
|
|
{error && (
|
|
<Button variant="secondary" onClick={retry} mt={4}>
|
|
Retry
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// Calculate stats
|
|
const totalInvestment = sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').reduce((sum: number, s: any) => sum + s.price, 0);
|
|
const totalImpressions = sponsorshipsData.sponsorships.reduce((sum: number, s: any) => sum + s.impressions, 0);
|
|
|
|
const stats = {
|
|
total: sponsorshipsData.sponsorships.length,
|
|
active: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').length,
|
|
pending: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'pending_approval').length,
|
|
approved: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'approved').length,
|
|
rejected: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'rejected').length,
|
|
formattedTotalInvestment: CurrencyDisplay.format(totalInvestment),
|
|
formattedTotalImpressions: NumberDisplay.formatCompact(totalImpressions),
|
|
};
|
|
|
|
const sponsorships = sponsorshipsData.sponsorships.map((s: any) => ({
|
|
...s,
|
|
formattedInvestment: CurrencyDisplay.format(s.price),
|
|
formattedImpressions: NumberDisplay.format(s.impressions),
|
|
formattedStartDate: s.seasonStartDate ? DateDisplay.formatShort(s.seasonStartDate) : undefined,
|
|
formattedEndDate: s.seasonEndDate ? DateDisplay.formatShort(s.seasonEndDate) : undefined,
|
|
}));
|
|
|
|
const viewData: SponsorCampaignsViewData = {
|
|
sponsorships,
|
|
stats: stats as any,
|
|
};
|
|
|
|
const filteredSponsorships = sponsorships.filter((s: any) => {
|
|
// For now, we only have leagues in the DTO
|
|
if (typeFilter !== 'all' && typeFilter !== 'leagues') return false;
|
|
if (searchQuery && !s.leagueName.toLowerCase().includes(searchQuery.toLowerCase())) return false;
|
|
return true;
|
|
});
|
|
|
|
return (
|
|
<SponsorCampaignsTemplate
|
|
viewData={viewData}
|
|
filteredSponsorships={filteredSponsorships as any}
|
|
typeFilter={typeFilter}
|
|
setTypeFilter={setTypeFilter}
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
/>
|
|
);
|
|
} |