wip

apps/website/components/drivers/DriverCard.tsx

@@ -1,7 +1,7 @@
-import Image from 'next/image';
 import Card from '@/components/ui/Card';
 import RankBadge from '@/components/drivers/RankBadge';
-import { getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
+import DriverIdentity from '@/components/drivers/DriverIdentity';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 
 export interface DriverCardProps {
   id: string;
@@ -29,6 +29,14 @@ export default function DriverCard(props: DriverCardProps) {
     onClick,
   } = props;
 
+  const driver: DriverDTO = {
+    id,
+    iracingId: '',
+    name,
+    country: nationality,
+    joinedAt: '',
+  };
+
   return (
     <Card
       className="hover:border-charcoal-outline/60 transition-colors cursor-pointer"
@@ -38,22 +46,12 @@ export default function DriverCard(props: DriverCardProps) {
         <div className="flex items-center gap-4 flex-1">
           <RankBadge rank={rank} size="lg" />
 
-          <div className="w-16 h-16 rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center">
-            <Image
-              src={getDriverAvatarUrl(id)}
-              alt={name}
-              width={64}
-              height={64}
-              className="w-full h-full object-cover"
-            />
-          </div>
-
-          <div className="flex-1">
-            <h3 className="text-xl font-semibold text-white mb-1">{name}</h3>
-            <p className="text-sm text-gray-400">
-              {nationality} • {racesCompleted} races
-            </p>
-          </div>
+          <DriverIdentity
+            driver={driver}
+            href={`/drivers/${id}`}
+            meta={`${nationality} • ${racesCompleted} races`}
+            size="md"
+          />
         </div>
 
         <div className="flex items-center gap-8 text-center">

apps/website/components/drivers/DriverIdentity.tsx

@@ -0,0 +1,63 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { getImageService } from '@/lib/di-container';
+
+export interface DriverIdentityProps {
+  driver: DriverDTO;
+  href?: string;
+  contextLabel?: React.ReactNode;
+  meta?: React.ReactNode;
+  size?: 'sm' | 'md';
+}
+
+export default function DriverIdentity(props: DriverIdentityProps) {
+  const { driver, href, contextLabel, meta, size = 'md' } = props;
+
+  const avatarSize = size === 'sm' ? 40 : 48;
+  const nameTextClasses =
+    size === 'sm'
+      ? 'text-sm font-medium text-white'
+      : 'text-base md:text-lg font-semibold text-white';
+
+  const metaTextClasses = 'text-xs md:text-sm text-gray-400';
+
+  const content = (
+    <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
+      <div
+        className={`rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center shrink-0`}
+        style={{ width: avatarSize, height: avatarSize }}
+      >
+        <Image
+          src={getImageService().getDriverAvatar(driver.id)}
+          alt={driver.name}
+          width={avatarSize}
+          height={avatarSize}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className={`${nameTextClasses} truncate`}>{driver.name}</span>
+          {contextLabel ? (
+            <span className="inline-flex items-center rounded-full bg-charcoal-outline/60 px-2 py-0.5 text-[10px] md:text-xs font-medium text-gray-200">
+              {contextLabel}
+            </span>
+          ) : null}
+        </div>
+        {meta ? <div className={`${metaTextClasses} mt-0.5 truncate`}>{meta}</div> : null}
+      </div>
+    </div>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
+        {content}
+      </Link>
+    );
+  }
+
+  return <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">{content}</div>;
+}

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>

apps/website/components/drivers/ProfileStats.tsx

@@ -20,25 +20,28 @@ export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
   const driverStats = driverId ? getDriverStats(driverId) : null;
   const allRankings = getAllDriverRankings();
   const leagueRank = driverId ? getLeagueRankings(driverId, 'league-1') : null;
-  
-  const defaultStats = stats || (driverStats ? {
-    totalRaces: driverStats.totalRaces,
-    wins: driverStats.wins,
-    podiums: driverStats.podiums,
-    dnfs: driverStats.dnfs,
-    avgFinish: driverStats.avgFinish,
-    completionRate: ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) * 100
-  } : {
-    totalRaces: 147,
-    wins: 23,
-    podiums: 56,
-    dnfs: 12,
-    avgFinish: 5.8,
-    completionRate: 91.8
-  });
 
-  const winRate = ((defaultStats.wins / defaultStats.totalRaces) * 100).toFixed(1);
-  const podiumRate = ((defaultStats.podiums / defaultStats.totalRaces) * 100).toFixed(1);
+  const defaultStats = stats || (driverStats
+    ? {
+        totalRaces: driverStats.totalRaces,
+        wins: driverStats.wins,
+        podiums: driverStats.podiums,
+        dnfs: driverStats.dnfs,
+        avgFinish: driverStats.avgFinish,
+        completionRate:
+          ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) *
+          100,
+      }
+    : null);
+
+  const winRate =
+    defaultStats && defaultStats.totalRaces > 0
+      ? ((defaultStats.wins / defaultStats.totalRaces) * 100).toFixed(1)
+      : '0.0';
+  const podiumRate =
+    defaultStats && defaultStats.totalRaces > 0
+      ? ((defaultStats.podiums / defaultStats.totalRaces) * 100).toFixed(1)
+      : '0.0';
 
   const getTrendIndicator = (value: number) => {
     if (value > 0) return '↑';
@@ -131,41 +134,74 @@ export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
         </Card>
       )}
 
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        {[
-          { label: 'Total Races', value: defaultStats.totalRaces, color: 'text-primary-blue' },
-          { label: 'Wins', value: defaultStats.wins, color: 'text-green-400' },
-          { label: 'Podiums', value: defaultStats.podiums, color: 'text-warning-amber' },
-          { label: 'DNFs', value: defaultStats.dnfs, color: 'text-red-400' },
-          { label: 'Avg Finish', value: defaultStats.avgFinish.toFixed(1), color: 'text-white' },
-          { label: 'Completion', value: `${defaultStats.completionRate.toFixed(1)}%`, color: 'text-green-400' },
-          { label: 'Win Rate', value: `${winRate}%`, color: 'text-primary-blue' },
-          { label: 'Podium Rate', value: `${podiumRate}%`, color: 'text-warning-amber' }
-        ].map((stat, index) => (
-          <Card key={index} className="text-center">
-            <div className="text-sm text-gray-400 mb-1">{stat.label}</div>
-            <div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
-          </Card>
-        ))}
-      </div>
-
-      <Card>
-        <h3 className="text-lg font-semibold text-white mb-4">Performance by Car Class</h3>
-        <div className="space-y-3 text-sm">
-          <PerformanceRow label="GT3" races={45} wins={12} podiums={23} avgFinish={4.2} />
-          <PerformanceRow label="Formula" races={38} wins={7} podiums={15} avgFinish={6.1} />
-          <PerformanceRow label="LMP2" races={32} wins={4} podiums={11} avgFinish={7.3} />
-          <PerformanceRow label="Other" races={32} wins={0} podiums={7} avgFinish={8.5} />
-        </div>
-      </Card>
+      {defaultStats ? (
+        <>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              {
+                label: 'Total Races',
+                value: defaultStats.totalRaces,
+                color: 'text-primary-blue',
+              },
+              { label: 'Wins', value: defaultStats.wins, color: 'text-green-400' },
+              {
+                label: 'Podiums',
+                value: defaultStats.podiums,
+                color: 'text-warning-amber',
+              },
+              { label: 'DNFs', value: defaultStats.dnfs, color: 'text-red-400' },
+              {
+                label: 'Avg Finish',
+                value: defaultStats.avgFinish.toFixed(1),
+                color: 'text-white',
+              },
+              {
+                label: 'Completion',
+                value: `${defaultStats.completionRate.toFixed(1)}%`,
+                color: 'text-green-400',
+              },
+              { label: 'Win Rate', value: `${winRate}%`, color: 'text-primary-blue' },
+              {
+                label: 'Podium Rate',
+                value: `${podiumRate}%`,
+                color: 'text-warning-amber',
+              },
+            ].map((stat, index) => (
+              <Card key={index} className="text-center">
+                <div className="text-sm text-gray-400 mb-1">{stat.label}</div>
+                <div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
+              </Card>
+            ))}
+          </div>
+        </>
+      ) : (
+        <Card>
+          <h3 className="text-lg font-semibold text-white mb-2">Career Statistics</h3>
+          <p className="text-sm text-gray-400">
+            No statistics available yet. Compete in races to start building your record.
+          </p>
+        </Card>
+      )}
 
       <Card className="bg-charcoal-200/50 border-primary-blue/30">
         <div className="flex items-center gap-3 mb-3">
           <div className="text-2xl">📊</div>
+          <h3 className="text-lg font-semibold text-white">Performance by Car Class</h3>
+        </div>
+        <p className="text-gray-400 text-sm">
+          Detailed per-car and per-class performance breakdowns will be available in a future
+          version once more race history data is tracked.
+        </p>
+      </Card>
+
+      <Card className="bg-charcoal-200/50 border-primary-blue/30">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="text-2xl">📈</div>
           <h3 className="text-lg font-semibold text-white">Coming Soon</h3>
         </div>
         <p className="text-gray-400 text-sm">
-          Performance trends, track-specific stats, head-to-head comparisons vs friends, and league member comparisons will be available in production.
+          Performance trends, track-specific stats, head-to-head comparisons vs friends, and
+          league member comparisons will be available in production.
         </p>
       </Card>
     </div>