do to formatters

apps/website/components/leagues/EnhancedLeagueSchedulePanel.tsx

@@ -1,18 +1,16 @@
 'use client';
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
+import { DateFormatter } from '@/lib/formatters/DateFormatter';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
-import { ChevronDown, ChevronUp, Calendar, CheckCircle, Trophy, Edit, Clock } from 'lucide-react';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { Text } from '@/ui/Text';
+import { Calendar, CheckCircle, ChevronDown, ChevronUp, Clock, Edit, Trophy } from 'lucide-react';
+import { useState } from 'react';
 
 interface RaceEvent {
   id: string;
@@ -50,9 +48,6 @@ interface MonthGroup {
 
 export function EnhancedLeagueSchedulePanel({
   events,
-  leagueId,
-  currentDriverId,
-  isAdmin,
   onRegister,
   onWithdraw,
   onEdit,
@@ -60,7 +55,6 @@ export function EnhancedLeagueSchedulePanel({
   onRaceDetail,
   onResultsClick,
 }: EnhancedLeagueSchedulePanelProps) {
-  const router = useRouter();
   const [expandedMonths, setExpandedMonths] = useState<Set<string>>(new Set());
 
   // Group races by month
@@ -109,7 +103,7 @@ export function EnhancedLeagueSchedulePanel({
   };
 
   const formatTime = (scheduledAt: string) => {
-    return DateDisplay.formatDateTime(scheduledAt);
+    return DateFormatter.formatDateTime(scheduledAt);
   };
 
   const groups = groupRacesByMonth();
@@ -158,7 +152,7 @@ export function EnhancedLeagueSchedulePanel({
             {isExpanded && (
               <Box p={4}>
                 <Stack gap={3}>
-                  {group.races.map((race, raceIndex) => (
+                  {group.races.map((race) => (
                     <Surface
                       key={race.id}
                       variant="precision"

apps/website/components/leagues/LeagueActivityFeed.tsx

@@ -1,10 +1,10 @@
 import { ActivityFeedItem } from '@/components/feed/ActivityFeedItem';
 import { useLeagueRaces } from "@/hooks/league/useLeagueRaces";
+import { RelativeTimeFormatter } from '@/lib/formatters/RelativeTimeFormatter';
 import { LeagueActivityService } from '@/lib/services/league/LeagueActivityService';
-import { RelativeTimeDisplay } from '@/lib/display-objects/RelativeTimeDisplay';
 import { Icon } from '@/ui/Icon';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { AlertTriangle, Calendar, Flag, Shield, UserMinus, UserPlus } from 'lucide-react';
 import { useMemo } from 'react';
 
@@ -128,7 +128,7 @@ function ActivityItem({ activity }: { activity: LeagueActivity }) {
     <ActivityFeedItem
       icon={getIcon()}
       content={getContent()}
-      timestamp={RelativeTimeDisplay.format(activity.timestamp, new Date())}
+      timestamp={RelativeTimeFormatter.format(activity.timestamp, new Date())}
     />
   );
 }

apps/website/components/leagues/LeagueMemberRow.tsx

@@ -1,11 +1,11 @@
-import { DriverIdentity } from '@/ui/DriverIdentity';
+import { DateFormatter } from '@/lib/formatters/DateFormatter';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
 import { Box } from '@/ui/Box';
+import { DriverIdentity } from '@/ui/DriverIdentity';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 interface LeagueMemberRowProps {
   driver?: DriverViewModel;
@@ -84,7 +84,7 @@ export function LeagueMemberRow({
       </TableCell>
       <TableCell>
         <Text variant="high" size="sm">
-          {DateDisplay.formatShort(joinedAt)}
+          {DateFormatter.formatShort(joinedAt)}
         </Text>
       </TableCell>
       {actions && (

apps/website/components/leagues/LeagueReviewSummary.tsx

@@ -1,39 +1,33 @@
 'use client';
 
-import {
-  Users,
-  Calendar,
-  Trophy,
-  Award,
-  Rocket,
-  Gamepad2,
-  User,
-  UsersRound,
-  Clock,
-  Flag,
-  Zap,
-  Timer,
-  Check,
-  Globe,
-  Medal,
-  type LucideIcon,
-} from 'lucide-react';
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
-import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
 import { Card } from '@/ui/Card';
 import { Grid } from '@/ui/Grid';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import {
+  Award,
+  Calendar,
+  Check,
+  Clock,
+  Flag,
+  Gamepad2,
+  Globe,
+  Medal,
+  Rocket,
+  Timer,
+  Trophy,
+  User,
+  Users,
+  UsersRound,
+  Zap,
+  type LucideIcon,
+} from 'lucide-react';
  
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
-import { DurationDisplay } from '@/lib/display-objects/DurationDisplay';
+import { DateFormatter } from '@/lib/formatters/DateFormatter';
 
-interface LeagueReviewSummaryProps {
-  form: LeagueConfigFormModel;
-  presets: LeagueScoringPresetViewModel[];
-}
 
 // Individual review card component
 function ReviewCard({
@@ -142,7 +136,7 @@ export function LeagueReviewSummary({ form, presets }: LeagueReviewSummaryProps)
 
   const seasonStartLabel =
     timings.seasonStartDate
-      ? DateDisplay.formatShort(timings.seasonStartDate)
+      ? DateFormatter.formatShort(timings.seasonStartDate)
       : null;
 
   const stewardingLabel = (() => {

apps/website/components/leagues/RaceDetailModal.tsx

@@ -1,28 +1,27 @@
 'use client';
 
-import React from 'react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Group } from '@/ui/Group';
-import { Surface } from '@/ui/Surface';
-import { Icon } from '@/ui/Icon';
-import { Button } from '@/ui/Button';
+import { DateFormatter } from '@/lib/formatters/DateFormatter';
 import { Badge } from '@/ui/Badge';
-import { 
-  Calendar, 
-  Clock, 
-  Car, 
-  MapPin, 
-  Thermometer, 
-  Droplets, 
-  Wind, 
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Group } from '@/ui/Group';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import {
+  Calendar,
+  Car,
+  CheckCircle,
+  Clock,
   Cloud,
-  X,
+  Droplets,
+  MapPin,
+  Thermometer,
   Trophy,
-  CheckCircle
+  Wind,
+  X
 } from 'lucide-react';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
 interface RaceDetailModalProps {
   race: {
@@ -55,7 +54,7 @@ export function RaceDetailModal({
   if (!isOpen) return null;
 
   const formatTime = (scheduledAt: string) => {
-    return DateDisplay.formatDateTime(scheduledAt);
+    return DateFormatter.formatDateTime(scheduledAt);
   };
 
   const getStatusBadge = (status: 'scheduled' | 'completed') => {