mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-09 10:32:59 +01:00
parent 35f988f885
commit a780139692
26 changed files with 2224 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
apps/website/components/leagues/LeagueAdmin.tsx
View File

@@ -13,6 +13,8 @@ import {
getAllDriverRankings,
getDriverRepository,
getGetLeagueFullConfigQuery,
getRaceRepository,
getProtestRepository,
} from '@/lib/di-container';
import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
import { LeagueBasicsSection } from './LeagueBasicsSection';
@@ -27,6 +29,9 @@ import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappe
import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
import DriverIdentity from '@/components/drivers/DriverIdentity';
import Modal from '@/components/ui/Modal';
import { AlertTriangle, CheckCircle, Clock, XCircle, Flag, Calendar, User } from 'lucide-react';
import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
import type { Race } from '@gridpilot/racing/domain/entities/Race';
interface JoinRequest {
id: string;
@@ -51,10 +56,14 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'disputes'>('members');
const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'protests'>('members');
const [rejectReason, setRejectReason] = useState('');
const [configForm, setConfigForm] = useState<LeagueConfigFormModel | null>(null);
const [configLoading, setConfigLoading] = useState(false);
const [protests, setProtests] = useState<Protest[]>([]);
const [protestRaces, setProtestRaces] = useState<Record<string, Race>>({});
const [protestDriversById, setProtestDriversById] = useState<Record<string, DriverDTO>>({});
const [protestsLoading, setProtestsLoading] = useState(false);
const loadJoinRequests = useCallback(async () => {
setLoading(true);
@@ -119,6 +128,62 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
loadConfig();
}, [league.id]);
// Load protests for this league's races
useEffect(() => {
async function loadProtests() {
setProtestsLoading(true);
try {
const raceRepo = getRaceRepository();
const protestRepo = getProtestRepository();
const driverRepo = getDriverRepository();
// Get all races for this league
const leagueRaces = await raceRepo.findByLeagueId(league.id);
// Get protests for each race
const allProtests: Protest[] = [];
const racesById: Record<string, Race> = {};
for (const race of leagueRaces) {
racesById[race.id] = race;
const raceProtests = await protestRepo.findByRaceId(race.id);
allProtests.push(...raceProtests);
}
setProtests(allProtests);
setProtestRaces(racesById);
// Load driver info for all protesters and accused
const driverIds = new Set<string>();
allProtests.forEach((p) => {
driverIds.add(p.protestingDriverId);
driverIds.add(p.accusedDriverId);
});
const driverEntities = await Promise.all(
Array.from(driverIds).map((id) => driverRepo.findById(id)),
);
const driverDtos = driverEntities
.map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
.filter((dto): dto is DriverDTO => dto !== null);
const byId: Record<string, DriverDTO> = {};
for (const dto of driverDtos) {
byId[dto.id] = dto;
}
setProtestDriversById(byId);
} catch (err) {
console.error('Failed to load protests:', err);
} finally {
setProtestsLoading(false);
}
}
if (activeTab === 'protests') {
loadProtests();
}
}, [league.id, activeTab]);
const handleApproveRequest = async (requestId: string) => {
try {
const membershipRepo = getLeagueMembershipRepository();
@@ -341,14 +406,19 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
Create Race
</button>
<button
onClick={() => setActiveTab('disputes')}
className={`pb-3 px-1 font-medium transition-colors ${
activeTab === 'disputes'
onClick={() => setActiveTab('protests')}
className={`pb-3 px-1 font-medium transition-colors flex items-center gap-2 ${
activeTab === 'protests'
? 'text-primary-blue border-b-2 border-primary-blue'
: 'text-gray-400 hover:text-white'
}`}
>
Disputes
Protests
{protests.length > 0 && (
<span className="px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
{protests.filter(p => p.status === 'pending').length || protests.length}
</span>
)}
</button>
<button
onClick={() => setActiveTab('settings')}
@@ -462,27 +532,156 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
</Card>
)}
{activeTab === 'disputes' && (
{activeTab === 'protests' && (
<Card>
<h2 className="text-xl font-semibold text-white mb-4">Disputes (Alpha)</h2>
<div className="space-y-4">
<p className="text-sm text-gray-400">
Demo-only view of potential protest and dispute workflow for this league.
</p>
<div className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4">
<h3 className="text-sm font-semibold text-white mb-1">Sample Protest</h3>
<p className="text-xs text-gray-400 mb-2">
Driver contact in Turn 3, Lap 12. Protest submitted by a driver against another
competitor for avoidable contact.
</p>
<p className="text-xs text-gray-500">
In the full product, this area would show protests, steward reviews, penalties, and appeals.
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-semibold text-white">Protests</h2>
<p className="text-sm text-gray-400 mt-1">
Review protests filed by drivers and manage steward decisions
</p>
</div>
<p className="text-xs text-gray-500">
For the alpha, this tab is static and read-only and does not affect any race or league state.
</p>
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-warning-amber/10 border border-warning-amber/30">
<AlertTriangle className="w-4 h-4 text-warning-amber" />
<span className="text-xs font-medium text-warning-amber">Alpha Preview</span>
</div>
</div>
{protestsLoading ? (
<div className="text-center py-12 text-gray-400">
<div className="animate-pulse">Loading protests...</div>
</div>
) : protests.length === 0 ? (
<div className="text-center py-12">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
<Flag className="w-8 h-8 text-gray-500" />
</div>
<h3 className="text-lg font-medium text-white mb-2">No Protests Filed</h3>
<p className="text-sm text-gray-400 max-w-md mx-auto">
When drivers file protests for incidents during races, they will appear here for steward review.
</p>
</div>
) : (
<div className="space-y-4">
{/* Stats summary */}
<div className="grid grid-cols-3 gap-4 mb-6">
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
<div className="flex items-center gap-2 text-warning-amber mb-1">
<Clock className="w-4 h-4" />
<span className="text-xs font-medium uppercase">Pending</span>
</div>
<div className="text-2xl font-bold text-white">
{protests.filter((p) => p.status === 'pending').length}
</div>
</div>
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
<div className="flex items-center gap-2 text-performance-green mb-1">
<CheckCircle className="w-4 h-4" />
<span className="text-xs font-medium uppercase">Resolved</span>
</div>
<div className="text-2xl font-bold text-white">
{protests.filter((p) => p.status === 'upheld' || p.status === 'dismissed').length}
</div>
</div>
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
<div className="flex items-center gap-2 text-primary-blue mb-1">
<Flag className="w-4 h-4" />
<span className="text-xs font-medium uppercase">Total</span>
</div>
<div className="text-2xl font-bold text-white">
{protests.length}
</div>
</div>
</div>
{/* Protest list */}
<div className="space-y-3">
{protests.map((protest) => {
const race = protestRaces[protest.raceId];
const filer = protestDriversById[protest.protestingDriverId];
const accused = protestDriversById[protest.accusedDriverId];
const statusConfig = {
pending: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', icon: Clock, label: 'Pending Review' },
under_review: { color: 'text-primary-blue', bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', icon: Flag, label: 'Under Review' },
upheld: { color: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/30', icon: AlertTriangle, label: 'Upheld' },
dismissed: { color: 'text-gray-400', bg: 'bg-gray-500/10', border: 'border-gray-500/30', icon: XCircle, label: 'Dismissed' },
withdrawn: { color: 'text-gray-500', bg: 'bg-gray-600/10', border: 'border-gray-600/30', icon: XCircle, label: 'Withdrawn' },
}[protest.status] ?? { color: 'text-gray-400', bg: 'bg-gray-500/10', border: 'border-gray-500/30', icon: Clock, label: protest.status };
const StatusIcon = statusConfig.icon;
return (
<div
key={protest.id}
className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4 hover:bg-iron-gray/30 transition-colors"
>
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2">
<div className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${statusConfig.bg} ${statusConfig.border} ${statusConfig.color} border`}>
<StatusIcon className="w-3 h-3" />
{statusConfig.label}
</div>
{race && (
<span className="text-xs text-gray-500 flex items-center gap-1">
<Calendar className="w-3 h-3" />
{race.track} • {new Date(race.scheduledAt).toLocaleDateString()}
</span>
)}
</div>
<h3 className="text-sm font-semibold text-white mb-1 capitalize">
Incident at Lap {protest.incident.lap}
</h3>
<p className="text-xs text-gray-400 mb-3 line-clamp-2">
{protest.incident.description}
</p>
<div className="flex items-center gap-4 text-xs">
<div className="flex items-center gap-1.5">
<User className="w-3 h-3 text-gray-500" />
<span className="text-gray-400">Filed by:</span>
<span className="text-white font-medium">{filer?.name ?? 'Unknown'}</span>
</div>
<div className="flex items-center gap-1.5">
<AlertTriangle className="w-3 h-3 text-warning-amber" />
<span className="text-gray-400">Against:</span>
<span className="text-warning-amber font-medium">{accused?.name ?? 'Unknown'}</span>
</div>
</div>
</div>
{protest.status === 'pending' && (
<div className="flex gap-2 shrink-0">
<Button variant="secondary" disabled>
Review
</Button>
</div>
)}
</div>
{protest.comment && (
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
<span className="text-xs text-gray-500">
Driver comment: "{protest.comment}"
</span>
</div>
)}
</div>
);
})}
</div>
<div className="mt-6 p-4 rounded-lg bg-iron-gray/30 border border-charcoal-outline/50">
<p className="text-xs text-gray-500">
<strong className="text-gray-400">Alpha Note:</strong> Protest review and penalty application is demonstration-only.
In the full product, stewards can review evidence, apply penalties, and manage appeals.
</p>
</div>
</div>
)}
</Card>
)}

82
apps/website/components/leagues/LeagueHeader.tsx
View File

@@ -5,7 +5,6 @@ import Link from 'next/link';
import Image from 'next/image';
import MembershipStatus from '@/components/leagues/MembershipStatus';
import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
import { getLeagueCoverClasses } from '@/lib/leagueCovers';
import {
getDriverRepository,
getDriverStats,
@@ -32,7 +31,6 @@ export default function LeagueHeader({
ownerName,
}: LeagueHeaderProps) {
const imageService = getImageService();
const coverUrl = imageService.getLeagueCover(leagueId);
const logoUrl = imageService.getLeagueLogo(leagueId);
const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
@@ -100,35 +98,27 @@ export default function LeagueHeader({
return (
<div className="mb-8">
<div className="mb-4">
<div className={getLeagueCoverClasses(leagueId)} aria-hidden="true">
<div className="relative w-full h-full">
{/* League header with logo - no cover image */}
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-4">
<div className="h-16 w-16 rounded-xl overflow-hidden border-2 border-charcoal-outline bg-iron-gray shadow-lg">
<Image
src={coverUrl}
alt="League cover placeholder"
fill
className="object-cover opacity-80"
sizes="100vw"
src={logoUrl}
alt={`${leagueName} logo`}
width={64}
height={64}
className="w-full h-full object-cover"
/>
<div className="absolute left-6 bottom-4 flex items-center">
<div className="h-16 w-16 rounded-full overflow-hidden border-2 border-charcoal-outline bg-deep-graphite/95 shadow-[0_0_18px_rgba(0,0,0,0.7)]">
<Image
src={logoUrl}
alt={`${leagueName} logo`}
width={64}
height={64}
className="w-full h-full object-cover"
/>
</div>
</div>
</div>
</div>
</div>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-white">{leagueName}</h1>
<MembershipStatus leagueId={leagueId} />
<div>
<div className="flex items-center gap-3 mb-1">
<h1 className="text-2xl font-bold text-white">{leagueName}</h1>
<MembershipStatus leagueId={leagueId} />
</div>
{description && (
<p className="text-gray-400 text-sm max-w-xl">{description}</p>
)}
</div>
</div>
<FeatureLimitationTooltip message="Multi-league memberships coming in production">
<span className="px-2 py-1 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
@@ -137,30 +127,22 @@ export default function LeagueHeader({
</FeatureLimitationTooltip>
</div>
{description && (
<p className="text-gray-400 mb-2">{description}</p>
)}
<div className="mb-6 flex flex-col gap-2">
<span className="text-sm text-gray-400">Owner</span>
<div className="flex items-center gap-3">
<span className="text-sm text-gray-400">Owner:</span>
{ownerSummary ? (
<div className="inline-flex items-center gap-3">
<DriverSummaryPill
driver={ownerSummary.driver}
rating={ownerSummary.rating}
rank={ownerSummary.rank}
href={`/drivers/${ownerSummary.driver.id}?from=league&leagueId=${leagueId}`}
/>
</div>
<DriverSummaryPill
driver={ownerSummary.driver}
rating={ownerSummary.rating}
rank={ownerSummary.rank}
href={`/drivers/${ownerSummary.driver.id}?from=league&leagueId=${leagueId}`}
/>
) : (
<div className="text-sm text-gray-500">
<Link
href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
className="text-primary-blue hover:underline"
>
{ownerName}
</Link>
</div>
<Link
href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
className="text-sm text-primary-blue hover:underline"
>
{ownerName}
</Link>
)}
</div>
</div>