fix data flow issues

apps/website/lib/view-models/AvailableLeaguesViewModel.ts

@@ -0,0 +1,76 @@
+/**
+ * Available Leagues View Model
+ *
+ * View model for leagues available for sponsorship.
+ */
+export class AvailableLeaguesViewModel {
+  leagues: AvailableLeagueViewModel[];
+
+  constructor(leagues: any[]) {
+    this.leagues = leagues.map(league => new AvailableLeagueViewModel(league));
+  }
+}
+
+export class AvailableLeagueViewModel {
+  id: string;
+  name: string;
+  game: string;
+  drivers: number;
+  avgViewsPerRace: number;
+  mainSponsorSlot: { available: boolean; price: number };
+  secondarySlots: { available: number; total: number; price: number };
+  rating: number;
+  tier: 'premium' | 'standard' | 'starter';
+  nextRace?: string;
+  seasonStatus: 'active' | 'upcoming' | 'completed';
+  description: string;
+
+  constructor(data: any) {
+    this.id = data.id;
+    this.name = data.name;
+    this.game = data.game;
+    this.drivers = data.drivers;
+    this.avgViewsPerRace = data.avgViewsPerRace;
+    this.mainSponsorSlot = data.mainSponsorSlot;
+    this.secondarySlots = data.secondarySlots;
+    this.rating = data.rating;
+    this.tier = data.tier;
+    this.nextRace = data.nextRace;
+    this.seasonStatus = data.seasonStatus;
+    this.description = data.description;
+  }
+
+  get formattedAvgViews(): string {
+    return `${(this.avgViewsPerRace / 1000).toFixed(1)}k`;
+  }
+
+  get cpm(): number {
+    return Math.round((this.mainSponsorSlot.price / this.avgViewsPerRace) * 1000);
+  }
+
+  get formattedCpm(): string {
+    return `$${this.cpm}`;
+  }
+
+  get hasAvailableSlots(): boolean {
+    return this.mainSponsorSlot.available || this.secondarySlots.available > 0;
+  }
+
+  get tierConfig() {
+    const configs = {
+      premium: { color: 'text-yellow-400', bgColor: 'bg-yellow-500/10', border: 'border-yellow-500/30', icon: '⭐' },
+      standard: { color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', border: 'border-primary-blue/30', icon: '🏆' },
+      starter: { color: 'text-gray-400', bgColor: 'bg-gray-500/10', border: 'border-gray-500/30', icon: '🚀' },
+    };
+    return configs[this.tier];
+  }
+
+  get statusConfig() {
+    const configs = {
+      active: { color: 'text-performance-green', bg: 'bg-performance-green/10', label: 'Active Season' },
+      upcoming: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', label: 'Starting Soon' },
+      completed: { color: 'text-gray-400', bg: 'bg-gray-400/10', label: 'Season Ended' },
+    };
+    return configs[this.seasonStatus];
+  }
+}