wip

apps/website/components/leagues/CreateLeagueForm.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import { League } from '@gridpilot/racing/domain/entities/League';
+import { getLeagueRepository, getDriverRepository } from '../../lib/di-container';
+
+interface FormErrors {
+  name?: string;
+  description?: string;
+  pointsSystem?: string;
+  sessionDuration?: string;
+  submit?: string;
+}
+
+export default function CreateLeagueForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<FormErrors>({});
+  
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    pointsSystem: 'f1-2024' as 'f1-2024' | 'indycar',
+    sessionDuration: 60
+  });
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    } else if (formData.name.length > 100) {
+      newErrors.name = 'Name must be 100 characters or less';
+    }
+    
+    if (!formData.description.trim()) {
+      newErrors.description = 'Description is required';
+    } else if (formData.description.length > 500) {
+      newErrors.description = 'Description must be 500 characters or less';
+    }
+    
+    if (formData.sessionDuration < 1 || formData.sessionDuration > 240) {
+      newErrors.sessionDuration = 'Session duration must be between 1 and 240 minutes';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    
+    if (loading) return;
+    
+    if (!validateForm()) return;
+    
+    setLoading(true);
+    
+    try {
+      const driverRepo = getDriverRepository();
+      const drivers = await driverRepo.findAll();
+      const currentDriver = drivers[0];
+      
+      if (!currentDriver) {
+        setErrors({ submit: 'No driver profile found. Please create a profile first.' });
+        setLoading(false);
+        return;
+      }
+      
+      const leagueRepo = getLeagueRepository();
+      
+      const league = League.create({
+        id: crypto.randomUUID(),
+        name: formData.name.trim(),
+        description: formData.description.trim(),
+        ownerId: currentDriver.id,
+        settings: {
+          pointsSystem: formData.pointsSystem,
+          sessionDuration: formData.sessionDuration,
+          qualifyingFormat: 'open',
+        },
+      });
+      
+      await leagueRepo.create(league);
+      router.push(`/leagues/${league.id}`);
+      router.refresh();
+    } catch (error) {
+      setErrors({
+        submit: error instanceof Error ? error.message : 'Failed to create league'
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div>
+        <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
+          League Name *
+        </label>
+        <Input
+          id="name"
+          type="text"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          error={!!errors.name}
+          errorMessage={errors.name}
+          placeholder="European GT Championship"
+          maxLength={100}
+          disabled={loading}
+        />
+        <p className="mt-1 text-xs text-gray-500 text-right">
+          {formData.name.length}/100
+        </p>
+      </div>
+
+      <div>
+        <label htmlFor="description" className="block text-sm font-medium text-gray-300 mb-2">
+          Description *
+        </label>
+        <textarea
+          id="description"
+          value={formData.description}
+          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          placeholder="Weekly GT3 racing with professional drivers"
+          maxLength={500}
+          rows={4}
+          disabled={loading}
+          className="block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6 resize-none"
+        />
+        <p className="mt-1 text-xs text-gray-500 text-right">
+          {formData.description.length}/500
+        </p>
+        {errors.description && (
+          <p className="mt-2 text-sm text-warning-amber">{errors.description}</p>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="pointsSystem" className="block text-sm font-medium text-gray-300 mb-2">
+          Points System *
+        </label>
+        <select
+          id="pointsSystem"
+          value={formData.pointsSystem}
+          onChange={(e) => setFormData({ ...formData, pointsSystem: e.target.value as 'f1-2024' | 'indycar' })}
+          disabled={loading}
+          className="block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6"
+        >
+          <option value="f1-2024">F1 2024</option>
+          <option value="indycar">IndyCar</option>
+        </select>
+      </div>
+
+      <div>
+        <label htmlFor="sessionDuration" className="block text-sm font-medium text-gray-300 mb-2">
+          Session Duration (minutes) *
+        </label>
+        <Input
+          id="sessionDuration"
+          type="number"
+          value={formData.sessionDuration}
+          onChange={(e) => setFormData({ ...formData, sessionDuration: parseInt(e.target.value) || 60 })}
+          error={!!errors.sessionDuration}
+          errorMessage={errors.sessionDuration}
+          min={1}
+          max={240}
+          disabled={loading}
+        />
+      </div>
+
+      {errors.submit && (
+        <div className="rounded-md bg-warning-amber/10 p-4 border border-warning-amber/20">
+          <p className="text-sm text-warning-amber">{errors.submit}</p>
+        </div>
+      )}
+
+      <Button
+        type="submit"
+        variant="primary"
+        disabled={loading}
+        className="w-full"
+      >
+        {loading ? 'Creating League...' : 'Create League'}
+        </Button>
+      </form>
+    </>
+  );
+}

apps/website/components/leagues/JoinLeagueButton.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState } from 'react';
+import Button from '../ui/Button';
+import {
+  getMembership,
+  joinLeague,
+  leaveLeague,
+  requestToJoin,
+  getCurrentDriverId,
+  type MembershipStatus,
+} from '@gridpilot/racing/application';
+
+interface JoinLeagueButtonProps {
+  leagueId: string;
+  isInviteOnly?: boolean;
+  onMembershipChange?: () => void;
+}
+
+export default function JoinLeagueButton({
+  leagueId,
+  isInviteOnly = false,
+  onMembershipChange,
+}: JoinLeagueButtonProps) {
+  const currentDriverId = getCurrentDriverId();
+  const membership = getMembership(leagueId, currentDriverId);
+  
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [dialogAction, setDialogAction] = useState<'join' | 'leave' | 'request'>('join');
+
+  const handleJoin = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (isInviteOnly) {
+        requestToJoin(leagueId, currentDriverId);
+      } else {
+        joinLeague(leagueId, currentDriverId);
+      }
+      onMembershipChange?.();
+      setShowConfirmDialog(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to join league');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLeave = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      leaveLeague(leagueId, currentDriverId);
+      onMembershipChange?.();
+      setShowConfirmDialog(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to leave league');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const openDialog = (action: 'join' | 'leave' | 'request') => {
+    setDialogAction(action);
+    setShowConfirmDialog(true);
+    setError(null);
+  };
+
+  const closeDialog = () => {
+    setShowConfirmDialog(false);
+    setError(null);
+  };
+
+  const getButtonText = (): string => {
+    if (!membership) {
+      return isInviteOnly ? 'Request to Join' : 'Join League';
+    }
+    if (membership.role === 'owner') {
+      return 'League Owner';
+    }
+    return 'Leave League';
+  };
+
+  const getButtonVariant = (): 'primary' | 'secondary' | 'danger' => {
+    if (!membership) return 'primary';
+    if (membership.role === 'owner') return 'secondary';
+    return 'danger';
+  };
+
+  const isDisabled = membership?.role === 'owner' || loading;
+
+  return (
+    <>
+      <Button
+        variant={getButtonVariant()}
+        onClick={() => {
+          if (membership) {
+            openDialog('leave');
+          } else {
+            openDialog(isInviteOnly ? 'request' : 'join');
+          }
+        }}
+        disabled={isDisabled}
+        className="w-full"
+      >
+        {loading ? 'Processing...' : getButtonText()}
+      </Button>
+
+      {error && (
+        <p className="mt-2 text-sm text-red-400">{error}</p>
+      )}
+
+      {/* Confirmation Dialog */}
+      {showConfirmDialog && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-iron-gray border border-charcoal-outline rounded-lg max-w-md w-full p-6">
+            <h3 className="text-xl font-semibold text-white mb-4">
+              {dialogAction === 'leave' ? 'Leave League' : dialogAction === 'request' ? 'Request to Join' : 'Join League'}
+            </h3>
+            
+            <p className="text-gray-400 mb-6">
+              {dialogAction === 'leave' 
+                ? 'Are you sure you want to leave this league? You can rejoin later.'
+                : dialogAction === 'request'
+                ? 'Your join request will be sent to the league admins for approval.'
+                : 'Are you sure you want to join this league?'}
+            </p>
+
+            {error && (
+              <div className="mb-4 p-3 rounded bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              <Button
+                variant={dialogAction === 'leave' ? 'danger' : 'primary'}
+                onClick={dialogAction === 'leave' ? handleLeave : handleJoin}
+                disabled={loading}
+                className="flex-1"
+              >
+                {loading ? 'Processing...' : 'Confirm'}
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={closeDialog}
+                disabled={loading}
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

apps/website/components/leagues/LeagueAdmin.tsx

@@ -0,0 +1,306 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Button from '../ui/Button';
+import Card from '../ui/Card';
+import LeagueMembers from './LeagueMembers';
+import { League } from '@gridpilot/racing/domain/entities/League';
+import {
+  getJoinRequests,
+  approveJoinRequest,
+  rejectJoinRequest,
+  removeMember,
+  updateMemberRole,
+  getCurrentDriverId,
+  type JoinRequest,
+  type MembershipRole,
+} from '@gridpilot/racing/application';
+import { getDriverRepository } from '@/lib/di-container';
+import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+
+interface LeagueAdminProps {
+  league: League;
+  onLeagueUpdate?: () => void;
+}
+
+export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps) {
+  const router = useRouter();
+  const currentDriverId = getCurrentDriverId();
+  const [joinRequests, setJoinRequests] = useState<JoinRequest[]>([]);
+  const [requestDrivers, setRequestDrivers] = useState<Driver[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings'>('members');
+
+  useEffect(() => {
+    loadJoinRequests();
+  }, [league.id]);
+
+  const loadJoinRequests = async () => {
+    setLoading(true);
+    try {
+      const requests = getJoinRequests(league.id);
+      setJoinRequests(requests);
+
+      const driverRepo = getDriverRepository();
+      const drivers = await Promise.all(
+        requests.map(r => driverRepo.findById(r.driverId))
+      );
+      setRequestDrivers(drivers.filter((d): d is Driver => d !== null));
+    } catch (err) {
+      console.error('Failed to load join requests:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleApproveRequest = (requestId: string) => {
+    try {
+      approveJoinRequest(requestId);
+      loadJoinRequests();
+      onLeagueUpdate?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to approve request');
+    }
+  };
+
+  const handleRejectRequest = (requestId: string) => {
+    try {
+      rejectJoinRequest(requestId);
+      loadJoinRequests();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reject request');
+    }
+  };
+
+  const handleRemoveMember = (driverId: string) => {
+    if (!confirm('Are you sure you want to remove this member?')) {
+      return;
+    }
+
+    try {
+      removeMember(league.id, driverId, currentDriverId);
+      onLeagueUpdate?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to remove member');
+    }
+  };
+
+  const handleUpdateRole = (driverId: string, newRole: MembershipRole) => {
+    try {
+      updateMemberRole(league.id, driverId, newRole, currentDriverId);
+      onLeagueUpdate?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update role');
+    }
+  };
+
+  const getDriverName = (driverId: string): string => {
+    const driver = requestDrivers.find(d => d.id === driverId);
+    return driver?.name || 'Unknown Driver';
+  };
+
+  return (
+    <div>
+      {error && (
+        <div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400">
+          {error}
+          <button
+            onClick={() => setError(null)}
+            className="ml-4 text-sm underline hover:no-underline"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Admin Tabs */}
+      <div className="mb-6 border-b border-charcoal-outline">
+        <div className="flex gap-4">
+          <button
+            onClick={() => setActiveTab('members')}
+            className={`pb-3 px-1 font-medium transition-colors ${
+              activeTab === 'members'
+                ? 'text-primary-blue border-b-2 border-primary-blue'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            Manage Members
+          </button>
+          <button
+            onClick={() => setActiveTab('requests')}
+            className={`pb-3 px-1 font-medium transition-colors flex items-center gap-2 ${
+              activeTab === 'requests'
+                ? 'text-primary-blue border-b-2 border-primary-blue'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            Join Requests
+            {joinRequests.length > 0 && (
+              <span className="px-2 py-0.5 text-xs bg-primary-blue text-white rounded-full">
+                {joinRequests.length}
+              </span>
+            )}
+          </button>
+          <button
+            onClick={() => setActiveTab('races')}
+            className={`pb-3 px-1 font-medium transition-colors ${
+              activeTab === 'races'
+                ? 'text-primary-blue border-b-2 border-primary-blue'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            Create Race
+          </button>
+          <button
+            onClick={() => setActiveTab('settings')}
+            className={`pb-3 px-1 font-medium transition-colors ${
+              activeTab === 'settings'
+                ? 'text-primary-blue border-b-2 border-primary-blue'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            Settings
+          </button>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'members' && (
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">Manage Members</h2>
+          <LeagueMembers
+            leagueId={league.id}
+            onRemoveMember={handleRemoveMember}
+            onUpdateRole={handleUpdateRole}
+            showActions={true}
+          />
+        </Card>
+      )}
+
+      {activeTab === 'requests' && (
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">Join Requests</h2>
+          
+          {loading ? (
+            <div className="text-center py-8 text-gray-400">Loading requests...</div>
+          ) : joinRequests.length === 0 ? (
+            <div className="text-center py-8 text-gray-400">
+              No pending join requests
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {joinRequests.map((request) => (
+                <div
+                  key={request.id}
+                  className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1">
+                      <h3 className="text-white font-medium">
+                        {getDriverName(request.driverId)}
+                      </h3>
+                      <p className="text-sm text-gray-400 mt-1">
+                        Requested {new Date(request.requestedAt).toLocaleDateString('en-US', {
+                          month: 'short',
+                          day: 'numeric',
+                          year: 'numeric',
+                        })}
+                      </p>
+                      {request.message && (
+                        <p className="text-sm text-gray-400 mt-2 italic">
+                          &ldquo;{request.message}&rdquo;
+                        </p>
+                      )}
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        variant="primary"
+                        onClick={() => handleApproveRequest(request.id)}
+                        className="px-4"
+                      >
+                        Approve
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        onClick={() => handleRejectRequest(request.id)}
+                        className="px-4"
+                      >
+                        Reject
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </Card>
+      )}
+
+      {activeTab === 'races' && (
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">Create New Race</h2>
+          <p className="text-gray-400 mb-4">
+            Schedule a new race for this league
+          </p>
+          <Button
+            variant="primary"
+            onClick={() => router.push(`/races?leagueId=${league.id}`)}
+          >
+            Go to Race Scheduler
+          </Button>
+        </Card>
+      )}
+
+      {activeTab === 'settings' && (
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">League Settings</h2>
+          
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                League Name
+              </label>
+              <p className="text-white">{league.name}</p>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Description
+              </label>
+              <p className="text-white">{league.description}</p>
+            </div>
+
+            <div className="pt-4 border-t border-charcoal-outline">
+              <h3 className="text-white font-medium mb-3">Racing Settings</h3>
+              
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm text-gray-500">Points System</label>
+                  <p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
+                </div>
+
+                <div>
+                  <label className="text-sm text-gray-500">Session Duration</label>
+                  <p className="text-white">{league.settings.sessionDuration} minutes</p>
+                </div>
+
+                <div>
+                  <label className="text-sm text-gray-500">Qualifying Format</label>
+                  <p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-charcoal-outline">
+              <p className="text-sm text-gray-400">
+                League settings editing will be available in a future update
+              </p>
+            </div>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}

apps/website/components/leagues/LeagueCard.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { League } from '@gridpilot/racing/domain/entities/League';
+import Card from '../ui/Card';
+
+interface LeagueCardProps {
+  league: League;
+  onClick?: () => void;
+}
+
+export default function LeagueCard({ league, onClick }: LeagueCardProps) {
+  return (
+    <div
+      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
+      onClick={onClick}
+    >
+      <Card>
+      <div className="space-y-3">
+        <div className="flex items-start justify-between">
+          <h3 className="text-xl font-semibold text-white">{league.name}</h3>
+          <span className="text-xs text-gray-500">
+            {new Date(league.createdAt).toLocaleDateString()}
+          </span>
+        </div>
+        
+        <p className="text-gray-400 text-sm line-clamp-2">
+          {league.description}
+        </p>
+        
+        <div className="flex items-center justify-between pt-2 border-t border-charcoal-outline">
+          <div className="text-xs text-gray-500">
+            Owner ID: {league.ownerId.slice(0, 8)}...
+          </div>
+          <div className="text-xs text-primary-blue font-medium">
+            {league.settings.pointsSystem.toUpperCase()}
+          </div>
+        </div>
+      </div>
+      </Card>
+    </div>
+  );
+}

apps/website/components/leagues/LeagueMembers.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import { getDriverRepository, getDriverStats } from '@/lib/di-container';
+import {
+  getLeagueMembers,
+  getCurrentDriverId,
+  type LeagueMembership,
+  type MembershipRole,
+} from '@gridpilot/racing/application';
+
+interface LeagueMembersProps {
+  leagueId: string;
+  onRemoveMember?: (driverId: string) => void;
+  onUpdateRole?: (driverId: string, role: MembershipRole) => void;
+  showActions?: boolean;
+}
+
+export default function LeagueMembers({ 
+  leagueId, 
+  onRemoveMember, 
+  onUpdateRole,
+  showActions = false 
+}: LeagueMembersProps) {
+  const [members, setMembers] = useState<LeagueMembership[]>([]);
+  const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [sortBy, setSortBy] = useState<'role' | 'name' | 'date' | 'rating' | 'points' | 'wins'>('rating');
+  const currentDriverId = getCurrentDriverId();
+
+  useEffect(() => {
+    loadMembers();
+  }, [leagueId]);
+
+  const loadMembers = async () => {
+    setLoading(true);
+    try {
+      const membershipData = getLeagueMembers(leagueId);
+      setMembers(membershipData);
+
+      const driverRepo = getDriverRepository();
+      const driverData = await Promise.all(
+        membershipData.map(m => driverRepo.findById(m.driverId))
+      );
+      setDrivers(driverData.filter((d): d is Driver => d !== null));
+    } catch (error) {
+      console.error('Failed to load members:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getDriverName = (driverId: string): string => {
+    const driver = drivers.find(d => d.id === driverId);
+    return driver?.name || 'Unknown Driver';
+  };
+
+  const getRoleOrder = (role: MembershipRole): number => {
+    const order = { owner: 0, admin: 1, steward: 2, member: 3 };
+    return order[role];
+  };
+
+  const sortedMembers = [...members].sort((a, b) => {
+    switch (sortBy) {
+      case 'role':
+        return getRoleOrder(a.role) - getRoleOrder(b.role);
+      case 'name':
+        return getDriverName(a.driverId).localeCompare(getDriverName(b.driverId));
+      case 'date':
+        return new Date(b.joinedAt).getTime() - new Date(a.joinedAt).getTime();
+      case 'rating': {
+        const statsA = getDriverStats(a.driverId);
+        const statsB = getDriverStats(b.driverId);
+        return (statsB?.rating || 0) - (statsA?.rating || 0);
+      }
+      case 'points':
+        return 0;
+      case 'wins': {
+        const statsA = getDriverStats(a.driverId);
+        const statsB = getDriverStats(b.driverId);
+        return (statsB?.wins || 0) - (statsA?.wins || 0);
+      }
+      default:
+        return 0;
+    }
+  });
+
+  const getRoleBadgeColor = (role: MembershipRole): string => {
+    switch (role) {
+      case 'owner':
+        return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/30';
+      case 'admin':
+        return 'bg-purple-500/10 text-purple-400 border-purple-500/30';
+      case 'steward':
+        return 'bg-blue-500/10 text-blue-400 border-blue-500/30';
+      case 'member':
+        return 'bg-primary-blue/10 text-primary-blue border-primary-blue/30';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center py-8 text-gray-400">
+        Loading members...
+      </div>
+    );
+  }
+
+  if (members.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-400">
+        No members found
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Sort Controls */}
+      <div className="mb-4 flex items-center justify-between">
+        <p className="text-sm text-gray-400">
+          {members.length} {members.length === 1 ? 'member' : 'members'}
+        </p>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-400">Sort by:</label>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as any)}
+            className="px-3 py-1 bg-deep-graphite border border-charcoal-outline rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
+          >
+            <option value="rating">Rating</option>
+            <option value="points">Points</option>
+            <option value="wins">Wins</option>
+            <option value="role">Role</option>
+            <option value="name">Name</option>
+            <option value="date">Join Date</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Members Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-charcoal-outline">
+              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
+              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Rating</th>
+              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Rank</th>
+              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Wins</th>
+              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Role</th>
+              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Joined</th>
+              {showActions && <th className="text-right py-3 px-4 text-sm font-semibold text-gray-400">Actions</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedMembers.map((member, index) => {
+              const isCurrentUser = member.driverId === currentDriverId;
+              const cannotModify = member.role === 'owner';
+              const driverStats = getDriverStats(member.driverId);
+              const isTopPerformer = index < 3 && sortBy === 'rating';
+
+              return (
+                <tr
+                  key={member.driverId}
+                  className={`border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors ${isTopPerformer ? 'bg-primary-blue/5' : ''}`}
+                >
+                  <td className="py-3 px-4">
+                    <div className="flex items-center gap-2">
+                      <span className="text-white font-medium">
+                        {getDriverName(member.driverId)}
+                      </span>
+                      {isCurrentUser && (
+                        <span className="text-xs text-gray-500">(You)</span>
+                      )}
+                      {isTopPerformer && (
+                        <span className="text-xs">⭐</span>
+                      )}
+                    </div>
+                  </td>
+                  <td className="py-3 px-4">
+                    <span className="text-primary-blue font-medium">
+                      {driverStats?.rating || '—'}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4">
+                    <span className="text-gray-300">
+                      #{driverStats?.overallRank || '—'}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4">
+                    <span className="text-green-400 font-medium">
+                      {driverStats?.wins || 0}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4">
+                    <span className={`px-2 py-1 text-xs font-medium rounded border ${getRoleBadgeColor(member.role)}`}>
+                      {member.role.charAt(0).toUpperCase() + member.role.slice(1)}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4">
+                    <span className="text-white text-sm">
+                      {new Date(member.joinedAt).toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      })}
+                    </span>
+                  </td>
+                  {showActions && (
+                    <td className="py-3 px-4 text-right">
+                      {!cannotModify && !isCurrentUser && (
+                        <div className="flex items-center justify-end gap-2">
+                          {onUpdateRole && (
+                            <select
+                              value={member.role}
+                              onChange={(e) => onUpdateRole(member.driverId, e.target.value as MembershipRole)}
+                              className="px-2 py-1 bg-deep-graphite border border-charcoal-outline rounded text-white text-xs focus:outline-none focus:ring-2 focus:ring-primary-blue"
+                            >
+                              <option value="member">Member</option>
+                              <option value="steward">Steward</option>
+                              <option value="admin">Admin</option>
+                            </select>
+                          )}
+                          {onRemoveMember && (
+                            <button
+                              onClick={() => onRemoveMember(member.driverId)}
+                              className="px-2 py-1 text-xs font-medium text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded transition-colors"
+                            >
+                              Remove
+                            </button>
+                          )}
+                        </div>
+                      )}
+                      {cannotModify && (
+                        <span className="text-xs text-gray-500">—</span>
+                      )}
+                    </td>
+                  )}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

apps/website/components/leagues/LeagueSchedule.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Race } from '@gridpilot/racing/domain/entities/Race';
+import { getRaceRepository } from '@/lib/di-container';
+import {
+  getCurrentDriverId,
+  isRegistered,
+  registerForRace,
+  withdrawFromRace,
+} from '@gridpilot/racing/application';
+
+interface LeagueScheduleProps {
+  leagueId: string;
+}
+
+export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
+  const router = useRouter();
+  const [races, setRaces] = useState<Race[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');
+  const [registrationStates, setRegistrationStates] = useState<Record<string, boolean>>({});
+  const [processingRace, setProcessingRace] = useState<string | null>(null);
+
+  const currentDriverId = getCurrentDriverId();
+
+  useEffect(() => {
+    loadRaces();
+  }, [leagueId]);
+
+  const loadRaces = async () => {
+    setLoading(true);
+    try {
+      const raceRepo = getRaceRepository();
+      const allRaces = await raceRepo.findAll();
+      const leagueRaces = allRaces
+        .filter(race => race.leagueId === leagueId)
+        .sort((a, b) => new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime());
+      setRaces(leagueRaces);
+
+      // Load registration states
+      const states: Record<string, boolean> = {};
+      leagueRaces.forEach(race => {
+        states[race.id] = isRegistered(race.id, currentDriverId);
+      });
+      setRegistrationStates(states);
+    } catch (error) {
+      console.error('Failed to load races:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRegister = async (race: Race, e: React.MouseEvent) => {
+    e.stopPropagation();
+    
+    const confirmed = window.confirm(
+      `Register for ${race.track}?`
+    );
+
+    if (!confirmed) return;
+
+    setProcessingRace(race.id);
+    try {
+      registerForRace(race.id, currentDriverId, leagueId);
+      setRegistrationStates(prev => ({ ...prev, [race.id]: true }));
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to register');
+    } finally {
+      setProcessingRace(null);
+    }
+  };
+
+  const handleWithdraw = async (race: Race, e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    const confirmed = window.confirm(
+      'Withdraw from this race?'
+    );
+
+    if (!confirmed) return;
+
+    setProcessingRace(race.id);
+    try {
+      withdrawFromRace(race.id, currentDriverId);
+      setRegistrationStates(prev => ({ ...prev, [race.id]: false }));
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to withdraw');
+    } finally {
+      setProcessingRace(null);
+    }
+  };
+
+  const now = new Date();
+  const upcomingRaces = races.filter(race => race.status === 'scheduled' && new Date(race.scheduledAt) > now);
+  const pastRaces = races.filter(race => race.status === 'completed' || new Date(race.scheduledAt) <= now);
+
+  const getDisplayRaces = () => {
+    switch (filter) {
+      case 'upcoming':
+        return upcomingRaces;
+      case 'past':
+        return pastRaces.reverse();
+      case 'all':
+        return [...upcomingRaces, ...pastRaces.reverse()];
+      default:
+        return races;
+    }
+  };
+
+  const displayRaces = getDisplayRaces();
+
+  if (loading) {
+    return (
+      <div className="text-center py-8 text-gray-400">
+        Loading schedule...
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Filter Controls */}
+      <div className="mb-4 flex items-center justify-between">
+        <p className="text-sm text-gray-400">
+          {displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
+        </p>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setFilter('upcoming')}
+            className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
+              filter === 'upcoming'
+                ? 'bg-primary-blue text-white'
+                : 'bg-iron-gray text-gray-400 hover:text-white'
+            }`}
+          >
+            Upcoming ({upcomingRaces.length})
+          </button>
+          <button
+            onClick={() => setFilter('past')}
+            className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
+              filter === 'past'
+                ? 'bg-primary-blue text-white'
+                : 'bg-iron-gray text-gray-400 hover:text-white'
+            }`}
+          >
+            Past ({pastRaces.length})
+          </button>
+          <button
+            onClick={() => setFilter('all')}
+            className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
+              filter === 'all'
+                ? 'bg-primary-blue text-white'
+                : 'bg-iron-gray text-gray-400 hover:text-white'
+            }`}
+          >
+            All ({races.length})
+          </button>
+        </div>
+      </div>
+
+      {/* Race List */}
+      {displayRaces.length === 0 ? (
+        <div className="text-center py-8 text-gray-400">
+          <p className="mb-2">No {filter} races</p>
+          {filter === 'upcoming' && (
+            <p className="text-sm text-gray-500">Schedule your first race to get started</p>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {displayRaces.map((race) => {
+            const isPast = race.status === 'completed' || new Date(race.scheduledAt) <= now;
+            const isUpcoming = race.status === 'scheduled' && new Date(race.scheduledAt) > now;
+
+            return (
+              <div
+                key={race.id}
+                className={`p-4 rounded-lg border transition-all duration-200 cursor-pointer hover:scale-[1.02] ${
+                  isPast
+                    ? 'bg-iron-gray/50 border-charcoal-outline/50 opacity-75'
+                    : 'bg-deep-graphite border-charcoal-outline hover:border-primary-blue'
+                }`}
+                onClick={() => router.push(`/races/${race.id}`)}
+              >
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-1 flex-wrap">
+                      <h3 className="text-white font-medium">{race.track}</h3>
+                      {isUpcoming && !registrationStates[race.id] && (
+                        <span className="px-2 py-0.5 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
+                          Upcoming
+                        </span>
+                      )}
+                      {isUpcoming && registrationStates[race.id] && (
+                        <span className="px-2 py-0.5 text-xs font-medium bg-green-500/10 text-green-400 rounded border border-green-500/30">
+                          ✓ Registered
+                        </span>
+                      )}
+                      {isPast && (
+                        <span className="px-2 py-0.5 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50">
+                          Completed
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-400">{race.car}</p>
+                    <div className="flex items-center gap-3 mt-2">
+                      <p className="text-xs text-gray-500 uppercase">{race.sessionType}</p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center gap-3">
+                    <div className="text-right">
+                    <p className="text-white font-medium">
+                      {new Date(race.scheduledAt).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                      })}
+                    </p>
+                    <p className="text-sm text-gray-400">
+                      {new Date(race.scheduledAt).toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                      })}
+                    </p>
+                      {isPast && race.status === 'completed' && (
+                        <p className="text-xs text-primary-blue mt-1">View Results →</p>
+                      )}
+                    </div>
+
+                    {/* Registration Actions */}
+                    {isUpcoming && (
+                      <div onClick={(e) => e.stopPropagation()}>
+                        {!registrationStates[race.id] ? (
+                          <button
+                            onClick={(e) => handleRegister(race, e)}
+                            disabled={processingRace === race.id}
+                            className="px-3 py-1.5 text-sm font-medium bg-primary-blue hover:bg-primary-blue/80 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+                          >
+                            {processingRace === race.id ? 'Registering...' : 'Register'}
+                          </button>
+                        ) : (
+                          <button
+                            onClick={(e) => handleWithdraw(race, e)}
+                            disabled={processingRace === race.id}
+                            className="px-3 py-1.5 text-sm font-medium bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+                          >
+                            {processingRace === race.id ? 'Withdrawing...' : 'Withdraw'}
+                          </button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/components/leagues/MembershipStatus.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { getMembership, getCurrentDriverId, type MembershipRole } from '@gridpilot/racing/application';
+
+interface MembershipStatusProps {
+  leagueId: string;
+  className?: string;
+}
+
+export default function MembershipStatus({ leagueId, className = '' }: MembershipStatusProps) {
+  const currentDriverId = getCurrentDriverId();
+  const membership = getMembership(leagueId, currentDriverId);
+
+  if (!membership) {
+    return (
+      <span className={`px-3 py-1 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50 ${className}`}>
+        Not a Member
+      </span>
+    );
+  }
+
+  const getRoleDisplay = (role: MembershipRole): { text: string; bgColor: string; textColor: string; borderColor: string } => {
+    switch (role) {
+      case 'owner':
+        return {
+          text: 'Owner',
+          bgColor: 'bg-yellow-500/10',
+          textColor: 'text-yellow-500',
+          borderColor: 'border-yellow-500/30',
+        };
+      case 'admin':
+        return {
+          text: 'Admin',
+          bgColor: 'bg-purple-500/10',
+          textColor: 'text-purple-400',
+          borderColor: 'border-purple-500/30',
+        };
+      case 'steward':
+        return {
+          text: 'Steward',
+          bgColor: 'bg-blue-500/10',
+          textColor: 'text-blue-400',
+          borderColor: 'border-blue-500/30',
+        };
+      case 'member':
+        return {
+          text: 'Member',
+          bgColor: 'bg-primary-blue/10',
+          textColor: 'text-primary-blue',
+          borderColor: 'border-primary-blue/30',
+        };
+    }
+  };
+
+  const { text, bgColor, textColor, borderColor } = getRoleDisplay(membership.role);
+
+  return (
+    <span className={`px-3 py-1 text-xs font-medium ${bgColor} ${textColor} rounded border ${borderColor} ${className}`}>
+      {text}
+    </span>
+  );
+}

apps/website/components/leagues/ScheduleRaceForm.tsx

@@ -0,0 +1,311 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Button from '../ui/Button';
+import Input from '../ui/Input';
+import { Race } from '@gridpilot/racing/domain/entities/Race';
+import { League } from '@gridpilot/racing/domain/entities/League';
+import { SessionType } from '@gridpilot/racing/domain/entities/Race';
+import { getRaceRepository, getLeagueRepository } from '../../lib/di-container';
+import { InMemoryRaceRepository } from '@gridpilot/racing/infrastructure/repositories/InMemoryRaceRepository';
+
+interface ScheduleRaceFormProps {
+  preSelectedLeagueId?: string;
+  onSuccess?: (race: Race) => void;
+  onCancel?: () => void;
+}
+
+export default function ScheduleRaceForm({ 
+  preSelectedLeagueId, 
+  onSuccess,
+  onCancel 
+}: ScheduleRaceFormProps) {
+  const router = useRouter();
+  const [leagues, setLeagues] = useState<League[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [formData, setFormData] = useState({
+    leagueId: preSelectedLeagueId || '',
+    track: '',
+    car: '',
+    sessionType: 'race' as SessionType,
+    scheduledDate: '',
+    scheduledTime: '',
+  });
+
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    const loadLeagues = async () => {
+      const leagueRepo = getLeagueRepository();
+      const allLeagues = await leagueRepo.findAll();
+      setLeagues(allLeagues);
+    };
+    loadLeagues();
+  }, []);
+
+  const validateForm = (): boolean => {
+    const errors: Record<string, string> = {};
+
+    if (!formData.leagueId) {
+      errors.leagueId = 'League is required';
+    }
+
+    if (!formData.track.trim()) {
+      errors.track = 'Track is required';
+    }
+
+    if (!formData.car.trim()) {
+      errors.car = 'Car is required';
+    }
+
+    if (!formData.scheduledDate) {
+      errors.scheduledDate = 'Date is required';
+    }
+
+    if (!formData.scheduledTime) {
+      errors.scheduledTime = 'Time is required';
+    }
+
+    // Validate future date
+    if (formData.scheduledDate && formData.scheduledTime) {
+      const scheduledDateTime = new Date(`${formData.scheduledDate}T${formData.scheduledTime}`);
+      const now = new Date();
+      
+      if (scheduledDateTime <= now) {
+        errors.scheduledDate = 'Date must be in the future';
+      }
+    }
+
+    setValidationErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const raceRepo = getRaceRepository();
+      const scheduledAt = new Date(`${formData.scheduledDate}T${formData.scheduledTime}`);
+
+      const race = Race.create({
+        id: InMemoryRaceRepository.generateId(),
+        leagueId: formData.leagueId,
+        track: formData.track.trim(),
+        car: formData.car.trim(),
+        sessionType: formData.sessionType,
+        scheduledAt,
+        status: 'scheduled',
+      });
+
+      const createdRace = await raceRepo.create(race);
+
+      if (onSuccess) {
+        onSuccess(createdRace);
+      } else {
+        router.push(`/races/${createdRace.id}`);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create race');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    // Clear validation error for this field
+    if (validationErrors[field]) {
+      setValidationErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[field];
+        return newErrors;
+      });
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {error && (
+        <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Companion App Notice */}
+      <div className="p-4 rounded-lg bg-iron-gray border border-charcoal-outline">
+        <div className="flex items-start gap-3">
+          <div className="flex items-center gap-2 flex-1">
+            <input
+              type="checkbox"
+              disabled
+              className="w-4 h-4 rounded border-charcoal-outline bg-deep-graphite text-primary-blue opacity-50 cursor-not-allowed"
+            />
+            <label className="text-sm text-gray-400">
+              Use Companion App
+            </label>
+            <button
+              type="button"
+              className="text-gray-500 hover:text-gray-400 transition-colors"
+              title="Companion automation available in production. For alpha, races are created manually."
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 mt-2 ml-6">
+          Companion automation available in production. For alpha, races are created manually.
+        </p>
+      </div>
+
+      {/* League Selection */}
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          League *
+        </label>
+        <select
+          value={formData.leagueId}
+          onChange={(e) => handleChange('leagueId', e.target.value)}
+          disabled={!!preSelectedLeagueId}
+          className={`
+            w-full px-4 py-2 bg-deep-graphite border rounded-lg text-white
+            focus:outline-none focus:ring-2 focus:ring-primary-blue
+            disabled:opacity-50 disabled:cursor-not-allowed
+            ${validationErrors.leagueId ? 'border-red-500' : 'border-charcoal-outline'}
+          `}
+        >
+          <option value="">Select a league</option>
+          {leagues.map(league => (
+            <option key={league.id} value={league.id}>
+              {league.name}
+            </option>
+          ))}
+        </select>
+        {validationErrors.leagueId && (
+          <p className="mt-1 text-sm text-red-400">{validationErrors.leagueId}</p>
+        )}
+      </div>
+
+      {/* Track */}
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Track *
+        </label>
+        <Input
+          type="text"
+          value={formData.track}
+          onChange={(e) => handleChange('track', e.target.value)}
+          placeholder="e.g., Spa-Francorchamps"
+          className={validationErrors.track ? 'border-red-500' : ''}
+        />
+        {validationErrors.track && (
+          <p className="mt-1 text-sm text-red-400">{validationErrors.track}</p>
+        )}
+        <p className="mt-1 text-xs text-gray-500">Enter the iRacing track name</p>
+      </div>
+
+      {/* Car */}
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Car *
+        </label>
+        <Input
+          type="text"
+          value={formData.car}
+          onChange={(e) => handleChange('car', e.target.value)}
+          placeholder="e.g., Porsche 911 GT3 R"
+          className={validationErrors.car ? 'border-red-500' : ''}
+        />
+        {validationErrors.car && (
+          <p className="mt-1 text-sm text-red-400">{validationErrors.car}</p>
+        )}
+        <p className="mt-1 text-xs text-gray-500">Enter the iRacing car name</p>
+      </div>
+
+      {/* Session Type */}
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Session Type *
+        </label>
+        <select
+          value={formData.sessionType}
+          onChange={(e) => handleChange('sessionType', e.target.value)}
+          className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue"
+        >
+          <option value="practice">Practice</option>
+          <option value="qualifying">Qualifying</option>
+          <option value="race">Race</option>
+        </select>
+      </div>
+
+      {/* Date and Time */}
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-2">
+            Date *
+          </label>
+          <Input
+            type="date"
+            value={formData.scheduledDate}
+            onChange={(e) => handleChange('scheduledDate', e.target.value)}
+            className={validationErrors.scheduledDate ? 'border-red-500' : ''}
+          />
+          {validationErrors.scheduledDate && (
+            <p className="mt-1 text-sm text-red-400">{validationErrors.scheduledDate}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-2">
+            Time *
+          </label>
+          <Input
+            type="time"
+            value={formData.scheduledTime}
+            onChange={(e) => handleChange('scheduledTime', e.target.value)}
+            className={validationErrors.scheduledTime ? 'border-red-500' : ''}
+          />
+          {validationErrors.scheduledTime && (
+            <p className="mt-1 text-sm text-red-400">{validationErrors.scheduledTime}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-3">
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={loading}
+          className="flex-1"
+        >
+          {loading ? 'Creating...' : 'Schedule Race'}
+        </Button>
+        
+        {onCancel && (
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={onCancel}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+        )}
+        </div>
+      </form>
+    </>
+  );
+}

apps/website/components/leagues/StandingsTable.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { Standing } from '@gridpilot/racing/domain/entities/Standing';
+import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+
+interface StandingsTableProps {
+  standings: Standing[];
+  drivers: Driver[];
+}
+
+export default function StandingsTable({ standings, drivers }: StandingsTableProps) {
+  const getDriverName = (driverId: string): string => {
+    const driver = drivers.find(d => d.id === driverId);
+    return driver?.name || 'Unknown Driver';
+  };
+
+  if (standings.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-400">
+        No standings available
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b border-charcoal-outline">
+            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Pos</th>
+            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
+            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
+            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Wins</th>
+            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Races</th>
+          </tr>
+        </thead>
+        <tbody>
+          {standings.map((standing) => {
+            const isLeader = standing.position === 1;
+            
+            return (
+              <tr 
+                key={`${standing.leagueId}-${standing.driverId}`}
+                className="border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors"
+              >
+                <td className="py-3 px-4">
+                  <span className={`font-semibold ${isLeader ? 'text-yellow-500' : 'text-white'}`}>
+                    {standing.position}
+                  </span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className={isLeader ? 'text-white font-semibold' : 'text-white'}>
+                    {getDriverName(standing.driverId)}
+                  </span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white font-medium">{standing.points}</span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white">{standing.wins}</span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white">{standing.racesCompleted}</span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}