website refactor

apps/website/templates/AdminDashboardTemplate.tsx

@@ -0,0 +1,136 @@
+import Card from '@/components/ui/Card';
+import { 
+  Users, 
+  Shield, 
+  Activity, 
+  Clock, 
+  AlertTriangle,
+  RefreshCw
+} from 'lucide-react';
+import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
+
+interface AdminDashboardTemplateProps {
+  viewData: AdminDashboardViewData;
+  onRefresh: () => void;
+  isLoading: boolean;
+}
+
+/**
+ * AdminDashboardTemplate
+ * 
+ * Pure template for admin dashboard.
+ * Accepts ViewData only, no business logic.
+ */
+export function AdminDashboardTemplate({ 
+  viewData, 
+  onRefresh,
+  isLoading 
+}: AdminDashboardTemplateProps) {
+  // Temporary UI fields (not yet provided by API/ViewModel)
+  const adminCount = viewData.stats.systemAdmins;
+  const systemHealth = 'Healthy';
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Admin Dashboard</h1>
+          <p className="text-gray-400 mt-1">System overview and statistics</p>
+        </div>
+        <button 
+          onClick={onRefresh} 
+          disabled={isLoading}
+          className="px-4 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:bg-iron-gray/80 transition-colors flex items-center gap-2 disabled:opacity-50"
+        >
+          <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card className="bg-gradient-to-br from-blue-900/20 to-blue-700/10">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-400 mb-1">Total Users</div>
+              <div className="text-3xl font-bold text-white">{viewData.stats.totalUsers}</div>
+            </div>
+            <Users className="w-8 h-8 text-blue-400" />
+          </div>
+        </Card>
+
+        <Card className="bg-gradient-to-br from-purple-900/20 to-purple-700/10">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-400 mb-1">Admins</div>
+              <div className="text-3xl font-bold text-white">{adminCount}</div>
+            </div>
+            <Shield className="w-8 h-8 text-purple-400" />
+          </div>
+        </Card>
+
+        <Card className="bg-gradient-to-br from-green-900/20 to-green-700/10">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-400 mb-1">Active Users</div>
+              <div className="text-3xl font-bold text-white">{viewData.stats.activeUsers}</div>
+            </div>
+            <Activity className="w-8 h-8 text-green-400" />
+          </div>
+        </Card>
+
+        <Card className="bg-gradient-to-br from-orange-900/20 to-orange-700/10">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-400 mb-1">Recent Logins</div>
+              <div className="text-3xl font-bold text-white">{viewData.stats.recentLogins}</div>
+            </div>
+            <Clock className="w-8 h-8 text-orange-400" />
+          </div>
+        </Card>
+      </div>
+
+      {/* System Status */}
+      <Card>
+        <h3 className="text-lg font-semibold text-white mb-4">System Status</h3>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-400">System Health</span>
+            <span className="px-2 py-1 text-xs rounded-full bg-performance-green/20 text-performance-green">
+              {systemHealth}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-400">Suspended Users</span>
+            <span className="text-white font-medium">{viewData.stats.suspendedUsers}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-400">Deleted Users</span>
+            <span className="text-white font-medium">{viewData.stats.deletedUsers}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-400">New Users Today</span>
+            <span className="text-white font-medium">{viewData.stats.newUsersToday}</span>
+          </div>
+        </div>
+      </Card>
+
+      {/* Quick Actions */}
+      <Card>
+        <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <a href="/admin/users" className="px-4 py-3 bg-primary-blue/20 border border-primary-blue/30 text-primary-blue rounded-lg hover:bg-primary-blue/30 transition-colors text-sm font-medium text-center">
+            View All Users
+          </a>
+          <a href="/admin" className="px-4 py-3 bg-purple-500/20 border border-purple-500/30 text-purple-300 rounded-lg hover:bg-purple-500/30 transition-colors text-sm font-medium text-center">
+            Manage Admins
+          </a>
+          <a href="/admin" className="px-4 py-3 bg-orange-500/20 border border-orange-500/30 text-orange-300 rounded-lg hover:bg-orange-500/30 transition-colors text-sm font-medium text-center">
+            View Audit Log
+          </a>
+        </div>
+      </Card>
+    </div>
+  );
+}

apps/website/templates/AdminUsersTemplate.tsx

@@ -0,0 +1,335 @@
+import Card from '@/components/ui/Card';
+import StatusBadge from '@/components/ui/StatusBadge';
+import { 
+  Search, 
+  Filter, 
+  RefreshCw, 
+  Users,
+  Shield,
+  Trash2,
+  AlertTriangle
+} from 'lucide-react';
+import { AdminUsersViewData } from './AdminUsersViewData';
+
+interface AdminUsersTemplateProps {
+  viewData: AdminUsersViewData;
+  onRefresh: () => void;
+  onSearch: (search: string) => void;
+  onFilterRole: (role: string) => void;
+  onFilterStatus: (status: string) => void;
+  onClearFilters: () => void;
+  onUpdateStatus: (userId: string, status: string) => void;
+  onDeleteUser: (userId: string) => void;
+  search: string;
+  roleFilter: string;
+  statusFilter: string;
+  loading: boolean;
+  error: string | null;
+  deletingUser: string | null;
+}
+
+/**
+ * AdminUsersTemplate
+ * 
+ * Pure template for admin users page.
+ * Accepts ViewData only, no business logic.
+ */
+export function AdminUsersTemplate({
+  viewData,
+  onRefresh,
+  onSearch,
+  onFilterRole,
+  onFilterStatus,
+  onClearFilters,
+  onUpdateStatus,
+  onDeleteUser,
+  search,
+  roleFilter,
+  statusFilter,
+  loading,
+  error,
+  deletingUser
+}: AdminUsersTemplateProps) {
+  const toStatusBadgeProps = (
+    status: string,
+  ): { status: 'success' | 'warning' | 'error' | 'neutral'; label: string } => {
+    switch (status) {
+      case 'active':
+        return { status: 'success', label: 'Active' };
+      case 'suspended':
+        return { status: 'warning', label: 'Suspended' };
+      case 'deleted':
+        return { status: 'error', label: 'Deleted' };
+      default:
+        return { status: 'neutral', label: status };
+    }
+  };
+
+  const getRoleBadgeClass = (role: string) => {
+    switch (role) {
+      case 'owner':
+        return 'bg-purple-500/20 text-purple-300 border border-purple-500/30';
+      case 'admin':
+        return 'bg-blue-500/20 text-blue-300 border border-blue-500/30';
+      default:
+        return 'bg-gray-500/20 text-gray-300 border border-gray-500/30';
+    }
+  };
+
+  const getRoleBadgeLabel = (role: string) => {
+    switch (role) {
+      case 'owner':
+        return 'Owner';
+      case 'admin':
+        return 'Admin';
+      case 'user':
+        return 'User';
+      default:
+        return role;
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">User Management</h1>
+          <p className="text-gray-400 mt-1">Manage and monitor all system users</p>
+        </div>
+        <button 
+          onClick={onRefresh} 
+          disabled={loading}
+          className="px-4 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:bg-iron-gray/80 transition-colors flex items-center gap-2 disabled:opacity-50"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Error Banner */}
+      {error && (
+        <div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg flex items-start gap-3">
+          <AlertTriangle className="w-5 h-5 mt-0.5 flex-shrink-0" />
+          <div className="flex-1">
+            <div className="font-medium">Error</div>
+            <div className="text-sm opacity-90">{error}</div>
+          </div>
+          <button 
+            onClick={() => {}}
+            className="text-racing-red hover:opacity-70"
+          >
+            ×
+          </button>
+        </div>
+      )}
+
+      {/* Filters Card */}
+      <Card>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Filter className="w-4 h-4 text-gray-400" />
+              <span className="font-medium text-white">Filters</span>
+            </div>
+            {(search || roleFilter || statusFilter) && (
+              <button
+                onClick={onClearFilters}
+                className="text-xs text-primary-blue hover:text-blue-400"
+              >
+                Clear all
+              </button>
+            )}
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search by email or name..."
+                value={search}
+                onChange={(e) => onSearch(e.target.value)}
+                className="w-full pl-9 pr-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue transition-colors"
+              />
+            </div>
+            
+            <select
+              value={roleFilter}
+              onChange={(e) => onFilterRole(e.target.value)}
+              className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue transition-colors"
+            >
+              <option value="">All Roles</option>
+              <option value="owner">Owner</option>
+              <option value="admin">Admin</option>
+              <option value="user">User</option>
+            </select>
+            
+            <select
+              value={statusFilter}
+              onChange={(e) => onFilterStatus(e.target.value)}
+              className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue transition-colors"
+            >
+              <option value="">All Status</option>
+              <option value="active">Active</option>
+              <option value="suspended">Suspended</option>
+              <option value="deleted">Deleted</option>
+            </select>
+          </div>
+        </div>
+      </Card>
+
+      {/* Users Table */}
+      <Card>
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-12 space-y-3">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-blue"></div>
+            <div className="text-gray-400">Loading users...</div>
+          </div>
+        ) : !viewData.users || viewData.users.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 space-y-3">
+            <Users className="w-12 h-12 text-gray-600" />
+            <div className="text-gray-400">No users found</div>
+            <button
+              onClick={onClearFilters}
+              className="text-primary-blue hover:text-blue-400 text-sm"
+            >
+              Clear filters
+            </button>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-charcoal-outline">
+                  <th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">User</th>
+                  <th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Email</th>
+                  <th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Roles</th>
+                  <th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Status</th>
+                  <th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Last Login</th>
+                  <th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {viewData.users.map((user, index: number) => (
+                  <tr 
+                    key={user.id} 
+                    className={`border-b border-charcoal-outline/50 hover:bg-iron-gray/30 transition-colors ${index % 2 === 0 ? 'bg-transparent' : 'bg-iron-gray/10'}`}
+                  >
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-full bg-primary-blue/20 flex items-center justify-center">
+                          <Shield className="w-4 h-4 text-primary-blue" />
+                        </div>
+                        <div>
+                          <div className="font-medium text-white">{user.displayName}</div>
+                          <div className="text-xs text-gray-500">ID: {user.id}</div>
+                          {user.primaryDriverId && (
+                            <div className="text-xs text-gray-500">Driver: {user.primaryDriverId}</div>
+                          )}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="py-3 px-4">
+                      <div className="text-sm text-gray-300">{user.email}</div>
+                    </td>
+                    <td className="py-3 px-4">
+                      <div className="flex flex-wrap gap-1">
+                        {user.roles.map((role: string, idx: number) => (
+                          <span
+                            key={idx}
+                            className={`px-2 py-1 text-xs rounded-full font-medium ${getRoleBadgeClass(role)}`}
+                          >
+                            {getRoleBadgeLabel(role)}
+                          </span>
+                        ))}
+                      </div>
+                    </td>
+                    <td className="py-3 px-4">
+                      {(() => {
+                        const badge = toStatusBadgeProps(user.status);
+                        return <StatusBadge status={badge.status} label={badge.label} />;
+                      })()}
+                    </td>
+                    <td className="py-3 px-4">
+                      <div className="text-sm text-gray-400">
+                        {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString() : 'Never'}
+                      </div>
+                    </td>
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-2">
+                        {user.status === 'active' && (
+                          <button
+                            onClick={() => onUpdateStatus(user.id, 'suspended')}
+                            className="px-3 py-1 text-xs rounded bg-yellow-500/20 text-yellow-300 hover:bg-yellow-500/30 transition-colors"
+                          >
+                            Suspend
+                          </button>
+                        )}
+                        {user.status === 'suspended' && (
+                          <button
+                            onClick={() => onUpdateStatus(user.id, 'active')}
+                            className="px-3 py-1 text-xs rounded bg-performance-green/20 text-performance-green hover:bg-performance-green/30 transition-colors"
+                          >
+                            Activate
+                          </button>
+                        )}
+                        {user.status !== 'deleted' && (
+                          <button
+                            onClick={() => onDeleteUser(user.id)}
+                            disabled={deletingUser === user.id}
+                            className="px-3 py-1 text-xs rounded bg-racing-red/20 text-racing-red hover:bg-racing-red/30 transition-colors flex items-center gap-1"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                            {deletingUser === user.id ? 'Deleting...' : 'Delete'}
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Card>
+
+      {/* Stats Summary */}
+      {viewData.users.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card className="bg-gradient-to-br from-blue-900/20 to-blue-700/10">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="text-sm text-gray-400 mb-1">Total Users</div>
+                <div className="text-2xl font-bold text-white">{viewData.total}</div>
+              </div>
+              <Users className="w-6 h-6 text-blue-400" />
+            </div>
+          </Card>
+          <Card className="bg-gradient-to-br from-green-900/20 to-green-700/10">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="text-sm text-gray-400 mb-1">Active</div>
+                <div className="text-2xl font-bold text-white">
+                  {viewData.users.filter(u => u.status === 'active').length}
+                </div>
+              </div>
+              <div className="w-6 h-6 text-green-400">✓</div>
+            </div>
+          </Card>
+          <Card className="bg-gradient-to-br from-purple-900/20 to-purple-700/10">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="text-sm text-gray-400 mb-1">Admins</div>
+                <div className="text-2xl font-bold text-white">
+                  {viewData.users.filter(u => u.isSystemAdmin).length}
+                </div>
+              </div>
+              <Shield className="w-6 h-6 text-purple-400" />
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/templates/AdminUsersViewData.ts

@@ -0,0 +1,24 @@
+/**
+ * AdminUsersViewData
+ * 
+ * ViewData for AdminUsersTemplate.
+ * Template-ready data structure with only primitives.
+ */
+export interface AdminUsersViewData {
+  users: Array<{
+    id: string;
+    email: string;
+    displayName: string;
+    roles: string[];
+    status: string;
+    isSystemAdmin: boolean;
+    createdAt: string;
+    updatedAt: string;
+    lastLoginAt?: string;
+    primaryDriverId?: string;
+  }>;
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}

apps/website/templates/DriverRankingsTemplate.tsx

@@ -1,113 +1,27 @@
 'use client';
 
 import React from 'react';
-import { Trophy, Medal, Search, ArrowLeft } from 'lucide-react';
+import { Trophy, Search, ArrowLeft, Medal } from 'lucide-react';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
-import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
 import DriverRankingsFilter from '@/components/DriverRankingsFilter';
-import DriverTopThreePodium from '@/components/DriverTopThreePodium';
+import { DriverTopThreePodium } from '@/components/DriverTopThreePodium';
 import Image from 'next/image';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
-
-interface DriverRankingsTemplateProps {
-  drivers: DriverLeaderboardItemViewModel[];
-  searchQuery: string;
-  selectedSkill: 'all' | SkillLevel;
-  sortBy: SortBy;
-  showFilters: boolean;
-  onSearchChange: (query: string) => void;
-  onSkillChange: (skill: 'all' | SkillLevel) => void;
-  onSortChange: (sort: SortBy) => void;
-  onToggleFilters: () => void;
-  onDriverClick: (id: string) => void;
-  onBackToLeaderboards: () => void;
-}
-
-// ============================================================================
-// HELPER FUNCTIONS
-// ============================================================================
-
-const getMedalColor = (position: number) => {
-  switch (position) {
-    case 1: return 'text-yellow-400';
-    case 2: return 'text-gray-300';
-    case 3: return 'text-amber-600';
-    default: return 'text-gray-500';
-  }
-};
-
-const getMedalBg = (position: number) => {
-  switch (position) {
-    case 1: return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
-    case 2: return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
-    case 3: return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
-    default: return 'bg-iron-gray/50 border-charcoal-outline';
-  }
-};
+import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
 
 // ============================================================================
 // MAIN TEMPLATE COMPONENT
 // ============================================================================
 
-export default function DriverRankingsTemplate({
-  drivers,
-  searchQuery,
-  selectedSkill,
-  sortBy,
-  showFilters,
-  onSearchChange,
-  onSkillChange,
-  onSortChange,
-  onToggleFilters,
-  onDriverClick,
-  onBackToLeaderboards,
-}: DriverRankingsTemplateProps) {
-  // Filter drivers
-  const filteredDrivers = drivers.filter((driver) => {
-    const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesSkill = selectedSkill === 'all' || driver.skillLevel === selectedSkill;
-    return matchesSearch && matchesSkill;
-  });
-
-  // Sort drivers
-  const sortedDrivers = [...filteredDrivers].sort((a, b) => {
-    const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
-    const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
-
-    switch (sortBy) {
-      case 'rank':
-        return rankA - rankB || b.rating - a.rating || a.name.localeCompare(b.name);
-      case 'rating':
-        return b.rating - a.rating;
-      case 'wins':
-        return b.wins - a.wins;
-      case 'podiums':
-        return b.podiums - a.podiums;
-      case 'winRate': {
-        const aRate = a.racesCompleted > 0 ? a.wins / a.racesCompleted : 0;
-        const bRate = b.racesCompleted > 0 ? b.wins / b.racesCompleted : 0;
-        return bRate - aRate;
-      }
-      default:
-        return 0;
-    }
-  });
-
+export function DriverRankingsTemplate(props: { viewData: DriverRankingsViewData }): React.ReactElement {
+  const { viewData } = props;
   return (
     <div className="max-w-7xl mx-auto px-4 pb-12">
       {/* Header */}
       <div className="mb-8">
         <Button
           variant="secondary"
-          onClick={onBackToLeaderboards}
+          onClick={viewData.onBackToLeaderboards}
           className="flex items-center gap-2 mb-6"
         >
           <ArrowLeft className="w-4 h-4" />
@@ -128,18 +42,20 @@ export default function DriverRankingsTemplate({
       </div>
 
       {/* Top 3 Podium */}
-      {!searchQuery && sortBy === 'rank' && <DriverTopThreePodium drivers={sortedDrivers} onDriverClick={onDriverClick} />}
+      {viewData.podium.length > 0 && (
+        <DriverTopThreePodium podium={viewData.podium} onDriverClick={viewData.onDriverClick} />
+      )}
 
       {/* Filters */}
       <DriverRankingsFilter
-        searchQuery={searchQuery}
-        onSearchChange={onSearchChange}
-        selectedSkill={selectedSkill}
-        onSkillChange={onSkillChange}
-        sortBy={sortBy}
-        onSortChange={onSortChange}
-        showFilters={showFilters}
-        onToggleFilters={onToggleFilters}
+        searchQuery={viewData.searchQuery}
+        onSearchChange={viewData.onSearchChange}
+        selectedSkill={viewData.selectedSkill}
+        onSkillChange={viewData.onSkillChange}
+        sortBy={viewData.sortBy}
+        onSortChange={viewData.onSortChange}
+        showFilters={viewData.showFilters}
+        onToggleFilters={viewData.onToggleFilters}
       />
 
       {/* Leaderboard Table */}
@@ -157,93 +73,85 @@ export default function DriverRankingsTemplate({
 
         {/* Table Body */}
         <div className="divide-y divide-charcoal-outline/50">
-          {sortedDrivers.map((driver, index) => {
-            const winRate = driver.racesCompleted > 0 ? ((driver.wins / driver.racesCompleted) * 100).toFixed(1) : '0.0';
-            const position = index + 1;
+          {viewData.drivers.map((driver) => (
+            <button
+              key={driver.id}
+              type="button"
+              onClick={() => viewData.onDriverClick(driver.id)}
+              className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+            >
+              {/* Position */}
+              <div className="col-span-1 flex items-center justify-center">
+                <div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${driver.medalBg} ${driver.medalColor}`}>
+                  {driver.rank <= 3 ? <Medal className="w-4 h-4" /> : driver.rank}
+                </div>
+              </div>
 
-            return (
-              <button
-                key={driver.id}
-                type="button"
-                onClick={() => onDriverClick(driver.id)}
-                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
-              >
-                {/* Position */}
-                <div className="col-span-1 flex items-center justify-center">
-                  <div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
-                    {position <= 3 ? <Medal className="w-4 h-4" /> : position}
+              {/* Driver Info */}
+              <div className="col-span-5 lg:col-span-4 flex items-center gap-3">
+                <div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
+                  <Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
+                </div>
+                <div className="min-w-0">
+                  <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
+                    {driver.name}
+                  </p>
+                  <div className="flex items-center gap-2 text-xs text-gray-500">
+                    <span className="flex items-center gap-1">
+                      {driver.nationality}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      {driver.skillLevel}
+                    </span>
                   </div>
                 </div>
+              </div>
 
-                {/* Driver Info */}
-                <div className="col-span-5 lg:col-span-4 flex items-center gap-3">
-                  <div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
-                    <Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
-                  </div>
-                  <div className="min-w-0">
-                    <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
-                      {driver.name}
-                    </p>
-                    <div className="flex items-center gap-2 text-xs text-gray-500">
-                      <span className="flex items-center gap-1">
-                        {driver.nationality}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        {driver.skillLevel}
-                      </span>
-                    </div>
-                  </div>
-                </div>
+              {/* Races */}
+              <div className="col-span-2 items-center justify-center hidden md:flex">
+                <span className="text-gray-400">{driver.racesCompleted}</span>
+              </div>
 
-                {/* Races */}
-                <div className="col-span-2 items-center justify-center hidden md:flex">
-                  <span className="text-gray-400">{driver.racesCompleted}</span>
-                </div>
+              {/* Rating */}
+              <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                <span className={`font-mono font-semibold ${viewData.sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
+                  {driver.rating.toLocaleString()}
+                </span>
+              </div>
 
-                {/* Rating */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
-                    {driver.rating.toLocaleString()}
-                  </span>
-                </div>
+              {/* Wins */}
+              <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                <span className={`font-mono font-semibold ${viewData.sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
+                  {driver.wins}
+                </span>
+              </div>
 
-                {/* Wins */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
-                    {driver.wins}
-                  </span>
-                </div>
+              {/* Podiums */}
+              <div className="col-span-1 items-center justify-center hidden lg:flex">
+                <span className={`font-mono font-semibold ${viewData.sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
+                  {driver.podiums}
+                </span>
+              </div>
 
-                {/* Podiums */}
-                <div className="col-span-1 items-center justify-center hidden lg:flex">
-                  <span className={`font-mono font-semibold ${sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
-                    {driver.podiums}
-                  </span>
-                </div>
-
-                {/* Win Rate */}
-                <div className="col-span-2 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
-                    {winRate}%
-                  </span>
-                </div>
-              </button>
-            );
-          })}
+              {/* Win Rate */}
+              <div className="col-span-2 flex items-center justify-center">
+                <span className={`font-mono font-semibold ${viewData.sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
+                  {driver.winRate}%
+                </span>
+              </div>
+            </button>
+          ))}
         </div>
 
         {/* Empty State */}
-        {sortedDrivers.length === 0 && (
+        {viewData.drivers.length === 0 && (
           <div className="py-16 text-center">
             <Search className="w-12 h-12 text-gray-600 mx-auto mb-4" />
             <p className="text-gray-400 mb-2">No drivers found</p>
             <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
             <Button
               variant="secondary"
-              onClick={() => {
-                onSearchChange('');
-                onSkillChange('all');
-              }}
+              onClick={viewData.onClearFilters}
               className="mt-4"
             >
               Clear Filters

apps/website/templates/LeagueDetailTemplate.tsx

@@ -1,19 +1,14 @@
 'use client';
 
-import DriverIdentity from '@/components/drivers/DriverIdentity';
+import { DriverIdentity } from '@/components/drivers/DriverIdentity';
 import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
 import LeagueActivityFeed from '@/components/leagues/LeagueActivityFeed';
-import SponsorInsightsCard, {
-  MetricBuilders,
-  SlotTemplates,
-  type SponsorMetric,
-} from '@/components/sponsors/SponsorInsightsCard';
+import SponsorInsightsCard from '@/components/sponsors/SponsorInsightsCard';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
-import { LeagueRoleDisplay } from '@/lib/display-objects/LeagueRoleDisplay';
-import type { LeagueDetailPageViewModel, DriverSummary } from '@/lib/view-models/LeagueDetailPageViewModel';
-import type { RaceViewModel } from '@/lib/view-models/RaceViewModel';
+import type { DriverSummaryData, LeagueDetailViewData, LeagueInfoData, LiveRaceData, SponsorInfo } from '@/lib/view-data/LeagueDetailViewData';
 import { Calendar, ExternalLink, Star, Trophy, Users } from 'lucide-react';
+import Image from 'next/image';
 import { ReactNode } from 'react';
 
 // ============================================================================
@@ -21,45 +16,35 @@ import { ReactNode } from 'react';
 // ============================================================================
 
 interface LeagueDetailTemplateProps {
-  viewModel: LeagueDetailPageViewModel;
+  viewData: LeagueDetailViewData;
   leagueId: string;
   isSponsor: boolean;
   membership: { role: string } | null;
-  currentDriverId: string | null;
   onMembershipChange: () => void;
   onEndRaceModalOpen: (raceId: string) => void;
   onLiveRaceClick: (raceId: string) => void;
-  onBackToLeagues: () => void;
   children?: ReactNode;
 }
 
 interface LiveRaceCardProps {
-  races: RaceViewModel[];
+  races: LiveRaceData[];
   membership: { role: string } | null;
   onLiveRaceClick: (raceId: string) => void;
   onEndRaceModalOpen: (raceId: string) => void;
 }
 
 interface LeagueInfoCardProps {
-  viewModel: LeagueDetailPageViewModel;
+  info: LeagueInfoData;
 }
 
 interface SponsorsSectionProps {
-  sponsors: Array<{
-    id: string;
-    name: string;
-    tier: 'main' | 'secondary';
-    logoUrl?: string;
-    tagline?: string;
-    websiteUrl?: string;
-  }>;
+  sponsors: SponsorInfo[];
 }
 
 interface ManagementSectionProps {
-  ownerSummary?: DriverSummary | null;
-  adminSummaries: DriverSummary[];
-  stewardSummaries: DriverSummary[];
-  leagueId: string;
+  ownerSummary: DriverSummaryData | null;
+  adminSummaries: DriverSummaryData[];
+  stewardSummaries: DriverSummaryData[];
 }
 
 // ============================================================================
@@ -140,7 +125,7 @@ function LiveRaceCard({ races, membership, onLiveRaceClick, onEndRaceModalOpen }
 // LEAGUE INFO CARD COMPONENT
 // ============================================================================
 
-function LeagueInfoCard({ viewModel }: LeagueInfoCardProps) {
+function LeagueInfoCard({ info }: LeagueInfoCardProps) {
   return (
     <Card>
       <h3 className="text-lg font-semibold text-white mb-4">About</h3>
@@ -148,15 +133,15 @@ function LeagueInfoCard({ viewModel }: LeagueInfoCardProps) {
       {/* Stats Grid */}
       <div className="grid grid-cols-3 gap-3 mb-4">
         <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
-          <div className="text-xl font-bold text-white">{viewModel.memberships.length}</div>
+          <div className="text-xl font-bold text-white">{info.membersCount}</div>
           <div className="text-xs text-gray-500">Members</div>
         </div>
         <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
-          <div className="text-xl font-bold text-white">{viewModel.completedRacesCount}</div>
+          <div className="text-xl font-bold text-white">{info.racesCount}</div>
           <div className="text-xs text-gray-500">Races</div>
         </div>
         <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
-          <div className="text-xl font-bold text-warning-amber">{viewModel.averageSOF ?? '—'}</div>
+          <div className="text-xl font-bold text-warning-amber">{info.avgSOF ?? '—'}</div>
           <div className="text-xs text-gray-500">Avg SOF</div>
         </div>
       </div>
@@ -165,16 +150,16 @@ function LeagueInfoCard({ viewModel }: LeagueInfoCardProps) {
       <div className="space-y-2 text-sm">
         <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
           <span className="text-gray-500">Structure</span>
-          <span className="text-white">Solo • {viewModel.settings.maxDrivers ?? 32} max</span>
+          <span className="text-white">{info.structure}</span>
         </div>
         <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
           <span className="text-gray-500">Scoring</span>
-          <span className="text-white">{viewModel.scoringConfig?.scoringPresetName ?? 'Standard'}</span>
+          <span className="text-white">{info.scoring}</span>
         </div>
         <div className="flex items-center justify-between py-1.5">
           <span className="text-gray-500">Created</span>
           <span className="text-white">
-            {new Date(viewModel.createdAt).toLocaleDateString('en-US', {
+            {new Date(info.createdAt).toLocaleDateString('en-US', {
               month: 'short',
               year: 'numeric'
             })}
@@ -182,12 +167,12 @@ function LeagueInfoCard({ viewModel }: LeagueInfoCardProps) {
         </div>
       </div>
 
-      {viewModel.socialLinks && (
+      {(info.discordUrl || info.youtubeUrl || info.websiteUrl) && (
         <div className="mt-4 pt-4 border-t border-charcoal-outline">
           <div className="flex flex-wrap gap-2">
-            {viewModel.socialLinks.discordUrl && (
+            {info.discordUrl && (
               <a
-                href={viewModel.socialLinks.discordUrl}
+                href={info.discordUrl}
                 target="_blank"
                 rel="noreferrer"
                 className="inline-flex items-center gap-1 rounded-full border border-primary-blue/40 bg-primary-blue/10 px-2 py-1 text-xs text-primary-blue hover:bg-primary-blue/20 transition-colors"
@@ -195,9 +180,9 @@ function LeagueInfoCard({ viewModel }: LeagueInfoCardProps) {
                 Discord
               </a>
             )}
-            {viewModel.socialLinks.youtubeUrl && (
+            {info.youtubeUrl && (
               <a
-                href={viewModel.socialLinks.youtubeUrl}
+                href={info.youtubeUrl}
                 target="_blank"
                 rel="noreferrer"
                 className="inline-flex items-center gap-1 rounded-full border border-red-500/40 bg-red-500/10 px-2 py-1 text-xs text-red-400 hover:bg-red-500/20 transition-colors"
@@ -205,9 +190,9 @@ function LeagueInfoCard({ viewModel }: LeagueInfoCardProps) {
                 YouTube
               </a>
             )}
-            {viewModel.socialLinks.websiteUrl && (
+            {info.websiteUrl && (
               <a
-                href={viewModel.socialLinks.websiteUrl}
+                href={info.websiteUrl}
                 target="_blank"
                 rel="noreferrer"
                 className="inline-flex items-center gap-1 rounded-full border border-charcoal-outline bg-iron-gray/70 px-2 py-1 text-xs text-gray-100 hover:bg-iron-gray transition-colors"
@@ -244,9 +229,11 @@ function SponsorsSection({ sponsors }: SponsorsSectionProps) {
             <div className="flex items-center gap-3">
               {sponsor.logoUrl ? (
                 <div className="w-12 h-12 rounded-lg bg-white flex items-center justify-center overflow-hidden">
-                  <img
+                  <Image
                     src={sponsor.logoUrl}
                     alt={sponsor.name}
+                    width={40}
+                    height={40}
                     className="w-10 h-10 object-contain"
                   />
                 </div>
@@ -291,9 +278,11 @@ function SponsorsSection({ sponsors }: SponsorsSectionProps) {
                 <div className="flex items-center gap-2">
                   {sponsor.logoUrl ? (
                     <div className="w-8 h-8 rounded bg-white flex items-center justify-center overflow-hidden flex-shrink-0">
-                      <img
+                      <Image
                         src={sponsor.logoUrl}
                         alt={sponsor.name}
+                        width={24}
+                        height={24}
                         className="w-6 h-6 object-contain"
                       />
                     </div>
@@ -329,82 +318,78 @@ function SponsorsSection({ sponsors }: SponsorsSectionProps) {
 // MANAGEMENT SECTION COMPONENT
 // ============================================================================
 
-function ManagementSection({ ownerSummary, adminSummaries, stewardSummaries, leagueId }: ManagementSectionProps) {
+function ManagementSection({ ownerSummary, adminSummaries, stewardSummaries }: ManagementSectionProps) {
   if (!ownerSummary && adminSummaries.length === 0 && stewardSummaries.length === 0) return null;
 
   return (
     <Card>
       <h3 className="text-lg font-semibold text-white mb-4">Management</h3>
       <div className="space-y-2">
-        {ownerSummary && (() => {
-          const summary = ownerSummary;
-          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('owner');
-          const meta = summary.rating !== null
-            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
-            : null;
-
-          return (
-            <div className="flex items-center gap-2">
-              <div className="flex-1">
-                <DriverIdentity
-                  driver={summary.driver}
-                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
-                  meta={meta}
-                  size="sm"
-                />
-              </div>
-              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
-                {roleDisplay.text}
-              </span>
+        {ownerSummary && (
+          <div className="flex items-center gap-2">
+            <div className="flex-1">
+              <DriverIdentity
+                driver={{
+                  id: ownerSummary.driverId,
+                  name: ownerSummary.driverName,
+                  avatarUrl: ownerSummary.avatarUrl,
+                }}
+                href={ownerSummary.profileUrl}
+                meta={ownerSummary.rating !== null
+                  ? `Rating ${ownerSummary.rating}${ownerSummary.rank ? ` • Rank ${ownerSummary.rank}` : ''}`
+                  : undefined}
+                size="sm"
+              />
             </div>
-          );
-        })()}
+            <span className={`px-2 py-1 text-xs font-medium rounded border ${ownerSummary.roleBadgeClasses}`}>
+              {ownerSummary.roleBadgeText}
+            </span>
+          </div>
+        )}
 
-        {adminSummaries.map((summary) => {
-          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('admin');
-          const meta = summary.rating !== null
-            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
-            : null;
-
-          return (
-            <div key={summary.driver.id} className="flex items-center gap-2">
-              <div className="flex-1">
-                <DriverIdentity
-                  driver={summary.driver}
-                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
-                  meta={meta}
-                  size="sm"
-                />
-              </div>
-              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
-                {roleDisplay.text}
-              </span>
+        {adminSummaries.map((summary) => (
+          <div key={summary.driverId} className="flex items-center gap-2">
+            <div className="flex-1">
+              <DriverIdentity
+                driver={{
+                  id: summary.driverId,
+                  name: summary.driverName,
+                  avatarUrl: summary.avatarUrl,
+                }}
+                href={summary.profileUrl}
+                meta={summary.rating !== null
+                  ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
+                  : undefined}
+                size="sm"
+              />
             </div>
-          );
-        })}
+            <span className={`px-2 py-1 text-xs font-medium rounded border ${summary.roleBadgeClasses}`}>
+              {summary.roleBadgeText}
+            </span>
+          </div>
+        ))}
 
-        {stewardSummaries.map((summary) => {
-          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('steward');
-          const meta = summary.rating !== null
-            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
-            : null;
-
-          return (
-            <div key={summary.driver.id} className="flex items-center gap-2">
-              <div className="flex-1">
-                <DriverIdentity
-                  driver={summary.driver}
-                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
-                  meta={meta}
-                  size="sm"
-                />
-              </div>
-              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
-                {roleDisplay.text}
-              </span>
+        {stewardSummaries.map((summary) => (
+          <div key={summary.driverId} className="flex items-center gap-2">
+            <div className="flex-1">
+              <DriverIdentity
+                driver={{
+                  id: summary.driverId,
+                  name: summary.driverName,
+                  avatarUrl: summary.avatarUrl,
+                }}
+                href={summary.profileUrl}
+                meta={summary.rating !== null
+                  ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
+                  : undefined}
+                size="sm"
+              />
             </div>
-          );
-        })}
+            <span className={`px-2 py-1 text-xs font-medium rounded border ${summary.roleBadgeClasses}`}>
+              {summary.roleBadgeText}
+            </span>
+          </div>
+        ))}
       </div>
     </Card>
   );
@@ -415,59 +400,44 @@ function ManagementSection({ ownerSummary, adminSummaries, stewardSummaries, lea
 // ============================================================================
 
 export function LeagueDetailTemplate({
-  viewModel,
+  viewData,
   leagueId,
   isSponsor,
   membership,
-  currentDriverId,
   onMembershipChange,
   onEndRaceModalOpen,
   onLiveRaceClick,
-  onBackToLeagues,
   children,
 }: LeagueDetailTemplateProps) {
-  // Build metrics for SponsorInsightsCard
-  const leagueMetrics: SponsorMetric[] = [
-    MetricBuilders.views(viewModel.sponsorInsights.avgViewsPerRace, 'Avg Views/Race'),
-    MetricBuilders.engagement(viewModel.sponsorInsights.engagementRate),
-    MetricBuilders.reach(viewModel.sponsorInsights.estimatedReach),
-    MetricBuilders.sof(viewModel.averageSOF ?? '—'),
-  ];
-
   return (
     <>
       {/* Sponsor Insights Card - Only shown to sponsors, at top of page */}
-      {isSponsor && viewModel && (
+      {isSponsor && viewData.sponsorInsights && (
         <SponsorInsightsCard
           entityType="league"
           entityId={leagueId}
-          entityName={viewModel.name}
-          tier={viewModel.sponsorInsights.tier}
-          metrics={leagueMetrics}
-          slots={SlotTemplates.league(
-            viewModel.sponsorInsights.mainSponsorAvailable,
-            viewModel.sponsorInsights.secondarySlotsAvailable,
-            viewModel.sponsorInsights.mainSponsorPrice,
-            viewModel.sponsorInsights.secondaryPrice
-          )}
-          trustScore={viewModel.sponsorInsights.trustScore}
-          discordMembers={viewModel.sponsorInsights.discordMembers}
-          monthlyActivity={viewModel.sponsorInsights.monthlyActivity}
+          entityName={viewData.name}
+          tier={viewData.sponsorInsights.tier}
+          metrics={viewData.sponsorInsights.metrics}
+          slots={viewData.sponsorInsights.slots}
+          trustScore={viewData.sponsorInsights.trustScore}
+          discordMembers={viewData.sponsorInsights.discordMembers}
+          monthlyActivity={viewData.sponsorInsights.monthlyActivity}
           additionalStats={{
             label: 'League Stats',
             items: [
-              { label: 'Total Races', value: viewModel.completedRacesCount },
-              { label: 'Active Members', value: viewModel.memberships.length },
-              { label: 'Total Impressions', value: viewModel.sponsorInsights.totalImpressions },
+              { label: 'Total Races', value: viewData.info.racesCount },
+              { label: 'Active Members', value: viewData.info.membersCount },
+              { label: 'Total Impressions', value: viewData.sponsorInsights.totalImpressions },
             ],
           }}
         />
       )}
 
       {/* Live Race Card - Prominently show running races */}
-      {viewModel && viewModel.runningRaces.length > 0 && (
+      {viewData.runningRaces.length > 0 && (
         <LiveRaceCard
-          races={viewModel.runningRaces}
+          races={viewData.runningRaces}
           membership={membership}
           onLiveRaceClick={onLiveRaceClick}
           onEndRaceModalOpen={onEndRaceModalOpen}
@@ -505,19 +475,18 @@ export function LeagueDetailTemplate({
         {/* Right Sidebar - League Info */}
         <div className="space-y-6">
           {/* League Info - Combined */}
-          <LeagueInfoCard viewModel={viewModel} />
+          <LeagueInfoCard info={viewData.info} />
 
           {/* Sponsors Section - Show sponsor logos */}
-          {viewModel.sponsors.length > 0 && (
-            <SponsorsSection sponsors={viewModel.sponsors} />
+          {viewData.sponsors.length > 0 && (
+            <SponsorsSection sponsors={viewData.sponsors} />
           )}
 
           {/* Management */}
           <ManagementSection
-            ownerSummary={viewModel.ownerSummary}
-            adminSummaries={viewModel.adminSummaries}
-            stewardSummaries={viewModel.stewardSummaries}
-            leagueId={leagueId}
+            ownerSummary={viewData.ownerSummary}
+            adminSummaries={viewData.adminSummaries}
+            stewardSummaries={viewData.stewardSummaries}
           />
         </div>
       </div>

apps/website/templates/LeagueStandingsTemplate.tsx

@@ -1,23 +1,16 @@
 'use client';
 
-import StandingsTable from '@/components/leagues/StandingsTable';
-import LeagueChampionshipStats from '@/components/leagues/LeagueChampionshipStats';
+import { LeagueChampionshipStats } from '@/components/leagues/LeagueChampionshipStats';
+import { StandingsTable } from '@/components/leagues/StandingsTable';
 import Card from '@/components/ui/Card';
-import type { LeagueMembership } from '@/lib/types/LeagueMembership';
-import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
+import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
 
 // ============================================================================
 // TYPES
 // ============================================================================
 
 interface LeagueStandingsTemplateProps {
-  standings: StandingEntryViewModel[];
-  drivers: DriverViewModel[];
-  memberships: LeagueMembership[];
-  leagueId: string;
-  currentDriverId: string | null;
-  isAdmin: boolean;
+  viewData: LeagueStandingsViewData;
   onRemoveMember: (driverId: string) => void;
   onUpdateRole: (driverId: string, newRole: string) => void;
   loading?: boolean;
@@ -28,12 +21,7 @@ interface LeagueStandingsTemplateProps {
 // ============================================================================
 
 export function LeagueStandingsTemplate({
-  standings,
-  drivers,
-  memberships,
-  leagueId,
-  currentDriverId,
-  isAdmin,
+  viewData,
   onRemoveMember,
   onUpdateRole,
   loading = false,
@@ -49,38 +37,16 @@ export function LeagueStandingsTemplate({
   return (
     <div className="space-y-6">
       {/* Championship Stats */}
-      <LeagueChampionshipStats standings={standings} drivers={drivers} />
+      <LeagueChampionshipStats standings={viewData.standings} drivers={viewData.drivers} />
 
       <Card>
         <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
         <StandingsTable
-          standings={standings.map((s) => ({
-            leagueId,
-            driverId: s.driverId,
-            position: s.position,
-            totalPoints: s.points,
-            racesFinished: s.races,
-            racesStarted: s.races,
-            avgFinish: null,
-            penaltyPoints: 0,
-            bonusPoints: 0,
-          }) satisfies {
-            leagueId: string;
-            driverId: string;
-            position: number;
-            totalPoints: number;
-            racesFinished: number;
-            racesStarted: number;
-            avgFinish: number | null;
-            penaltyPoints: number;
-            bonusPoints: number;
-            teamName?: string;
-          })}
-          drivers={drivers}
-          leagueId={leagueId}
-          memberships={memberships}
-          currentDriverId={currentDriverId ?? undefined}
-          isAdmin={isAdmin}
+          standings={viewData.standings}
+          drivers={viewData.drivers}
+          memberships={viewData.memberships}
+          currentDriverId={viewData.currentDriverId ?? undefined}
+          isAdmin={viewData.isAdmin}
           onRemoveMember={onRemoveMember}
           onUpdateRole={onUpdateRole}
         />

apps/website/templates/TeamDetailTemplate.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
+import SponsorInsightsCard, { SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import Image from 'next/image';
@@ -13,7 +13,7 @@ import TeamStandings from '@/components/teams/TeamStandings';
 import StatItem from '@/components/teams/StatItem';
 import { getMediaUrl } from '@/lib/utilities/media';
 import PlaceholderImage from '@/components/ui/PlaceholderImage';
-import type { TeamDetailViewData, TeamDetailData, TeamMemberData } from './TeamDetailViewData';
+import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
 
@@ -22,12 +22,9 @@ type Tab = 'overview' | 'roster' | 'standings' | 'admin';
 // ============================================================================
 
 export interface TeamDetailTemplateProps {
-  // Data props
-  team: TeamDetailData | null;
-  memberships: TeamMemberData[];
+  viewData: TeamDetailViewData;
   activeTab: Tab;
   loading: boolean;
-  isAdmin: boolean;
   
   // Event handlers
   onTabChange: (tab: Tab) => void;
@@ -41,12 +38,10 @@ export interface TeamDetailTemplateProps {
 // MAIN TEMPLATE COMPONENT
 // ============================================================================
 
-export default function TeamDetailTemplate({
-  team,
-  memberships,
+export function TeamDetailTemplate({
+  viewData,
   activeTab,
   loading,
-  isAdmin,
   onTabChange,
   onUpdate,
   onRemoveMember,
@@ -65,7 +60,7 @@ export default function TeamDetailTemplate({
   }
 
   // Show not found state
-  if (!team) {
+  if (!viewData.team) {
     return (
       <div className="max-w-6xl mx-auto">
         <Card>
@@ -87,20 +82,11 @@ export default function TeamDetailTemplate({
     { id: 'overview', label: 'Overview', visible: true },
     { id: 'roster', label: 'Roster', visible: true },
     { id: 'standings', label: 'Standings', visible: true },
-    { id: 'admin', label: 'Admin', visible: isAdmin },
+    { id: 'admin', label: 'Admin', visible: viewData.isAdmin },
   ];
 
   const visibleTabs = tabs.filter(tab => tab.visible);
 
-  // Build sponsor insights for team using real membership and league data
-  const leagueCount = team.leagues?.length ?? 0;
-  const teamMetrics = [
-    MetricBuilders.members(memberships.length),
-    MetricBuilders.reach(memberships.length * 15),
-    MetricBuilders.races(leagueCount),
-    MetricBuilders.engagement(82),
-  ];
-
   return (
     <div className="max-w-6xl mx-auto">
       {/* Breadcrumb */}
@@ -108,18 +94,18 @@ export default function TeamDetailTemplate({
         items={[
           { label: 'Home', href: '/' },
           { label: 'Teams', href: '/teams' },
-          { label: team.name }
+          { label: viewData.team.name }
         ]}
       />
 
       {/* Sponsor Insights Card - Consistent placement at top */}
-      {isSponsorMode && team && (
+      {isSponsorMode && viewData.team && (
         <SponsorInsightsCard
           entityType="team"
-          entityId={team.id}
-          entityName={team.name}
+          entityId={viewData.team.id}
+          entityName={viewData.team.name}
           tier="standard"
-          metrics={teamMetrics}
+          metrics={viewData.teamMetrics}
           slots={SlotTemplates.team(true, true, 500, 250)}
           trustScore={90}
           monthlyActivity={85}
@@ -131,8 +117,8 @@ export default function TeamDetailTemplate({
           <div className="flex items-start gap-6">
             <div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
               <Image
-                src={getMediaUrl('team-logo', team.id)}
-                alt={team.name}
+                src={getMediaUrl('team-logo', viewData.team.id)}
+                alt={viewData.team.name}
                 width={96}
                 height={96}
                 className="w-full h-full object-cover"
@@ -141,39 +127,39 @@ export default function TeamDetailTemplate({
             
             <div>
               <div className="flex items-center gap-3 mb-2">
-                <h1 className="text-3xl font-bold text-white">{team.name}</h1>
-                {team.tag && (
+                <h1 className="text-3xl font-bold text-white">{viewData.team.name}</h1>
+                {viewData.team.tag && (
                   <span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline text-gray-300">
-                    [{team.tag}]
+                    [{viewData.team.tag}]
                   </span>
                 )}
               </div>
 
-              <p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
+              <p className="text-gray-300 mb-4 max-w-2xl">{viewData.team.description}</p>
 
               <div className="flex items-center gap-4 text-sm text-gray-400">
-                <span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
-                {team.category && (
+                <span>{viewData.memberships.length} {viewData.memberships.length === 1 ? 'member' : 'members'}</span>
+                {viewData.team.category && (
                   <span className="flex items-center gap-1 text-purple-400">
                     <span className="w-2 h-2 rounded-full bg-purple-400"></span>
-                    {team.category}
+                    {viewData.team.category}
                   </span>
                 )}
-                {team.createdAt && (
+                {viewData.team.createdAt && (
                   <span>
-                    Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                    Founded {new Date(viewData.team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                   </span>
                 )}
-                {leagueCount > 0 && (
+                {viewData.team.leagues && viewData.team.leagues.length > 0 && (
                   <span>
-                    Active in {leagueCount} {leagueCount === 1 ? 'league' : 'leagues'}
+                    Active in {viewData.team.leagues.length} {viewData.team.leagues.length === 1 ? 'league' : 'leagues'}
                   </span>
                 )}
               </div>
             </div>
           </div>
 
-          <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
+          <JoinTeamButton teamId={viewData.team.id} onUpdate={onUpdate} />
         </div>
       </Card>
 
@@ -185,8 +171,8 @@ export default function TeamDetailTemplate({
               onClick={() => onTabChange(tab.id)}
               className={`
                 px-4 py-3 font-medium transition-all relative
-                ${activeTab === tab.id 
-                  ? 'text-primary-blue' 
+                ${activeTab === tab.id
+                  ? 'text-primary-blue'
                   : 'text-gray-400 hover:text-white'
                 }
               `}
@@ -206,23 +192,23 @@ export default function TeamDetailTemplate({
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
               <Card className="lg:col-span-2">
                 <h3 className="text-xl font-semibold text-white mb-4">About</h3>
-                <p className="text-gray-300 leading-relaxed">{team.description}</p>
+                <p className="text-gray-300 leading-relaxed">{viewData.team.description}</p>
               </Card>
 
               <Card>
                 <h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
                 <div className="space-y-3">
-                  <StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
-                  {team.category && (
-                    <StatItem label="Category" value={team.category} color="text-purple-400" />
+                  <StatItem label="Members" value={viewData.memberships.length.toString()} color="text-primary-blue" />
+                  {viewData.team.category && (
+                    <StatItem label="Category" value={viewData.team.category} color="text-purple-400" />
                   )}
-                  {leagueCount > 0 && (
-                    <StatItem label="Leagues" value={leagueCount.toString()} color="text-green-400" />
+                  {viewData.team.leagues && viewData.team.leagues.length > 0 && (
+                    <StatItem label="Leagues" value={viewData.team.leagues.length.toString()} color="text-green-400" />
                   )}
-                  {team.createdAt && (
+                  {viewData.team.createdAt && (
                     <StatItem
                       label="Founded"
-                      value={new Date(team.createdAt).toLocaleDateString('en-US', {
+                      value={new Date(viewData.team.createdAt).toLocaleDateString('en-US', {
                         month: 'short',
                         year: 'numeric',
                       })}
@@ -244,20 +230,20 @@ export default function TeamDetailTemplate({
 
         {activeTab === 'roster' && (
           <TeamRoster
-            teamId={team.id}
-            memberships={memberships}
-            isAdmin={isAdmin}
+            teamId={viewData.team.id}
+            memberships={viewData.memberships}
+            isAdmin={viewData.isAdmin}
             onRemoveMember={onRemoveMember}
             onChangeRole={onChangeRole}
           />
         )}
 
         {activeTab === 'standings' && (
-          <TeamStandings teamId={team.id} leagues={team.leagues} />
+          <TeamStandings teamId={viewData.team.id} leagues={viewData.team.leagues} />
         )}
 
-        {activeTab === 'admin' && isAdmin && (
-          <TeamAdmin team={team} onUpdate={onUpdate} />
+        {activeTab === 'admin' && viewData.isAdmin && (
+          <TeamAdmin team={viewData.team} onUpdate={onUpdate} />
         )}
       </div>
     </div>

apps/website/templates/TeamsTemplate.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { Users, Trophy, Target } from 'lucide-react';
+import { Trophy, Users } from 'lucide-react';
 import Link from 'next/link';
 
 import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
-import type { TeamsViewData, TeamSummaryData } from './view-data/TeamsViewData';
+import type { TeamSummaryData, TeamsViewData } from '../lib/view-data/TeamsViewData';
 
 interface TeamsTemplateProps extends TeamsViewData {
   searchQuery?: string;
@@ -20,7 +20,7 @@ interface TeamsTemplateProps extends TeamsViewData {
   onSkillLevelClick?: (level: string) => void;
 }
 
-export function TeamsTemplate({ teams, searchQuery, onSearchChange, onShowCreateForm, onTeamClick }: TeamsTemplateProps) {
+export function TeamsTemplate({ teams }: TeamsTemplateProps) {
   return (
     <main className="min-h-screen bg-deep-graphite py-8">
       <div className="max-w-7xl mx-auto px-6">