website refactor

apps/website/app/races/all/page.tsx

@@ -122,7 +122,9 @@ export default function RacesAllPage() {
       retry={fetchData}
       Template={({ data: _data }) => (
         <RacesAllTemplate
-          races={paginatedRaces}
+          viewData={pageData}
+          races={paginatedRaces as any}
+          totalFilteredCount={filteredRaces.length}
           isLoading={false}
           currentPage={currentPage}
           totalPages={totalPages}

apps/website/app/sponsor/leagues/SponsorLeaguesPageClient.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import { SponsorLeaguesTemplate, type SortOption, type TierFilter, type AvailabilityFilter } from '@/templates/SponsorLeaguesTemplate';
+
+export default function SponsorLeaguesPageClient({ data }: { data: any }) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [tierFilter, setTierFilter] = useState<TierFilter>('all');
+  const [availabilityFilter, setAvailabilityFilter] = useState<AvailabilityFilter>('all');
+  const [sortBy, setSortBy] = useState<SortOption>('rating');
+
+  const filteredLeagues = useMemo(() => {
+    if (!data?.leagues) return [];
+    return data.leagues
+      .filter((league: any) => {
+        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;
+      })
+      .sort((a: any, b: any) => {
+        switch (sortBy) {
+          case 'rating': return b.rating - a.rating;
+          case 'drivers': return b.drivers - a.drivers;
+          case 'price': return a.mainSponsorSlot.price - b.mainSponsorSlot.price;
+          case 'views': return b.avgViewsPerRace - a.avgViewsPerRace;
+          default: return 0;
+        }
+      });
+  }, [data?.leagues, searchQuery, tierFilter, availabilityFilter, sortBy]);
+
+  return (
+    <SponsorLeaguesTemplate
+      viewData={data}
+      filteredLeagues={filteredLeagues}
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+      tierFilter={tierFilter}
+      setTierFilter={setTierFilter}
+      availabilityFilter={availabilityFilter}
+      setAvailabilityFilter={setAvailabilityFilter}
+      sortBy={sortBy}
+      setSortBy={setSortBy}
+    />
+  );
+}

apps/website/app/sponsor/leagues/[id]/SponsorLeagueDetailPageClient.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React, { useState } from 'react';
+import { SponsorLeagueDetailTemplate } from '@/templates/SponsorLeagueDetailTemplate';
+
+export default function SponsorLeagueDetailPageClient({ data }: { data: any }) {
+  const [activeTab, setActiveTab] = useState<'overview' | 'drivers' | 'races' | 'sponsor'>('overview');
+  const [selectedTier, setSelectedTier] = useState<'main' | 'secondary'>('main');
+
+  return (
+    <SponsorLeagueDetailTemplate
+      viewData={data}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      selectedTier={selectedTier}
+      setSelectedTier={setSelectedTier}
+    />
+  );
+}

apps/website/app/sponsor/leagues/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { SponsorLeagueDetailTemplate } from '@/templates/SponsorLeagueDetailTemplate';
+import SponsorLeagueDetailPageClient from './SponsorLeagueDetailPageClient';
 import { SponsorsApiClient } from '@/lib/api/sponsors/SponsorsApiClient';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
 import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
@@ -25,5 +25,5 @@ export default async function Page({ params }: { params: { id: string } }) {
   if (!data) notFound();
   
   // Data is already in the right format from API client
-  return <PageWrapper data={data} Template={SponsorLeagueDetailTemplate} />;
+  return <PageWrapper data={data} Template={SponsorLeagueDetailPageClient} />;
 }

apps/website/app/sponsor/leagues/page.tsx

@@ -1,5 +1,5 @@
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { SponsorLeaguesTemplate } from '@/templates/SponsorLeaguesTemplate';
+import SponsorLeaguesPageClient from './SponsorLeaguesPageClient';
 import { SponsorsApiClient } from '@/lib/api/sponsors/SponsorsApiClient';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
 import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
@@ -23,7 +23,7 @@ export default async function Page() {
   
   // Process data - move business logic to template
   if (!leaguesData) {
-    return <PageWrapper data={undefined} Template={SponsorLeaguesTemplate} />;
+    return <PageWrapper data={undefined} Template={SponsorLeaguesPageClient} />;
   }
   
   // Calculate summary stats (business logic moved from view model)
@@ -42,5 +42,5 @@ export default async function Page() {
     stats,
   };
   
-  return <PageWrapper data={processedData} Template={SponsorLeaguesTemplate} />;
+  return <PageWrapper data={processedData} Template={SponsorLeaguesPageClient} />;
 }