website refactor

2026-01-21 01:56:07 +01:00
parent 977dcc4e86
commit c06f93f1b6
22 changed files with 576 additions and 487 deletions
--- a/apps/website/app/leagues/[id]/layout.tsx
+++ b/apps/website/app/leagues/[id]/layout.tsx
@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
 import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDetailViewDataBuilder';
+import { DriverService } from '@/lib/services/drivers/DriverService';
 import { Text } from '@/ui/Text';

 export default async function LeagueLayout({
@@ -14,7 +15,10 @@ export default async function LeagueLayout({
  const { id: leagueId } = await params;
  
  // Execute PageQuery to get league data
-  const result = await LeagueDetailPageQuery.execute(leagueId);
+  const [result, currentDriver] = await Promise.all([
+    LeagueDetailPageQuery.execute(leagueId),
+    new DriverService().getCurrentDriver(),
+  ]);
  
  if (result.isErr()) {
    const error = result.getError();
@@ -34,6 +38,7 @@ export default async function LeagueLayout({
          ownerSummary: null,
          adminSummaries: [],
          stewardSummaries: [],
+          memberSummaries: [],
          sponsorInsights: null
        }}
        tabs={[]}
@@ -47,11 +52,11 @@ export default async function LeagueLayout({
  
  const viewData = LeagueDetailViewDataBuilder.build({
    league: data.league,
-    owner: null,
-    scoringConfig: null,
-    memberships: { members: [] },
-    races: [],
-    sponsors: [],
+    owner: data.owner,
+    scoringConfig: data.scoringConfig,
+    memberships: data.memberships,
+    races: data.races,
+    sponsors: data.sponsors,
  });
  
  // Define tab configuration
@@ -59,19 +64,23 @@ export default async function LeagueLayout({
    { label: 'Overview', href: `/leagues/${leagueId}`, exact: true },
    { label: 'Schedule', href: `/leagues/${leagueId}/schedule`, exact: false },
    { label: 'Standings', href: `/leagues/${leagueId}/standings`, exact: false },
+    { label: 'Roster', href: `/leagues/${leagueId}/roster`, exact: false },
    { label: 'Rulebook', href: `/leagues/${leagueId}/rulebook`, exact: false },
  ];

-  const adminTabs = [
+  // Check if user is admin or owner
+  const isOwner = currentDriver && data.league.ownerId === currentDriver.id;
+  const isAdmin = currentDriver && data.memberships.members?.some(m => m.driverId === currentDriver.id && m.role === 'admin');
+  const hasAdminAccess = isOwner || isAdmin;
+
+  const adminTabs = hasAdminAccess ? [
    { label: 'Schedule Admin', href: `/leagues/${leagueId}/schedule/admin`, exact: false },
    { label: 'Sponsorships', href: `/leagues/${leagueId}/sponsorships`, exact: false },
    { label: 'Stewarding', href: `/leagues/${leagueId}/stewarding`, exact: false },
    { label: 'Wallet', href: `/leagues/${leagueId}/wallet`, exact: false },
    { label: 'Settings', href: `/leagues/${leagueId}/settings`, exact: false },
-  ];
+  ] : [];

-  // TODO: Admin check needs to be implemented properly
-  // For now, show admin tabs if user is logged in
  const tabs = [...baseTabs, ...adminTabs];

  return (
--- a/apps/website/app/leagues/[id]/page.tsx
+++ b/apps/website/app/leagues/[id]/page.tsx
@@ -64,14 +64,13 @@ export default async function Page({ params }: Props) {
  const league = data.league;
  
  // Build ViewData using the builder
-  // Note: This would need additional data (owner, scoring config, etc.) in real implementation
  const viewData = LeagueDetailViewDataBuilder.build({
    league: data.league,
-    owner: null,
-    scoringConfig: null,
-    memberships: { members: [] },
-    races: [],
-    sponsors: [],
+    owner: data.owner,
+    scoringConfig: data.scoringConfig,
+    memberships: data.memberships,
+    races: data.races,
+    sponsors: data.sponsors,
  });

  const jsonLd = {
--- a/apps/website/app/leagues/[id]/roster/page.tsx
+++ b/apps/website/app/leagues/[id]/roster/page.tsx
@@ -0,0 +1,67 @@
+import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
+import { notFound } from 'next/navigation';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+
+interface Props {
+  params: Promise<{ id: string }>;
+}
+
+export default async function LeagueRosterPage({ params }: Props) {
+  const { id: leagueId } = await params;
+  const result = await LeagueDetailPageQuery.execute(leagueId);
+
+  if (result.isErr()) {
+    notFound();
+  }
+
+  const data = result.unwrap();
+  const members = data.memberships.members || [];
+
+  return (
+    <Stack gap={8}>
+      <Box as="header" display="flex" flexDirection="col" gap={2}>
+        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">League Roster</Text>
+        <Text size="sm" color="text-zinc-500">All drivers currently registered in this league.</Text>
+      </Box>
+
+      <Box border borderColor="zinc-800" bg="zinc-900/30" overflow="hidden">
+        <table className="w-full text-left border-collapse">
+          <thead>
+            <tr className="border-b border-zinc-800 bg-zinc-900/50">
+              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Driver</th>
+              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Role</th>
+              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Joined</th>
+            </tr>
+          </thead>
+          <tbody>
+            {members.map((member) => (
+              <tr key={member.driverId} className="border-b border-zinc-800/50 hover:bg-zinc-800/30 transition-colors">
+                <td className="px-6 py-4">
+                  <Box display="flex" alignItems="center" gap={3}>
+                    <Box w="8" h="8" bg="zinc-800" rounded="full" />
+                    <Text weight="bold" color="text-white">{member.driver.name}</Text>
+                  </Box>
+                </td>
+                <td className="px-6 py-4">
+                  <Text size="xs" color="text-zinc-400" uppercase weight="bold">{member.role}</Text>
+                </td>
+                <td className="px-6 py-4">
+                  <Text size="sm" color="text-zinc-500">{new Date(member.joinedAt).toLocaleDateString()}</Text>
+                </td>
+              </tr>
+            ))}
+            {members.length === 0 && (
+              <tr>
+                <td colSpan={3} className="px-6 py-12 text-center">
+                  <Text color="text-zinc-600" italic>No members found in this league.</Text>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </Box>
+    </Stack>
+  );
+}
--- a/apps/website/components/leagues/LeagueHeader.tsx
+++ b/apps/website/components/leagues/LeagueHeader.tsx
@@ -1,61 +0,0 @@
-
-
-import { Heading } from '@/ui/Heading';
-import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { ReactNode } from 'react';
-
-interface LeagueHeaderProps {
-  name: string;
-  description?: string | null;
-  logoUrl: string;
-  sponsorContent?: ReactNode;
-  statusContent?: ReactNode;
-}
-
-export function LeagueHeader({
-  name,
-  description,
-  logoUrl,
-  sponsorContent,
-  statusContent,
-}: LeagueHeaderProps) {
-  return (
-    <Stack mb={8}>
-      <Stack display="flex" alignItems="center" justifyContent="between" mb={6}>
-        <Stack direction="row" align="center" gap={4}>
-          <Stack h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
-            <Image
-              src={logoUrl}
-              alt={`${name} logo`}
-              width={64}
-              height={64}
-              fullWidth
-              fullHeight
-              objectFit="cover"
-            />
-          </Stack>
-          <Stack>
-            <Stack display="flex" alignItems="center" gap={3} mb={1}>
-              <Heading level={1}>
-                {name}
-                {sponsorContent && (
-                  <Text color="text-gray-400" weight="normal" size="lg" ml={2}>
-                    by {sponsorContent}
-                  </Text>
-                )}
-              </Heading>
-              {statusContent}
-            </Stack>
-            {description && (
-              <Text color="text-gray-400" size="sm" maxWidth="xl" block>
-                {description}
-              </Text>
-            )}
-          </Stack>
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-}
--- a/apps/website/components/leagues/LeagueHeaderPanel.tsx
+++ b/apps/website/components/leagues/LeagueHeaderPanel.tsx
@@ -1,83 +0,0 @@
-'use client';
-
-import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Activity, Timer, Trophy, Users, type LucideIcon } from 'lucide-react';
-
-interface LeagueHeaderPanelProps {
-  viewData: LeagueDetailViewData;
-}
-
-export function LeagueHeaderPanel({ viewData }: LeagueHeaderPanelProps) {
-  return (
-    <Card variant="outline" p={6} position="relative" overflow="hidden" className="bg-graphite-black">
-      {/* Background Accent */}
-      <Stack 
-        position="absolute" 
-        top={0} 
-        right={0} 
-        w="300px" 
-        h="full" 
-        bg="bg-gradient-to-l from-primary-blue/5 to-transparent" 
-        pointerEvents="none"
-      >{null}</Stack>
-      
-      <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={6}>
-        <Stack gap={2}>
-          <Stack direction="row" align="center" gap={3}>
-            <Stack p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
-              <Icon icon={Trophy} size={6} color="text-primary-blue" />
-            </Stack>
-            <Heading level={1} letterSpacing="tight">
-              {viewData.name}
-            </Heading>
-          </Stack>
-          <Text color="text-gray-400" size="sm" maxWidth="42rem">
-            {viewData.description}
-          </Text>
-        </Stack>
-
-        <Stack direction="row" gap={8} wrap>
-          <StatItem 
-            icon={Users} 
-            label="Members" 
-            value={viewData.info.membersCount.toString()} 
-            color="text-primary-blue"
-          />
-          <StatItem 
-            icon={Timer} 
-            label="Races" 
-            value={viewData.info.racesCount.toString()} 
-            color="text-neon-aqua"
-          />
-          <StatItem 
-            icon={Activity} 
-            label="Avg SOF" 
-            value={(viewData.info.avgSOF ?? 0).toString()} 
-            color="text-performance-green"
-          />
-        </Stack>
-      </Stack>
-    </Card>
-  );
-}
-
-function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string, color: string }) {
-  return (
-    <Stack gap={1}>
-      <Stack direction="row" align="center" gap={1.5}>
-        <Icon icon={icon} size={3.5} color="text-gray-500" />
-        <Text size="xs" color="text-gray-500" weight="medium" letterSpacing="wider" block>
-          {label.toUpperCase()}
-        </Text>
-      </Stack>
-      <Text size="xl" weight="bold" color={color} lineHeight="none">
-        {value}
-      </Text>
-    </Stack>
-  );
-}
--- a/apps/website/components/leagues/LeagueLogoWrapper.tsx
+++ b/apps/website/components/leagues/LeagueLogoWrapper.tsx
@@ -1,16 +0,0 @@
-import React from 'react';
-import { LeagueLogo as UiLeagueLogo } from '@/components/leagues/LeagueLogo';
-
-export interface LeagueLogoProps {
-  leagueId: string;
-  alt: string;
-}
-
-export function LeagueLogo({ leagueId, alt }: LeagueLogoProps) {
-  return (
-    <UiLeagueLogo
-      leagueId={leagueId}
-      alt={alt}
-    />
-  );
-}
--- a/apps/website/components/leagues/LeagueNavTabs.tsx
+++ b/apps/website/components/leagues/LeagueNavTabs.tsx
@@ -1,57 +0,0 @@
-'use client';
-
-import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
-
-interface Tab {
-  label: string;
-  href: string;
-  exact?: boolean;
-}
-
-interface LeagueNavTabsProps {
-  tabs: Tab[];
-  currentPathname: string;
-}
-
-export function LeagueNavTabs({ tabs, currentPathname }: LeagueNavTabsProps) {
-  return (
-    <Stack as="nav" borderBottom borderColor="zinc-800" mb={6}>
-      <Stack as="ul" direction="row" gap={8} overflow="auto" hideScrollbar>
-        {tabs.map((tab) => {
-          const isActive = tab.exact 
-            ? currentPathname === tab.href 
-            : currentPathname.startsWith(tab.href);
-
-          return (
-            <Stack as="li" key={tab.href} position="relative">
-              <Link
-                href={tab.href}
-                variant="ghost"
-                pb={4}
-                display="block"
-                size="sm"
-                weight="medium"
-                color={isActive ? 'text-blue-500' : 'text-zinc-400'}
-                hoverTextColor={isActive ? 'text-blue-500' : 'text-zinc-200'}
-                transition
-              >
-                {tab.label}
-              </Link>
-              {isActive && (
-                <Stack 
-                  position="absolute" 
-                  bottom="0" 
-                  left="0" 
-                  right="0" 
-                  h="0.5" 
-                  bg="bg-blue-500" 
-                />
-              )}
-            </Stack>
-          );
-        })}
-      </Stack>
-    </Stack>
-  );
-}
--- a/apps/website/components/leagues/LeagueSchedulePanel.tsx
+++ b/apps/website/components/leagues/LeagueSchedulePanel.tsx
@@ -12,6 +12,7 @@ interface RaceEvent {
  date: string;
  time: string;
  status: 'upcoming' | 'live' | 'completed';
+  strengthOfField?: number;
 }

 interface LeagueSchedulePanelProps {
@@ -56,6 +57,12 @@ export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
                  <Stack color="text-zinc-600"><Clock size={14} /></Stack>
                  <Text size="sm" color="text-zinc-400">{event.time}</Text>
                </Stack>
+                {event.strengthOfField && (
+                  <Stack display="flex" alignItems="center" gap={1.5}>
+                    <Text size="xs" weight="bold" color="text-zinc-500" uppercase>SOF</Text>
+                    <Text size="sm" color="text-zinc-300" font="mono">{event.strengthOfField}</Text>
+                  </Stack>
+                )}
              </Stack>
            </Stack>

--- a/apps/website/components/leagues/LeagueStandingsTable.tsx
+++ b/apps/website/components/leagues/LeagueStandingsTable.tsx
@@ -11,6 +11,8 @@ interface StandingEntry {
  points: number;
  wins: number;
  podiums: number;
+  races: number;
+  avgFinish: number | null;
  gap: string;
 }

@@ -34,10 +36,10 @@ export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
            </TableHeader>
            <TableHeader className="text-center px-4 py-3">
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Wins</Text>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Races</Text>
            </TableHeader>
            <TableHeader className="text-center px-4 py-3">
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Podiums</Text>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Avg</Text>
            </TableHeader>
            <TableHeader className="text-right px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
@@ -60,10 +62,10 @@ export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
                <Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
              </TableCell>
              <TableCell className="text-center px-4 py-3">
-                <Text size="sm" color="text-zinc-400">{entry.wins}</Text>
+                <Text size="sm" color="text-zinc-400">{entry.races}</Text>
              </TableCell>
              <TableCell className="text-center px-4 py-3">
-                <Text size="sm" color="text-zinc-400">{entry.podiums}</Text>
+                <Text size="sm" color="text-zinc-400">{entry.avgFinish?.toFixed(1) || '—'}</Text>
              </TableCell>
              <TableCell className="text-right px-4 py-3">
                <Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
--- a/apps/website/components/leagues/LeagueTabs.tsx
+++ b/apps/website/components/leagues/LeagueTabs.tsx
@@ -1,40 +0,0 @@
-'use client';
-
-import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-
-interface Tab {
-  label: string;
-  href: string;
-  exact?: boolean;
-}
-
-interface LeagueTabsProps {
-  tabs: Tab[];
-}
-
-export function LeagueTabs({ tabs }: LeagueTabsProps) {
-  return (
-    <Stack borderBottom borderColor="border-charcoal-outline">
-      <Stack direction="row" gap={6} overflow="auto">
-        {tabs.map((tab) => (
-          <Link
-            key={tab.href}
-            href={tab.href}
-            variant="ghost"
-          >
-            <Stack pb={3} px={1}>
-              <Text weight="medium" 
-                // eslint-disable-next-line gridpilot-rules/component-classification
-                className="whitespace-nowrap"
-              >
-                {tab.label}
-              </Text>
-            </Stack>
-          </Link>
-        ))}
-      </Stack>
-    </Stack>
-  );
-}
--- a/apps/website/lib/builders/view-data/LeagueDetailViewDataBuilder.ts
+++ b/apps/website/lib/builders/view-data/LeagueDetailViewDataBuilder.ts
@@ -35,9 +35,12 @@ export class LeagueDetailViewDataBuilder {
    
    // Calculate info data
    const membersCount = Array.isArray(memberships.members) ? memberships.members.length : 0;
-    const completedRacesCount = races.filter(r => r.name.includes('Completed')).length; // Placeholder
-    const avgSOF = races.length > 0
-      ? Math.round(races.reduce((sum, _r) => sum + 0, 0) / races.length)
+    const completedRacesCount = races.filter(r => (r as any).status === 'completed').length;
+    
+    // Compute real avgSOF from races
+    const racesWithSOF = races.filter(r => typeof (r as any).strengthOfField === 'number' && (r as any).strengthOfField > 0);
+    const avgSOF = racesWithSOF.length > 0
+      ? Math.round(racesWithSOF.reduce((sum, r) => sum + ((r as any).strengthOfField || 0), 0) / racesWithSOF.length)
      : null;
    
    const info: LeagueInfoData = {
@@ -76,16 +79,58 @@ export class LeagueDetailViewDataBuilder {
      tagline: s.tagline,
    }));
    
+    // Convert memberships to summaries
+    const adminSummaries: DriverSummaryData[] = (memberships.members || [])
+      .filter(m => m.role === 'admin')
+      .map(m => ({
+        driverId: m.driverId,
+        driverName: m.driver.name,
+        avatarUrl: (m.driver as any).avatarUrl || null,
+        rating: null,
+        rank: null,
+        roleBadgeText: 'Admin',
+        roleBadgeClasses: 'bg-blue-500/10 text-blue-500 border-blue-500/30',
+        profileUrl: `/drivers/${m.driverId}`,
+      }));
+
+    const stewardSummaries: DriverSummaryData[] = (memberships.members || [])
+      .filter(m => m.role === 'steward')
+      .map(m => ({
+        driverId: m.driverId,
+        driverName: m.driver.name,
+        avatarUrl: (m.driver as any).avatarUrl || null,
+        rating: null,
+        rank: null,
+        roleBadgeText: 'Steward',
+        roleBadgeClasses: 'bg-purple-500/10 text-purple-500 border-purple-500/30',
+        profileUrl: `/drivers/${m.driverId}`,
+      }));
+
+    const memberSummaries: DriverSummaryData[] = (memberships.members || [])
+      .filter(m => m.role === 'member')
+      .map(m => ({
+        driverId: m.driverId,
+        driverName: m.driver.name,
+        avatarUrl: (m.driver as any).avatarUrl || null,
+        rating: null,
+        rank: null,
+        roleBadgeText: 'Member',
+        roleBadgeClasses: 'bg-zinc-500/10 text-zinc-500 border-zinc-500/30',
+        profileUrl: `/drivers/${m.driverId}`,
+      }));
+
    return {
      leagueId: league.id,
      name: league.name,
      description: league.description || '',
+      logoUrl: league.logoUrl,
      info,
      runningRaces,
      sponsors: sponsorInfo,
      ownerSummary,
-      adminSummaries: [], // Would need additional data
-      stewardSummaries: [], // Would need additional data
+      adminSummaries,
+      stewardSummaries,
+      memberSummaries,
      sponsorInsights: null, // Only for sponsor mode
    };
  }
--- a/apps/website/lib/services/leagues/LeagueRulebookService.ts
+++ b/apps/website/lib/services/leagues/LeagueRulebookService.ts
@@ -1,30 +1,44 @@
 import { Result } from '@/lib/contracts/Result';
 import { Service, DomainError } from '@/lib/contracts/services/Service';
 import { RulebookApiDto } from '@/lib/types/tbd/RulebookApiDto';
+import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient';
+import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter';
+import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';

 export class LeagueRulebookService implements Service {
+  private apiClient: LeaguesApiClient;
+
+  constructor() {
+    const baseUrl = getWebsiteApiBaseUrl();
+    this.apiClient = new LeaguesApiClient(
+      baseUrl,
+      new ConsoleErrorReporter(),
+      new ConsoleLogger()
+    );
+  }
+
  async getRulebookData(leagueId: string): Promise<Result<RulebookApiDto, DomainError>> {
-    // Mock data since backend not implemented
-    const mockData: RulebookApiDto = {
-      leagueId,
-      scoringConfig: {
-        gameName: 'iRacing',
-        scoringPresetName: 'Custom Rules',
-        championships: [
-          {
-            type: 'driver',
+    try {
+      const config = await this.apiClient.getLeagueConfig(leagueId);
+      
+      const mockData: RulebookApiDto = {
+        leagueId,
+        scoringConfig: {
+          gameName: 'iRacing',
+          scoringPresetName: config.form?.scoring?.type || 'Standard',
+          championships: (config.form?.championships || []).map((c: any) => ({
+            type: c.type || 'driver',
            sessionTypes: ['Race'],
-            pointsPreview: [
-              { sessionType: 'Race', position: 1, points: 25 },
-              { sessionType: 'Race', position: 2, points: 20 },
-              { sessionType: 'Race', position: 3, points: 16 },
-            ],
-            bonusSummary: ['Pole Position: +1', 'Fastest Lap: +1'],
-          }
-        ],
-        dropPolicySummary: 'All results count',
-      },
-    };
-    return Result.ok(mockData);
+            pointsPreview: [],
+            bonusSummary: [],
+          })),
+          dropPolicySummary: config.form?.dropPolicy?.strategy || 'All results count',
+        },
+      };
+      return Result.ok(mockData);
+    } catch (error: unknown) {
+      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch rulebook' });
+    }
  }
 }
--- a/apps/website/lib/services/leagues/LeagueScheduleService.ts
+++ b/apps/website/lib/services/leagues/LeagueScheduleService.ts
@@ -1,39 +1,45 @@
 import { Result } from '@/lib/contracts/Result';
 import { Service, DomainError } from '@/lib/contracts/services/Service';
 import { LeagueScheduleApiDto } from '@/lib/types/tbd/LeagueScheduleApiDto';
+import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient';
+import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter';
+import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';

 export class LeagueScheduleService implements Service {
+  private apiClient: LeaguesApiClient;
+
+  constructor() {
+    const baseUrl = getWebsiteApiBaseUrl();
+    this.apiClient = new LeaguesApiClient(
+      baseUrl,
+      new ConsoleErrorReporter(),
+      new ConsoleLogger()
+    );
+  }
+
  async getScheduleData(leagueId: string): Promise<Result<LeagueScheduleApiDto, DomainError>> {
-    // Mock data since backend not implemented
-    const mockData: LeagueScheduleApiDto = {
-      leagueId,
-      races: [
-        {
-          id: 'race-1',
-          name: 'Round 1 - Monza',
-          date: '2024-10-15T14:00:00Z',
-          track: 'Monza Circuit',
-          car: 'Ferrari SF90',
-          sessionType: 'Race',
-        },
-        {
-          id: 'race-2',
-          name: 'Round 2 - Silverstone',
-          date: '2024-10-22T13:00:00Z',
-          track: 'Silverstone Circuit',
-          car: 'Mercedes W10',
-          sessionType: 'Race',
-        },
-        {
-          id: 'race-3',
-          name: 'Round 3 - Spa-Francorchamps',
-          date: '2024-10-29T12:00:00Z',
-          track: 'Circuit de Spa-Francorchamps',
-          car: 'Red Bull RB15',
-          sessionType: 'Race',
-        },
-      ],
-    };
-    return Result.ok(mockData);
+    try {
+      const data = await this.apiClient.getSchedule(leagueId);
+      
+      // Map LeagueScheduleDTO to LeagueScheduleApiDto
+      const apiDto: LeagueScheduleApiDto = {
+        leagueId,
+        races: data.races.map(race => ({
+          id: race.id,
+          name: race.name,
+          date: race.date,
+          track: (race as any).track || 'TBA',
+          car: (race as any).car || 'TBA',
+          sessionType: (race as any).sessionType || 'Race',
+          status: (race as any).status || 'scheduled',
+          strengthOfField: (race as any).strengthOfField,
+        })),
+      };
+      
+      return Result.ok(apiDto);
+    } catch (error: unknown) {
+      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch schedule' });
+    }
  }
 }
--- a/apps/website/lib/services/leagues/LeagueService.ts
+++ b/apps/website/lib/services/leagues/LeagueService.ts
@@ -18,6 +18,9 @@ import type { LeagueSeasonSchedulePublishOutputDTO } from '@/lib/types/generated
 import type { LeagueRosterMemberDTO } from '@/lib/types/generated/LeagueRosterMemberDTO';
 import type { LeagueMembershipsDTO } from '@/lib/types/generated/LeagueMembershipsDTO';
 import type { GetTeamDetailsOutputDTO } from '@/lib/types/generated/GetTeamDetailsOutputDTO';
+import type { GetDriverOutputDTO } from '@/lib/types/generated/GetDriverOutputDTO';
+import type { RaceDTO } from '@/lib/types/generated/RaceDTO';
+import type { LeagueScoringConfigDTO } from '@/lib/types/generated/LeagueScoringConfigDTO';
 import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
 import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
@@ -45,7 +48,11 @@ export interface LeagueRosterAdminData {

 export interface LeagueDetailData {
  league: LeagueWithCapacityAndScoringDTO;
-  apiDto: AllLeaguesWithCapacityAndScoringDTO;
+  owner: GetDriverOutputDTO | null;
+  scoringConfig: LeagueScoringConfigDTO | null;
+  memberships: LeagueMembershipsDTO;
+  races: RaceDTO[];
+  sponsors: any[];
 }

 /**
@@ -58,24 +65,28 @@ export interface LeagueDetailData {
@injectable()
 export class LeagueService implements Service {
  private apiClient: LeaguesApiClient;
-  private driversApiClient?: DriversApiClient;
-  private sponsorsApiClient?: SponsorsApiClient;
-  private racesApiClient?: RacesApiClient;
+  private driversApiClient: DriversApiClient;
+  private sponsorsApiClient: SponsorsApiClient;
+  private racesApiClient: RacesApiClient;

  constructor(@unmanaged() apiClient?: LeaguesApiClient) {
+    const baseUrl = getWebsiteApiBaseUrl();
+    const logger = new ConsoleLogger();
+    const errorReporter = new EnhancedErrorReporter(logger, {
+      showUserNotifications: false,
+      logToConsole: true,
+      reportToExternal: isProductionEnvironment(),
+    });
+
    if (apiClient) {
      this.apiClient = apiClient;
    } else {
-      const baseUrl = getWebsiteApiBaseUrl();
-      const logger = new ConsoleLogger();
-      const errorReporter = new EnhancedErrorReporter(logger, {
-        showUserNotifications: false,
-        logToConsole: true,
-        reportToExternal: isProductionEnvironment(),
-      });
      this.apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
    }
-    // Optional clients can be initialized if needed
+
+    this.driversApiClient = new DriversApiClient(baseUrl, errorReporter, logger);
+    this.sponsorsApiClient = new SponsorsApiClient(baseUrl, errorReporter, logger);
+    this.racesApiClient = new RacesApiClient(baseUrl, errorReporter, logger);
  }

  async getLeagueStandings(leagueId: string): Promise<any> {
@@ -143,7 +154,11 @@ export class LeagueService implements Service {

  async getLeagueDetailData(leagueId: string): Promise<Result<LeagueDetailData, DomainError>> {
    try {
-      const apiDto = await this.apiClient.getAllWithCapacityAndScoring();
+      const [apiDto, memberships, racesResponse] = await Promise.all([
+        this.apiClient.getAllWithCapacityAndScoring(),
+        this.apiClient.getMemberships(leagueId),
+        this.apiClient.getRaces(leagueId),
+      ]);
      
      if (!apiDto || !apiDto.leagues) {
        return Result.err({ type: 'notFound', message: 'Leagues not found' });
@@ -153,10 +168,40 @@ export class LeagueService implements Service {
      if (!league) {
        return Result.err({ type: 'notFound', message: 'League not found' });
      }
+
+      // Fetch owner if ownerId exists
+      let owner: GetDriverOutputDTO | null = null;
+      if (league.ownerId) {
+        owner = await this.driversApiClient.getDriver(league.ownerId);
+      }
+
+      // Fetch scoring config if available
+      let scoringConfig: LeagueScoringConfigDTO | null = null;
+      try {
+        const config = await this.apiClient.getLeagueConfig(leagueId);
+        if (config.form?.scoring) {
+          // Map form scoring to LeagueScoringConfigDTO if possible, or just use partial
+          scoringConfig = {
+            leagueId,
+            seasonId: '', // Not available in this context
+            gameId: '',
+            gameName: '',
+            scoringPresetId: (config.form.scoring as any).presetId,
+            dropPolicySummary: '',
+            championships: [],
+          };
+        }
+      } catch (e) {
+        console.warn('Failed to fetch league scoring config', e);
+      }
      
      return Result.ok({
        league,
-        apiDto,
+        owner,
+        scoringConfig,
+        memberships,
+        races: racesResponse.races,
+        sponsors: [], // Sponsors integration can be added here
      });
    } catch (error: unknown) {
      console.error('LeagueService.getLeagueDetailData failed:', error);
--- a/apps/website/lib/services/leagues/LeagueStandingsService.ts
+++ b/apps/website/lib/services/leagues/LeagueStandingsService.ts
@@ -18,72 +18,51 @@ export class LeagueStandingsService implements Service {
    );
  }

-  async getStandingsData(_: string): Promise<Result<{ standings: LeagueStandingsApiDto; memberships: LeagueMembershipsApiDto }, DomainError>> {
-    // Mock data since backend may not be implemented
-    const mockStandings: LeagueStandingsApiDto = {
-      standings: [
-        {
-          driverId: 'driver1',
-          driver: {
-            id: 'driver1',
-            name: 'John Doe',
-            iracingId: '12345',
-            country: 'US',
-            joinedAt: new Date().toISOString(),
-          },
-          points: 100,
-          position: 1,
-          wins: 2,
-          podiums: 3,
-          races: 5,
-        },
-        {
-          driverId: 'driver2',
-          driver: {
-            id: 'driver2',
-            name: 'Jane Smith',
-            iracingId: '67890',
-            country: 'UK',
-            joinedAt: new Date().toISOString(),
-          },
-          points: 80,
-          position: 2,
-          wins: 1,
-          podiums: 2,
-          races: 5,
-        },
-      ],
-    };
+  async getStandingsData(leagueId: string): Promise<Result<{ standings: LeagueStandingsApiDto; memberships: LeagueMembershipsApiDto }, DomainError>> {
+    try {
+      const [standingsData, membershipsData] = await Promise.all([
+        this.apiClient.getStandings(leagueId),
+        this.apiClient.getMemberships(leagueId),
+      ]);

-    const mockMemberships: LeagueMembershipsApiDto = {
-      members: [
-        {
-          driverId: 'driver1',
+      // Map LeagueStandingsDTO to LeagueStandingsApiDto
+      const standings: LeagueStandingsApiDto = {
+        standings: standingsData.standings.map(s => ({
+          driverId: s.driverId,
          driver: {
-            id: 'driver1',
-            name: 'John Doe',
-            iracingId: '12345',
-            country: 'US',
-            joinedAt: new Date().toISOString(),
+            id: s.driver.id,
+            name: s.driver.name,
+            iracingId: s.driver.iracingId,
+            country: s.driver.country,
+            joinedAt: s.driver.joinedAt,
          },
-          role: 'member',
-          joinedAt: new Date().toISOString(),
-        },
-        {
-          driverId: 'driver2',
-          driver: {
-            id: 'driver2',
-            name: 'Jane Smith',
-            iracingId: '67890',
-            country: 'UK',
-            joinedAt: new Date().toISOString(),
-          },
-          role: 'member',
-          joinedAt: new Date().toISOString(),
-        },
-      ],
-    };
+          points: s.points,
+          position: s.position,
+          wins: s.wins,
+          podiums: s.podiums,
+          races: s.races,
+        })),
+      };

-    return Result.ok({ standings: mockStandings, memberships: mockMemberships });
+      // Map LeagueMembershipsDTO to LeagueMembershipsApiDto
+      const memberships: LeagueMembershipsApiDto = {
+        members: (membershipsData.members || []).map(m => ({
+          driverId: m.driverId,
+          driver: {
+            id: m.driver.id,
+            name: m.driver.name,
+            iracingId: m.driver.iracingId,
+            country: m.driver.country,
+            joinedAt: m.driver.joinedAt,
+          },
+          role: m.role as any,
+          joinedAt: m.joinedAt,
+        })),
+      };
+
+      return Result.ok({ standings, memberships });
+    } catch (error: unknown) {
+      return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch standings' });
+    }
  }
 }
--- a/apps/website/lib/view-data/LeagueDetailViewData.ts
+++ b/apps/website/lib/view-data/LeagueDetailViewData.ts
@@ -70,6 +70,7 @@ export interface LeagueDetailViewData extends ViewData {
  leagueId: string;
  name: string;
  description: string;
+  logoUrl?: string;
  
  // Info card data
  info: LeagueInfoData;
@@ -84,6 +85,7 @@ export interface LeagueDetailViewData extends ViewData {
  ownerSummary: DriverSummaryData | null;
  adminSummaries: DriverSummaryData[];
  stewardSummaries: DriverSummaryData[];
+  memberSummaries: DriverSummaryData[];
  
  // Sponsor insights (for sponsor mode)
  sponsorInsights: {
--- a/apps/website/lib/view-data/leagues/LeagueScheduleViewData.ts
+++ b/apps/website/lib/view-data/leagues/LeagueScheduleViewData.ts
@@ -10,5 +10,6 @@ export interface LeagueScheduleViewData {
    isPast: boolean;
    isUpcoming: boolean;
    status: 'scheduled' | 'completed';
+    strengthOfField?: number;
  }>;
 }
--- a/apps/website/templates/LeagueDetailTemplate.tsx
+++ b/apps/website/templates/LeagueDetailTemplate.tsx
@@ -1,5 +1,6 @@
 'use client';

+import { usePathname } from 'next/navigation';
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
@@ -13,6 +14,8 @@ import { ChevronRight } from 'lucide-react';
 import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';

 export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps<LeagueDetailViewData> & { children?: React.ReactNode, tabs?: any[] }) {
+  const pathname = usePathname();
+
  return (
    <Container size="lg">
      <Box paddingY={8}>
@@ -26,8 +29,43 @@ export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps
              <Text size="sm" color="text-white">{viewData.name}</Text>
            </Stack>
          </Box>
-          {children}
-          {/* ... rest of the template ... */}
+
+          {/* Tabs */}
+          {tabs && tabs.length > 0 && (
+            <Box borderBottom borderColor="zinc-800">
+              <Box display="flex" gap={8}>
+                {tabs.map((tab) => {
+                  const isActive = tab.exact 
+                    ? pathname === tab.href 
+                    : pathname.startsWith(tab.href);
+                  
+                  return (
+                    <Link key={tab.href} href={tab.href}>
+                      <Box 
+                        pb={4} 
+                        borderBottom={isActive} 
+                        borderWidth={isActive ? 2 : 0}
+                        borderColor={isActive ? "blue-500" : "transparent"}
+                      >
+                        <Text 
+                          size="sm" 
+                          weight={isActive ? "bold" : "medium"} 
+                          color={isActive ? "text-white" : "text-zinc-500"}
+                          className="transition-colors hover:text-white"
+                        >
+                          {tab.label}
+                        </Text>
+                      </Box>
+                    </Link>
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+
+          <Box>
+            {children}
+          </Box>
        </Stack>
      </Box>
    </Container>
--- a/apps/website/templates/LeagueOverviewTemplate.tsx
+++ b/apps/website/templates/LeagueOverviewTemplate.tsx
@@ -1,9 +1,11 @@
 'use client';

+import { LeagueLogo } from '@/components/leagues/LeagueLogo';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
 import { Calendar, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';

 interface LeagueOverviewTemplateProps {
@@ -12,86 +14,139 @@ interface LeagueOverviewTemplateProps {

 export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps) {
  return (
-    <Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={8}>
-      {/* Main Content */}
-      <Box responsiveColSpan={{ lg: 2 }}>
-        <Stack gap={8}>
-          <Stack gap={4}>
-            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">About the League</Text>
-            <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
-              <Text color="text-zinc-300" leading="relaxed">
-                {viewData.description || 'No description provided for this league.'}
-              </Text>
-            </Box>
-          </Stack>
-
-          <Stack gap={4}>
-            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Quick Stats</Text>
-            <Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
-              <StatCard icon={Users} label="Members" value={viewData.info.membersCount} />
-              <StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} />
-              <StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} />
-              <StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
-            </Box>
-          </Stack>
+    <Stack gap={8}>
+      {/* Header with Logo */}
+      <Box display="flex" alignItems="center" gap={6} pb={8} borderBottom borderColor="zinc-800">
+        <LeagueLogo 
+          leagueId={viewData.leagueId} 
+          src={viewData.logoUrl} 
+          alt={viewData.name} 
+          size={96} 
+          rounded="lg"
+        />
+        <Stack gap={2}>
+          <Text size="3xl" weight="bold" color="text-white">{viewData.name}</Text>
+          <Text color="text-zinc-400">{viewData.info.structure} • Created {new Date(viewData.info.createdAt).toLocaleDateString()}</Text>
        </Stack>
      </Box>

-      {/* Sidebar */}
-      <Box as="aside">
-        <Stack gap={8}>
-          <Stack gap={4}>
-            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Management</Text>
-            <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
-              <Stack gap={4}>
-                {viewData.ownerSummary && (
-                  <Box display="flex" alignItems="center" gap={3}>
-                    <Box w="10" h="10" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-zinc-500">
-                      <Users size={20} />
-                    </Box>
-                    <Stack gap={0}>
-                      <Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Owner</Text>
-                      <Text size="sm" weight="bold" color="text-white">{viewData.ownerSummary.driverName}</Text>
-                    </Stack>
-                  </Box>
-                )}
-                <Stack gap={2}>
-                  <Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Admins</Text>
-                  <Box display="flex" flexWrap="wrap" gap={2}>
-                    {viewData.adminSummaries.map(admin => (
-                      <Box key={admin.driverId} px={2} py={1} bg="zinc-800" color="text-zinc-400" border borderColor="zinc-700">
-                        <Text size="xs" weight="bold" uppercase fontSize="10px">{admin.driverName}</Text>
-                      </Box>
+      <Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={8}>
+        {/* Main Content */}
+        <Box responsiveColSpan={{ lg: 2 }}>
+          <Stack gap={8}>
+            <Stack gap={4}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">About the League</Text>
+              <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
+                <Text color="text-zinc-300" leading="relaxed">
+                  {viewData.description || 'No description provided for this league.'}
+                </Text>
+              </Box>
+            </Stack>
+
+            <Stack gap={4}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Quick Stats</Text>
+              <Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
+                <StatCard icon={Users} label="Members" value={viewData.info.membersCount} />
+                <StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} />
+                <StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} />
+                <StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
+              </Box>
+            </Stack>
+
+            {/* Roster Preview */}
+            <Stack gap={4}>
+              <Box display="flex" justifyContent="between" alignItems="center">
+                <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Roster Preview</Text>
+                <Link href={`/leagues/${viewData.leagueId}/roster`}>
+                  <Text size="xs" color="text-blue-500" weight="bold" uppercase>View All</Text>
+                </Link>
+              </Box>
+              <Box border borderColor="zinc-800" bg="zinc-900/30" overflow="hidden">
+                <table className="w-full text-left border-collapse">
+                  <tbody>
+                    {viewData.adminSummaries.concat(viewData.stewardSummaries).concat(viewData.memberSummaries).slice(0, 5).map((member) => (
+                      <tr key={member.driverId} className="border-b border-zinc-800/50">
+                        <td className="px-6 py-3">
+                          <Box display="flex" alignItems="center" gap={3}>
+                            <Box w="6" h="6" bg="zinc-800" rounded="full" />
+                            <Text size="sm" weight="bold" color="text-white">{member.driverName}</Text>
+                          </Box>
+                        </td>
+                        <td className="px-6 py-3 text-right">
+                          <Text size="xs" color="text-zinc-500" uppercase weight="bold">{member.roleBadgeText}</Text>
+                        </td>
+                      </tr>
                    ))}
-                    {viewData.adminSummaries.length === 0 && <Text size="xs" color="text-zinc-600" italic>No admins assigned</Text>}
-                  </Box>
-                </Stack>
-              </Stack>
-            </Box>
+                    {viewData.adminSummaries.length === 0 && viewData.stewardSummaries.length === 0 && viewData.memberSummaries.length === 0 && (
+                      <tr>
+                        <td className="px-6 py-8 text-center">
+                          <Text size="sm" color="text-zinc-600" italic>No members to display</Text>
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </Box>
+            </Stack>
          </Stack>
+        </Box>

-          <Stack gap={4}>
-            <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Sponsors</Text>
-            <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
-              <Stack gap={4}>
-                {viewData.sponsors.length > 0 ? (
-                  viewData.sponsors.map(sponsor => (
-                    <Box key={sponsor.id} display="flex" alignItems="center" gap={3}>
-                      <Box w="8" h="8" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-blue-500">
-                        <Trophy size={16} />
+        {/* Sidebar */}
+        <Box as="aside">
+          <Stack gap={8}>
+            <Stack gap={4}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Management</Text>
+              <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
+                <Stack gap={4}>
+                  {viewData.ownerSummary && (
+                    <Box display="flex" alignItems="center" gap={3}>
+                      <Box w="10" h="10" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-zinc-500">
+                        <Users size={20} />
                      </Box>
-                      <Text size="sm" weight="bold" color="text-zinc-300">{sponsor.name}</Text>
+                      <Stack gap={0}>
+                        <Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Owner</Text>
+                        <Text size="sm" weight="bold" color="text-white">{viewData.ownerSummary.driverName}</Text>
+                      </Stack>
                    </Box>
-                  ))
-                ) : (
-                  <Text size="xs" color="text-zinc-600" italic>No active sponsors</Text>
-                )}
-              </Stack>
-            </Box>
+                  )}
+                  <Stack gap={2}>
+                    <Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Admins</Text>
+                    <Box display="flex" flexWrap="wrap" gap={2}>
+                      {viewData.adminSummaries.map(admin => (
+                        <Box key={admin.driverId} px={2} py={1} bg="zinc-800" color="text-zinc-400" border borderColor="zinc-700">
+                          <Text size="xs" weight="bold" uppercase fontSize="10px">{admin.driverName}</Text>
+                        </Box>
+                      ))}
+                      {viewData.adminSummaries.length === 0 && <Text size="xs" color="text-zinc-600" italic>No admins assigned</Text>}
+                    </Box>
+                  </Stack>
+                </Stack>
+              </Box>
+            </Stack>
+
+            <Stack gap={4}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Sponsors</Text>
+              <Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
+                <Stack gap={4}>
+                  {viewData.sponsors.length > 0 ? (
+                    viewData.sponsors.map(sponsor => (
+                      <Box key={sponsor.id} display="flex" alignItems="center" gap={3}>
+                        <Box w="8" h="8" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-blue-500">
+                          <Trophy size={16} />
+                        </Box>
+                        <Text size="sm" weight="bold" color="text-zinc-300">{sponsor.name}</Text>
+                      </Box>
+                    ))
+                  ) : (
+                    <Text size="xs" color="text-zinc-600" italic>No active sponsors</Text>
+                  )}
+                </Stack>
+              </Box>
+            </Stack>
          </Stack>
-        </Stack>
+        </Box>
      </Box>
-    </Box>
+    </Stack>
  );
 }

@@ -107,4 +162,4 @@ function StatCard({ icon: Icon, label, value }: { icon: LucideIcon, label: strin
      </Stack>
    </Box>
  );
-}
+}
--- a/apps/website/templates/LeagueScheduleTemplate.tsx
+++ b/apps/website/templates/LeagueScheduleTemplate.tsx
@@ -16,7 +16,8 @@ export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps
    trackName: race.track || 'TBA',
    date: race.scheduledAt,
    time: new Date(race.scheduledAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
-    status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming'
+    status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming',
+    strengthOfField: race.strengthOfField
  }));

  return (
--- a/apps/website/templates/LeagueStandingsTemplate.tsx
+++ b/apps/website/templates/LeagueStandingsTemplate.tsx
@@ -32,8 +32,10 @@ export function LeagueStandingsTemplate({
      position: entry.position,
      driverName: driver?.name || 'Unknown Driver',
      points: entry.totalPoints,
-      wins: 0,
-      podiums: 0,
+      wins: 0, // Placeholder
+      podiums: 0, // Placeholder
+      races: entry.racesStarted,
+      avgFinish: entry.avgFinish,
      gap: entry.position === 1 ? '—' : `-${viewData.standings[0].totalPoints - entry.totalPoints}`
    };
  });
--- a/plans/league-detail-restoration.md
+++ b/plans/league-detail-restoration.md
@@ -0,0 +1,74 @@
+# Detailed Restoration Plan for League Detail Pages
+
+## Executive Summary
+Restore `/leagues/:id` to full functionality per [`ALPHA_PLAN.md`](docs/ALPHA_PLAN.md:123):
+- Logo display.
+- Team members (roster).
+- Races (schedule).
+- SoF (avg Strength of Field).
+- All tabs/subpages with data.
+
+**Timeline**: Surgical fixes (data queries, templates, cleanup). Production-ready: Data from bootstrap adapters, no mocks.
+
+## Current State (From Tools)
+- Routes: Tabs via layout.tsx (Overview, Schedule, Standings, Rulebook + admin).
+- page.tsx: [`LeagueDetailPageQuery`](apps/website/lib/page-queries/LeagueDetailPageQuery.ts:1) → LeagueService → partial DTO → hardcoded empty ViewData.
+- Templates: Overview shows stats (0s), sidebar empty. Detail has breadcrumb/tabs.
+- Subpages: schedule/standings exist (empty fallbacks), no roster/page.tsx.
+
+## Target State
+```
+Data: Full relations from seeded adapters.
+UI: Logo header, roster preview, races summary, SoF stat, populated tabs.
+```
+
+## Mermaid Flow
+```mermaid
+graph LR
+  PQ[LeagueDetailPageQuery]
+  LS[LeagueService.getLeagueDetailData<br/>FIX: +includes(relations)]
+  VB[ViewDataBuilder<br/>FIX: real inputs, avgSOF]
+  LT[LeagueDetailTemplate<br/>Tabs active]
+  OV[OverviewTemplate<br/>Logo/stats/roster]
+  SP[Sub Queries/Templates]
+  
+  Bootstrap[Adapters/Bootstrap Seed] -.-> LS
+```
+
+## Step-by-Step Execution (Todo)
+1. **Data (1-3)**:
+   - Read/extend LeagueService: Repo.findById({include: ['memberships', 'races', 'sponsors', 'logoUrl']}).
+   - Bootstrap: Seed demo-league w/ logo/members/races.sof.
+   - VB: Pass query data, compute SOF avg.
+
+2. **UI (4-8)**:
+   - Logo: Add to DTO/template header (img fallback icon).
+   - Roster preview in overview (members.slice(0,5)).
+   - Create roster/page.tsx (members table).
+   - schedule/page.tsx: Races list (date/track/sof/status).
+   - standings/page.tsx: Standings + per-race SOF.
+
+3. **Tabs (9)**:
+   - DetailTemplate: usePathname for active tab.
+
+4. **Cleanup (10-11)**:
+   - search_files unused exports.
+   - Delete.
+
+5. **Verify (12-13)**:
+   - eslint/tsc/test.
+   - Manual demo-league test.
+
+## Files to Edit (Clickable)
+[`LeagueService`](lib/services/leagues/LeagueService.ts)
+[`LeagueDetailPageQuery`](lib/page-queries/LeagueDetailPageQuery.ts)
+[`LeagueDetailViewDataBuilder`](lib/builders/view-data/LeagueDetailViewDataBuilder.ts)
+[`LeagueOverviewTemplate`](templates/LeagueOverviewTemplate.tsx)
+[`roster/page.tsx`](app/leagues/[id]/roster/page.tsx) (new)
+
+## Success Criteria
+- Demo league: Logo shows, members>0, races list, SOF>0, tabs data.
+- No empties/hardcodes.
+- Tests pass.
+
+Review/approve before code.