74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useSponsorSponsorships } from "@/hooks/sponsor/useSponsorSponsorships";
|
|
import { SponsorCampaignsTemplate, SponsorshipType } from "@/templates/SponsorCampaignsTemplate";
|
|
import { Box } from "@/ui/primitives/Box";
|
|
import { Text } from "@/ui/Text";
|
|
import { Button } from "@/ui/Button";
|
|
|
|
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 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,
|
|
totalInvestment: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').reduce((sum: number, s: any) => sum + s.price, 0),
|
|
totalImpressions: sponsorshipsData.sponsorships.reduce((sum: number, s: any) => sum + s.impressions, 0),
|
|
};
|
|
|
|
const viewData = {
|
|
sponsorships: sponsorshipsData.sponsorships as any,
|
|
stats,
|
|
};
|
|
|
|
const filteredSponsorships = sponsorshipsData.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}
|
|
/>
|
|
);
|
|
} |