fix data flow issues

apps/website/app/races/page.tsx

@@ -6,8 +6,8 @@ import Link from 'next/link';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
-import { apiClient } from '@/lib/apiClient';
-import type { RacesPageDataViewModel, RacesPageDataRaceViewModel } from '@/lib/apiClient';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { RacesPageViewModel } from '@/lib/view-models/RacesPageViewModel';
 import {
   Calendar,
   Clock,
@@ -27,12 +27,13 @@ import {
 } from 'lucide-react';
 
 type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
-type RaceStatusFilter = RacesPageDataRaceViewModel['status'];
+type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 
 export default function RacesPage() {
   const router = useRouter();
+  const { raceService } = useServices();
 
-  const [pageData, setPageData] = useState<RacesPageDataViewModel | null>(null);
+  const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
   const [loading, setLoading] = useState(true);
 
   // Filters
@@ -42,7 +43,7 @@ export default function RacesPage() {
 
   const loadRaces = async () => {
     try {
-      const data = await apiClient.races.getPageData();
+      const data = await raceService.getRacesPageData();
       setPageData(data);
     } catch (err) {
       console.error('Failed to load races:', err);
@@ -87,11 +88,8 @@ export default function RacesPage() {
 
   // Group races by date for calendar view
   const racesByDate = useMemo(() => {
-    const grouped = new Map<string, RacesPageDataRaceViewModel[]>();
+    const grouped = new Map<string, typeof filteredRaces[0][]>();
     filteredRaces.forEach((race) => {
-      if (typeof race.scheduledAt !== 'string') {
-        return;
-      }
       const dateKey = race.scheduledAt.split('T')[0]!;
       if (!grouped.has(dateKey)) {
         grouped.set(dateKey, []);
@@ -105,10 +103,10 @@ export default function RacesPage() {
   const liveRaces = filteredRaces.filter(r => r.isLive);
   const recentResults = filteredRaces.filter(r => r.isPast).slice(0, 5);
   const stats = {
-    total: pageData?.races.length ?? 0,
-    scheduled: pageData?.races.filter(r => r.status === 'scheduled').length ?? 0,
-    running: pageData?.races.filter(r => r.status === 'running').length ?? 0,
-    completed: pageData?.races.filter(r => r.status === 'completed').length ?? 0,
+    total: pageData?.totalCount ?? 0,
+    scheduled: pageData?.scheduledRaces.length ?? 0,
+    running: pageData?.runningRaces.length ?? 0,
+    completed: pageData?.completedRaces.length ?? 0,
   };
 
   const formatDate = (date: Date | string) => {
@@ -348,7 +346,7 @@ export default function RacesPage() {
                   <div>
                     <p className="text-white font-medium mb-1">No races found</p>
                     <p className="text-sm text-gray-500">
-                      {pageData?.races.length === 0
+                      {pageData?.totalCount === 0
                         ? 'No races have been scheduled yet'
                         : 'Try adjusting your filters'}
                     </p>
@@ -375,10 +373,7 @@ export default function RacesPage() {
                    {/* Races for this date */}
                    <div className="space-y-2">
                      {dayRaces.map((race) => {
-                       if (!race.scheduledAt) {
-                         return null;
-                       }
-                       const config = statusConfig[race.status];
+                       const config = statusConfig[race.status as keyof typeof statusConfig];
                        const StatusIcon = config.icon;
 
                        return (