fix data flow issues

apps/website/app/sponsor/dashboard/page.tsx

@@ -31,52 +31,9 @@ import {
   RefreshCw
 } from 'lucide-react';
 import Link from 'next/link';
-
-// Static mock data for prototype
-const MOCK_SPONSOR_DATA = {
-  sponsorId: 'demo-sponsor-1',
-  sponsorName: 'Acme Racing Co.',
-  metrics: {
-    totalImpressions: 127450,
-    impressionsChange: 12.5,
-    uniqueViewers: 34200,
-    viewersChange: 8.3,
-    activeSponsors: 7,
-    totalInvestment: 4850,
-    avgEngagement: 4.2,
-    engagementChange: 0.8,
-  },
-  sponsorships: {
-    leagues: [
-      { id: 'l1', name: 'GT3 Masters Championship', tier: 'main', drivers: 48, impressions: 45200, status: 'active' },
-      { id: 'l2', name: 'Endurance Pro Series', tier: 'secondary', drivers: 72, impressions: 38400, status: 'active' },
-    ],
-    teams: [
-      { id: 't1', name: 'Velocity Racing', drivers: 4, impressions: 12300, status: 'active' },
-      { id: 't2', name: 'Storm Motorsport', drivers: 3, impressions: 8900, status: 'active' },
-    ],
-    drivers: [
-      { id: 'd1', name: 'Max Velocity', team: 'Velocity Racing', impressions: 8200, status: 'active' },
-      { id: 'd2', name: 'Sarah Storm', team: 'Storm Motorsport', impressions: 6100, status: 'active' },
-    ],
-    races: [
-      { id: 'r1', name: 'Spa 24 Hours', league: 'Endurance Pro', impressions: 15600, date: '2025-12-20', status: 'upcoming' },
-    ],
-    platform: [
-      { id: 'p1', name: 'Homepage Banner', placement: 'Header', impressions: 52000, status: 'active' },
-    ],
-  },
-  recentActivity: [
-    { id: 'a1', type: 'race', message: 'GT3 Masters Championship race completed', time: '2 hours ago', impressions: 1240 },
-    { id: 'a2', type: 'driver', message: 'Max Velocity finished P1 at Monza', time: '5 hours ago', impressions: 890 },
-    { id: 'a3', type: 'league', message: 'New driver joined Endurance Pro Series', time: '1 day ago', impressions: null },
-    { id: 'a4', type: 'team', message: 'Velocity Racing won team championship', time: '2 days ago', impressions: 2100 },
-  ],
-  upcomingRenewals: [
-    { id: 'ren1', name: 'GT3 Masters Championship', type: 'league', renewDate: '2026-01-15', price: 1200 },
-    { id: 'ren2', name: 'Homepage Banner', type: 'platform', renewDate: '2025-12-31', price: 500 },
-  ],
-};
+import { SponsorService } from '@/lib/services/sponsors/SponsorService';
+import { SponsorDashboardViewModel } from '@/lib/view-models/SponsorDashboardViewModel';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
 
 // Metric Card Component
 function MetricCard({ 
@@ -169,26 +126,18 @@ function SponsorshipCategoryCard({
 }
 
 // Activity Item
-function ActivityItem({ activity }: { activity: typeof MOCK_SPONSOR_DATA.recentActivity[0] }) {
-  const typeColors = {
-    race: 'bg-warning-amber',
-    league: 'bg-primary-blue',
-    team: 'bg-purple-400',
-    driver: 'bg-performance-green',
-    platform: 'bg-racing-red',
-  };
-
+function ActivityItem({ activity }: { activity: any }) {
   return (
     <div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
-      <div className={`w-2 h-2 rounded-full mt-2 ${typeColors[activity.type as keyof typeof typeColors] || 'bg-gray-500'}`} />
+      <div className={`w-2 h-2 rounded-full mt-2 ${activity.typeColor}`} />
       <div className="flex-1 min-w-0">
         <p className="text-sm text-white truncate">{activity.message}</p>
         <div className="flex items-center gap-2 mt-1">
           <span className="text-xs text-gray-500">{activity.time}</span>
-          {activity.impressions && (
+          {activity.formattedImpressions && (
             <>
               <span className="text-xs text-gray-600">•</span>
-              <span className="text-xs text-gray-400">{activity.impressions.toLocaleString()} views</span>
+              <span className="text-xs text-gray-400">{activity.formattedImpressions} views</span>
             </>
           )}
         </div>
@@ -198,7 +147,7 @@ function ActivityItem({ activity }: { activity: typeof MOCK_SPONSOR_DATA.recentA
 }
 
 // Renewal Alert
-function RenewalAlert({ renewal }: { renewal: typeof MOCK_SPONSOR_DATA.upcomingRenewals[0] }) {
+function RenewalAlert({ renewal }: { renewal: any }) {
   const typeIcons = {
     league: Trophy,
     team: Users,
@@ -206,7 +155,7 @@ function RenewalAlert({ renewal }: { renewal: typeof MOCK_SPONSOR_DATA.upcomingR
     race: Flag,
     platform: Megaphone,
   };
-  const Icon = typeIcons[renewal.type as keyof typeof typeIcons] || Trophy;
+  const Icon = typeIcons[renewal.type] || Trophy;
 
   return (
     <div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
@@ -214,11 +163,11 @@ function RenewalAlert({ renewal }: { renewal: typeof MOCK_SPONSOR_DATA.upcomingR
         <Icon className="w-4 h-4 text-warning-amber" />
         <div>
           <p className="text-sm text-white">{renewal.name}</p>
-          <p className="text-xs text-gray-400">Renews {renewal.renewDate}</p>
+          <p className="text-xs text-gray-400">Renews {renewal.formattedRenewDate}</p>
         </div>
       </div>
       <div className="text-right">
-        <p className="text-sm font-semibold text-white">${renewal.price}</p>
+        <p className="text-sm font-semibold text-white">{renewal.formattedPrice}</p>
         <Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
           Renew
         </Button>
@@ -231,38 +180,52 @@ export default function SponsorDashboardPage() {
   const shouldReduceMotion = useReducedMotion();
   const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | 'all'>('30d');
   const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<SponsorDashboardViewModel | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  // Simulate loading
   useEffect(() => {
-    const timer = setTimeout(() => setLoading(false), 500);
-    return () => clearTimeout(timer);
+    const loadDashboard = async () => {
+      try {
+        const sponsorService = ServiceFactory.getSponsorService();
+        const dashboardData = await sponsorService.getSponsorDashboard('demo-sponsor-1');
+        if (dashboardData) {
+          setData(dashboardData);
+        } else {
+          setError('Failed to load dashboard data');
+        }
+      } catch (err) {
+        console.error('Error loading dashboard:', err);
+        setError('Failed to load dashboard data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadDashboard();
   }, []);
 
-  const data = MOCK_SPONSOR_DATA;
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
+        <div className="text-center">
+          <Loader2 className="w-8 h-8 animate-spin text-primary-blue mx-auto mb-4" />
+          <p className="text-gray-400">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
 
-  // Calculate category totals
-  const categoryData = {
-    leagues: {
-      count: data.sponsorships.leagues.length,
-      impressions: data.sponsorships.leagues.reduce((sum, l) => sum + l.impressions, 0),
-    },
-    teams: {
-      count: data.sponsorships.teams.length,
-      impressions: data.sponsorships.teams.reduce((sum, t) => sum + t.impressions, 0),
-    },
-    drivers: {
-      count: data.sponsorships.drivers.length,
-      impressions: data.sponsorships.drivers.reduce((sum, d) => sum + d.impressions, 0),
-    },
-    races: {
-      count: data.sponsorships.races.length,
-      impressions: data.sponsorships.races.reduce((sum, r) => sum + r.impressions, 0),
-    },
-    platform: {
-      count: data.sponsorships.platform.length,
-      impressions: data.sponsorships.platform.reduce((sum, p) => sum + p.impressions, 0),
-    },
-  };
+  if (error || !data) {
+    return (
+      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
+        <div className="text-center">
+          <p className="text-gray-400">{error || 'No dashboard data available'}</p>
+        </div>
+      </div>
+    );
+  }
+
+  const categoryData = data.categoryData;
 
   if (loading) {
     return (
@@ -317,7 +280,7 @@ export default function SponsorDashboardPage() {
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
         <MetricCard
           title="Total Impressions"
-          value={data.metrics.totalImpressions}
+          value={data.totalImpressions}
           change={data.metrics.impressionsChange}
           icon={Eye}
           delay={0}
@@ -331,15 +294,15 @@ export default function SponsorDashboardPage() {
         />
         <MetricCard
           title="Engagement Rate"
-          value={data.metrics.avgEngagement}
-          change={data.metrics.engagementChange}
+          value={data.metrics.exposure}
+          change={data.metrics.exposureChange}
           icon={TrendingUp}
           suffix="%"
           delay={0.2}
         />
         <MetricCard
           title="Total Investment"
-          value={data.metrics.totalInvestment}
+          value={data.totalInvestment}
           icon={DollarSign}
           prefix="$"
           delay={0.3}
@@ -423,7 +386,7 @@ export default function SponsorDashboardPage() {
                 <div key={league.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
                   <div className="flex items-center gap-4">
                     <div className={`px-2 py-1 rounded text-xs font-medium ${
-                      league.tier === 'main' 
+                      league.tier === 'main'
                         ? 'bg-primary-blue/20 text-primary-blue border border-primary-blue/30'
                         : 'bg-purple-500/20 text-purple-400 border border-purple-500/30'
                     }`}>
@@ -432,17 +395,17 @@ export default function SponsorDashboardPage() {
                     <div>
                       <div className="flex items-center gap-2">
                         <Trophy className="w-4 h-4 text-gray-500" />
-                        <span className="font-medium text-white">{league.name}</span>
+                        <span className="font-medium text-white">{league.entityName}</span>
                       </div>
-                      <div className="text-sm text-gray-500">{league.drivers} drivers</div>
+                      <div className="text-sm text-gray-500">{league.details}</div>
                     </div>
                   </div>
                   <div className="flex items-center gap-4">
                     <div className="text-right">
-                      <div className="font-semibold text-white">{league.impressions.toLocaleString()}</div>
+                      <div className="font-semibold text-white">{league.formattedImpressions}</div>
                       <div className="text-xs text-gray-500">impressions</div>
                     </div>
-                    <Link href={`/sponsor/leagues/${league.id}`}>
+                    <Link href={`/sponsor/leagues/${league.entityId}`}>
                       <Button variant="secondary" className="text-xs">
                         <ExternalLink className="w-3 h-3" />
                       </Button>
@@ -450,7 +413,7 @@ export default function SponsorDashboardPage() {
                   </div>
                 </div>
               ))}
-              
+
               {/* Teams */}
               {data.sponsorships.teams.map((team) => (
                 <div key={team.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
@@ -461,14 +424,14 @@ export default function SponsorDashboardPage() {
                     <div>
                       <div className="flex items-center gap-2">
                         <Users className="w-4 h-4 text-gray-500" />
-                        <span className="font-medium text-white">{team.name}</span>
+                        <span className="font-medium text-white">{team.entityName}</span>
                       </div>
-                      <div className="text-sm text-gray-500">{team.drivers} drivers</div>
+                      <div className="text-sm text-gray-500">{team.details}</div>
                     </div>
                   </div>
                   <div className="flex items-center gap-4">
                     <div className="text-right">
-                      <div className="font-semibold text-white">{team.impressions.toLocaleString()}</div>
+                      <div className="font-semibold text-white">{team.formattedImpressions}</div>
                       <div className="text-xs text-gray-500">impressions</div>
                     </div>
                     <Button variant="secondary" className="text-xs">
@@ -488,14 +451,14 @@ export default function SponsorDashboardPage() {
                     <div>
                       <div className="flex items-center gap-2">
                         <Car className="w-4 h-4 text-gray-500" />
-                        <span className="font-medium text-white">{driver.name}</span>
+                        <span className="font-medium text-white">{driver.entityName}</span>
                       </div>
-                      <div className="text-sm text-gray-500">{driver.team}</div>
+                      <div className="text-sm text-gray-500">{driver.details}</div>
                     </div>
                   </div>
                   <div className="flex items-center gap-4">
                     <div className="text-right">
-                      <div className="font-semibold text-white">{driver.impressions.toLocaleString()}</div>
+                      <div className="font-semibold text-white">{driver.formattedImpressions}</div>
                       <div className="text-xs text-gray-500">impressions</div>
                     </div>
                     <Button variant="secondary" className="text-xs">
@@ -525,8 +488,8 @@ export default function SponsorDashboardPage() {
                           <Flag className="w-5 h-5 text-warning-amber" />
                         </div>
                         <div>
-                          <p className="font-medium text-white">{race.name}</p>
-                          <p className="text-sm text-gray-500">{race.league} • {race.date}</p>
+                          <p className="font-medium text-white">{race.entityName}</p>
+                          <p className="text-sm text-gray-500">{race.details}</p>
                         </div>
                       </div>
                       <div className="text-right">
@@ -620,16 +583,16 @@ export default function SponsorDashboardPage() {
             <div className="space-y-3">
               <div className="flex items-center justify-between">
                 <span className="text-gray-400">Active Sponsorships</span>
-                <span className="font-medium text-white">{data.metrics.activeSponsors}</span>
+                <span className="font-medium text-white">{data.activeSponsorships}</span>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-gray-400">Total Investment</span>
-                <span className="font-medium text-white">${data.metrics.totalInvestment.toLocaleString()}</span>
+                <span className="font-medium text-white">{data.formattedTotalInvestment}</span>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-gray-400">Cost per 1K Views</span>
                 <span className="font-medium text-performance-green">
-                  ${(data.metrics.totalInvestment / data.metrics.totalImpressions * 1000).toFixed(2)}
+                  {data.costPerThousandViews}
                 </span>
               </div>
               <div className="flex items-center justify-between">