wip
This commit is contained in:
@@ -9,9 +9,8 @@ export default function AlphaFooter() {
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<span className="px-2 py-1 bg-warning-amber/10 text-warning-amber rounded border border-warning-amber/20 font-medium">
|
||||
Alpha v0.1
|
||||
Alpha
|
||||
</span>
|
||||
<span>In-memory prototype</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
@@ -29,12 +28,6 @@ export default function AlphaFooter() {
|
||||
>
|
||||
Roadmap
|
||||
</a>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-gray-400 hover:text-primary-blue transition-colors"
|
||||
>
|
||||
← Back to Landing
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const navLinks = [
|
||||
{ href: '/', label: 'Dashboard' },
|
||||
type AlphaNavProps = {
|
||||
isAuthenticated?: boolean;
|
||||
};
|
||||
|
||||
const nonHomeLinks = [
|
||||
{ href: '/profile', label: 'Profile' },
|
||||
{ href: '/leagues', label: 'Leagues' },
|
||||
{ href: '/teams', label: 'Teams' },
|
||||
{ href: '/drivers', label: 'Drivers' },
|
||||
{ href: '/social', label: 'Social' },
|
||||
] as const;
|
||||
|
||||
export function AlphaNav() {
|
||||
export function AlphaNav({ isAuthenticated }: AlphaNavProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
const navLinks = isAuthenticated
|
||||
? ([{ href: '/dashboard', label: 'Dashboard' } as const, ...nonHomeLinks] as const)
|
||||
: ([{ href: '/', label: 'Home' } as const, ...nonHomeLinks] as const);
|
||||
|
||||
const loginHref = '/auth/iracing/start?returnTo=/dashboard';
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-40 bg-deep-graphite/95 backdrop-blur-md border-b border-white/5">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="flex items-center justify-between h-14">
|
||||
<div className="flex items-baseline space-x-3">
|
||||
<Link href="/" className="text-xl font-semibold text-white hover:text-primary-blue transition-colors">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xl font-semibold text-white hover:text-primary-blue transition-colors"
|
||||
>
|
||||
GridPilot
|
||||
</Link>
|
||||
<span className="text-xs text-gray-500 font-light">ALPHA</span>
|
||||
@@ -35,9 +47,10 @@ export function AlphaNav() {
|
||||
href={link.href}
|
||||
className={`
|
||||
relative px-4 py-2 text-sm font-medium transition-all duration-200
|
||||
${isActive
|
||||
? 'text-primary-blue'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
${
|
||||
isActive
|
||||
? 'text-primary-blue'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}
|
||||
`}
|
||||
>
|
||||
@@ -50,9 +63,29 @@ export function AlphaNav() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-3">
|
||||
{!isAuthenticated && (
|
||||
<Link
|
||||
href={loginHref}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 rounded-md bg-primary-blue text-xs font-medium text-white hover:bg-primary-blue/90 transition-colors"
|
||||
>
|
||||
Authenticate with iRacing
|
||||
</Link>
|
||||
)}
|
||||
{isAuthenticated && (
|
||||
<form action="/auth/logout" method="POST">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 rounded-md border border-gray-600 text-xs font-medium text-gray-200 hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="md:hidden w-8" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export interface BreadcrumbItem {
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
interface BreadcrumbsProps {
|
||||
items: BreadcrumbItem[];
|
||||
}
|
||||
|
||||
export default function Breadcrumbs({ items }: BreadcrumbsProps) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<nav className="flex items-center gap-2 text-sm mb-6">
|
||||
{items.map((item, index) => {
|
||||
const isLast = index === items.length - 1;
|
||||
|
||||
return (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
{item.href && !isLast ? (
|
||||
<button
|
||||
onClick={() => router.push(item.href!)}
|
||||
className="text-gray-400 hover:text-primary-blue transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
) : (
|
||||
<span className={isLast ? 'text-white font-medium' : 'text-gray-400'}>
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!isLast && (
|
||||
<svg
|
||||
className="w-4 h-4 text-gray-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
|
||||
interface Achievement {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
unlockedAt: string;
|
||||
rarity: 'common' | 'rare' | 'epic' | 'legendary';
|
||||
}
|
||||
|
||||
const mockAchievements: Achievement[] = [
|
||||
{ id: '1', title: 'First Victory', description: 'Won your first race', icon: '🏆', unlockedAt: '2024-03-15', rarity: 'common' },
|
||||
{ id: '2', title: '10 Podiums', description: 'Achieved 10 podium finishes', icon: '🥈', unlockedAt: '2024-05-22', rarity: 'rare' },
|
||||
{ id: '3', title: 'Clean Racer', description: 'Completed 25 races with 0 incidents', icon: '✨', unlockedAt: '2024-08-10', rarity: 'epic' },
|
||||
{ id: '4', title: 'Comeback King', description: 'Won a race after starting P10 or lower', icon: '⚡', unlockedAt: '2024-09-03', rarity: 'rare' },
|
||||
{ id: '5', title: 'Perfect Weekend', description: 'Pole, fastest lap, and win in same race', icon: '💎', unlockedAt: '2024-10-17', rarity: 'legendary' },
|
||||
{ id: '6', title: 'Century Club', description: 'Completed 100 races', icon: '💯', unlockedAt: '2024-11-01', rarity: 'epic' },
|
||||
];
|
||||
|
||||
const rarityColors = {
|
||||
common: 'border-gray-500 bg-gray-500/10',
|
||||
rare: 'border-blue-400 bg-blue-400/10',
|
||||
epic: 'border-purple-400 bg-purple-400/10',
|
||||
legendary: 'border-warning-amber bg-warning-amber/10'
|
||||
};
|
||||
|
||||
export default function CareerHighlights() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Key Milestones</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<MilestoneItem
|
||||
label="First Race"
|
||||
value="March 15, 2024"
|
||||
icon="🏁"
|
||||
/>
|
||||
<MilestoneItem
|
||||
label="First Win"
|
||||
value="March 15, 2024 (Imola)"
|
||||
icon="🏆"
|
||||
/>
|
||||
<MilestoneItem
|
||||
label="Highest Rating"
|
||||
value="1487 (Nov 2024)"
|
||||
icon="📈"
|
||||
/>
|
||||
<MilestoneItem
|
||||
label="Longest Win Streak"
|
||||
value="4 races (Oct 2024)"
|
||||
icon="🔥"
|
||||
/>
|
||||
<MilestoneItem
|
||||
label="Most Wins (Track)"
|
||||
value="Spa-Francorchamps (7)"
|
||||
icon="🗺️"
|
||||
/>
|
||||
<MilestoneItem
|
||||
label="Favorite Car"
|
||||
value="Porsche 911 GT3 R (45 races)"
|
||||
icon="🏎️"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Achievements</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{mockAchievements.map((achievement) => (
|
||||
<div
|
||||
key={achievement.id}
|
||||
className={`p-4 rounded-lg border ${rarityColors[achievement.rarity]}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-3xl">{achievement.icon}</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium mb-1">{achievement.title}</div>
|
||||
<div className="text-xs text-gray-400 mb-2">{achievement.description}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{new Date(achievement.unlockedAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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">Next Goals</h3>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm text-gray-400">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>Win 25 races</span>
|
||||
<span className="text-primary-blue">23/25</span>
|
||||
</div>
|
||||
<div className="w-full bg-deep-graphite rounded-full h-2">
|
||||
<div className="bg-primary-blue rounded-full h-2" style={{ width: '92%' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MilestoneItem({ label, value, icon }: { label: string; value: string; icon: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 rounded bg-deep-graphite border border-charcoal-outline">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xl">{icon}</span>
|
||||
<span className="text-gray-400 text-sm">{label}</span>
|
||||
</div>
|
||||
<span className="text-white text-sm font-medium">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState } from 'react';
|
||||
import Card from '../ui/Card';
|
||||
import Button from '../ui/Button';
|
||||
import { Race } from '@gridpilot/racing-domain/entities/Race';
|
||||
import { Race } from '@gridpilot/racing/domain/entities/Race';
|
||||
|
||||
interface CompanionInstructionsProps {
|
||||
race: Race;
|
||||
|
||||
@@ -1,187 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, FormEvent } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Input from '../ui/Input';
|
||||
import Button from '../ui/Button';
|
||||
import DataWarning from './DataWarning';
|
||||
import { Driver } from '@gridpilot/racing-domain/entities/Driver';
|
||||
import { getDriverRepository } from '../../lib/di-container';
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
iracingId?: string;
|
||||
country?: string;
|
||||
bio?: string;
|
||||
submit?: string;
|
||||
}
|
||||
|
||||
export default function CreateDriverForm() {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
iracingId: '',
|
||||
country: '',
|
||||
bio: ''
|
||||
});
|
||||
|
||||
const validateForm = async (): Promise<boolean> => {
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = 'Name is required';
|
||||
}
|
||||
|
||||
if (!formData.iracingId.trim()) {
|
||||
newErrors.iracingId = 'iRacing ID is required';
|
||||
} else {
|
||||
const driverRepo = getDriverRepository();
|
||||
const exists = await driverRepo.existsByIRacingId(formData.iracingId);
|
||||
if (exists) {
|
||||
newErrors.iracingId = 'This iRacing ID is already registered';
|
||||
}
|
||||
}
|
||||
|
||||
if (!formData.country.trim()) {
|
||||
newErrors.country = 'Country is required';
|
||||
} else if (!/^[A-Z]{2,3}$/i.test(formData.country)) {
|
||||
newErrors.country = 'Invalid country code (use 2-3 letter ISO code)';
|
||||
}
|
||||
|
||||
if (formData.bio && formData.bio.length > 500) {
|
||||
newErrors.bio = 'Bio must be 500 characters or less';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (loading) return;
|
||||
|
||||
const isValid = await validateForm();
|
||||
if (!isValid) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const driverRepo = getDriverRepository();
|
||||
|
||||
const driver = Driver.create({
|
||||
id: crypto.randomUUID(),
|
||||
iracingId: formData.iracingId.trim(),
|
||||
name: formData.name.trim(),
|
||||
country: formData.country.trim().toUpperCase(),
|
||||
bio: formData.bio.trim() || undefined,
|
||||
});
|
||||
|
||||
await driverRepo.create(driver);
|
||||
router.push('/profile');
|
||||
router.refresh();
|
||||
} catch (error) {
|
||||
setErrors({
|
||||
submit: error instanceof Error ? error.message : 'Failed to create profile'
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataWarning />
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Driver 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="Max Verstappen"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="iracingId" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
iRacing ID *
|
||||
</label>
|
||||
<Input
|
||||
id="iracingId"
|
||||
type="text"
|
||||
value={formData.iracingId}
|
||||
onChange={(e) => setFormData({ ...formData, iracingId: e.target.value })}
|
||||
error={!!errors.iracingId}
|
||||
errorMessage={errors.iracingId}
|
||||
placeholder="123456"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="country" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Country Code *
|
||||
</label>
|
||||
<Input
|
||||
id="country"
|
||||
type="text"
|
||||
value={formData.country}
|
||||
onChange={(e) => setFormData({ ...formData, country: e.target.value })}
|
||||
error={!!errors.country}
|
||||
errorMessage={errors.country}
|
||||
placeholder="NL"
|
||||
maxLength={3}
|
||||
disabled={loading}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">Use ISO 3166-1 alpha-2 or alpha-3 code</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="bio" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Bio (Optional)
|
||||
</label>
|
||||
<textarea
|
||||
id="bio"
|
||||
value={formData.bio}
|
||||
onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
|
||||
placeholder="Tell us about yourself..."
|
||||
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.bio.length}/500
|
||||
</p>
|
||||
{errors.bio && (
|
||||
<p className="mt-2 text-sm text-warning-amber">{errors.bio}</p>
|
||||
)}
|
||||
</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 Profile...' : 'Create Profile'}
|
||||
</Button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, FormEvent } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Input from '../ui/Input';
|
||||
import Button from '../ui/Button';
|
||||
import DataWarning from './DataWarning';
|
||||
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 (
|
||||
<>
|
||||
<DataWarning />
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import { createTeam, getCurrentDriverId } from '@/lib/team-data';
|
||||
|
||||
interface CreateTeamFormProps {
|
||||
onCancel?: () => void;
|
||||
onSuccess?: (teamId: string) => void;
|
||||
}
|
||||
|
||||
export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormProps) {
|
||||
const router = useRouter();
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
tag: '',
|
||||
description: '',
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = 'Team name is required';
|
||||
} else if (formData.name.length < 3) {
|
||||
newErrors.name = 'Team name must be at least 3 characters';
|
||||
}
|
||||
|
||||
if (!formData.tag.trim()) {
|
||||
newErrors.tag = 'Team tag is required';
|
||||
} else if (formData.tag.length > 4) {
|
||||
newErrors.tag = 'Team tag must be 4 characters or less';
|
||||
}
|
||||
|
||||
if (!formData.description.trim()) {
|
||||
newErrors.description = 'Description is required';
|
||||
} else if (formData.description.length < 10) {
|
||||
newErrors.description = 'Description must be at least 10 characters';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const currentDriverId = getCurrentDriverId();
|
||||
const team = createTeam(
|
||||
formData.name,
|
||||
formData.tag.toUpperCase(),
|
||||
formData.description,
|
||||
currentDriverId,
|
||||
[] // Empty leagues array for now
|
||||
);
|
||||
|
||||
if (onSuccess) {
|
||||
onSuccess(team.id);
|
||||
} else {
|
||||
router.push(`/teams/${team.id}`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to create team');
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Team Name *
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Enter team name..."
|
||||
disabled={submitting}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-danger-red text-xs mt-1">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Team Tag *
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.tag}
|
||||
onChange={(e) => setFormData({ ...formData, tag: e.target.value.toUpperCase() })}
|
||||
placeholder="e.g., APEX"
|
||||
maxLength={4}
|
||||
disabled={submitting}
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Max 4 characters</p>
|
||||
{errors.tag && (
|
||||
<p className="text-danger-red text-xs mt-1">{errors.tag}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Description *
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm resize-none"
|
||||
rows={4}
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="Describe your team's goals and racing style..."
|
||||
disabled={submitting}
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="text-danger-red text-xs mt-1">{errors.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-2xl">ℹ️</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-white font-medium mb-1">About Team Creation</h4>
|
||||
<ul className="text-sm text-gray-400 space-y-1">
|
||||
<li>• You will be assigned as the team owner</li>
|
||||
<li>• You can invite other drivers to join your team</li>
|
||||
<li>• Team standings are calculated across leagues</li>
|
||||
<li>• This is alpha data - it resets on page reload</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={submitting}
|
||||
className="flex-1"
|
||||
>
|
||||
{submitting ? 'Creating Team...' : 'Create Team'}
|
||||
</Button>
|
||||
{onCancel && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={onCancel}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface DataWarningProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function DataWarning({ className }: DataWarningProps) {
|
||||
const [isDismissed, setIsDismissed] = useState(false);
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
const dismissed = sessionStorage.getItem('data-warning-dismissed');
|
||||
if (dismissed === 'true') {
|
||||
setIsDismissed(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDismiss = () => {
|
||||
sessionStorage.setItem('data-warning-dismissed', 'true');
|
||||
setIsDismissed(true);
|
||||
};
|
||||
|
||||
if (!isMounted) return null;
|
||||
if (isDismissed) return null;
|
||||
|
||||
return (
|
||||
<div className={`${className ?? 'mb-6'} bg-iron-gray border border-charcoal-outline rounded-lg p-4`}>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-primary-blue/10 flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-5 h-5 text-primary-blue" 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>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-300">
|
||||
Your data will be lost when you refresh the page. Alpha uses in-memory storage only.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="text-gray-400 hover:text-white transition-colors p-1 flex-shrink-0"
|
||||
aria-label="Dismiss warning"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
|
||||
interface DriverCardProps {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar?: string;
|
||||
rating: number;
|
||||
skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
|
||||
nationality?: string;
|
||||
racesCompleted: number;
|
||||
wins: number;
|
||||
isActive?: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function DriverCard({
|
||||
id,
|
||||
name,
|
||||
avatar,
|
||||
rating,
|
||||
skillLevel,
|
||||
nationality,
|
||||
racesCompleted,
|
||||
wins,
|
||||
isActive = true,
|
||||
onClick,
|
||||
}: DriverCardProps) {
|
||||
const skillBadgeColors = {
|
||||
beginner: 'bg-green-500/20 text-green-400',
|
||||
intermediate: 'bg-blue-500/20 text-blue-400',
|
||||
advanced: 'bg-purple-500/20 text-purple-400',
|
||||
pro: 'bg-red-500/20 text-red-400',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
|
||||
onClick={onClick}
|
||||
>
|
||||
<Card>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 bg-charcoal-outline rounded-full flex items-center justify-center flex-shrink-0">
|
||||
{avatar ? (
|
||||
<img
|
||||
src={avatar}
|
||||
alt={name}
|
||||
className="w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-gray-500">
|
||||
{name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isActive && (
|
||||
<div className="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-iron-gray rounded-full" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-white truncate">
|
||||
{name}
|
||||
</h3>
|
||||
{nationality && (
|
||||
<p className="text-sm text-gray-400">{nationality}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="text-2xl font-bold text-white">{rating}</div>
|
||||
<div className="text-xs text-gray-400">Rating</div>
|
||||
</div>
|
||||
<div className="flex-1 text-center">
|
||||
<div className="text-2xl font-bold text-white">{wins}</div>
|
||||
<div className="text-xs text-gray-400">Wins</div>
|
||||
</div>
|
||||
<div className="flex-1 text-right">
|
||||
<div className="text-2xl font-bold text-white">{racesCompleted}</div>
|
||||
<div className="text-xs text-gray-400">Races</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
|
||||
skillBadgeColors[skillLevel]
|
||||
}`}
|
||||
>
|
||||
{skillLevel.charAt(0).toUpperCase() + skillLevel.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
|
||||
import Card from '../ui/Card';
|
||||
import ProfileHeader from './ProfileHeader';
|
||||
import ProfileStats from './ProfileStats';
|
||||
import CareerHighlights from './CareerHighlights';
|
||||
import DriverRankings from './DriverRankings';
|
||||
import PerformanceMetrics from './PerformanceMetrics';
|
||||
import { getDriverTeam } from '@/lib/team-data';
|
||||
import { getDriverStats, getLeagueRankings } from '@/lib/di-container';
|
||||
|
||||
interface DriverProfileProps {
|
||||
driver: DriverDTO;
|
||||
}
|
||||
|
||||
export default function DriverProfile({ driver }: DriverProfileProps) {
|
||||
const driverStats = getDriverStats(driver.id);
|
||||
const leagueRank = getLeagueRankings(driver.id, 'league-1');
|
||||
|
||||
const performanceStats = driverStats ? {
|
||||
winRate: (driverStats.wins / driverStats.totalRaces) * 100,
|
||||
podiumRate: (driverStats.podiums / driverStats.totalRaces) * 100,
|
||||
dnfRate: (driverStats.dnfs / driverStats.totalRaces) * 100,
|
||||
avgFinish: driverStats.avgFinish,
|
||||
consistency: driverStats.consistency,
|
||||
bestFinish: driverStats.bestFinish,
|
||||
worstFinish: driverStats.worstFinish,
|
||||
} : null;
|
||||
|
||||
const rankings = driverStats ? [
|
||||
{
|
||||
type: 'overall' as const,
|
||||
name: 'Overall Ranking',
|
||||
rank: driverStats.overallRank,
|
||||
totalDrivers: 850,
|
||||
percentile: driverStats.percentile,
|
||||
rating: driverStats.rating,
|
||||
},
|
||||
{
|
||||
type: 'league' as const,
|
||||
name: 'European GT Championship',
|
||||
rank: leagueRank.rank,
|
||||
totalDrivers: leagueRank.totalDrivers,
|
||||
percentile: leagueRank.percentile,
|
||||
rating: driverStats.rating,
|
||||
},
|
||||
] : [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<ProfileHeader driver={driver} isOwnProfile={false} />
|
||||
</Card>
|
||||
|
||||
{driver.bio && (
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">About</h3>
|
||||
<p className="text-gray-300 leading-relaxed">{driver.bio}</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{driverStats && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Card>
|
||||
<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={driverStats.rating.toString()} color="text-primary-blue" />
|
||||
<StatCard label="Total Races" value={driverStats.totalRaces.toString()} color="text-white" />
|
||||
<StatCard label="Wins" value={driverStats.wins.toString()} color="text-green-400" />
|
||||
<StatCard label="Podiums" value={driverStats.podiums.toString()} color="text-warning-amber" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{performanceStats && <PerformanceMetrics stats={performanceStats} />}
|
||||
</div>
|
||||
|
||||
<DriverRankings rankings={rankings} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!driverStats && (
|
||||
<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">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>
|
||||
</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>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Performance by Class</h3>
|
||||
<ProfileStats 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
|
||||
} : undefined} />
|
||||
</Card>
|
||||
|
||||
<CareerHighlights />
|
||||
|
||||
<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">Private Information</h3>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">
|
||||
Detailed race history, settings, and preferences are only visible to the driver.
|
||||
</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">
|
||||
Per-car statistics, per-track performance, and head-to-head comparisons will be available in production.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ label, value, color }: { label: string; value: string; color: string }) {
|
||||
return (
|
||||
<div className="text-center p-4 rounded bg-deep-graphite border border-charcoal-outline">
|
||||
<div className="text-sm text-gray-400 mb-1">{label}</div>
|
||||
<div className={`text-2xl font-bold ${color}`}>{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
import RankBadge from './RankBadge';
|
||||
|
||||
interface RankingData {
|
||||
type: 'overall' | 'league' | 'class';
|
||||
name: string;
|
||||
rank: number;
|
||||
totalDrivers: number;
|
||||
percentile: number;
|
||||
rating: number;
|
||||
}
|
||||
|
||||
interface DriverRankingsProps {
|
||||
rankings: RankingData[];
|
||||
}
|
||||
|
||||
export default function DriverRankings({ rankings }: DriverRankingsProps) {
|
||||
const getPercentileColor = (percentile: number) => {
|
||||
if (percentile >= 90) return 'text-green-400';
|
||||
if (percentile >= 75) return 'text-primary-blue';
|
||||
if (percentile >= 50) return 'text-warning-amber';
|
||||
return 'text-gray-400';
|
||||
};
|
||||
|
||||
const getPercentileLabel = (percentile: number) => {
|
||||
if (percentile >= 90) return 'Top 10%';
|
||||
if (percentile >= 75) return 'Top 25%';
|
||||
if (percentile >= 50) return 'Top 50%';
|
||||
return `${(100 - percentile).toFixed(0)}th percentile`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-white mb-6">Rankings</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{rankings.map((ranking, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<RankBadge rank={ranking.rank} size="md" />
|
||||
<div>
|
||||
<div className="text-white font-medium">{ranking.name}</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{ranking.rank} of {ranking.totalDrivers} drivers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold text-primary-blue">{ranking.rating}</div>
|
||||
<div className="text-xs text-gray-400">Rating</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">Percentile</span>
|
||||
<span className={`font-medium ${getPercentileColor(ranking.percentile)}`}>
|
||||
{getPercentileLabel(ranking.percentile)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{rankings.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No ranking data available yet.
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,196 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Button from '../ui/Button';
|
||||
import DataWarning from './DataWarning';
|
||||
import { Result } from '@gridpilot/racing-domain/entities/Result';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
interface ImportResultsFormProps {
|
||||
raceId: string;
|
||||
onSuccess: (results: Result[]) => void;
|
||||
onError: (error: string) => void;
|
||||
}
|
||||
|
||||
interface CSVRow {
|
||||
driverId: string;
|
||||
position: number;
|
||||
fastestLap: number;
|
||||
incidents: number;
|
||||
startPosition: number;
|
||||
}
|
||||
|
||||
export default function ImportResultsForm({ raceId, onSuccess, onError }: ImportResultsFormProps) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const parseCSV = (content: string): CSVRow[] => {
|
||||
const lines = content.trim().split('\n');
|
||||
|
||||
if (lines.length < 2) {
|
||||
throw new Error('CSV file is empty or invalid');
|
||||
}
|
||||
|
||||
// Parse header
|
||||
const header = lines[0].toLowerCase().split(',').map(h => h.trim());
|
||||
const requiredFields = ['driverid', 'position', 'fastestlap', 'incidents', 'startposition'];
|
||||
|
||||
for (const field of requiredFields) {
|
||||
if (!header.includes(field)) {
|
||||
throw new Error(`Missing required field: ${field}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Parse rows
|
||||
const rows: CSVRow[] = [];
|
||||
for (let i = 1; i < lines.length; i++) {
|
||||
const values = lines[i].split(',').map(v => v.trim());
|
||||
|
||||
if (values.length !== header.length) {
|
||||
throw new Error(`Invalid row ${i}: expected ${header.length} columns, got ${values.length}`);
|
||||
}
|
||||
|
||||
const row: any = {};
|
||||
header.forEach((field, index) => {
|
||||
row[field] = values[index];
|
||||
});
|
||||
|
||||
// Validate and convert types
|
||||
const driverId = row.driverid;
|
||||
const position = parseInt(row.position, 10);
|
||||
const fastestLap = parseFloat(row.fastestlap);
|
||||
const incidents = parseInt(row.incidents, 10);
|
||||
const startPosition = parseInt(row.startposition, 10);
|
||||
|
||||
if (!driverId || driverId.length === 0) {
|
||||
throw new Error(`Row ${i}: driverId is required`);
|
||||
}
|
||||
|
||||
if (isNaN(position) || position < 1) {
|
||||
throw new Error(`Row ${i}: position must be a positive integer`);
|
||||
}
|
||||
|
||||
if (isNaN(fastestLap) || fastestLap < 0) {
|
||||
throw new Error(`Row ${i}: fastestLap must be a non-negative number`);
|
||||
}
|
||||
|
||||
if (isNaN(incidents) || incidents < 0) {
|
||||
throw new Error(`Row ${i}: incidents must be a non-negative integer`);
|
||||
}
|
||||
|
||||
if (isNaN(startPosition) || startPosition < 1) {
|
||||
throw new Error(`Row ${i}: startPosition must be a positive integer`);
|
||||
}
|
||||
|
||||
rows.push({ driverId, position, fastestLap, incidents, startPosition });
|
||||
}
|
||||
|
||||
// Validate no duplicate positions
|
||||
const positions = rows.map(r => r.position);
|
||||
const uniquePositions = new Set(positions);
|
||||
if (positions.length !== uniquePositions.size) {
|
||||
throw new Error('Duplicate positions found in CSV');
|
||||
}
|
||||
|
||||
// Validate no duplicate drivers
|
||||
const driverIds = rows.map(r => r.driverId);
|
||||
const uniqueDrivers = new Set(driverIds);
|
||||
if (driverIds.length !== uniqueDrivers.size) {
|
||||
throw new Error('Duplicate driver IDs found in CSV');
|
||||
}
|
||||
|
||||
return rows;
|
||||
};
|
||||
|
||||
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Read file
|
||||
const content = await file.text();
|
||||
|
||||
// Parse CSV
|
||||
const rows = parseCSV(content);
|
||||
|
||||
// Create Result entities
|
||||
const results = rows.map(row =>
|
||||
Result.create({
|
||||
id: uuidv4(),
|
||||
raceId,
|
||||
driverId: row.driverId,
|
||||
position: row.position,
|
||||
fastestLap: row.fastestLap,
|
||||
incidents: row.incidents,
|
||||
startPosition: row.startPosition,
|
||||
})
|
||||
);
|
||||
|
||||
onSuccess(results);
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to parse CSV file';
|
||||
setError(errorMessage);
|
||||
onError(errorMessage);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
// Reset file input
|
||||
event.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataWarning />
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Upload Results CSV
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 mb-3">
|
||||
CSV format: driverId, position, fastestLap, incidents, startPosition
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={handleFileChange}
|
||||
disabled={uploading}
|
||||
className="block w-full text-sm text-gray-400
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-primary-blue file:text-white
|
||||
file:cursor-pointer file:transition-colors
|
||||
hover:file:bg-primary-blue/80
|
||||
disabled:file:opacity-50 disabled:file:cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded text-warning-amber text-sm">
|
||||
<strong>Error:</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploading && (
|
||||
<div className="text-center text-gray-400 text-sm">
|
||||
Parsing CSV and importing results...
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-4 bg-iron-gray/20 rounded text-xs text-gray-500">
|
||||
<p className="font-semibold mb-2">CSV Example:</p>
|
||||
<pre className="text-gray-400">
|
||||
{`driverId,position,fastestLap,incidents,startPosition
|
||||
550e8400-e29b-41d4-a716-446655440001,1,92.456,0,3
|
||||
550e8400-e29b-41d4-a716-446655440002,2,92.789,1,1
|
||||
550e8400-e29b-41d4-a716-446655440003,3,93.012,2,2`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,160 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Button from '../ui/Button';
|
||||
import {
|
||||
getMembership,
|
||||
joinLeague,
|
||||
leaveLeague,
|
||||
requestToJoin,
|
||||
getCurrentDriverId,
|
||||
type MembershipStatus,
|
||||
} from '@/lib/membership-data';
|
||||
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import {
|
||||
getCurrentDriverId,
|
||||
getTeamMembership,
|
||||
getDriverTeam,
|
||||
joinTeam,
|
||||
requestToJoinTeam,
|
||||
leaveTeam,
|
||||
} from '@/lib/team-data';
|
||||
|
||||
interface JoinTeamButtonProps {
|
||||
teamId: string;
|
||||
requiresApproval?: boolean;
|
||||
onUpdate?: () => void;
|
||||
}
|
||||
|
||||
export default function JoinTeamButton({
|
||||
teamId,
|
||||
requiresApproval = false,
|
||||
onUpdate,
|
||||
}: JoinTeamButtonProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const currentDriverId = getCurrentDriverId();
|
||||
const membership = getTeamMembership(teamId, currentDriverId);
|
||||
const currentTeam = getDriverTeam(currentDriverId);
|
||||
|
||||
const handleJoin = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
if (requiresApproval) {
|
||||
requestToJoinTeam(teamId, currentDriverId);
|
||||
alert('Join request sent! Wait for team approval.');
|
||||
} else {
|
||||
joinTeam(teamId, currentDriverId);
|
||||
alert('Successfully joined team!');
|
||||
}
|
||||
onUpdate?.();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to join team');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLeave = async () => {
|
||||
if (!confirm('Are you sure you want to leave this team?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
leaveTeam(teamId, currentDriverId);
|
||||
alert('Successfully left team');
|
||||
onUpdate?.();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to leave team');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Already a member
|
||||
if (membership && membership.status === 'active') {
|
||||
if (membership.role === 'owner') {
|
||||
return (
|
||||
<Button variant="secondary" disabled>
|
||||
Team Owner
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleLeave}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Leaving...' : 'Leave Team'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// Already on another team
|
||||
if (currentTeam && currentTeam.team.id !== teamId) {
|
||||
return (
|
||||
<Button variant="secondary" disabled>
|
||||
Already on {currentTeam.team.name}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// Can join
|
||||
return (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleJoin}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading
|
||||
? 'Processing...'
|
||||
: requiresApproval
|
||||
? 'Request to Join'
|
||||
: 'Join Team'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,309 +0,0 @@
|
||||
'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 DataWarning from './DataWarning';
|
||||
import { League } from '@gridpilot/racing-domain/entities/League';
|
||||
import {
|
||||
getJoinRequests,
|
||||
approveJoinRequest,
|
||||
rejectJoinRequest,
|
||||
removeMember,
|
||||
updateMemberRole,
|
||||
getCurrentDriverId,
|
||||
type JoinRequest,
|
||||
type MembershipRole,
|
||||
} from '@/lib/membership-data';
|
||||
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>
|
||||
<DataWarning />
|
||||
|
||||
{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">
|
||||
“{request.message}”
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -1,243 +0,0 @@
|
||||
'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 '@/lib/membership-data';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,264 +0,0 @@
|
||||
'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 } from '@/lib/membership-data';
|
||||
import {
|
||||
isRegistered,
|
||||
registerForRace,
|
||||
withdrawFromRace
|
||||
} from '@/lib/registration-data';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { getMembership, getCurrentDriverId, type MembershipRole } from '@/lib/membership-data';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
|
||||
interface PerformanceMetricsProps {
|
||||
stats: {
|
||||
winRate: number;
|
||||
podiumRate: number;
|
||||
dnfRate: number;
|
||||
avgFinish: number;
|
||||
consistency: number;
|
||||
bestFinish: number;
|
||||
worstFinish: number;
|
||||
};
|
||||
}
|
||||
|
||||
export default function PerformanceMetrics({ stats }: PerformanceMetricsProps) {
|
||||
const getPerformanceColor = (value: number, type: 'rate' | 'finish' | 'consistency') => {
|
||||
if (type === 'rate') {
|
||||
if (value >= 30) return 'text-green-400';
|
||||
if (value >= 15) return 'text-warning-amber';
|
||||
return 'text-gray-300';
|
||||
}
|
||||
if (type === 'consistency') {
|
||||
if (value >= 80) return 'text-green-400';
|
||||
if (value >= 60) return 'text-warning-amber';
|
||||
return 'text-gray-300';
|
||||
}
|
||||
return 'text-white';
|
||||
};
|
||||
|
||||
const metrics = [
|
||||
{
|
||||
label: 'Win Rate',
|
||||
value: `${stats.winRate.toFixed(1)}%`,
|
||||
color: getPerformanceColor(stats.winRate, 'rate'),
|
||||
icon: '🏆'
|
||||
},
|
||||
{
|
||||
label: 'Podium Rate',
|
||||
value: `${stats.podiumRate.toFixed(1)}%`,
|
||||
color: getPerformanceColor(stats.podiumRate, 'rate'),
|
||||
icon: '🥇'
|
||||
},
|
||||
{
|
||||
label: 'DNF Rate',
|
||||
value: `${stats.dnfRate.toFixed(1)}%`,
|
||||
color: stats.dnfRate < 10 ? 'text-green-400' : 'text-danger-red',
|
||||
icon: '❌'
|
||||
},
|
||||
{
|
||||
label: 'Avg Finish',
|
||||
value: stats.avgFinish.toFixed(1),
|
||||
color: 'text-white',
|
||||
icon: '📊'
|
||||
},
|
||||
{
|
||||
label: 'Consistency',
|
||||
value: `${stats.consistency.toFixed(0)}%`,
|
||||
color: getPerformanceColor(stats.consistency, 'consistency'),
|
||||
icon: '🎯'
|
||||
},
|
||||
{
|
||||
label: 'Best / Worst',
|
||||
value: `${stats.bestFinish} / ${stats.worstFinish}`,
|
||||
color: 'text-gray-300',
|
||||
icon: '📈'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{metrics.map((metric, index) => (
|
||||
<Card key={index} className="text-center">
|
||||
<div className="text-2xl mb-2">{metric.icon}</div>
|
||||
<div className="text-sm text-gray-400 mb-1">{metric.label}</div>
|
||||
<div className={`text-xl font-bold ${metric.color}`}>{metric.value}</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
|
||||
import Button from '../ui/Button';
|
||||
import { getDriverTeam } from '@/lib/team-data';
|
||||
|
||||
interface ProfileHeaderProps {
|
||||
driver: DriverDTO;
|
||||
isOwnProfile?: boolean;
|
||||
onEditClick?: () => void;
|
||||
}
|
||||
|
||||
export default function ProfileHeader({ driver, isOwnProfile = false, onEditClick }: ProfileHeaderProps) {
|
||||
return (
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 flex items-center justify-center text-3xl font-bold text-white">
|
||||
{driver.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-3xl font-bold text-white">{driver.name}</h1>
|
||||
<span className="text-3xl" aria-label={`Country: ${driver.country}`}>
|
||||
{getCountryFlag(driver.country)}
|
||||
</span>
|
||||
{(() => {
|
||||
const teamData = getDriverTeam(driver.id);
|
||||
if (teamData) {
|
||||
return (
|
||||
<span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
|
||||
{teamData.team.tag}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<span>iRacing ID: {driver.iracingId}</span>
|
||||
<span>•</span>
|
||||
<span>Rating: 1450</span>
|
||||
{(() => {
|
||||
const teamData = getDriverTeam(driver.id);
|
||||
if (teamData) {
|
||||
return (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="text-primary-blue">{teamData.team.name}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isOwnProfile && (
|
||||
<Button variant="secondary" onClick={onEditClick}>
|
||||
Edit Profile
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getCountryFlag(countryCode: string): string {
|
||||
const code = countryCode.toUpperCase();
|
||||
|
||||
if (code.length === 2) {
|
||||
const codePoints = [...code].map(char =>
|
||||
127397 + char.charCodeAt(0)
|
||||
);
|
||||
return String.fromCodePoint(...codePoints);
|
||||
}
|
||||
|
||||
return '🏁';
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Card from '../ui/Card';
|
||||
import Button from '../ui/Button';
|
||||
|
||||
interface RaceResult {
|
||||
id: string;
|
||||
date: string;
|
||||
track: string;
|
||||
car: string;
|
||||
position: number;
|
||||
startPosition: number;
|
||||
incidents: number;
|
||||
league: string;
|
||||
}
|
||||
|
||||
const mockRaceHistory: RaceResult[] = [
|
||||
{ id: '1', date: '2024-11-28', track: 'Spa-Francorchamps', car: 'Porsche 911 GT3 R', position: 1, startPosition: 3, incidents: 0, league: 'GridPilot Championship' },
|
||||
{ id: '2', date: '2024-11-21', track: 'Nürburgring GP', car: 'Porsche 911 GT3 R', position: 4, startPosition: 5, incidents: 2, league: 'GridPilot Championship' },
|
||||
{ id: '3', date: '2024-11-14', track: 'Monza', car: 'Ferrari 488 GT3', position: 2, startPosition: 1, incidents: 1, league: 'GT3 Sprint Series' },
|
||||
{ id: '4', date: '2024-11-07', track: 'Silverstone', car: 'Audi R8 LMS GT3', position: 7, startPosition: 12, incidents: 0, league: 'GridPilot Championship' },
|
||||
{ id: '5', date: '2024-10-31', track: 'Interlagos', car: 'Mercedes-AMG GT3', position: 3, startPosition: 4, incidents: 1, league: 'GT3 Sprint Series' },
|
||||
{ id: '6', date: '2024-10-24', track: 'Road Atlanta', car: 'Porsche 911 GT3 R', position: 5, startPosition: 8, incidents: 2, league: 'GridPilot Championship' },
|
||||
{ id: '7', date: '2024-10-17', track: 'Watkins Glen', car: 'BMW M4 GT3', position: 1, startPosition: 2, incidents: 0, league: 'GT3 Sprint Series' },
|
||||
{ id: '8', date: '2024-10-10', track: 'Brands Hatch', car: 'Porsche 911 GT3 R', position: 6, startPosition: 7, incidents: 3, league: 'GridPilot Championship' },
|
||||
{ id: '9', date: '2024-10-03', track: 'Suzuka', car: 'McLaren 720S GT3', position: 2, startPosition: 6, incidents: 1, league: 'GT3 Sprint Series' },
|
||||
{ id: '10', date: '2024-09-26', track: 'Bathurst', car: 'Porsche 911 GT3 R', position: 8, startPosition: 10, incidents: 0, league: 'GridPilot Championship' },
|
||||
{ id: '11', date: '2024-09-19', track: 'Laguna Seca', car: 'Ferrari 488 GT3', position: 3, startPosition: 5, incidents: 2, league: 'GT3 Sprint Series' },
|
||||
{ id: '12', date: '2024-09-12', track: 'Imola', car: 'Audi R8 LMS GT3', position: 1, startPosition: 1, incidents: 0, league: 'GridPilot Championship' },
|
||||
];
|
||||
|
||||
export default function ProfileRaceHistory() {
|
||||
const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
|
||||
const [page, setPage] = useState(1);
|
||||
const resultsPerPage = 10;
|
||||
|
||||
const filteredResults = mockRaceHistory.filter(result => {
|
||||
if (filter === 'wins') return result.position === 1;
|
||||
if (filter === 'podiums') return result.position <= 3;
|
||||
return true;
|
||||
});
|
||||
|
||||
const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
|
||||
const paginatedResults = filteredResults.slice(
|
||||
(page - 1) * resultsPerPage,
|
||||
page * resultsPerPage
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={filter === 'all' ? 'primary' : 'secondary'}
|
||||
onClick={() => { setFilter('all'); setPage(1); }}
|
||||
className="text-sm"
|
||||
>
|
||||
All Races
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'wins' ? 'primary' : 'secondary'}
|
||||
onClick={() => { setFilter('wins'); setPage(1); }}
|
||||
className="text-sm"
|
||||
>
|
||||
Wins Only
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'podiums' ? 'primary' : 'secondary'}
|
||||
onClick={() => { setFilter('podiums'); setPage(1); }}
|
||||
className="text-sm"
|
||||
>
|
||||
Podiums
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<div className="space-y-2">
|
||||
{paginatedResults.map((result) => (
|
||||
<div
|
||||
key={result.id}
|
||||
className="p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`
|
||||
w-8 h-8 rounded flex items-center justify-center font-bold text-sm
|
||||
${result.position === 1 ? 'bg-green-400/20 text-green-400' :
|
||||
result.position === 2 ? 'bg-gray-400/20 text-gray-400' :
|
||||
result.position === 3 ? 'bg-warning-amber/20 text-warning-amber' :
|
||||
'bg-charcoal-outline text-gray-400'}
|
||||
`}>
|
||||
P{result.position}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-medium">{result.track}</div>
|
||||
<div className="text-sm text-gray-400">{result.car}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-gray-400">
|
||||
{new Date(result.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{result.league}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span>Started P{result.startPosition}</span>
|
||||
<span>•</span>
|
||||
<span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
|
||||
{result.incidents}x incidents
|
||||
</span>
|
||||
{result.position < result.startPosition && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="text-green-400">+{result.startPosition - result.position} positions</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2 mt-4 pt-4 border-t border-charcoal-outline">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="text-sm"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<span className="text-gray-400 text-sm">
|
||||
Page {page} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={page === totalPages}
|
||||
className="text-sm"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,173 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
|
||||
import Card from '../ui/Card';
|
||||
import Button from '../ui/Button';
|
||||
import Input from '../ui/Input';
|
||||
|
||||
interface ProfileSettingsProps {
|
||||
driver: DriverDTO;
|
||||
onSave?: (updates: Partial<DriverDTO>) => void;
|
||||
}
|
||||
|
||||
export default function ProfileSettings({ driver, onSave }: ProfileSettingsProps) {
|
||||
const [bio, setBio] = useState(driver.bio || '');
|
||||
const [nationality, setNationality] = useState(driver.country);
|
||||
const [favoriteCarClass, setFavoriteCarClass] = useState('GT3');
|
||||
const [favoriteSeries, setFavoriteSeries] = useState('Endurance');
|
||||
const [competitiveLevel, setCompetitiveLevel] = useState('competitive');
|
||||
const [preferredRegions, setPreferredRegions] = useState<string[]>(['EU']);
|
||||
|
||||
const handleSave = () => {
|
||||
onSave?.({
|
||||
bio,
|
||||
country: nationality
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Profile Information</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Bio</label>
|
||||
<textarea
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent resize-none"
|
||||
rows={4}
|
||||
placeholder="Tell us about yourself..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Nationality</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={nationality}
|
||||
onChange={(e) => setNationality(e.target.value)}
|
||||
placeholder="e.g., US, GB, DE"
|
||||
maxLength={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Racing Preferences</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Favorite Car Class</label>
|
||||
<select
|
||||
value={favoriteCarClass}
|
||||
onChange={(e) => setFavoriteCarClass(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 focus:border-transparent"
|
||||
>
|
||||
<option value="GT3">GT3</option>
|
||||
<option value="GT4">GT4</option>
|
||||
<option value="Formula">Formula</option>
|
||||
<option value="LMP2">LMP2</option>
|
||||
<option value="Touring">Touring Cars</option>
|
||||
<option value="NASCAR">NASCAR</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Favorite Series Type</label>
|
||||
<select
|
||||
value={favoriteSeries}
|
||||
onChange={(e) => setFavoriteSeries(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 focus:border-transparent"
|
||||
>
|
||||
<option value="Sprint">Sprint</option>
|
||||
<option value="Endurance">Endurance</option>
|
||||
<option value="Mixed">Mixed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Competitive Level</label>
|
||||
<select
|
||||
value={competitiveLevel}
|
||||
onChange={(e) => setCompetitiveLevel(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 focus:border-transparent"
|
||||
>
|
||||
<option value="casual">Casual - Just for fun</option>
|
||||
<option value="competitive">Competitive - Aiming to win</option>
|
||||
<option value="professional">Professional - Esports focused</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Preferred Regions</label>
|
||||
<div className="space-y-2">
|
||||
{['NA', 'EU', 'ASIA', 'OCE'].map(region => (
|
||||
<label key={region} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferredRegions.includes(region)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setPreferredRegions([...preferredRegions, region]);
|
||||
} else {
|
||||
setPreferredRegions(preferredRegions.filter(r => r !== region));
|
||||
}
|
||||
}}
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
<span className="text-white text-sm">{region}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Privacy Settings</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-white text-sm">Show profile to other drivers</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-white text-sm">Show race history</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-white text-sm">Allow friend requests</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button variant="primary" onClick={handleSave} className="flex-1">
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button variant="secondary" className="flex-1">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,206 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
import RankBadge from './RankBadge';
|
||||
import { getDriverStats, getAllDriverRankings, getLeagueRankings } from '@/lib/di-container';
|
||||
|
||||
interface ProfileStatsProps {
|
||||
driverId?: string;
|
||||
stats?: {
|
||||
totalRaces: number;
|
||||
wins: number;
|
||||
podiums: number;
|
||||
dnfs: number;
|
||||
avgFinish: number;
|
||||
completionRate: number;
|
||||
};
|
||||
}
|
||||
|
||||
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 getTrendIndicator = (value: number) => {
|
||||
if (value > 0) return '↑';
|
||||
if (value < 0) return '↓';
|
||||
return '→';
|
||||
};
|
||||
|
||||
const getPercentileLabel = (percentile: number) => {
|
||||
if (percentile >= 90) return 'Top 10%';
|
||||
if (percentile >= 75) return 'Top 25%';
|
||||
if (percentile >= 50) return 'Top 50%';
|
||||
return `${(100 - percentile).toFixed(0)}th percentile`;
|
||||
};
|
||||
|
||||
const getPercentileColor = (percentile: number) => {
|
||||
if (percentile >= 90) return 'text-green-400';
|
||||
if (percentile >= 75) return 'text-primary-blue';
|
||||
if (percentile >= 50) return 'text-warning-amber';
|
||||
return 'text-gray-400';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{driverStats && (
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-white mb-6">Rankings Dashboard</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<RankBadge rank={driverStats.overallRank} size="lg" />
|
||||
<div>
|
||||
<div className="text-white font-medium text-lg">Overall Ranking</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{driverStats.overallRank} of {allRankings.length} drivers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-sm font-medium ${getPercentileColor(driverStats.percentile)}`}>
|
||||
{getPercentileLabel(driverStats.percentile)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Global Percentile</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 pt-3 border-t border-charcoal-outline">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-primary-blue">{driverStats.rating}</div>
|
||||
<div className="text-xs text-gray-400">Rating</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-green-400">
|
||||
{getTrendIndicator(5)} {winRate}%
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Win Rate</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-warning-amber">
|
||||
{getTrendIndicator(2)} {podiumRate}%
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Podium Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{leagueRank && leagueRank.totalDrivers > 0 && (
|
||||
<div className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<RankBadge rank={leagueRank.rank} size="md" />
|
||||
<div>
|
||||
<div className="text-white font-medium">European GT Championship</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{leagueRank.rank} of {leagueRank.totalDrivers} drivers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-sm font-medium ${getPercentileColor(leagueRank.percentile)}`}>
|
||||
{getPercentileLabel(leagueRank.percentile)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">League Percentile</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PerformanceRow({ label, races, wins, podiums, avgFinish }: {
|
||||
label: string;
|
||||
races: number;
|
||||
wins: number;
|
||||
podiums: number;
|
||||
avgFinish: number;
|
||||
}) {
|
||||
const winRate = ((wins / races) * 100).toFixed(0);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 rounded bg-deep-graphite border border-charcoal-outline">
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium">{label}</div>
|
||||
<div className="text-gray-500 text-xs">{races} races</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 text-xs">
|
||||
<div>
|
||||
<div className="text-gray-500">Wins</div>
|
||||
<div className="text-green-400 font-medium">{wins} ({winRate}%)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-500">Podiums</div>
|
||||
<div className="text-warning-amber font-medium">{podiums}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-500">Avg</div>
|
||||
<div className="text-white font-medium">{avgFinish.toFixed(1)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Race } from '@gridpilot/racing-domain/entities/Race';
|
||||
|
||||
interface RaceCardProps {
|
||||
race: Race;
|
||||
leagueName?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function RaceCard({ race, leagueName, onClick }: RaceCardProps) {
|
||||
const statusColors = {
|
||||
scheduled: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
|
||||
completed: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||
cancelled: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
};
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
return new Date(date).toLocaleTimeString('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
timeZoneName: 'short',
|
||||
});
|
||||
};
|
||||
|
||||
const getRelativeTime = (date: Date) => {
|
||||
const now = new Date();
|
||||
const targetDate = new Date(date);
|
||||
const diffMs = targetDate.getTime() - now.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) return null;
|
||||
if (diffDays === 0) return 'Today';
|
||||
if (diffDays === 1) return 'Tomorrow';
|
||||
if (diffDays < 7) return `in ${diffDays} days`;
|
||||
return null;
|
||||
};
|
||||
|
||||
const relativeTime = race.status === 'scheduled' ? getRelativeTime(race.scheduledAt) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`
|
||||
p-6 rounded-lg bg-iron-gray border border-charcoal-outline
|
||||
transition-all duration-200
|
||||
${onClick ? 'cursor-pointer hover:scale-[1.03] hover:border-primary-blue' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-semibold text-white">{race.track}</h3>
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded border ${statusColors[race.status]}`}>
|
||||
{race.status.charAt(0).toUpperCase() + race.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">{race.car}</p>
|
||||
{leagueName && (
|
||||
<p className="text-gray-500 text-xs mt-1">{leagueName}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-white font-medium text-sm">{formatDate(race.scheduledAt)}</p>
|
||||
<p className="text-gray-400 text-xs">{formatTime(race.scheduledAt)}</p>
|
||||
{relativeTime && (
|
||||
<p className="text-primary-blue text-xs mt-1">{relativeTime}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-wide">
|
||||
{race.sessionType}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
'use client';
|
||||
|
||||
interface RankBadgeProps {
|
||||
rank: number;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export default function RankBadge({ rank, size = 'md', showLabel = true }: RankBadgeProps) {
|
||||
const getMedalEmoji = (rank: number) => {
|
||||
switch (rank) {
|
||||
case 1: return '🥇';
|
||||
case 2: return '🥈';
|
||||
case 3: return '🥉';
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
const medal = getMedalEmoji(rank);
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'text-sm px-2 py-1',
|
||||
md: 'text-base px-3 py-1.5',
|
||||
lg: 'text-lg px-4 py-2'
|
||||
};
|
||||
|
||||
const getRankColor = (rank: number) => {
|
||||
if (rank <= 3) return 'bg-warning-amber/20 text-warning-amber border-warning-amber/30';
|
||||
if (rank <= 10) return 'bg-primary-blue/20 text-primary-blue border-primary-blue/30';
|
||||
if (rank <= 50) return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
|
||||
return 'bg-charcoal-outline/20 text-gray-300 border-charcoal-outline';
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 rounded font-medium border ${getRankColor(rank)} ${sizeClasses[size]}`}>
|
||||
{medal && <span>{medal}</span>}
|
||||
{showLabel && <span>#{rank}</span>}
|
||||
{!showLabel && !medal && <span>#{rank}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,203 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
|
||||
interface RatingBreakdownProps {
|
||||
skillRating?: number;
|
||||
safetyRating?: number;
|
||||
sportsmanshipRating?: number;
|
||||
}
|
||||
|
||||
export default function RatingBreakdown({
|
||||
skillRating = 1450,
|
||||
safetyRating = 92,
|
||||
sportsmanshipRating = 4.8
|
||||
}: RatingBreakdownProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-6">Rating Components</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
<RatingComponent
|
||||
label="Skill Rating"
|
||||
value={skillRating}
|
||||
maxValue={2000}
|
||||
color="primary-blue"
|
||||
description="Based on race results, competition strength, and consistency"
|
||||
breakdown={[
|
||||
{ label: 'Race Results', percentage: 60 },
|
||||
{ label: 'Competition Quality', percentage: 25 },
|
||||
{ label: 'Consistency', percentage: 15 }
|
||||
]}
|
||||
/>
|
||||
|
||||
<RatingComponent
|
||||
label="Safety Rating"
|
||||
value={safetyRating}
|
||||
maxValue={100}
|
||||
color="green-400"
|
||||
suffix="%"
|
||||
description="Reflects incident-free racing and clean overtakes"
|
||||
breakdown={[
|
||||
{ label: 'Incident Rate', percentage: 70 },
|
||||
{ label: 'Clean Overtakes', percentage: 20 },
|
||||
{ label: 'Position Awareness', percentage: 10 }
|
||||
]}
|
||||
/>
|
||||
|
||||
<RatingComponent
|
||||
label="Sportsmanship"
|
||||
value={sportsmanshipRating}
|
||||
maxValue={5}
|
||||
color="warning-amber"
|
||||
suffix="/5"
|
||||
description="Community feedback on racing behavior and fair play"
|
||||
breakdown={[
|
||||
{ label: 'Peer Reviews', percentage: 50 },
|
||||
{ label: 'Fair Racing', percentage: 30 },
|
||||
{ label: 'Team Play', percentage: 20 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Rating History</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<HistoryItem
|
||||
date="November 2024"
|
||||
skillChange={+15}
|
||||
safetyChange={+2}
|
||||
sportsmanshipChange={0}
|
||||
/>
|
||||
<HistoryItem
|
||||
date="October 2024"
|
||||
skillChange={+28}
|
||||
safetyChange={-1}
|
||||
sportsmanshipChange={+0.1}
|
||||
/>
|
||||
<HistoryItem
|
||||
date="September 2024"
|
||||
skillChange={-12}
|
||||
safetyChange={+3}
|
||||
sportsmanshipChange={0}
|
||||
/>
|
||||
</div>
|
||||
</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">Rating Insights</h3>
|
||||
</div>
|
||||
<ul className="space-y-2 text-sm text-gray-400">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-400 mt-0.5">✓</span>
|
||||
<span>Strong safety rating - keep up the clean racing!</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-warning-amber mt-0.5">→</span>
|
||||
<span>Skill rating improving - competitive against higher-rated drivers</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary-blue mt-0.5">i</span>
|
||||
<span>Complete more races to stabilize your ratings</span>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RatingComponent({
|
||||
label,
|
||||
value,
|
||||
maxValue,
|
||||
color,
|
||||
suffix = '',
|
||||
description,
|
||||
breakdown
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
maxValue: number;
|
||||
color: string;
|
||||
suffix?: string;
|
||||
description: string;
|
||||
breakdown: { label: string; percentage: number }[];
|
||||
}) {
|
||||
const percentage = (value / maxValue) * 100;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-white font-medium">{label}</span>
|
||||
<span className={`text-2xl font-bold text-${color}`}>
|
||||
{value}{suffix}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="w-full bg-deep-graphite rounded-full h-2 mb-3">
|
||||
<div
|
||||
className={`bg-${color} rounded-full h-2 transition-all duration-500`}
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-400 mb-3">{description}</p>
|
||||
|
||||
<div className="space-y-1">
|
||||
{breakdown.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500">{item.label}</span>
|
||||
<span className="text-gray-400">{item.percentage}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HistoryItem({
|
||||
date,
|
||||
skillChange,
|
||||
safetyChange,
|
||||
sportsmanshipChange
|
||||
}: {
|
||||
date: string;
|
||||
skillChange: number;
|
||||
safetyChange: number;
|
||||
sportsmanshipChange: number;
|
||||
}) {
|
||||
const formatChange = (value: number) => {
|
||||
if (value === 0) return '—';
|
||||
return value > 0 ? `+${value}` : `${value}`;
|
||||
};
|
||||
|
||||
const getChangeColor = (value: number) => {
|
||||
if (value === 0) return 'text-gray-500';
|
||||
return value > 0 ? 'text-green-400' : 'text-red-400';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 rounded bg-deep-graphite border border-charcoal-outline">
|
||||
<span className="text-white text-sm">{date}</span>
|
||||
<div className="flex items-center gap-4 text-xs">
|
||||
<div className="text-center">
|
||||
<div className="text-gray-500 mb-1">Skill</div>
|
||||
<div className={getChangeColor(skillChange)}>{formatChange(skillChange)}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-gray-500 mb-1">Safety</div>
|
||||
<div className={getChangeColor(safetyChange)}>{formatChange(safetyChange)}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-gray-500 mb-1">Sports</div>
|
||||
<div className={getChangeColor(sportsmanshipChange)}>{formatChange(sportsmanshipChange)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Result } from '@gridpilot/racing-domain/entities/Result';
|
||||
import { Driver } from '@gridpilot/racing-domain/entities/Driver';
|
||||
|
||||
interface ResultsTableProps {
|
||||
results: Result[];
|
||||
drivers: Driver[];
|
||||
pointsSystem: Record<number, number>;
|
||||
fastestLapTime?: number;
|
||||
}
|
||||
|
||||
export default function ResultsTable({ results, drivers, pointsSystem, fastestLapTime }: ResultsTableProps) {
|
||||
const getDriverName = (driverId: string): string => {
|
||||
const driver = drivers.find(d => d.id === driverId);
|
||||
return driver?.name || 'Unknown Driver';
|
||||
};
|
||||
|
||||
const formatLapTime = (seconds: number): string => {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const secs = (seconds % 60).toFixed(3);
|
||||
return `${minutes}:${secs.padStart(6, '0')}`;
|
||||
};
|
||||
|
||||
const getPoints = (position: number): number => {
|
||||
return pointsSystem[position] || 0;
|
||||
};
|
||||
|
||||
const getPositionChangeColor = (change: number): string => {
|
||||
if (change > 0) return 'text-performance-green';
|
||||
if (change < 0) return 'text-warning-amber';
|
||||
return 'text-gray-500';
|
||||
};
|
||||
|
||||
const getPositionChangeText = (change: number): string => {
|
||||
if (change > 0) return `+${change}`;
|
||||
if (change < 0) return `${change}`;
|
||||
return '0';
|
||||
};
|
||||
|
||||
if (results.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No results 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">Fastest Lap</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Incidents</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">+/-</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{results.map((result) => {
|
||||
const positionChange = result.getPositionChange();
|
||||
const isFastestLap = fastestLapTime && result.fastestLap === fastestLapTime;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={result.id}
|
||||
className="border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors"
|
||||
>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-white font-semibold">{result.position}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-white">{getDriverName(result.driverId)}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className={isFastestLap ? 'text-performance-green font-medium' : 'text-white'}>
|
||||
{formatLapTime(result.fastestLap)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className={result.incidents > 0 ? 'text-warning-amber' : 'text-white'}>
|
||||
{result.incidents}×
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="text-white font-medium">{getPoints(result.position)}</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className={`font-medium ${getPositionChangeColor(positionChange)}`}>
|
||||
{getPositionChangeText(positionChange)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Button from '../ui/Button';
|
||||
import Input from '../ui/Input';
|
||||
import DataWarning from './DataWarning';
|
||||
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 (
|
||||
<>
|
||||
<DataWarning />
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -1,249 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import { getDriverRepository } from '@/lib/di-container';
|
||||
import { EntityMappers, DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
|
||||
import {
|
||||
Team,
|
||||
TeamJoinRequest,
|
||||
getTeamJoinRequests,
|
||||
approveTeamJoinRequest,
|
||||
rejectTeamJoinRequest,
|
||||
updateTeam,
|
||||
} from '@/lib/team-data';
|
||||
|
||||
interface TeamAdminProps {
|
||||
team: Team;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export default function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
|
||||
const [joinRequests, setJoinRequests] = useState<TeamJoinRequest[]>([]);
|
||||
const [requestDrivers, setRequestDrivers] = useState<Record<string, DriverDTO>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [editedTeam, setEditedTeam] = useState({
|
||||
name: team.name,
|
||||
tag: team.tag,
|
||||
description: team.description,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadJoinRequests();
|
||||
}, [team.id]);
|
||||
|
||||
const loadJoinRequests = async () => {
|
||||
const requests = getTeamJoinRequests(team.id);
|
||||
setJoinRequests(requests);
|
||||
|
||||
const driverRepo = getDriverRepository();
|
||||
const allDrivers = await driverRepo.findAll();
|
||||
const driverMap: Record<string, DriverDTO> = {};
|
||||
|
||||
for (const request of requests) {
|
||||
const driver = allDrivers.find(d => d.id === request.driverId);
|
||||
if (driver) {
|
||||
const dto = EntityMappers.toDriverDTO(driver);
|
||||
if (dto) {
|
||||
driverMap[request.driverId] = dto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setRequestDrivers(driverMap);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleApprove = async (requestId: string) => {
|
||||
try {
|
||||
approveTeamJoinRequest(requestId);
|
||||
await loadJoinRequests();
|
||||
onUpdate();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to approve request');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async (requestId: string) => {
|
||||
try {
|
||||
rejectTeamJoinRequest(requestId);
|
||||
await loadJoinRequests();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to reject request');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveChanges = () => {
|
||||
try {
|
||||
updateTeam(team.id, editedTeam, team.ownerId);
|
||||
setEditMode(false);
|
||||
onUpdate();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to update team');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-semibold text-white">Team Settings</h3>
|
||||
{!editMode && (
|
||||
<Button variant="secondary" onClick={() => setEditMode(true)}>
|
||||
Edit Details
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Team Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={editedTeam.name}
|
||||
onChange={(e) => setEditedTeam({ ...editedTeam, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Team Tag
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={editedTeam.tag}
|
||||
onChange={(e) => setEditedTeam({ ...editedTeam, tag: e.target.value })}
|
||||
maxLength={4}
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Max 4 characters</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm resize-none"
|
||||
rows={4}
|
||||
value={editedTeam.description}
|
||||
onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="primary" onClick={handleSaveChanges}>
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setEditMode(false);
|
||||
setEditedTeam({
|
||||
name: team.name,
|
||||
tag: team.tag,
|
||||
description: team.description,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">Team Name</div>
|
||||
<div className="text-white font-medium">{team.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">Team Tag</div>
|
||||
<div className="text-white font-medium">{team.tag}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">Description</div>
|
||||
<div className="text-white">{team.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-white mb-6">Join Requests</h3>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8 text-gray-400">Loading requests...</div>
|
||||
) : joinRequests.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{joinRequests.map((request) => {
|
||||
const driver = requestDrivers[request.driverId];
|
||||
if (!driver) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={request.id}
|
||||
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="w-12 h-12 rounded-full bg-primary-blue/20 flex items-center justify-center text-lg font-bold text-white">
|
||||
{driver.name.charAt(0)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-white font-medium">{driver.name}</h4>
|
||||
<p className="text-sm text-gray-400">
|
||||
{driver.country} • Requested {new Date(request.requestedAt).toLocaleDateString()}
|
||||
</p>
|
||||
{request.message && (
|
||||
<p className="text-sm text-gray-300 mt-1 italic">
|
||||
"{request.message}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => handleApprove(request.id)}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={() => handleReject(request.id)}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No pending join requests
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Danger Zone</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 rounded-lg bg-danger-red/10 border border-danger-red/30">
|
||||
<h4 className="text-white font-medium mb-2">Disband Team</h4>
|
||||
<p className="text-sm text-gray-400 mb-4">
|
||||
Permanently delete this team. This action cannot be undone.
|
||||
</p>
|
||||
<Button variant="danger" disabled>
|
||||
Disband Team (Coming Soon)
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
|
||||
interface TeamCardProps {
|
||||
id: string;
|
||||
name: string;
|
||||
logo?: string;
|
||||
memberCount: number;
|
||||
leagues: string[];
|
||||
performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function TeamCard({
|
||||
id,
|
||||
name,
|
||||
logo,
|
||||
memberCount,
|
||||
leagues,
|
||||
performanceLevel,
|
||||
onClick,
|
||||
}: TeamCardProps) {
|
||||
const performanceBadgeColors = {
|
||||
beginner: 'bg-green-500/20 text-green-400',
|
||||
intermediate: 'bg-blue-500/20 text-blue-400',
|
||||
advanced: 'bg-purple-500/20 text-purple-400',
|
||||
pro: 'bg-red-500/20 text-red-400',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
|
||||
onClick={onClick}
|
||||
>
|
||||
<Card>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-16 h-16 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
{logo ? (
|
||||
<img src={logo} alt={name} className="w-full h-full object-cover rounded-lg" />
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-gray-500">
|
||||
{name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-white truncate">
|
||||
{name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
{memberCount} {memberCount === 1 ? 'member' : 'members'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{performanceLevel && (
|
||||
<div>
|
||||
<span
|
||||
className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
|
||||
performanceBadgeColors[performanceLevel]
|
||||
}`}
|
||||
>
|
||||
{performanceLevel.charAt(0).toUpperCase() + performanceLevel.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-gray-400">Active in:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{leagues.slice(0, 3).map((league, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-block px-2 py-1 bg-charcoal-outline text-gray-300 rounded text-xs"
|
||||
>
|
||||
{league}
|
||||
</span>
|
||||
))}
|
||||
{leagues.length > 3 && (
|
||||
<span className="inline-block px-2 py-1 bg-charcoal-outline text-gray-400 rounded text-xs">
|
||||
+{leagues.length - 3} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,205 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import { getDriverRepository, getDriverStats } from '@/lib/di-container';
|
||||
import { EntityMappers, DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
|
||||
import { TeamMembership, TeamRole } from '@/lib/team-data';
|
||||
|
||||
interface TeamRosterProps {
|
||||
teamId: string;
|
||||
memberships: TeamMembership[];
|
||||
isAdmin: boolean;
|
||||
onRemoveMember?: (driverId: string) => void;
|
||||
onChangeRole?: (driverId: string, newRole: TeamRole) => void;
|
||||
}
|
||||
|
||||
export default function TeamRoster({
|
||||
teamId,
|
||||
memberships,
|
||||
isAdmin,
|
||||
onRemoveMember,
|
||||
onChangeRole,
|
||||
}: TeamRosterProps) {
|
||||
const [drivers, setDrivers] = useState<Record<string, DriverDTO>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sortBy, setSortBy] = useState<'role' | 'rating' | 'name'>('rating');
|
||||
|
||||
useEffect(() => {
|
||||
const loadDrivers = async () => {
|
||||
const driverRepo = getDriverRepository();
|
||||
const allDrivers = await driverRepo.findAll();
|
||||
const driverMap: Record<string, DriverDTO> = {};
|
||||
|
||||
for (const membership of memberships) {
|
||||
const driver = allDrivers.find(d => d.id === membership.driverId);
|
||||
if (driver) {
|
||||
const dto = EntityMappers.toDriverDTO(driver);
|
||||
if (dto) {
|
||||
driverMap[membership.driverId] = dto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setDrivers(driverMap);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
loadDrivers();
|
||||
}, [memberships]);
|
||||
|
||||
const getRoleBadgeColor = (role: TeamRole) => {
|
||||
switch (role) {
|
||||
case 'owner':
|
||||
return 'bg-warning-amber/20 text-warning-amber';
|
||||
case 'manager':
|
||||
return 'bg-primary-blue/20 text-primary-blue';
|
||||
default:
|
||||
return 'bg-charcoal-outline text-gray-300';
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleLabel = (role: TeamRole) => {
|
||||
return role.charAt(0).toUpperCase() + role.slice(1);
|
||||
};
|
||||
|
||||
const sortedMemberships = [...memberships].sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'rating': {
|
||||
const statsA = getDriverStats(a.driverId);
|
||||
const statsB = getDriverStats(b.driverId);
|
||||
return (statsB?.rating || 0) - (statsA?.rating || 0);
|
||||
}
|
||||
case 'role': {
|
||||
const roleOrder = { owner: 0, manager: 1, driver: 2 };
|
||||
return roleOrder[a.role] - roleOrder[b.role];
|
||||
}
|
||||
case 'name': {
|
||||
const driverA = drivers[a.driverId];
|
||||
const driverB = drivers[b.driverId];
|
||||
return (driverA?.name || '').localeCompare(driverB?.name || '');
|
||||
}
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const teamAverageRating = memberships.length > 0
|
||||
? Math.round(
|
||||
memberships.reduce((sum, m) => {
|
||||
const stats = getDriverStats(m.driverId);
|
||||
return sum + (stats?.rating || 0);
|
||||
}, 0) / memberships.length
|
||||
)
|
||||
: 0;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<div className="text-center py-8 text-gray-400">Loading roster...</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white">Team Roster</h3>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
{memberships.length} {memberships.length === 1 ? 'member' : 'members'} • Avg Rating: <span className="text-primary-blue font-medium">{teamAverageRating}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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="role">Role</option>
|
||||
<option value="name">Name</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{sortedMemberships.map((membership) => {
|
||||
const driver = drivers[membership.driverId];
|
||||
const driverStats = getDriverStats(membership.driverId);
|
||||
if (!driver) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={membership.driverId}
|
||||
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-charcoal-outline/60 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="w-12 h-12 rounded-full bg-primary-blue/20 flex items-center justify-center text-lg font-bold text-white">
|
||||
{driver.name.charAt(0)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-white font-medium">{driver.name}</h4>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${getRoleBadgeColor(membership.role)}`}>
|
||||
{getRoleLabel(membership.role)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">
|
||||
{driver.country} • Joined {new Date(membership.joinedAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{driverStats && (
|
||||
<div className="flex items-center gap-6 text-center">
|
||||
<div>
|
||||
<div className="text-lg font-bold text-primary-blue">{driverStats.rating}</div>
|
||||
<div className="text-xs text-gray-400">Rating</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-300">#{driverStats.overallRank}</div>
|
||||
<div className="text-xs text-gray-500">Rank</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isAdmin && membership.role !== 'owner' && (
|
||||
<div className="flex items-center gap-2">
|
||||
{onChangeRole && (
|
||||
<select
|
||||
className="px-3 py-2 bg-iron-gray border-0 rounded text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
|
||||
value={membership.role}
|
||||
onChange={(e) => onChangeRole(membership.driverId, e.target.value as TeamRole)}
|
||||
>
|
||||
<option value="driver">Driver</option>
|
||||
<option value="manager">Manager</option>
|
||||
</select>
|
||||
)}
|
||||
|
||||
{onRemoveMember && (
|
||||
<button
|
||||
onClick={() => onRemoveMember(membership.driverId)}
|
||||
className="px-3 py-2 bg-danger-red/20 hover:bg-danger-red/30 text-danger-red rounded text-sm font-medium transition-colors"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{memberships.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No team members yet.
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import { getStandingRepository, getLeagueRepository } from '@/lib/di-container';
|
||||
import { EntityMappers, LeagueDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
|
||||
import { getTeamMembers } from '@/lib/team-data';
|
||||
|
||||
interface TeamStandingsProps {
|
||||
teamId: string;
|
||||
leagues: string[];
|
||||
}
|
||||
|
||||
interface TeamLeagueStanding {
|
||||
leagueId: string;
|
||||
leagueName: string;
|
||||
position: number;
|
||||
points: number;
|
||||
wins: number;
|
||||
racesCompleted: number;
|
||||
}
|
||||
|
||||
export default function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
|
||||
const [standings, setStandings] = useState<TeamLeagueStanding[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadStandings = async () => {
|
||||
const standingRepo = getStandingRepository();
|
||||
const leagueRepo = getLeagueRepository();
|
||||
const members = getTeamMembers(teamId);
|
||||
const memberIds = members.map(m => m.driverId);
|
||||
|
||||
const teamStandings: TeamLeagueStanding[] = [];
|
||||
|
||||
for (const leagueId of leagues) {
|
||||
const league = await leagueRepo.findById(leagueId);
|
||||
if (!league) continue;
|
||||
|
||||
const leagueStandings = await standingRepo.findByLeagueId(leagueId);
|
||||
|
||||
// Calculate team points (sum of all team members)
|
||||
let totalPoints = 0;
|
||||
let totalWins = 0;
|
||||
let totalRaces = 0;
|
||||
|
||||
for (const standing of leagueStandings) {
|
||||
if (memberIds.includes(standing.driverId)) {
|
||||
totalPoints += standing.points;
|
||||
totalWins += standing.wins;
|
||||
totalRaces = Math.max(totalRaces, standing.racesCompleted);
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate team position (simplified - based on total points)
|
||||
const allTeamPoints = leagueStandings
|
||||
.filter(s => memberIds.includes(s.driverId))
|
||||
.reduce((sum, s) => sum + s.points, 0);
|
||||
|
||||
const position = leagueStandings
|
||||
.filter((_, idx, arr) => {
|
||||
const teamPoints = arr
|
||||
.filter(s => memberIds.includes(s.driverId))
|
||||
.reduce((sum, s) => sum + s.points, 0);
|
||||
return teamPoints > allTeamPoints;
|
||||
}).length + 1;
|
||||
|
||||
teamStandings.push({
|
||||
leagueId,
|
||||
leagueName: league.name,
|
||||
position,
|
||||
points: totalPoints,
|
||||
wins: totalWins,
|
||||
racesCompleted: totalRaces,
|
||||
});
|
||||
}
|
||||
|
||||
setStandings(teamStandings);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
loadStandings();
|
||||
}, [teamId, leagues]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<div className="text-center py-8 text-gray-400">Loading standings...</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold text-white mb-6">League Standings</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{standings.map((standing) => (
|
||||
<div
|
||||
key={standing.leagueId}
|
||||
className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="text-white font-medium">{standing.leagueName}</h4>
|
||||
<span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-semibold">
|
||||
P{standing.position}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-white">{standing.points}</div>
|
||||
<div className="text-xs text-gray-400">Points</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-white">{standing.wins}</div>
|
||||
<div className="text-xs text-gray-400">Wins</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-white">{standing.racesCompleted}</div>
|
||||
<div className="text-xs text-gray-400">Races</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{standings.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No standings available yet.
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user