page wrapper

apps/website/app/leaderboards/page.tsx

@@ -1,9 +1,113 @@
-import LeaderboardsStatic from './LeaderboardsStatic';
+import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import LeaderboardsTemplate from '@/templates/LeaderboardsTemplate';
+import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
+import { DRIVER_SERVICE_TOKEN, TEAM_SERVICE_TOKEN } from '@/lib/di/tokens';
+import { DriverService } from '@/lib/services/drivers/DriverService';
+import { TeamService } from '@/lib/services/teams/TeamService';
+import { Trophy } from 'lucide-react';
+import { redirect , useRouter } from 'next/navigation';
+import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface LeaderboardsPageData {
+  drivers: DriverLeaderboardViewModel | null;
+  teams: TeamSummaryViewModel[] | null;
+}
+
+// ============================================================================
+// WRAPPER COMPONENT
+// ============================================================================
+
+function LeaderboardsPageWrapper({ data }: { data: LeaderboardsPageData | null }) {
+  const router = useRouter();
+  
+  if (!data || (!data.drivers && !data.teams)) {
+    return null;
+  }
+
+  const drivers = data.drivers?.drivers || [];
+  const teams = data.teams || [];
+
+  const handleDriverClick = (driverId: string) => {
+    router.push(`/drivers/${driverId}`);
+  };
+
+  const handleTeamClick = (teamId: string) => {
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleNavigateToDrivers = () => {
+    router.push('/leaderboards/drivers');
+  };
+
+  const handleNavigateToTeams = () => {
+    router.push('/teams/leaderboard');
+  };
+
+  return (
+    <LeaderboardsTemplate
+      drivers={drivers}
+      teams={teams}
+      onDriverClick={handleDriverClick}
+      onTeamClick={handleTeamClick}
+      onNavigateToDrivers={handleNavigateToDrivers}
+      onNavigateToTeams={handleNavigateToTeams}
+    />
+  );
+}
 
 // ============================================================================
 // MAIN PAGE COMPONENT
 // ============================================================================
 
-export default function LeaderboardsPage() {
-  return <LeaderboardsStatic />;
+export default async function LeaderboardsPage() {
+  // Fetch data using PageDataFetcher with proper type annotations
+  const [driverData, teamsData] = await Promise.all([
+    PageDataFetcher.fetch<DriverService, 'getDriverLeaderboard'>(
+      DRIVER_SERVICE_TOKEN,
+      'getDriverLeaderboard'
+    ),
+    PageDataFetcher.fetch<TeamService, 'getAllTeams'>(
+      TEAM_SERVICE_TOKEN,
+      'getAllTeams'
+    ),
+  ]);
+
+  // Prepare data for template
+  const data: LeaderboardsPageData = {
+    drivers: driverData as DriverLeaderboardViewModel | null,
+    teams: teamsData as TeamSummaryViewModel[] | null,
+  };
+
+  const hasData = (driverData as any)?.drivers?.length > 0 || (teamsData as any)?.length > 0;
+
+  // Handle loading state (should be fast since we're using async/await)
+  const isLoading = false;
+  const error = null;
+  const retry = async () => {
+    // In server components, we can't retry without a reload
+    // This would typically trigger a page reload
+    redirect('/leaderboards');
+  };
+
+  return (
+    <PageWrapper
+      data={hasData ? data : null}
+      isLoading={isLoading}
+      error={error}
+      retry={retry}
+      Template={LeaderboardsPageWrapper}
+      loading={{ variant: 'full-screen', message: 'Loading leaderboards...' }}
+      errorConfig={{ variant: 'full-screen' }}
+      empty={{
+        icon: Trophy,
+        title: 'No leaderboard data',
+        description: 'There is no leaderboard data available at the moment.',
+      }}
+    />
+  );
 }