wip

apps/website/components/drivers/DriverProfile.tsx

@@ -7,16 +7,30 @@ import ProfileStats from './ProfileStats';
 import CareerHighlights from './CareerHighlights';
 import DriverRankings from './DriverRankings';
 import PerformanceMetrics from './PerformanceMetrics';
-import { getDriverTeam } from '@/lib/racingLegacyFacade';
-import { getDriverStats, getLeagueRankings } from '@/lib/di-container';
+import { useEffect, useState } from 'react';
+import { getDriverStats, getLeagueRankings, getGetDriverTeamQuery, getAllDriverRankings } from '@/lib/di-container';
+import type { GetDriverTeamQueryResultDTO } from '@gridpilot/racing/application/dto/TeamCommandAndQueryDTO';
 
 interface DriverProfileProps {
   driver: DriverDTO;
+  isOwnProfile?: boolean;
+  onEditClick?: () => void;
 }
-
-export default function DriverProfile({ driver }: DriverProfileProps) {
+ 
+export default function DriverProfile({ driver, isOwnProfile = false, onEditClick }: DriverProfileProps) {
   const driverStats = getDriverStats(driver.id);
   const leagueRank = getLeagueRankings(driver.id, 'league-1');
+  const allRankings = getAllDriverRankings();
+  const [teamData, setTeamData] = useState<GetDriverTeamQueryResultDTO | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      const query = getGetDriverTeamQuery();
+      const result = await query.execute({ driverId: driver.id });
+      setTeamData(result);
+    };
+    void load();
+  }, [driver.id]);
 
   const performanceStats = driverStats ? {
     winRate: (driverStats.wins / driverStats.totalRaces) * 100,
@@ -33,7 +47,7 @@ export default function DriverProfile({ driver }: DriverProfileProps) {
       type: 'overall' as const,
       name: 'Overall Ranking',
       rank: driverStats.overallRank,
-      totalDrivers: 850,
+      totalDrivers: allRankings.length,
       percentile: driverStats.percentile,
       rating: driverStats.rating,
     },
@@ -50,7 +64,15 @@ export default function DriverProfile({ driver }: DriverProfileProps) {
   return (
     <div className="space-y-6">
       <Card>
-        <ProfileHeader driver={driver} isOwnProfile={false} />
+        <ProfileHeader
+          driver={driver}
+          rating={driverStats?.rating ?? null}
+          rank={driverStats?.overallRank ?? null}
+          isOwnProfile={isOwnProfile}
+          onEditClick={isOwnProfile ? onEditClick : undefined}
+          teamName={teamData?.team.name ?? null}
+          teamTag={teamData?.team.tag ?? null}
+        />
       </Card>
 
       {driver.bio && (
@@ -82,46 +104,13 @@ export default function DriverProfile({ driver }: DriverProfileProps) {
 
       {!driverStats && (
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <Card className="lg:col-span-2">
+          <Card className="lg:col-span-3">
             <h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
-            <div className="grid grid-cols-2 gap-4">
-              <StatCard label="Rating" value="1450" color="text-primary-blue" />
-              <StatCard label="Total Races" value="147" color="text-white" />
-              <StatCard label="Wins" value="23" color="text-green-400" />
-              <StatCard label="Podiums" value="56" color="text-warning-amber" />
-            </div>
+            <p className="text-gray-400 text-sm">
+              No statistics available yet. Compete in races to start building your record.
+            </p>
           </Card>
-
-        <Card>
-          <h3 className="text-lg font-semibold text-white mb-4">Team</h3>
-          {(() => {
-            const teamData = getDriverTeam(driver.id);
-            
-            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">
-                  <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>
-                    <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-4 text-gray-400 text-sm">
-                Not on a team
-              </div>
-            );
-          })()}
-        </Card>
-      </div>
+        </div>
       )}
 
       <Card>