wip

2025-12-03 16:33:12 +01:00
parent a572e6edce
commit c0fdae3d3c
157 changed files with 7824 additions and 1042 deletions
--- a/apps/website/app/profile/page.tsx
+++ b/apps/website/app/profile/page.tsx
@@ -1,43 +1,249 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 import { getDriverRepository } from '@/lib/di-container';
-import { EntityMappers } from '@/application/mappers/EntityMappers';
+import { Driver } from '@gridpilot/racing-domain/entities/Driver';
+import { EntityMappers, DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
 import CreateDriverForm from '@/components/alpha/CreateDriverForm';
-import DriverProfile from '@/components/alpha/DriverProfile';
 import Card from '@/components/ui/Card';
-import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
+import Button from '@/components/ui/Button';
+import DataWarning from '@/components/alpha/DataWarning';
+import ProfileHeader from '@/components/alpha/ProfileHeader';
+import ProfileStats from '@/components/alpha/ProfileStats';
+import ProfileRaceHistory from '@/components/alpha/ProfileRaceHistory';
+import ProfileSettings from '@/components/alpha/ProfileSettings';
+import CareerHighlights from '@/components/alpha/CareerHighlights';
+import RatingBreakdown from '@/components/alpha/RatingBreakdown';
+import { getDriverTeam, getCurrentDriverId } from '@/lib/team-data';

-export default async function ProfilePage() {
-  const driverRepo = getDriverRepository();
-  const drivers = await driverRepo.findAll();
-  const driver = EntityMappers.toDriverDTO(drivers[0] || null);
+type Tab = 'overview' | 'statistics' | 'history' | 'settings';

-  return (
-    <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-white mb-2">Driver Profile</h1>
-            <p className="text-gray-400">
-              {driver ? 'Your GridPilot profile' : 'Create your GridPilot profile to get started'}
+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);
+
+  useEffect(() => {
+    const loadDriver = async () => {
+      const driverRepo = getDriverRepository();
+      const drivers = await driverRepo.findAll();
+      const driverData = EntityMappers.toDriverDTO(drivers[0] || null);
+      setDriver(driverData);
+      setLoading(false);
+    };
+    loadDriver();
+  }, []);
+
+  const handleSaveSettings = async (updates: Partial<DriverDTO>) => {
+    if (!driver) return;
+    
+    const driverRepo = getDriverRepository();
+    const drivers = await driverRepo.findAll();
+    const currentDriver = drivers[0];
+    
+    if (currentDriver) {
+      const updatedDriver: Driver = currentDriver.update({
+        bio: updates.bio ?? currentDriver.bio,
+        country: updates.country ?? currentDriver.country,
+      });
+      const persistedDriver = await driverRepo.update(updatedDriver);
+      
+      const updatedDto = EntityMappers.toDriverDTO(persistedDriver);
+      setDriver(updatedDto);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center text-gray-400">Loading profile...</div>
+      </div>
+    );
+  }
+
+  if (!driver) {
+    return (
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-white mb-2">Driver Profile</h1>
+          <p className="text-gray-400">
+            Create your GridPilot profile to get started
+          </p>
+        </div>
+
+        <Card className="max-w-2xl mx-auto">
+          <div className="mb-6">
+            <h2 className="text-xl font-semibold text-white mb-2">Create Your Profile</h2>
+            <p className="text-gray-400 text-sm">
+              Create your driver profile. Alpha data resets on reload, so test freely.
            </p>
          </div>
+          <CreateDriverForm />
+        </Card>
+      </div>
+    );
+  }

-          {driver ? (
-            <>
-              <FeatureLimitationTooltip message="Profile editing coming in production">
-                <div className="opacity-75 pointer-events-none">
-                  <DriverProfile driver={driver} />
+  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">
+      <DataWarning className="mb-6" />
+
+      <Card className="mb-6">
+        <ProfileHeader 
+          driver={driver} 
+          isOwnProfile 
+          onEditClick={() => setActiveTab('settings')}
+        />
+      </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>
-              </FeatureLimitationTooltip>
-            </>
-          ) : (
-            <Card className="max-w-2xl mx-auto">
-              <div className="mb-6">
-                <h2 className="text-xl font-semibold text-white mb-2">Create Your Profile</h2>
-                <p className="text-gray-400 text-sm">
-                  Create your driver profile. Alpha data resets on reload, so test freely.
-                </p>
-              </div>
-              <CreateDriverForm />
-            </Card>
-          )}
+              </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>
  );
 }