wip
This commit is contained in:
@@ -522,40 +522,6 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Quick Links */}
|
||||
<Card className="bg-gradient-to-br from-iron-gray to-iron-gray/80">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-warning-amber" />
|
||||
Quick Links
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<Link
|
||||
href="/leaderboards"
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite/50 border border-charcoal-outline hover:border-yellow-400/30 transition-colors"
|
||||
>
|
||||
<Trophy className="w-5 h-5 text-yellow-400" />
|
||||
<span className="text-white text-sm">Leaderboards</span>
|
||||
<ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/teams"
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite/50 border border-charcoal-outline hover:border-purple-400/30 transition-colors"
|
||||
>
|
||||
<Users className="w-5 h-5 text-purple-400" />
|
||||
<span className="text-white text-sm">Teams</span>
|
||||
<ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/leagues/create"
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite/50 border border-charcoal-outline hover:border-primary-blue/30 transition-colors"
|
||||
>
|
||||
<Flag className="w-5 h-5 text-primary-blue" />
|
||||
<span className="text-white text-sm">Create League</span>
|
||||
<ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -9,6 +9,8 @@ import { AlphaNav } from '@/components/alpha/AlphaNav';
|
||||
import AlphaBanner from '@/components/alpha/AlphaBanner';
|
||||
import AlphaFooter from '@/components/alpha/AlphaFooter';
|
||||
import { AuthProvider } from '@/lib/auth/AuthContext';
|
||||
import NotificationProvider from '@/components/notifications/NotificationProvider';
|
||||
import DevToolbar from '@/components/dev/DevToolbar';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
@@ -60,12 +62,15 @@ export default async function RootLayout({
|
||||
</head>
|
||||
<body className="antialiased overflow-x-hidden min-h-screen bg-deep-graphite flex flex-col">
|
||||
<AuthProvider initialSession={session}>
|
||||
<AlphaNav />
|
||||
<AlphaBanner />
|
||||
<main className="flex-1 max-w-7xl mx-auto px-6 py-8 w-full">
|
||||
{children}
|
||||
</main>
|
||||
<AlphaFooter />
|
||||
<NotificationProvider>
|
||||
<AlphaNav />
|
||||
<AlphaBanner />
|
||||
<main className="flex-1 max-w-7xl mx-auto px-6 py-8 w-full">
|
||||
{children}
|
||||
</main>
|
||||
<AlphaFooter />
|
||||
<DevToolbar />
|
||||
</NotificationProvider>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
202
apps/website/app/profile/settings/page.tsx
Normal file
202
apps/website/app/profile/settings/page.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import { Bell, Shield, Eye, Volume2 } from 'lucide-react';
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-2xl font-bold text-white mb-8">Settings</h1>
|
||||
|
||||
<div className="space-y-8">
|
||||
{/* Notification Settings */}
|
||||
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Bell className="h-5 w-5 text-primary-blue" />
|
||||
<h2 className="text-lg font-semibold text-white">Notifications</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Protest Filed Against You</p>
|
||||
<p className="text-xs text-gray-400">Get notified when someone files a protest involving you</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="modal">Modal (Blocking)</option>
|
||||
<option value="toast">Toast (Popup)</option>
|
||||
<option value="silent">Silent (Notification Center)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Vote Requested</p>
|
||||
<p className="text-xs text-gray-400">Get notified when your vote is needed on a protest</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="modal">Modal (Blocking)</option>
|
||||
<option value="toast">Toast (Popup)</option>
|
||||
<option value="silent">Silent (Notification Center)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Defense Required</p>
|
||||
<p className="text-xs text-gray-400">Get notified when you need to submit a defense</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="modal">Modal (Blocking)</option>
|
||||
<option value="toast">Toast (Popup)</option>
|
||||
<option value="silent">Silent (Notification Center)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Penalty Issued</p>
|
||||
<p className="text-xs text-gray-400">Get notified when you receive a penalty</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="toast" selected>Toast (Popup)</option>
|
||||
<option value="modal">Modal (Blocking)</option>
|
||||
<option value="silent">Silent (Notification Center)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Race Starting Soon</p>
|
||||
<p className="text-xs text-gray-400">Reminder before scheduled races begin</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="toast">Toast (Popup)</option>
|
||||
<option value="modal">Modal (Blocking)</option>
|
||||
<option value="silent">Silent (Notification Center)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">League Announcements</p>
|
||||
<p className="text-xs text-gray-400">Updates from league administrators</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="silent">Silent (Notification Center)</option>
|
||||
<option value="toast">Toast (Popup)</option>
|
||||
<option value="modal">Modal (Blocking)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Display Settings */}
|
||||
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Eye className="h-5 w-5 text-primary-blue" />
|
||||
<h2 className="text-lg font-semibold text-white">Display</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Toast Duration</p>
|
||||
<p className="text-xs text-gray-400">How long toast notifications stay visible</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="3000">3 seconds</option>
|
||||
<option value="5000" selected>5 seconds</option>
|
||||
<option value="8000">8 seconds</option>
|
||||
<option value="10000">10 seconds</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Toast Position</p>
|
||||
<p className="text-xs text-gray-400">Where toast notifications appear on screen</p>
|
||||
</div>
|
||||
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
||||
<option value="top-right">Top Right</option>
|
||||
<option value="top-left">Top Left</option>
|
||||
<option value="bottom-right" selected>Bottom Right</option>
|
||||
<option value="bottom-left">Bottom Left</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sound Settings */}
|
||||
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Volume2 className="h-5 w-5 text-primary-blue" />
|
||||
<h2 className="text-lg font-semibold text-white">Sound</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Notification Sounds</p>
|
||||
<p className="text-xs text-gray-400">Play sounds for new notifications</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Urgent Notification Sound</p>
|
||||
<p className="text-xs text-gray-400">Special sound for modal notifications</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Privacy Settings */}
|
||||
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Shield className="h-5 w-5 text-primary-blue" />
|
||||
<h2 className="text-lg font-semibold text-white">Privacy</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Show Online Status</p>
|
||||
<p className="text-xs text-gray-400">Let others see when you're online</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Public Profile</p>
|
||||
<p className="text-xs text-gray-400">Allow non-league members to view your profile</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end">
|
||||
<button className="px-6 py-2 bg-primary-blue text-white font-medium rounded-lg hover:bg-primary-blue/90 transition-colors">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -884,6 +884,14 @@ export default function RaceDetailPage() {
|
||||
File Protest
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
onClick={() => router.push(`/races/${race.id}/stewarding`)}
|
||||
>
|
||||
<Scale className="w-4 h-4" />
|
||||
Stewarding
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -913,38 +921,6 @@ export default function RaceDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Quick Links */}
|
||||
<Card>
|
||||
<h3 className="text-sm font-semibold text-white mb-3">Quick Links</h3>
|
||||
<div className="space-y-2">
|
||||
<Link
|
||||
href="/races"
|
||||
className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
|
||||
>
|
||||
<Flag className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-sm text-gray-300">All Races</span>
|
||||
</Link>
|
||||
{league && (
|
||||
<Link
|
||||
href={`/leagues/${league.id}`}
|
||||
className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
|
||||
>
|
||||
<Trophy className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-sm text-gray-300">{league.name}</span>
|
||||
</Link>
|
||||
)}
|
||||
{league && (
|
||||
<Link
|
||||
href={`/leagues/${league.id}/standings`}
|
||||
className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
|
||||
>
|
||||
<Users className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-sm text-gray-300">League Standings</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
525
apps/website/app/races/[id]/stewarding/page.tsx
Normal file
525
apps/website/app/races/[id]/stewarding/page.tsx
Normal file
@@ -0,0 +1,525 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
||||
import {
|
||||
getRaceRepository,
|
||||
getLeagueRepository,
|
||||
getProtestRepository,
|
||||
getDriverRepository,
|
||||
getPenaltyRepository,
|
||||
getLeagueMembershipRepository,
|
||||
getReviewProtestUseCase,
|
||||
getApplyPenaltyUseCase,
|
||||
} from '@/lib/di-container';
|
||||
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
||||
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
|
||||
import type { Race } from '@gridpilot/racing/domain/entities/Race';
|
||||
import type { League } from '@gridpilot/racing/domain/entities/League';
|
||||
import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
|
||||
import type { Penalty, PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
|
||||
import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
|
||||
import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
Flag,
|
||||
Calendar,
|
||||
MapPin,
|
||||
AlertCircle,
|
||||
Video,
|
||||
Gavel,
|
||||
ArrowLeft,
|
||||
Scale,
|
||||
ChevronRight,
|
||||
Users,
|
||||
Trophy,
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function RaceStewardingPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const raceId = params.id as string;
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
const [race, setRace] = useState<Race | null>(null);
|
||||
const [league, setLeague] = useState<League | null>(null);
|
||||
const [protests, setProtests] = useState<Protest[]>([]);
|
||||
const [penalties, setPenalties] = useState<Penalty[]>([]);
|
||||
const [driversById, setDriversById] = useState<Record<string, DriverDTO>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const raceRepo = getRaceRepository();
|
||||
const leagueRepo = getLeagueRepository();
|
||||
const protestRepo = getProtestRepository();
|
||||
const penaltyRepo = getPenaltyRepository();
|
||||
const driverRepo = getDriverRepository();
|
||||
const membershipRepo = getLeagueMembershipRepository();
|
||||
|
||||
// Get race
|
||||
const raceData = await raceRepo.findById(raceId);
|
||||
if (!raceData) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setRace(raceData);
|
||||
|
||||
// Get league
|
||||
const leagueData = await leagueRepo.findById(raceData.leagueId);
|
||||
setLeague(leagueData);
|
||||
|
||||
// Check admin status
|
||||
if (leagueData) {
|
||||
const membership = await membershipRepo.getMembership(leagueData.id, currentDriverId);
|
||||
setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
|
||||
}
|
||||
|
||||
// Get protests for this race
|
||||
const raceProtests = await protestRepo.findByRaceId(raceId);
|
||||
setProtests(raceProtests);
|
||||
|
||||
// Get penalties for this race
|
||||
const racePenalties = await penaltyRepo.findByRaceId(raceId);
|
||||
setPenalties(racePenalties);
|
||||
|
||||
// Collect driver IDs
|
||||
const driverIds = new Set<string>();
|
||||
raceProtests.forEach((p) => {
|
||||
driverIds.add(p.protestingDriverId);
|
||||
driverIds.add(p.accusedDriverId);
|
||||
});
|
||||
racePenalties.forEach((p) => {
|
||||
driverIds.add(p.driverId);
|
||||
});
|
||||
|
||||
// Load driver info
|
||||
const driverEntities = await Promise.all(
|
||||
Array.from(driverIds).map((id) => driverRepo.findById(id))
|
||||
);
|
||||
const byId: Record<string, DriverDTO> = {};
|
||||
driverEntities.forEach((driver) => {
|
||||
if (driver) {
|
||||
const dto = EntityMappers.toDriverDTO(driver);
|
||||
if (dto) {
|
||||
byId[dto.id] = dto;
|
||||
}
|
||||
}
|
||||
});
|
||||
setDriversById(byId);
|
||||
} catch (err) {
|
||||
console.error('Failed to load data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
loadData();
|
||||
}, [raceId, currentDriverId]);
|
||||
|
||||
const pendingProtests = protests.filter(
|
||||
(p) => p.status === 'pending' || p.status === 'under_review'
|
||||
);
|
||||
const resolvedProtests = protests.filter(
|
||||
(p) => p.status === 'upheld' || p.status === 'dismissed' || p.status === 'withdrawn'
|
||||
);
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
case 'under_review':
|
||||
return (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
|
||||
Pending
|
||||
</span>
|
||||
);
|
||||
case 'upheld':
|
||||
return (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
|
||||
Upheld
|
||||
</span>
|
||||
);
|
||||
case 'dismissed':
|
||||
return (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-gray-500/20 text-gray-400 rounded-full">
|
||||
Dismissed
|
||||
</span>
|
||||
);
|
||||
case 'withdrawn':
|
||||
return (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full">
|
||||
Withdrawn
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="animate-pulse space-y-6">
|
||||
<div className="h-6 bg-iron-gray rounded w-1/4" />
|
||||
<div className="h-48 bg-iron-gray rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!race) {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Card className="text-center py-12">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="p-4 bg-warning-amber/10 rounded-full">
|
||||
<AlertTriangle className="w-8 h-8 text-warning-amber" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-medium mb-1">Race not found</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
The race you're looking for doesn't exist.
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="secondary" onClick={() => router.push('/races')}>
|
||||
Back to Races
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: 'Races', href: '/races' },
|
||||
{ label: race.track, href: `/races/${race.id}` },
|
||||
{ label: 'Stewarding' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => router.push(`/races/${race.id}`)}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Race
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<Card className="bg-gradient-to-r from-iron-gray/50 to-iron-gray/30">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary-blue/20 flex items-center justify-center">
|
||||
<Scale className="w-6 h-6 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Stewarding</h1>
|
||||
<p className="text-sm text-gray-400">
|
||||
{race.track} • {formatDate(race.scheduledAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="rounded-lg bg-deep-graphite/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">{pendingProtests.length}</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-deep-graphite/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">{resolvedProtests.length}</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
|
||||
<div className="flex items-center gap-2 text-red-400 mb-1">
|
||||
<Gavel className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase">Penalties</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">{penalties.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div className="border-b border-charcoal-outline">
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setActiveTab('pending')}
|
||||
className={`pb-3 px-1 font-medium transition-colors ${
|
||||
activeTab === 'pending'
|
||||
? 'text-primary-blue border-b-2 border-primary-blue'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Pending
|
||||
{pendingProtests.length > 0 && (
|
||||
<span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
|
||||
{pendingProtests.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('resolved')}
|
||||
className={`pb-3 px-1 font-medium transition-colors ${
|
||||
activeTab === 'resolved'
|
||||
? 'text-primary-blue border-b-2 border-primary-blue'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Resolved
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('penalties')}
|
||||
className={`pb-3 px-1 font-medium transition-colors ${
|
||||
activeTab === 'penalties'
|
||||
? 'text-primary-blue border-b-2 border-primary-blue'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Penalties
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{activeTab === 'pending' && (
|
||||
<div className="space-y-4">
|
||||
{pendingProtests.length === 0 ? (
|
||||
<Card className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
|
||||
<Flag className="w-8 h-8 text-performance-green" />
|
||||
</div>
|
||||
<p className="font-semibold text-lg text-white mb-2">All Clear!</p>
|
||||
<p className="text-sm text-gray-400">No pending protests to review</p>
|
||||
</Card>
|
||||
) : (
|
||||
pendingProtests.map((protest) => {
|
||||
const protester = driversById[protest.protestingDriverId];
|
||||
const accused = driversById[protest.accusedDriverId];
|
||||
const daysSinceFiled = Math.floor(
|
||||
(Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
|
||||
);
|
||||
const isUrgent = daysSinceFiled > 2;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={protest.id}
|
||||
className={`${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertCircle className="w-4 h-4 text-warning-amber flex-shrink-0" />
|
||||
<Link
|
||||
href={`/drivers/${protest.protestingDriverId}`}
|
||||
className="font-medium text-white hover:text-primary-blue transition-colors"
|
||||
>
|
||||
{protester?.name || 'Unknown'}
|
||||
</Link>
|
||||
<span className="text-gray-400">vs</span>
|
||||
<Link
|
||||
href={`/drivers/${protest.accusedDriverId}`}
|
||||
className="font-medium text-white hover:text-primary-blue transition-colors"
|
||||
>
|
||||
{accused?.name || 'Unknown'}
|
||||
</Link>
|
||||
{getStatusBadge(protest.status)}
|
||||
{isUrgent && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
{daysSinceFiled}d old
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
|
||||
<span>Lap {protest.incident.lap}</span>
|
||||
<span>•</span>
|
||||
<span>Filed {formatDate(protest.filedAt)}</span>
|
||||
{protest.proofVideoUrl && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<a
|
||||
href={protest.proofVideoUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 text-primary-blue hover:underline"
|
||||
>
|
||||
<Video className="w-3 h-3" />
|
||||
Video Evidence
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-300">{protest.incident.description}</p>
|
||||
</div>
|
||||
{isAdmin && league && (
|
||||
<Link
|
||||
href={`/leagues/${league.id}/stewarding/protests/${protest.id}`}
|
||||
>
|
||||
<Button variant="primary">Review</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'resolved' && (
|
||||
<div className="space-y-4">
|
||||
{resolvedProtests.length === 0 ? (
|
||||
<Card className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
|
||||
<CheckCircle className="w-8 h-8 text-gray-500" />
|
||||
</div>
|
||||
<p className="font-semibold text-lg text-white mb-2">No Resolved Protests</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Resolved protests will appear here
|
||||
</p>
|
||||
</Card>
|
||||
) : (
|
||||
resolvedProtests.map((protest) => {
|
||||
const protester = driversById[protest.protestingDriverId];
|
||||
const accused = driversById[protest.accusedDriverId];
|
||||
|
||||
return (
|
||||
<Card key={protest.id}>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertCircle className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
<Link
|
||||
href={`/drivers/${protest.protestingDriverId}`}
|
||||
className="font-medium text-white hover:text-primary-blue transition-colors"
|
||||
>
|
||||
{protester?.name || 'Unknown'}
|
||||
</Link>
|
||||
<span className="text-gray-400">vs</span>
|
||||
<Link
|
||||
href={`/drivers/${protest.accusedDriverId}`}
|
||||
className="font-medium text-white hover:text-primary-blue transition-colors"
|
||||
>
|
||||
{accused?.name || 'Unknown'}
|
||||
</Link>
|
||||
{getStatusBadge(protest.status)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
|
||||
<span>Lap {protest.incident.lap}</span>
|
||||
<span>•</span>
|
||||
<span>Filed {formatDate(protest.filedAt)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 mb-2">
|
||||
{protest.incident.description}
|
||||
</p>
|
||||
{protest.decisionNotes && (
|
||||
<div className="mt-2 p-3 rounded bg-iron-gray/50 border border-charcoal-outline/50">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
|
||||
Steward Decision
|
||||
</p>
|
||||
<p className="text-sm text-gray-300">{protest.decisionNotes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'penalties' && (
|
||||
<div className="space-y-4">
|
||||
{penalties.length === 0 ? (
|
||||
<Card className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
|
||||
<Gavel className="w-8 h-8 text-gray-500" />
|
||||
</div>
|
||||
<p className="font-semibold text-lg text-white mb-2">No Penalties</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Penalties issued for this race will appear here
|
||||
</p>
|
||||
</Card>
|
||||
) : (
|
||||
penalties.map((penalty) => {
|
||||
const driver = driversById[penalty.driverId];
|
||||
return (
|
||||
<Card key={penalty.id}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
|
||||
<Gavel className="w-6 h-6 text-red-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Link
|
||||
href={`/drivers/${penalty.driverId}`}
|
||||
className="font-medium text-white hover:text-primary-blue transition-colors"
|
||||
>
|
||||
{driver?.name || 'Unknown'}
|
||||
</Link>
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
|
||||
{penalty.type.replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">{penalty.reason}</p>
|
||||
{penalty.notes && (
|
||||
<p className="text-sm text-gray-500 mt-1 italic">{penalty.notes}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-2xl font-bold text-red-400">
|
||||
{penalty.type === 'time_penalty' && `+${penalty.value}s`}
|
||||
{penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
|
||||
{penalty.type === 'points_deduction' && `-${penalty.value} pts`}
|
||||
{penalty.type === 'disqualification' && 'DSQ'}
|
||||
{penalty.type === 'warning' && 'Warning'}
|
||||
{penalty.type === 'license_points' && `${penalty.value} LP`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user