refactor page to use services

apps/website/app/leagues/[id]/settings/page.tsx

@@ -6,13 +6,10 @@ import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
-import { LeagueFullConfigPresenter } from '@/lib/presenters/LeagueFullConfigPresenter';
-import { LeagueScoringPresetsPresenter } from '@/lib/presenters/LeagueScoringPresetsPresenter';
-import type { LeagueConfigFormModel } from '@core/racing/application';
-import type { DriverDTO } from '@core/racing/application/dto/DriverDTO';
-import { EntityMappers } from '@core/racing/application/mappers/EntityMappers';
-import type { LeagueScoringPresetDTO } from '@core/racing/application/ports/LeagueScoringPresetProvider';
-import type { League } from '@core/racing/domain/entities/League';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
+import type { DriverDTO } from '@/lib/types/DriverDTO';
+import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
 import { AlertTriangle, Settings, UserCog } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
@@ -22,76 +19,35 @@ export default function LeagueSettingsPage() {
   const leagueId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
 
-  const [league, setLeague] = useState<League | null>(null);
-  const [configForm, setConfigForm] = useState<LeagueConfigFormModel | null>(null);
-  const [presets, setPresets] = useState<LeagueScoringPresetDTO[]>([]);
-  const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
+  const [settings, setSettings] = useState<LeagueSettingsViewModel | null>(null);
   const [loading, setLoading] = useState(true);
   const [isAdmin, setIsAdmin] = useState(false);
   const [showTransferDialog, setShowTransferDialog] = useState(false);
   const [selectedNewOwner, setSelectedNewOwner] = useState<string>('');
   const [transferring, setTransferring] = useState(false);
-  const [allMembers, setAllMembers] = useState<DriverDTO[]>([]);
   const router = useRouter();
 
+  const serviceFactory = useMemo(() => new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || ''), []);
+  const leagueMembershipService = useMemo(() => serviceFactory.createLeagueMembershipService(), [serviceFactory]);
+  const leagueSettingsService = useMemo(() => serviceFactory.createLeagueSettingsService(), [serviceFactory]);
+
   useEffect(() => {
     async function checkAdmin() {
-      const membershipRepo = getLeagueMembershipRepository();
-      const membership = await membershipRepo.getMembership(leagueId, currentDriverId);
+      const memberships = await leagueMembershipService.fetchLeagueMemberships(leagueId);
+      const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
       setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
     }
     checkAdmin();
-  }, [leagueId, currentDriverId]);
+  }, [leagueId, currentDriverId, leagueMembershipService]);
 
   useEffect(() => {
     async function loadSettings() {
       setLoading(true);
       try {
-        const leagueRepo = getLeagueRepository();
-        const driverRepo = getDriverRepository();
-        const useCase = getGetLeagueFullConfigUseCase();
-        const presetsUseCase = getListLeagueScoringPresetsUseCase();
-
-        const leagueData = await leagueRepo.findById(leagueId);
-        if (!leagueData) {
-          setLoading(false);
-          return;
+        const settingsData = await leagueSettingsService.getLeagueSettings(leagueId);
+        if (settingsData) {
+          setSettings(settingsData);
         }
-
-        setLeague(leagueData);
-
-        const configPresenter = new LeagueFullConfigPresenter();
-        await useCase.execute({ leagueId }, configPresenter);
-        const configViewModel = configPresenter.getViewModel();
-        if (configViewModel) {
-          setConfigForm(configViewModel as LeagueConfigFormModel);
-        }
-
-        const presetsPresenter = new LeagueScoringPresetsPresenter();
-        await presetsUseCase.execute(undefined as void, presetsPresenter);
-        const presetsViewModel = presetsPresenter.getViewModel();
-        setPresets(presetsViewModel.presets);
-
-        const entity = await driverRepo.findById(leagueData.ownerId);
-        if (entity) {
-          setOwnerDriver(EntityMappers.toDriverDTO(entity));
-        }
-
-        const membershipRepo = getLeagueMembershipRepository();
-        const memberships = await membershipRepo.getLeagueMembers(leagueId);
-        const memberDrivers: DriverDTO[] = [];
-        for (const m of memberships) {
-          if (m.driverId !== leagueData.ownerId && m.status === 'active') {
-            const d = await driverRepo.findById(m.driverId);
-            if (d) {
-              const dto = EntityMappers.toDriverDTO(d);
-              if (dto) {
-                memberDrivers.push(dto);
-              }
-            }
-          }
-        }
-        setAllMembers(memberDrivers);
       } catch (err) {
         console.error('Failed to load league settings:', err);
       } finally {
@@ -102,60 +58,17 @@ export default function LeagueSettingsPage() {
     if (isAdmin) {
       loadSettings();
     }
-  }, [leagueId, isAdmin]);
+  }, [leagueId, isAdmin, leagueSettingsService]);
 
-  const ownerSummary = useMemo(() => {
-    if (!ownerDriver) {
-      return null;
-    }
-
-    const stats = getDriverStats(ownerDriver.id);
-    const allRankings = getAllDriverRankings();
-
-    let rating: number | null = stats?.rating ?? null;
-    let rank: number | null = null;
-
-    if (stats) {
-      if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
-        rank = stats.overallRank;
-      } else {
-        const indexInGlobal = allRankings.findIndex(
-          (stat) => stat.driverId === stats.driverId,
-        );
-        if (indexInGlobal !== -1) {
-          rank = indexInGlobal + 1;
-        }
-      }
-
-      if (rating === null) {
-        const globalEntry = allRankings.find(
-          (stat) => stat.driverId === stats.driverId,
-        );
-        if (globalEntry) {
-          rating = globalEntry.rating;
-        }
-      }
-    }
-
-    return {
-      driver: ownerDriver,
-      rating,
-      rank,
-    };
-  }, [ownerDriver]);
+  const ownerSummary = settings?.owner || null;
 
   const handleTransferOwnership = async () => {
-    if (!selectedNewOwner || !league) return;
-    
+    if (!selectedNewOwner || !settings) return;
+
     setTransferring(true);
     try {
-      const useCase = getTransferLeagueOwnershipUseCase();
-      await useCase.execute({
-        leagueId,
-        currentOwnerId: currentDriverId,
-        newOwnerId: selectedNewOwner,
-      });
-      
+      await leagueSettingsService.transferOwnership(leagueId, currentDriverId, selectedNewOwner);
+
       setShowTransferDialog(false);
       router.refresh();
     } catch (err) {
@@ -190,7 +103,7 @@ export default function LeagueSettingsPage() {
     );
   }
 
-  if (!configForm || !league) {
+  if (!settings) {
     return (
       <Card>
         <div className="py-6 text-sm text-gray-500">
@@ -217,7 +130,7 @@ export default function LeagueSettingsPage() {
 
       {/* READONLY INFORMATION SECTION - Compact */}
       <div className="space-y-4">
-        <ReadonlyLeagueInfo league={league} configForm={configForm} />
+        <ReadonlyLeagueInfo league={settings.league} configForm={settings.config} />
 
         {/* League Owner - Compact */}
         <div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
@@ -234,7 +147,7 @@ export default function LeagueSettingsPage() {
         </div>
 
         {/* Transfer Ownership - Owner Only */}
-        {league.ownerId === currentDriverId && allMembers.length > 0 && (
+        {settings.league.ownerId === currentDriverId && settings.members.length > 0 && (
           <div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
             <div className="flex items-center gap-2 mb-3">
               <UserCog className="w-4 h-4 text-gray-400" />
@@ -243,7 +156,7 @@ export default function LeagueSettingsPage() {
             <p className="text-xs text-gray-500 mb-4">
               Transfer league ownership to another active member. You will become an admin.
             </p>
-            
+
             {!showTransferDialog ? (
               <Button
                 variant="secondary"
@@ -259,13 +172,13 @@ export default function LeagueSettingsPage() {
                   className="w-full rounded-lg border border-charcoal-outline bg-charcoal-card px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none"
                 >
                   <option value="">Select new owner...</option>
-                  {allMembers.map((member) => (
+                  {settings.members.map((member) => (
                     <option key={member.id} value={member.id}>
                       {member.name}
                     </option>
                   ))}
                 </select>
-                
+
                 <div className="flex gap-2">
                   <Button
                     variant="primary"