wip

apps/website/app/profile/leagues/page.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { getLeagueRepository, getLeagueMembershipRepository } from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import type { League } from '@gridpilot/racing/domain/entities/League';
+import type { LeagueMembership } from '@gridpilot/racing/domain/entities/LeagueMembership';
+
+interface LeagueWithRole {
+  league: League;
+  membership: LeagueMembership;
+}
+
+export default function ManageLeaguesPage() {
+  const [ownedLeagues, setOwnedLeagues] = useState<LeagueWithRole[]>([]);
+  const [memberLeagues, setMemberLeagues] = useState<LeagueWithRole[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const effectiveDriverId = useEffectiveDriverId();
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      try {
+        const leagueRepo = getLeagueRepository();
+        const membershipRepo = getLeagueMembershipRepository();
+
+        const leagues = await leagueRepo.findAll();
+
+        const memberships = await Promise.all(
+          leagues.map(async (league) => {
+            const membership = await membershipRepo.getMembership(league.id, effectiveDriverId);
+            return { league, membership };
+          }),
+        );
+
+        if (cancelled) {
+          return;
+        }
+
+        const owned: LeagueWithRole[] = [];
+        const member: LeagueWithRole[] = [];
+
+        for (const entry of memberships) {
+          if (!entry.membership || entry.membership.status !== 'active') {
+            continue;
+          }
+
+          if (entry.membership.role === 'owner') {
+            owned.push(entry as LeagueWithRole);
+          } else {
+            member.push(entry as LeagueWithRole);
+          }
+        }
+
+        setOwnedLeagues(owned);
+        setMemberLeagues(member);
+        setError(null);
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to load leagues');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [effectiveDriverId]);
+
+  if (loading) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center text-gray-400">Loading your leagues...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <Card>
+          <div className="text-center py-8 text-red-400">{error}</div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold text-white mb-2">Manage leagues</h1>
+        <p className="text-gray-400 text-sm">
+          View leagues you own and participate in, and jump into league admin tools.
+        </p>
+      </div>
+
+      <Card>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold text-white">Leagues you own</h2>
+          {ownedLeagues.length > 0 && (
+            <span className="text-xs text-gray-400">
+              {ownedLeagues.length} {ownedLeagues.length === 1 ? 'league' : 'leagues'}
+            </span>
+          )}
+        </div>
+
+        {ownedLeagues.length === 0 ? (
+          <p className="text-sm text-gray-400">
+            You don't own any leagues yet in this session.
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {ownedLeagues.map(({ league }) => (
+              <div
+                key={league.id}
+                className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
+              >
+                <div>
+                  <h3 className="text-white font-medium">{league.name}</h3>
+                  <p className="text-xs text-gray-400 mt-1 line-clamp-2">
+                    {league.description}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Link
+                    href={`/leagues/${league.id}`}
+                    className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
+                  >
+                    View
+                  </Link>
+                  <Link href={`/leagues/${league.id}?tab=admin`}>
+                    <Button variant="primary" className="text-xs px-3 py-1.5">
+                      Manage
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      <Card>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold text-white">Leagues you're in</h2>
+          {memberLeagues.length > 0 && (
+            <span className="text-xs text-gray-400">
+              {memberLeagues.length} {memberLeagues.length === 1 ? 'league' : 'leagues'}
+            </span>
+          )}
+        </div>
+
+        {memberLeagues.length === 0 ? (
+          <p className="text-sm text-gray-400">
+            You're not a member of any other leagues yet.
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {memberLeagues.map(({ league, membership }) => (
+              <div
+                key={league.id}
+                className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
+              >
+                <div>
+                  <h3 className="text-white font-medium">{league.name}</h3>
+                  <p className="text-xs text-gray-400 mt-1 line-clamp-2">
+                    {league.description}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Your role:{' '}
+                    {membership.role.charAt(0).toUpperCase() + membership.role.slice(1)}
+                  </p>
+                </div>
+                <Link
+                  href={`/leagues/${league.id}`}
+                  className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
+                >
+                  View league
+                </Link>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}

apps/website/app/profile/page.tsx

@@ -1,40 +1,34 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { getDriverRepository } from '@/lib/di-container';
 import { Driver } from '@gridpilot/racing/domain/entities/Driver';
 import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 import CreateDriverForm from '@/components/drivers/CreateDriverForm';
 import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import ProfileHeader from '@/components/profile/ProfileHeader';
-import ProfileStats from '@/components/drivers/ProfileStats';
+import DriverProfile from '@/components/drivers/DriverProfile';
 import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
 import ProfileSettings from '@/components/drivers/ProfileSettings';
-import CareerHighlights from '@/components/drivers/CareerHighlights';
-import RatingBreakdown from '@/components/drivers/RatingBreakdown';
-import { getDriverTeam, getCurrentDriverId } from '@/lib/racingLegacyFacade';
-
-type Tab = 'overview' | 'statistics' | 'history' | 'settings';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
 
 export default function ProfilePage() {
-  const router = useRouter();
   const [driver, setDriver] = useState<DriverDTO | null>(null);
-  const [activeTab, setActiveTab] = useState<Tab>('overview');
   const [loading, setLoading] = useState(true);
+ 
+  const effectiveDriverId = useEffectiveDriverId();
 
   useEffect(() => {
     const loadDriver = async () => {
       const driverRepo = getDriverRepository();
-      const drivers = await driverRepo.findAll();
-      const driverData = EntityMappers.toDriverDTO(drivers[0] || null);
+      const currentDriverId = effectiveDriverId;
+      const currentDriver = await driverRepo.findById(currentDriverId);
+      const driverData = EntityMappers.toDriverDTO(currentDriver);
       setDriver(driverData);
       setLoading(false);
     };
-    loadDriver();
-  }, []);
+    void loadDriver();
+  }, [effectiveDriverId]);
 
   const handleSaveSettings = async (updates: Partial<DriverDTO>) => {
     if (!driver) return;
@@ -86,162 +80,15 @@ export default function ProfilePage() {
     );
   }
 
-  const tabs: { id: Tab; label: string }[] = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'statistics', label: 'Statistics' },
-    { id: 'history', label: 'Race History' },
-    { id: 'settings', label: 'Settings' }
-  ];
-
   return (
-    <div className="max-w-6xl mx-auto">
-      <Card className="mb-6">
-        <ProfileHeader 
-          driver={driver} 
-          isOwnProfile 
-          onEditClick={() => setActiveTab('settings')}
-        />
+    <div className="max-w-6xl mx-auto space-y-6">
+      <DriverProfile driver={driver} isOwnProfile />
+      <Card>
+        <ProfileSettings driver={driver} onSave={handleSaveSettings} />
+      </Card>
+      <Card>
+        <ProfileRaceHistory />
       </Card>
-
-      <div className="mb-6">
-        <div className="flex items-center gap-2 border-b border-charcoal-outline">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`
-                px-4 py-3 font-medium transition-all relative
-                ${activeTab === tab.id 
-                  ? 'text-primary-blue' 
-                  : 'text-gray-400 hover:text-white'
-                }
-              `}
-            >
-              {tab.label}
-              {activeTab === tab.id && (
-                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
-              )}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        {activeTab === 'overview' && (
-          <div className="space-y-6">
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <Card className="lg:col-span-2">
-                <h3 className="text-lg font-semibold text-white mb-4">About</h3>
-                {driver.bio ? (
-                  <p className="text-gray-300 leading-relaxed">{driver.bio}</p>
-                ) : (
-                  <p className="text-gray-500 italic">No bio yet. Add one in settings!</p>
-                )}
-              </Card>
-
-              <Card>
-                <h3 className="text-lg font-semibold text-white mb-4">Quick Stats</h3>
-                <div className="space-y-3">
-                  <StatItem label="Rating" value="1450" color="text-primary-blue" />
-                  <StatItem label="Safety" value="92%" color="text-green-400" />
-                  <StatItem label="Sportsmanship" value="4.8/5" color="text-warning-amber" />
-                  <StatItem label="Total Races" value="147" color="text-white" />
-                </div>
-              </Card>
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              <Card>
-                <h3 className="text-lg font-semibold text-white mb-4">Preferences</h3>
-                <div className="space-y-3">
-                  <PreferenceItem icon="🏎️" label="Favorite Car" value="Porsche 911 GT3 R" />
-                  <PreferenceItem icon="🏁" label="Favorite Series" value="Endurance" />
-                  <PreferenceItem icon="⚔️" label="Competitive Level" value="Competitive" />
-                  <PreferenceItem icon="🌍" label="Regions" value="EU, NA" />
-                </div>
-              </Card>
-
-              <Card>
-                <h3 className="text-lg font-semibold text-white mb-4">Team</h3>
-                {(() => {
-                  const currentDriverId = getCurrentDriverId();
-                  const teamData = getDriverTeam(currentDriverId);
-                  
-                  if (teamData) {
-                    const { team, membership } = teamData;
-                    return (
-                      <div
-                        className="flex items-center gap-4 p-4 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-charcoal-outline/60 transition-colors cursor-pointer"
-                        onClick={() => router.push(`/teams/${team.id}`)}
-                      >
-                        <div className="w-12 h-12 rounded-lg bg-primary-blue/20 flex items-center justify-center text-xl font-bold text-white">
-                          {team.tag}
-                        </div>
-                        <div className="flex-1">
-                          <div className="text-white font-medium">{team.name}</div>
-                          <div className="text-sm text-gray-400">
-                            {membership.role.charAt(0).toUpperCase() + membership.role.slice(1)} • Joined {new Date(membership.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  }
-                  
-                  return (
-                    <div className="text-center py-8">
-                      <p className="text-gray-400 mb-4">You're not on a team yet</p>
-                      <Button
-                        variant="primary"
-                        onClick={() => router.push('/teams')}
-                      >
-                        Browse Teams
-                      </Button>
-                    </div>
-                  );
-                })()}
-              </Card>
-            </div>
-
-            <CareerHighlights />
-          </div>
-        )}
-
-        {activeTab === 'statistics' && (
-          <div className="space-y-6">
-            <ProfileStats driverId={driver.id} />
-            <RatingBreakdown />
-          </div>
-        )}
-
-        {activeTab === 'history' && (
-          <ProfileRaceHistory />
-        )}
-
-        {activeTab === 'settings' && (
-          <ProfileSettings driver={driver} onSave={handleSaveSettings} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function StatItem({ label, value, color }: { label: string; value: string; color: string }) {
-  return (
-    <div className="flex items-center justify-between">
-      <span className="text-gray-400 text-sm">{label}</span>
-      <span className={`font-semibold ${color}`}>{value}</span>
-    </div>
-  );
-}
-
-function PreferenceItem({ icon, label, value }: { icon: string; label: string; value: string }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="text-xl">{icon}</span>
-      <div className="flex-1">
-        <div className="text-xs text-gray-500">{label}</div>
-        <div className="text-white text-sm">{value}</div>
-      </div>
     </div>
   );
 }