website refactor

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>