fix data flow issues

apps/website/app/races/all/page.tsx

@@ -7,8 +7,8 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
-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,
@@ -34,8 +34,9 @@ type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 export default function AllRacesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { raceService } = useServices();
 
-  const [pageData, setPageData] = useState<RacesPageDataViewModel | null>(null);
+  const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
   const [loading, setLoading] = useState(true);
 
   // Pagination
@@ -49,7 +50,7 @@ export default function AllRacesPage() {
 
   const loadRaces = async () => {
     try {
-      const viewModel = await apiClient.races.getAllPageData();
+      const viewModel = await raceService.getAllRacesPageData();
       setPageData(viewModel);
     } catch (err) {
       console.error('Failed to load races:', err);
@@ -62,7 +63,7 @@ export default function AllRacesPage() {
     void loadRaces();
   }, []);
 
-  const races: RacesPageDataRaceViewModel[] = pageData?.races ?? [];
+  const races = pageData?.races ?? [];
 
   const filteredRaces = useMemo(() => {
     return races.filter(race => {
@@ -284,8 +285,8 @@ export default function AllRacesPage() {
         ) : (
           <div className="space-y-3">
             {paginatedRaces.map(race => {
-              const config = statusConfig[race.status];
-              const StatusIcon = config.icon;
+               const config = statusConfig[race.status as keyof typeof statusConfig];
+               const StatusIcon = config.icon;
 
               return (
                 <div