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>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import UserPill from '@/components/profile/UserPill';
|
||||
import NotificationCenter from '@/components/notifications/NotificationCenter';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
|
||||
type AlphaNavProps = Record<string, never>;
|
||||
@@ -66,6 +67,7 @@ export function AlphaNav({}: AlphaNavProps) {
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-3">
|
||||
<NotificationCenter />
|
||||
<UserPill />
|
||||
</div>
|
||||
|
||||
|
||||
352
apps/website/components/dev/DevToolbar.tsx
Normal file
352
apps/website/components/dev/DevToolbar.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
||||
import { getSendNotificationUseCase } from '@/lib/di-container';
|
||||
import type { NotificationUrgency } from '@gridpilot/notifications/application';
|
||||
import {
|
||||
Bell,
|
||||
AlertTriangle,
|
||||
Vote,
|
||||
Shield,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Wrench,
|
||||
X,
|
||||
MessageSquare,
|
||||
AlertCircle,
|
||||
BellRing,
|
||||
} from 'lucide-react';
|
||||
|
||||
type DemoNotificationType = 'protest_filed' | 'defense_requested' | 'vote_required';
|
||||
type DemoUrgency = 'silent' | 'toast' | 'modal';
|
||||
|
||||
interface NotificationOption {
|
||||
type: DemoNotificationType;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: typeof Bell;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface UrgencyOption {
|
||||
urgency: DemoUrgency;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: typeof Bell;
|
||||
}
|
||||
|
||||
const notificationOptions: NotificationOption[] = [
|
||||
{
|
||||
type: 'protest_filed',
|
||||
label: 'Protest Against You',
|
||||
description: 'A protest was filed against you',
|
||||
icon: AlertTriangle,
|
||||
color: 'text-red-400',
|
||||
},
|
||||
{
|
||||
type: 'defense_requested',
|
||||
label: 'Defense Requested',
|
||||
description: 'A steward requests your defense',
|
||||
icon: Shield,
|
||||
color: 'text-warning-amber',
|
||||
},
|
||||
{
|
||||
type: 'vote_required',
|
||||
label: 'Vote Required',
|
||||
description: 'You need to vote on a protest',
|
||||
icon: Vote,
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
];
|
||||
|
||||
const urgencyOptions: UrgencyOption[] = [
|
||||
{
|
||||
urgency: 'silent',
|
||||
label: 'Silent',
|
||||
description: 'Only shows in notification center',
|
||||
icon: Bell,
|
||||
},
|
||||
{
|
||||
urgency: 'toast',
|
||||
label: 'Toast',
|
||||
description: 'Shows a temporary popup',
|
||||
icon: BellRing,
|
||||
},
|
||||
{
|
||||
urgency: 'modal',
|
||||
label: 'Modal',
|
||||
description: 'Shows blocking modal (must respond)',
|
||||
icon: AlertCircle,
|
||||
},
|
||||
];
|
||||
|
||||
export default function DevToolbar() {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [isMinimized, setIsMinimized] = useState(false);
|
||||
const [selectedType, setSelectedType] = useState<DemoNotificationType>('protest_filed');
|
||||
const [selectedUrgency, setSelectedUrgency] = useState<DemoUrgency>('toast');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [lastSent, setLastSent] = useState<string | null>(null);
|
||||
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
// Only show in development
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleSendNotification = async () => {
|
||||
setSending(true);
|
||||
try {
|
||||
const sendNotification = getSendNotificationUseCase();
|
||||
|
||||
let title: string;
|
||||
let body: string;
|
||||
let notificationType: 'protest_filed' | 'protest_defense_requested' | 'protest_vote_required';
|
||||
let actionUrl: string;
|
||||
|
||||
switch (selectedType) {
|
||||
case 'protest_filed':
|
||||
title = '🚨 Protest Filed Against You';
|
||||
body = 'Max Verstappen has filed a protest against you for unsafe rejoining at Turn 3, Lap 12 during the Spa-Francorchamps race.';
|
||||
notificationType = 'protest_filed';
|
||||
actionUrl = '/races/race-1/stewarding';
|
||||
break;
|
||||
case 'defense_requested':
|
||||
title = '⚖️ Defense Requested';
|
||||
body = 'A steward has requested your defense regarding the incident at Turn 1 in the Monza race. Please provide your side of the story within 48 hours.';
|
||||
notificationType = 'protest_defense_requested';
|
||||
actionUrl = '/races/race-2/stewarding';
|
||||
break;
|
||||
case 'vote_required':
|
||||
title = '🗳️ Your Vote Required';
|
||||
body = 'As a league steward, you are required to vote on the protest: Driver A vs Driver B - Causing a collision at Eau Rouge.';
|
||||
notificationType = 'protest_vote_required';
|
||||
actionUrl = '/leagues/league-1/stewarding';
|
||||
break;
|
||||
}
|
||||
|
||||
// For modal urgency, add actions
|
||||
const actions = selectedUrgency === 'modal' ? [
|
||||
{ label: 'View Protest', type: 'primary' as const, href: actionUrl, actionId: 'view' },
|
||||
{ label: 'Dismiss', type: 'secondary' as const, actionId: 'dismiss' },
|
||||
] : undefined;
|
||||
|
||||
await sendNotification.execute({
|
||||
recipientId: currentDriverId,
|
||||
type: notificationType,
|
||||
title,
|
||||
body,
|
||||
actionUrl,
|
||||
urgency: selectedUrgency as NotificationUrgency,
|
||||
requiresResponse: selectedUrgency === 'modal',
|
||||
actions,
|
||||
data: {
|
||||
protestId: `demo-protest-${Date.now()}`,
|
||||
raceId: 'race-1',
|
||||
leagueId: 'league-1',
|
||||
deadline: selectedUrgency === 'modal' ? new Date(Date.now() + 48 * 60 * 60 * 1000) : undefined,
|
||||
},
|
||||
});
|
||||
|
||||
setLastSent(`${selectedType}-${selectedUrgency}`);
|
||||
setTimeout(() => setLastSent(null), 3000);
|
||||
} catch (error) {
|
||||
console.error('Failed to send demo notification:', error);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isMinimized) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => setIsMinimized(false)}
|
||||
className="fixed bottom-4 right-4 z-50 p-3 bg-iron-gray border border-charcoal-outline rounded-full shadow-lg hover:bg-charcoal-outline transition-colors"
|
||||
title="Open Dev Toolbar"
|
||||
>
|
||||
<Wrench className="w-5 h-5 text-primary-blue" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-50 w-80 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="w-4 h-4 text-primary-blue" />
|
||||
<span className="text-sm font-semibold text-white">Dev Toolbar</span>
|
||||
<span className="px-1.5 py-0.5 text-[10px] font-medium bg-primary-blue/20 text-primary-blue rounded">
|
||||
DEMO
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="p-1.5 hover:bg-charcoal-outline rounded transition-colors"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronUp className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsMinimized(true)}
|
||||
className="p-1.5 hover:bg-charcoal-outline rounded transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{isExpanded && (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Notification Type Section */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MessageSquare className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
|
||||
Notification Type
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{notificationOptions.map((option) => {
|
||||
const Icon = option.icon;
|
||||
const isSelected = selectedType === option.type;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.type}
|
||||
onClick={() => setSelectedType(option.type)}
|
||||
className={`
|
||||
flex flex-col items-center gap-1 p-2 rounded-lg border transition-all text-center
|
||||
${isSelected
|
||||
? 'bg-primary-blue/20 border-primary-blue/50'
|
||||
: 'bg-iron-gray/30 border-charcoal-outline hover:bg-iron-gray/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon className={`w-4 h-4 ${isSelected ? 'text-primary-blue' : option.color}`} />
|
||||
<span className={`text-[10px] font-medium ${isSelected ? 'text-primary-blue' : 'text-gray-400'}`}>
|
||||
{option.label.split(' ')[0]}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Urgency Section */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<BellRing className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
|
||||
Urgency Level
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{urgencyOptions.map((option) => {
|
||||
const Icon = option.icon;
|
||||
const isSelected = selectedUrgency === option.urgency;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.urgency}
|
||||
onClick={() => setSelectedUrgency(option.urgency)}
|
||||
className={`
|
||||
flex flex-col items-center gap-1 p-2 rounded-lg border transition-all text-center
|
||||
${isSelected
|
||||
? option.urgency === 'modal'
|
||||
? 'bg-red-500/20 border-red-500/50'
|
||||
: option.urgency === 'toast'
|
||||
? 'bg-warning-amber/20 border-warning-amber/50'
|
||||
: 'bg-gray-500/20 border-gray-500/50'
|
||||
: 'bg-iron-gray/30 border-charcoal-outline hover:bg-iron-gray/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon className={`w-4 h-4 ${
|
||||
isSelected
|
||||
? option.urgency === 'modal'
|
||||
? 'text-red-400'
|
||||
: option.urgency === 'toast'
|
||||
? 'text-warning-amber'
|
||||
: 'text-gray-400'
|
||||
: 'text-gray-500'
|
||||
}`} />
|
||||
<span className={`text-[10px] font-medium ${
|
||||
isSelected
|
||||
? option.urgency === 'modal'
|
||||
? 'text-red-400'
|
||||
: option.urgency === 'toast'
|
||||
? 'text-warning-amber'
|
||||
: 'text-gray-400'
|
||||
: 'text-gray-500'
|
||||
}`}>
|
||||
{option.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-600 mt-1">
|
||||
{urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Send Button */}
|
||||
<button
|
||||
onClick={handleSendNotification}
|
||||
disabled={sending}
|
||||
className={`
|
||||
w-full flex items-center justify-center gap-2 py-2.5 rounded-lg font-medium text-sm transition-all
|
||||
${lastSent
|
||||
? 'bg-performance-green/20 border border-performance-green/30 text-performance-green'
|
||||
: 'bg-primary-blue hover:bg-primary-blue/80 text-white'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : lastSent ? (
|
||||
<>
|
||||
✓ Notification Sent!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Bell className="w-4 h-4" />
|
||||
Send Demo Notification
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Info */}
|
||||
<div className="p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
||||
<p className="text-[10px] text-gray-500">
|
||||
<strong className="text-gray-400">Silent:</strong> Notification center only<br/>
|
||||
<strong className="text-gray-400">Toast:</strong> Temporary popup (auto-dismisses)<br/>
|
||||
<strong className="text-gray-400">Modal:</strong> Blocking popup (requires action)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Collapsed state hint */}
|
||||
{!isExpanded && (
|
||||
<div className="px-4 py-2 text-xs text-gray-500">
|
||||
Click ↑ to expand notification demo tools
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
AlertCircle,
|
||||
Sparkles,
|
||||
Check,
|
||||
Scale,
|
||||
} from 'lucide-react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
@@ -42,6 +43,7 @@ import {
|
||||
} from './LeagueScoringSection';
|
||||
import { LeagueDropSection } from './LeagueDropSection';
|
||||
import { LeagueTimingsSection } from './LeagueTimingsSection';
|
||||
import { LeagueStewardingSection } from './LeagueStewardingSection';
|
||||
|
||||
// ============================================================================
|
||||
// LOCAL STORAGE PERSISTENCE
|
||||
@@ -99,9 +101,9 @@ function getHighestStep(): number {
|
||||
}
|
||||
}
|
||||
|
||||
type Step = 1 | 2 | 3 | 4 | 5 | 6;
|
||||
type Step = 1 | 2 | 3 | 4 | 5 | 6 | 7;
|
||||
|
||||
type StepName = 'basics' | 'visibility' | 'structure' | 'schedule' | 'scoring' | 'review';
|
||||
type StepName = 'basics' | 'visibility' | 'structure' | 'schedule' | 'scoring' | 'stewarding' | 'review';
|
||||
|
||||
interface CreateLeagueWizardProps {
|
||||
stepName: StepName;
|
||||
@@ -120,8 +122,10 @@ function stepNameToStep(stepName: StepName): Step {
|
||||
return 4;
|
||||
case 'scoring':
|
||||
return 5;
|
||||
case 'review':
|
||||
case 'stewarding':
|
||||
return 6;
|
||||
case 'review':
|
||||
return 7;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,6 +142,8 @@ function stepToStepName(step: Step): StepName {
|
||||
case 5:
|
||||
return 'scoring';
|
||||
case 6:
|
||||
return 'stewarding';
|
||||
case 7:
|
||||
return 'review';
|
||||
}
|
||||
}
|
||||
@@ -198,6 +204,17 @@ function createDefaultForm(): LeagueConfigFormModel {
|
||||
timezoneId: 'UTC',
|
||||
seasonStartDate: getDefaultSeasonStartDate(),
|
||||
},
|
||||
stewarding: {
|
||||
decisionMode: 'admin_only',
|
||||
requiredVotes: 2,
|
||||
requireDefense: false,
|
||||
defenseTimeLimit: 48,
|
||||
voteTimeLimit: 72,
|
||||
protestDeadlineHours: 48,
|
||||
stewardingClosesHours: 168,
|
||||
notifyAccusedOnProtest: true,
|
||||
notifyOnVoteRequired: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -287,7 +304,7 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
|
||||
if (!validateStep(step)) {
|
||||
return;
|
||||
}
|
||||
const nextStep = (step < 6 ? ((step + 1) as Step) : step);
|
||||
const nextStep = (step < 7 ? ((step + 1) as Step) : step);
|
||||
saveHighestStep(nextStep);
|
||||
setHighestCompletedStep((prev) => Math.max(prev, nextStep));
|
||||
onStepChange(stepToStepName(nextStep));
|
||||
@@ -353,7 +370,8 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
|
||||
{ id: 3 as Step, label: 'Structure', icon: Users, shortLabel: 'Mode' },
|
||||
{ id: 4 as Step, label: 'Schedule', icon: Calendar, shortLabel: 'Time' },
|
||||
{ id: 5 as Step, label: 'Scoring', icon: Trophy, shortLabel: 'Points' },
|
||||
{ id: 6 as Step, label: 'Review', icon: CheckCircle2, shortLabel: 'Done' },
|
||||
{ id: 6 as Step, label: 'Stewarding', icon: Scale, shortLabel: 'Rules' },
|
||||
{ id: 7 as Step, label: 'Review', icon: CheckCircle2, shortLabel: 'Done' },
|
||||
];
|
||||
|
||||
const getStepTitle = (currentStep: Step): string => {
|
||||
@@ -369,6 +387,8 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
|
||||
case 5:
|
||||
return 'Scoring & championships';
|
||||
case 6:
|
||||
return 'Stewarding & protests';
|
||||
case 7:
|
||||
return 'Review & create';
|
||||
default:
|
||||
return '';
|
||||
@@ -388,6 +408,8 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
|
||||
case 5:
|
||||
return 'Select a scoring preset, enable championships, and set drop rules.';
|
||||
case 6:
|
||||
return 'Configure how protests are handled and penalties decided.';
|
||||
case 7:
|
||||
return 'Everything looks good? Launch your new league!';
|
||||
default:
|
||||
return '';
|
||||
@@ -629,6 +651,16 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
|
||||
)}
|
||||
|
||||
{step === 6 && (
|
||||
<div className="animate-fade-in">
|
||||
<LeagueStewardingSection
|
||||
form={form}
|
||||
onChange={setForm}
|
||||
readOnly={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 7 && (
|
||||
<div className="animate-fade-in space-y-6">
|
||||
<LeagueReviewSummary form={form} presets={presets} />
|
||||
{errors.submit && (
|
||||
@@ -669,7 +701,7 @@ export default function CreateLeagueWizard({ stepName, onStepChange }: CreateLea
|
||||
))}
|
||||
</div>
|
||||
|
||||
{step < 6 ? (
|
||||
{step < 7 ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
|
||||
380
apps/website/components/leagues/LeagueStewardingSection.tsx
Normal file
380
apps/website/components/leagues/LeagueStewardingSection.tsx
Normal file
@@ -0,0 +1,380 @@
|
||||
'use client';
|
||||
|
||||
import { Scale, Users, Clock, Bell, Shield, Vote, UserCheck, AlertTriangle } from 'lucide-react';
|
||||
import type { LeagueConfigFormModel, LeagueStewardingFormDTO } from '@gridpilot/racing/application';
|
||||
import type { StewardingDecisionMode } from '@gridpilot/racing/domain/entities/League';
|
||||
|
||||
interface LeagueStewardingSectionProps {
|
||||
form: LeagueConfigFormModel;
|
||||
onChange: (form: LeagueConfigFormModel) => void;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
type DecisionModeOption = {
|
||||
value: StewardingDecisionMode;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
requiresVotes: boolean;
|
||||
};
|
||||
|
||||
const decisionModeOptions: DecisionModeOption[] = [
|
||||
{
|
||||
value: 'admin_only',
|
||||
label: 'Admin Decision',
|
||||
description: 'League admins make all penalty decisions',
|
||||
icon: <Shield className="w-5 h-5" />,
|
||||
requiresVotes: false,
|
||||
},
|
||||
{
|
||||
value: 'steward_vote',
|
||||
label: 'Steward Vote',
|
||||
description: 'Designated stewards vote to uphold protests',
|
||||
icon: <Scale className="w-5 h-5" />,
|
||||
requiresVotes: true,
|
||||
},
|
||||
{
|
||||
value: 'member_vote',
|
||||
label: 'Member Vote',
|
||||
description: 'All league members vote on protests',
|
||||
icon: <Users className="w-5 h-5" />,
|
||||
requiresVotes: true,
|
||||
},
|
||||
{
|
||||
value: 'steward_veto',
|
||||
label: 'Steward Veto',
|
||||
description: 'Protests upheld unless stewards vote against',
|
||||
icon: <Vote className="w-5 h-5" />,
|
||||
requiresVotes: true,
|
||||
},
|
||||
{
|
||||
value: 'member_veto',
|
||||
label: 'Member Veto',
|
||||
description: 'Protests upheld unless members vote against',
|
||||
icon: <UserCheck className="w-5 h-5" />,
|
||||
requiresVotes: true,
|
||||
},
|
||||
];
|
||||
|
||||
export function LeagueStewardingSection({
|
||||
form,
|
||||
onChange,
|
||||
readOnly = false,
|
||||
}: LeagueStewardingSectionProps) {
|
||||
const stewarding = form.stewarding;
|
||||
|
||||
const updateStewarding = (updates: Partial<LeagueStewardingFormDTO>) => {
|
||||
onChange({
|
||||
...form,
|
||||
stewarding: {
|
||||
...stewarding,
|
||||
...updates,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const selectedMode = decisionModeOptions.find((m) => m.value === stewarding.decisionMode);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Decision Mode Selection */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
|
||||
<Scale className="w-4 h-4 text-primary-blue" />
|
||||
How are protest decisions made?
|
||||
</h3>
|
||||
<p className="text-xs text-gray-400 mb-4">
|
||||
Choose who has the authority to issue penalties
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{decisionModeOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
disabled={readOnly}
|
||||
onClick={() => updateStewarding({ decisionMode: option.value })}
|
||||
className={`
|
||||
relative flex flex-col items-start gap-2 p-4 rounded-xl border-2 transition-all text-left
|
||||
${stewarding.decisionMode === option.value
|
||||
? 'border-primary-blue bg-primary-blue/5 shadow-[0_0_16px_rgba(25,140,255,0.15)]'
|
||||
: 'border-charcoal-outline bg-iron-gray/30 hover:border-gray-500'
|
||||
}
|
||||
${readOnly ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`p-2 rounded-lg ${
|
||||
stewarding.decisionMode === option.value
|
||||
? 'bg-primary-blue/20 text-primary-blue'
|
||||
: 'bg-charcoal-outline/50 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{option.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">{option.label}</p>
|
||||
<p className="text-xs text-gray-400 mt-0.5">{option.description}</p>
|
||||
</div>
|
||||
{stewarding.decisionMode === option.value && (
|
||||
<div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-primary-blue" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vote Requirements (conditional) */}
|
||||
{selectedMode?.requiresVotes && (
|
||||
<div className="p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline space-y-4">
|
||||
<h4 className="text-sm font-medium text-white flex items-center gap-2">
|
||||
<Vote className="w-4 h-4 text-primary-blue" />
|
||||
Voting Configuration
|
||||
</h4>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">
|
||||
Required votes to {stewarding.decisionMode.includes('veto') ? 'block' : 'uphold'}
|
||||
</label>
|
||||
<select
|
||||
value={stewarding.requiredVotes ?? 2}
|
||||
onChange={(e) => updateStewarding({ requiredVotes: parseInt(e.target.value, 10) })}
|
||||
disabled={readOnly}
|
||||
className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
|
||||
>
|
||||
<option value={1}>1 vote</option>
|
||||
<option value={2}>2 votes</option>
|
||||
<option value={3}>3 votes (majority of 5)</option>
|
||||
<option value={4}>4 votes</option>
|
||||
<option value={5}>5 votes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">
|
||||
Voting time limit
|
||||
</label>
|
||||
<select
|
||||
value={stewarding.voteTimeLimit}
|
||||
onChange={(e) => updateStewarding({ voteTimeLimit: parseInt(e.target.value, 10) })}
|
||||
disabled={readOnly}
|
||||
className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
|
||||
>
|
||||
<option value={24}>24 hours</option>
|
||||
<option value={48}>48 hours</option>
|
||||
<option value={72}>72 hours (3 days)</option>
|
||||
<option value={96}>96 hours (4 days)</option>
|
||||
<option value={168}>168 hours (7 days)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Defense Settings */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
|
||||
<Shield className="w-4 h-4 text-primary-blue" />
|
||||
Defense Requirements
|
||||
</h3>
|
||||
<p className="text-xs text-gray-400 mb-4">
|
||||
Should accused drivers be required to submit a defense?
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
disabled={readOnly}
|
||||
onClick={() => updateStewarding({ requireDefense: false })}
|
||||
className={`
|
||||
flex items-center gap-3 p-4 rounded-xl border-2 transition-all text-left
|
||||
${!stewarding.requireDefense
|
||||
? 'border-primary-blue bg-primary-blue/5'
|
||||
: 'border-charcoal-outline bg-iron-gray/30 hover:border-gray-500'
|
||||
}
|
||||
${readOnly ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}
|
||||
`}
|
||||
>
|
||||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
|
||||
!stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'
|
||||
}`}>
|
||||
{!stewarding.requireDefense && <div className="w-2 h-2 rounded-full bg-primary-blue" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Defense optional</p>
|
||||
<p className="text-xs text-gray-400">Proceed without waiting for defense</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={readOnly}
|
||||
onClick={() => updateStewarding({ requireDefense: true })}
|
||||
className={`
|
||||
flex items-center gap-3 p-4 rounded-xl border-2 transition-all text-left
|
||||
${stewarding.requireDefense
|
||||
? 'border-primary-blue bg-primary-blue/5'
|
||||
: 'border-charcoal-outline bg-iron-gray/30 hover:border-gray-500'
|
||||
}
|
||||
${readOnly ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}
|
||||
`}
|
||||
>
|
||||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
|
||||
stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'
|
||||
}`}>
|
||||
{stewarding.requireDefense && <div className="w-2 h-2 rounded-full bg-primary-blue" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Defense required</p>
|
||||
<p className="text-xs text-gray-400">Wait for defense before deciding</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{stewarding.requireDefense && (
|
||||
<div className="mt-4 p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">
|
||||
Defense time limit
|
||||
</label>
|
||||
<select
|
||||
value={stewarding.defenseTimeLimit}
|
||||
onChange={(e) => updateStewarding({ defenseTimeLimit: parseInt(e.target.value, 10) })}
|
||||
disabled={readOnly}
|
||||
className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
|
||||
>
|
||||
<option value={24}>24 hours</option>
|
||||
<option value={48}>48 hours (2 days)</option>
|
||||
<option value={72}>72 hours (3 days)</option>
|
||||
<option value={96}>96 hours (4 days)</option>
|
||||
</select>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
After this time, the decision can proceed without a defense
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Deadlines */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-primary-blue" />
|
||||
Deadlines
|
||||
</h3>
|
||||
<p className="text-xs text-gray-400 mb-4">
|
||||
Set time limits for filing protests and closing stewarding
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">
|
||||
Protest filing deadline (after race)
|
||||
</label>
|
||||
<select
|
||||
value={stewarding.protestDeadlineHours}
|
||||
onChange={(e) => updateStewarding({ protestDeadlineHours: parseInt(e.target.value, 10) })}
|
||||
disabled={readOnly}
|
||||
className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
|
||||
>
|
||||
<option value={12}>12 hours</option>
|
||||
<option value={24}>24 hours (1 day)</option>
|
||||
<option value={48}>48 hours (2 days)</option>
|
||||
<option value={72}>72 hours (3 days)</option>
|
||||
<option value={168}>168 hours (7 days)</option>
|
||||
</select>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Drivers cannot file protests after this time
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">
|
||||
Stewarding closes (after race)
|
||||
</label>
|
||||
<select
|
||||
value={stewarding.stewardingClosesHours}
|
||||
onChange={(e) => updateStewarding({ stewardingClosesHours: parseInt(e.target.value, 10) })}
|
||||
disabled={readOnly}
|
||||
className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:ring-1 focus:ring-primary-blue focus:border-primary-blue"
|
||||
>
|
||||
<option value={72}>72 hours (3 days)</option>
|
||||
<option value={96}>96 hours (4 days)</option>
|
||||
<option value={168}>168 hours (7 days)</option>
|
||||
<option value={336}>336 hours (14 days)</option>
|
||||
</select>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
All stewarding must be concluded by this time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1 flex items-center gap-2">
|
||||
<Bell className="w-4 h-4 text-primary-blue" />
|
||||
Notifications
|
||||
</h3>
|
||||
<p className="text-xs text-gray-400 mb-4">
|
||||
Configure automatic notifications for involved parties
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label
|
||||
className={`flex items-center gap-3 p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline cursor-pointer hover:bg-iron-gray/60 transition-colors ${
|
||||
readOnly ? 'opacity-60 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={stewarding.notifyAccusedOnProtest}
|
||||
onChange={(e) => updateStewarding({ notifyAccusedOnProtest: e.target.checked })}
|
||||
disabled={readOnly}
|
||||
className="w-4 h-4 rounded border-charcoal-outline bg-deep-graphite text-primary-blue focus:ring-primary-blue focus:ring-offset-0"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Notify accused driver</p>
|
||||
<p className="text-xs text-gray-400">
|
||||
Send notification when a protest is filed against them
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label
|
||||
className={`flex items-center gap-3 p-4 rounded-xl bg-iron-gray/40 border border-charcoal-outline cursor-pointer hover:bg-iron-gray/60 transition-colors ${
|
||||
readOnly ? 'opacity-60 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={stewarding.notifyOnVoteRequired}
|
||||
onChange={(e) => updateStewarding({ notifyOnVoteRequired: e.target.checked })}
|
||||
disabled={readOnly}
|
||||
className="w-4 h-4 rounded border-charcoal-outline bg-deep-graphite text-primary-blue focus:ring-primary-blue focus:ring-offset-0"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Notify voters</p>
|
||||
<p className="text-xs text-gray-400">
|
||||
Send notification to stewards/members when their vote is needed
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning about strict settings */}
|
||||
{stewarding.requireDefense && stewarding.decisionMode !== 'admin_only' && (
|
||||
<div className="flex items-start gap-3 p-4 rounded-xl bg-warning-amber/10 border border-warning-amber/20">
|
||||
<AlertTriangle className="w-5 h-5 text-warning-amber shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-warning-amber">Strict settings enabled</p>
|
||||
<p className="text-xs text-warning-amber/80 mt-1">
|
||||
Requiring defense and voting may delay penalty decisions. Make sure your stewards/members
|
||||
are active enough to meet the deadlines.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
209
apps/website/components/notifications/ModalNotification.tsx
Normal file
209
apps/website/components/notifications/ModalNotification.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { Notification, NotificationAction } from '@gridpilot/notifications/application';
|
||||
import {
|
||||
Bell,
|
||||
AlertTriangle,
|
||||
Shield,
|
||||
Vote,
|
||||
Trophy,
|
||||
Users,
|
||||
Flag,
|
||||
AlertCircle,
|
||||
Clock,
|
||||
} from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
|
||||
interface ModalNotificationProps {
|
||||
notification: Notification;
|
||||
onAction: (notification: Notification, actionId?: string) => void;
|
||||
}
|
||||
|
||||
const notificationIcons: Record<string, typeof Bell> = {
|
||||
protest_filed: AlertTriangle,
|
||||
protest_defense_requested: Shield,
|
||||
protest_vote_required: Vote,
|
||||
penalty_issued: AlertTriangle,
|
||||
race_results_posted: Trophy,
|
||||
league_invite: Users,
|
||||
race_reminder: Flag,
|
||||
};
|
||||
|
||||
const notificationColors: Record<string, { bg: string; border: string; text: string; glow: string }> = {
|
||||
protest_filed: {
|
||||
bg: 'bg-red-500/10',
|
||||
border: 'border-red-500/50',
|
||||
text: 'text-red-400',
|
||||
glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
|
||||
},
|
||||
protest_defense_requested: {
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/50',
|
||||
text: 'text-warning-amber',
|
||||
glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
|
||||
},
|
||||
protest_vote_required: {
|
||||
bg: 'bg-primary-blue/10',
|
||||
border: 'border-primary-blue/50',
|
||||
text: 'text-primary-blue',
|
||||
glow: 'shadow-[0_0_60px_rgba(25,140,255,0.3)]',
|
||||
},
|
||||
penalty_issued: {
|
||||
bg: 'bg-red-500/10',
|
||||
border: 'border-red-500/50',
|
||||
text: 'text-red-400',
|
||||
glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
|
||||
},
|
||||
};
|
||||
|
||||
export default function ModalNotification({
|
||||
notification,
|
||||
onAction,
|
||||
}: ModalNotificationProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Animate in
|
||||
const timeout = setTimeout(() => setIsVisible(true), 10);
|
||||
return () => clearTimeout(timeout);
|
||||
}, []);
|
||||
|
||||
const handleAction = (action: NotificationAction) => {
|
||||
onAction(notification, action.actionId);
|
||||
if (action.href) {
|
||||
router.push(action.href);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrimaryAction = () => {
|
||||
onAction(notification, 'primary');
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
}
|
||||
};
|
||||
|
||||
const Icon = notificationIcons[notification.type] || AlertCircle;
|
||||
const colors = notificationColors[notification.type] || {
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/50',
|
||||
text: 'text-warning-amber',
|
||||
glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
|
||||
};
|
||||
|
||||
// Check if there's a deadline
|
||||
const deadline = notification.data?.deadline;
|
||||
const hasDeadline = deadline instanceof Date;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
fixed inset-0 z-[100] flex items-center justify-center p-4
|
||||
transition-all duration-300
|
||||
${isVisible ? 'bg-black/70 backdrop-blur-sm' : 'bg-transparent'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
w-full max-w-lg transform transition-all duration-300
|
||||
${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
rounded-2xl border-2 ${colors.border} ${colors.bg}
|
||||
backdrop-blur-md ${colors.glow}
|
||||
overflow-hidden
|
||||
`}
|
||||
>
|
||||
{/* Header with pulse animation */}
|
||||
<div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border}`}>
|
||||
{/* Animated pulse ring */}
|
||||
<div className="absolute top-4 left-6 w-12 h-12">
|
||||
<div className={`absolute inset-0 rounded-full ${colors.bg} animate-ping opacity-20`} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`relative p-3 rounded-xl ${colors.bg} border ${colors.border}`}>
|
||||
<Icon className={`w-6 h-6 ${colors.text}`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
|
||||
Action Required
|
||||
</p>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
{notification.title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
{notification.body}
|
||||
</p>
|
||||
|
||||
{/* Deadline warning */}
|
||||
{hasDeadline && (
|
||||
<div className="mt-4 flex items-center gap-2 px-4 py-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
||||
<Clock className="w-5 h-5 text-warning-amber" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-warning-amber">Response Required</p>
|
||||
<p className="text-xs text-gray-400">
|
||||
Please respond by {deadline.toLocaleDateString()} at {deadline.toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Additional context from data */}
|
||||
{notification.data?.protestId && (
|
||||
<div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
||||
<p className="text-xs text-gray-500 mb-1">Related Protest</p>
|
||||
<p className="text-sm text-gray-300 font-mono">
|
||||
{notification.data.protestId}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="px-6 py-4 bg-iron-gray/30 border-t border-charcoal-outline">
|
||||
{notification.actions && notification.actions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-3 justify-end">
|
||||
{notification.actions.map((action, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={action.type === 'primary' ? 'primary' : 'secondary'}
|
||||
onClick={() => handleAction(action)}
|
||||
className={action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-end">
|
||||
<Button variant="primary" onClick={handlePrimaryAction}>
|
||||
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cannot dismiss warning */}
|
||||
{notification.requiresResponse && (
|
||||
<div className="px-6 py-2 bg-red-500/10 border-t border-red-500/20">
|
||||
<p className="text-xs text-red-400 text-center">
|
||||
⚠️ This notification requires your action and cannot be dismissed
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
271
apps/website/components/notifications/NotificationCenter.tsx
Normal file
271
apps/website/components/notifications/NotificationCenter.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
||||
import {
|
||||
getNotificationRepository,
|
||||
getMarkNotificationReadUseCase,
|
||||
} from '@/lib/di-container';
|
||||
import type { Notification } from '@gridpilot/notifications/application';
|
||||
import {
|
||||
Bell,
|
||||
AlertTriangle,
|
||||
Shield,
|
||||
Vote,
|
||||
Trophy,
|
||||
Users,
|
||||
Flag,
|
||||
X,
|
||||
Check,
|
||||
CheckCheck,
|
||||
ExternalLink,
|
||||
} from 'lucide-react';
|
||||
|
||||
const notificationIcons: Record<string, typeof Bell> = {
|
||||
protest_filed: AlertTriangle,
|
||||
protest_defense_requested: Shield,
|
||||
protest_vote_required: Vote,
|
||||
penalty_issued: AlertTriangle,
|
||||
race_results_posted: Trophy,
|
||||
league_invite: Users,
|
||||
race_reminder: Flag,
|
||||
};
|
||||
|
||||
const notificationColors: Record<string, string> = {
|
||||
protest_filed: 'text-red-400 bg-red-400/10',
|
||||
protest_defense_requested: 'text-warning-amber bg-warning-amber/10',
|
||||
protest_vote_required: 'text-primary-blue bg-primary-blue/10',
|
||||
penalty_issued: 'text-red-400 bg-red-400/10',
|
||||
race_results_posted: 'text-performance-green bg-performance-green/10',
|
||||
league_invite: 'text-primary-blue bg-primary-blue/10',
|
||||
race_reminder: 'text-warning-amber bg-warning-amber/10',
|
||||
};
|
||||
|
||||
export default function NotificationCenter() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const router = useRouter();
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
// Polling for new notifications
|
||||
useEffect(() => {
|
||||
const loadNotifications = async () => {
|
||||
try {
|
||||
const repo = getNotificationRepository();
|
||||
const allNotifications = await repo.findByRecipientId(currentDriverId);
|
||||
setNotifications(allNotifications);
|
||||
} catch (error) {
|
||||
console.error('Failed to load notifications:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadNotifications();
|
||||
|
||||
// Poll every 5 seconds
|
||||
const interval = setInterval(loadNotifications, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, [currentDriverId]);
|
||||
|
||||
// Close panel when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
const unreadCount = notifications.filter((n) => n.isUnread()).length;
|
||||
|
||||
const handleMarkAsRead = async (notification: Notification) => {
|
||||
if (!notification.isUnread()) return;
|
||||
|
||||
try {
|
||||
const markRead = getMarkNotificationReadUseCase();
|
||||
await markRead.execute({
|
||||
notificationId: notification.id,
|
||||
recipientId: currentDriverId,
|
||||
});
|
||||
|
||||
// Update local state
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === notification.id ? n.markAsRead() : n))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to mark notification as read:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMarkAllAsRead = async () => {
|
||||
try {
|
||||
const repo = getNotificationRepository();
|
||||
await repo.markAllAsReadByRecipientId(currentDriverId);
|
||||
|
||||
// Update local state
|
||||
setNotifications((prev) => prev.map((n) => n.markAsRead()));
|
||||
} catch (error) {
|
||||
console.error('Failed to mark all as read:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNotificationClick = async (notification: Notification) => {
|
||||
await handleMarkAsRead(notification);
|
||||
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - new Date(date).getTime();
|
||||
|
||||
const minutes = Math.floor(diff / (1000 * 60));
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (minutes < 1) return 'Just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
if (days < 7) return `${days}d ago`;
|
||||
|
||||
return new Date(date).toLocaleDateString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={panelRef}>
|
||||
{/* Bell button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`
|
||||
relative p-2 rounded-lg transition-colors
|
||||
${isOpen
|
||||
? 'bg-primary-blue/10 text-primary-blue'
|
||||
: 'text-gray-400 hover:text-white hover:bg-iron-gray/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Bell className="w-5 h-5" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold bg-red-500 text-white rounded-full">
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Notification panel */}
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-96 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden z-50">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="w-4 h-4 text-primary-blue" />
|
||||
<span className="font-semibold text-white">Notifications</span>
|
||||
{unreadCount > 0 && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
|
||||
{unreadCount} new
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={handleMarkAllAsRead}
|
||||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<CheckCheck className="w-3.5 h-3.5" />
|
||||
Mark all read
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notifications list */}
|
||||
<div className="max-h-[400px] overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 rounded-full bg-iron-gray/50 flex items-center justify-center">
|
||||
<Bell className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">No notifications yet</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
You'll be notified about protests, races, and more
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{notifications.map((notification) => {
|
||||
const Icon = notificationIcons[notification.type] || Bell;
|
||||
const colorClass = notificationColors[notification.type] || 'text-gray-400 bg-gray-400/10';
|
||||
|
||||
return (
|
||||
<button
|
||||
key={notification.id}
|
||||
onClick={() => handleNotificationClick(notification)}
|
||||
className={`
|
||||
w-full text-left px-4 py-3 transition-colors hover:bg-iron-gray/30
|
||||
${notification.isUnread() ? 'bg-primary-blue/5' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<div className={`p-2 rounded-lg flex-shrink-0 ${colorClass}`}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className={`text-sm font-medium truncate ${
|
||||
notification.isUnread() ? 'text-white' : 'text-gray-300'
|
||||
}`}>
|
||||
{notification.title}
|
||||
</p>
|
||||
{notification.isUnread() && (
|
||||
<span className="w-2 h-2 bg-primary-blue rounded-full flex-shrink-0 mt-1.5" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mt-0.5">
|
||||
{notification.body}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<span className="text-[10px] text-gray-600">
|
||||
{formatTime(notification.createdAt)}
|
||||
</span>
|
||||
{notification.actionUrl && (
|
||||
<span className="flex items-center gap-0.5 text-[10px] text-primary-blue">
|
||||
<ExternalLink className="w-2.5 h-2.5" />
|
||||
View
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="px-4 py-2 border-t border-charcoal-outline bg-iron-gray/20">
|
||||
<p className="text-[10px] text-gray-500 text-center">
|
||||
Showing {notifications.length} notification{notifications.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
apps/website/components/notifications/NotificationProvider.tsx
Normal file
158
apps/website/components/notifications/NotificationProvider.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
|
||||
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
||||
import {
|
||||
getNotificationRepository,
|
||||
getMarkNotificationReadUseCase,
|
||||
} from '@/lib/di-container';
|
||||
import type { Notification } from '@gridpilot/notifications/application';
|
||||
import ToastNotification from './ToastNotification';
|
||||
import ModalNotification from './ModalNotification';
|
||||
|
||||
interface NotificationContextValue {
|
||||
notifications: Notification[];
|
||||
unreadCount: number;
|
||||
toastNotifications: Notification[];
|
||||
modalNotification: Notification | null;
|
||||
markAsRead: (notification: Notification) => Promise<void>;
|
||||
dismissToast: (notification: Notification) => void;
|
||||
respondToModal: (notification: Notification, actionId?: string) => Promise<void>;
|
||||
}
|
||||
|
||||
const NotificationContext = createContext<NotificationContextValue | null>(null);
|
||||
|
||||
export function useNotifications() {
|
||||
const context = useContext(NotificationContext);
|
||||
if (!context) {
|
||||
throw new Error('useNotifications must be used within NotificationProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
interface NotificationProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default function NotificationProvider({ children }: NotificationProviderProps) {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [toastNotifications, setToastNotifications] = useState<Notification[]>([]);
|
||||
const [modalNotification, setModalNotification] = useState<Notification | null>(null);
|
||||
const [seenNotificationIds, setSeenNotificationIds] = useState<Set<string>>(new Set());
|
||||
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
// Poll for new notifications
|
||||
useEffect(() => {
|
||||
const loadNotifications = async () => {
|
||||
try {
|
||||
const repo = getNotificationRepository();
|
||||
const allNotifications = await repo.findByRecipientId(currentDriverId);
|
||||
setNotifications(allNotifications);
|
||||
|
||||
// Check for new notifications that need toast/modal display
|
||||
allNotifications.forEach((notification) => {
|
||||
if (notification.isUnread() && !seenNotificationIds.has(notification.id)) {
|
||||
// Mark as seen to prevent duplicate displays
|
||||
setSeenNotificationIds((prev) => new Set([...prev, notification.id]));
|
||||
|
||||
// Handle based on urgency
|
||||
if (notification.isModal()) {
|
||||
// Modal takes priority - show immediately
|
||||
setModalNotification(notification);
|
||||
} else if (notification.isToast()) {
|
||||
// Add to toast queue
|
||||
setToastNotifications((prev) => [...prev, notification]);
|
||||
}
|
||||
// Silent notifications just appear in the notification center
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to load notifications:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadNotifications();
|
||||
|
||||
// Poll every 2 seconds for responsiveness
|
||||
const interval = setInterval(loadNotifications, 2000);
|
||||
return () => clearInterval(interval);
|
||||
}, [currentDriverId, seenNotificationIds]);
|
||||
|
||||
const markAsRead = useCallback(async (notification: Notification) => {
|
||||
try {
|
||||
const markRead = getMarkNotificationReadUseCase();
|
||||
await markRead.execute({
|
||||
notificationId: notification.id,
|
||||
recipientId: currentDriverId,
|
||||
});
|
||||
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === notification.id ? n.markAsRead() : n))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to mark notification as read:', error);
|
||||
}
|
||||
}, [currentDriverId]);
|
||||
|
||||
const dismissToast = useCallback((notification: Notification) => {
|
||||
setToastNotifications((prev) => prev.filter((n) => n.id !== notification.id));
|
||||
}, []);
|
||||
|
||||
const respondToModal = useCallback(async (notification: Notification, actionId?: string) => {
|
||||
try {
|
||||
// Mark as responded
|
||||
const repo = getNotificationRepository();
|
||||
const updated = notification.markAsResponded(actionId);
|
||||
await repo.update(updated);
|
||||
|
||||
// Update local state
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === notification.id ? updated : n))
|
||||
);
|
||||
|
||||
// Clear modal
|
||||
setModalNotification(null);
|
||||
} catch (error) {
|
||||
console.error('Failed to respond to notification:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const unreadCount = notifications.filter((n) => n.isUnread() || n.isActionRequired()).length;
|
||||
|
||||
const value: NotificationContextValue = {
|
||||
notifications,
|
||||
unreadCount,
|
||||
toastNotifications,
|
||||
modalNotification,
|
||||
markAsRead,
|
||||
dismissToast,
|
||||
respondToModal,
|
||||
};
|
||||
|
||||
return (
|
||||
<NotificationContext.Provider value={value}>
|
||||
{children}
|
||||
|
||||
{/* Toast notifications container */}
|
||||
<div className="fixed top-20 right-4 z-50 space-y-3">
|
||||
{toastNotifications.map((notification) => (
|
||||
<ToastNotification
|
||||
key={notification.id}
|
||||
notification={notification}
|
||||
onDismiss={dismissToast}
|
||||
onRead={markAsRead}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modal notification */}
|
||||
{modalNotification && (
|
||||
<ModalNotification
|
||||
notification={modalNotification}
|
||||
onAction={respondToModal}
|
||||
/>
|
||||
)}
|
||||
</NotificationContext.Provider>
|
||||
);
|
||||
}
|
||||
154
apps/website/components/notifications/ToastNotification.tsx
Normal file
154
apps/website/components/notifications/ToastNotification.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { Notification } from '@gridpilot/notifications/application';
|
||||
import {
|
||||
Bell,
|
||||
AlertTriangle,
|
||||
Shield,
|
||||
Vote,
|
||||
Trophy,
|
||||
Users,
|
||||
Flag,
|
||||
X,
|
||||
ExternalLink,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ToastNotificationProps {
|
||||
notification: Notification;
|
||||
onDismiss: (notification: Notification) => void;
|
||||
onRead: (notification: Notification) => void;
|
||||
autoHideDuration?: number;
|
||||
}
|
||||
|
||||
const notificationIcons: Record<string, typeof Bell> = {
|
||||
protest_filed: AlertTriangle,
|
||||
protest_defense_requested: Shield,
|
||||
protest_vote_required: Vote,
|
||||
penalty_issued: AlertTriangle,
|
||||
race_results_posted: Trophy,
|
||||
league_invite: Users,
|
||||
race_reminder: Flag,
|
||||
};
|
||||
|
||||
const notificationColors: Record<string, { bg: string; border: string; text: string }> = {
|
||||
protest_filed: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
|
||||
protest_defense_requested: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
|
||||
protest_vote_required: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
|
||||
penalty_issued: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
|
||||
race_results_posted: { bg: 'bg-performance-green/10', border: 'border-performance-green/30', text: 'text-performance-green' },
|
||||
league_invite: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
|
||||
race_reminder: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
|
||||
};
|
||||
|
||||
export default function ToastNotification({
|
||||
notification,
|
||||
onDismiss,
|
||||
onRead,
|
||||
autoHideDuration = 5000,
|
||||
}: ToastNotificationProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isExiting, setIsExiting] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Animate in
|
||||
const showTimeout = setTimeout(() => setIsVisible(true), 10);
|
||||
|
||||
// Auto-hide
|
||||
const hideTimeout = setTimeout(() => {
|
||||
handleDismiss();
|
||||
}, autoHideDuration);
|
||||
|
||||
return () => {
|
||||
clearTimeout(showTimeout);
|
||||
clearTimeout(hideTimeout);
|
||||
};
|
||||
}, [autoHideDuration]);
|
||||
|
||||
const handleDismiss = () => {
|
||||
setIsExiting(true);
|
||||
setTimeout(() => {
|
||||
onDismiss(notification);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
onRead(notification);
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
}
|
||||
handleDismiss();
|
||||
};
|
||||
|
||||
const Icon = notificationIcons[notification.type] || Bell;
|
||||
const colors = notificationColors[notification.type] || {
|
||||
bg: 'bg-gray-500/10',
|
||||
border: 'border-gray-500/30',
|
||||
text: 'text-gray-400',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
transform transition-all duration-300 ease-out
|
||||
${isVisible && !isExiting ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
w-96 rounded-xl border ${colors.border} ${colors.bg}
|
||||
backdrop-blur-md shadow-2xl overflow-hidden
|
||||
`}
|
||||
>
|
||||
{/* Progress bar */}
|
||||
<div className="h-1 bg-iron-gray/50 overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${colors.text.replace('text-', 'bg-')} animate-toast-progress`}
|
||||
style={{ animationDuration: `${autoHideDuration}ms` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex gap-3">
|
||||
{/* Icon */}
|
||||
<div className={`p-2 rounded-lg ${colors.bg} flex-shrink-0`}>
|
||||
<Icon className={`w-5 h-5 ${colors.text}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm font-semibold text-white truncate">
|
||||
{notification.title}
|
||||
</p>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDismiss();
|
||||
}}
|
||||
className="p-1 rounded hover:bg-charcoal-outline transition-colors flex-shrink-0"
|
||||
>
|
||||
<X className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 line-clamp-2 mt-1">
|
||||
{notification.body}
|
||||
</p>
|
||||
{notification.actionUrl && (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={`mt-2 flex items-center gap-1 text-xs font-medium ${colors.text} hover:underline`}
|
||||
>
|
||||
View details
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { LogOut, Star } from 'lucide-react';
|
||||
import { LogOut, Settings, Star } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import {
|
||||
getDriverStats,
|
||||
@@ -153,6 +153,14 @@ export default function UserPill() {
|
||||
>
|
||||
Manage leagues
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/settings"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<form action="/auth/logout" method="POST">
|
||||
|
||||
@@ -14,7 +14,14 @@ export * from './use-cases/NotificationPreferencesUseCases';
|
||||
export * from './ports/INotificationGateway';
|
||||
|
||||
// Re-export domain types for convenience
|
||||
export type { Notification, NotificationProps, NotificationStatus, NotificationData } from '../domain/entities/Notification';
|
||||
export type {
|
||||
Notification,
|
||||
NotificationProps,
|
||||
NotificationStatus,
|
||||
NotificationData,
|
||||
NotificationUrgency,
|
||||
NotificationAction,
|
||||
} from '../domain/entities/Notification';
|
||||
export type { NotificationPreference, NotificationPreferenceProps, ChannelPreference, TypePreference } from '../domain/entities/NotificationPreference';
|
||||
export type { NotificationType } from '../domain/value-objects/NotificationType';
|
||||
export type { NotificationChannel } from '../domain/value-objects/NotificationChannel';
|
||||
|
||||
@@ -21,6 +21,17 @@ export interface SendNotificationCommand {
|
||||
body: string;
|
||||
data?: NotificationData;
|
||||
actionUrl?: string;
|
||||
/** How urgently to display this notification (default: 'silent') */
|
||||
urgency?: 'silent' | 'toast' | 'modal';
|
||||
/** Whether this notification requires a response before dismissal */
|
||||
requiresResponse?: boolean;
|
||||
/** Action buttons for modal notifications */
|
||||
actions?: Array<{
|
||||
label: string;
|
||||
type: 'primary' | 'secondary' | 'danger';
|
||||
href?: string;
|
||||
actionId?: string;
|
||||
}>;
|
||||
/** Override channels (skip preference check) */
|
||||
forceChannels?: NotificationChannel[];
|
||||
}
|
||||
@@ -91,8 +102,11 @@ export class SendNotificationUseCase {
|
||||
title: command.title,
|
||||
body: command.body,
|
||||
channel,
|
||||
urgency: command.urgency,
|
||||
data: command.data,
|
||||
actionUrl: command.actionUrl,
|
||||
actions: command.actions,
|
||||
requiresResponse: command.requiresResponse,
|
||||
});
|
||||
|
||||
// Save to repository (in_app channel) or attempt delivery (external channels)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Domain Entity: Notification
|
||||
*
|
||||
*
|
||||
* Represents a notification sent to a user.
|
||||
* Immutable entity with factory methods and domain validation.
|
||||
*/
|
||||
@@ -8,7 +8,15 @@
|
||||
import type { NotificationType } from '../value-objects/NotificationType';
|
||||
import type { NotificationChannel } from '../value-objects/NotificationChannel';
|
||||
|
||||
export type NotificationStatus = 'unread' | 'read' | 'dismissed';
|
||||
export type NotificationStatus = 'unread' | 'read' | 'dismissed' | 'action_required';
|
||||
|
||||
/**
|
||||
* Notification urgency determines how the notification is displayed
|
||||
* - silent: Only appears in notification center (default)
|
||||
* - toast: Shows a temporary toast notification
|
||||
* - modal: Shows a blocking modal that requires user action (cannot be ignored)
|
||||
*/
|
||||
export type NotificationUrgency = 'silent' | 'toast' | 'modal';
|
||||
|
||||
export interface NotificationData {
|
||||
/** Reference to related protest */
|
||||
@@ -29,6 +37,20 @@ export interface NotificationData {
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
/**
|
||||
* Configuration for action buttons shown on modal notifications
|
||||
*/
|
||||
export interface NotificationAction {
|
||||
/** Button label */
|
||||
label: string;
|
||||
/** Action type - determines styling */
|
||||
type: 'primary' | 'secondary' | 'danger';
|
||||
/** URL to navigate to when clicked */
|
||||
href?: string;
|
||||
/** Custom action identifier (for handling in code) */
|
||||
actionId?: string;
|
||||
}
|
||||
|
||||
export interface NotificationProps {
|
||||
id: string;
|
||||
/** Driver who receives this notification */
|
||||
@@ -43,22 +65,31 @@ export interface NotificationProps {
|
||||
channel: NotificationChannel;
|
||||
/** Current status */
|
||||
status: NotificationStatus;
|
||||
/** How urgently to display this notification */
|
||||
urgency: NotificationUrgency;
|
||||
/** Structured data for linking/context */
|
||||
data?: NotificationData;
|
||||
/** Optional action URL */
|
||||
/** Optional action URL (for simple click-through) */
|
||||
actionUrl?: string;
|
||||
/** Action buttons for modal notifications */
|
||||
actions?: NotificationAction[];
|
||||
/** Whether this notification requires a response before it can be dismissed */
|
||||
requiresResponse?: boolean;
|
||||
/** When the notification was created */
|
||||
createdAt: Date;
|
||||
/** When the notification was read (if applicable) */
|
||||
readAt?: Date;
|
||||
/** When the notification was responded to (for action_required status) */
|
||||
respondedAt?: Date;
|
||||
}
|
||||
|
||||
export class Notification {
|
||||
private constructor(private readonly props: NotificationProps) {}
|
||||
|
||||
static create(props: Omit<NotificationProps, 'status' | 'createdAt'> & {
|
||||
static create(props: Omit<NotificationProps, 'status' | 'createdAt' | 'urgency'> & {
|
||||
status?: NotificationStatus;
|
||||
createdAt?: Date;
|
||||
urgency?: NotificationUrgency;
|
||||
}): Notification {
|
||||
if (!props.id) throw new Error('Notification ID is required');
|
||||
if (!props.recipientId) throw new Error('Recipient ID is required');
|
||||
@@ -67,9 +98,13 @@ export class Notification {
|
||||
if (!props.body?.trim()) throw new Error('Notification body is required');
|
||||
if (!props.channel) throw new Error('Notification channel is required');
|
||||
|
||||
// Modal notifications that require response start with action_required status
|
||||
const defaultStatus = props.requiresResponse ? 'action_required' : 'unread';
|
||||
|
||||
return new Notification({
|
||||
...props,
|
||||
status: props.status ?? 'unread',
|
||||
status: props.status ?? defaultStatus,
|
||||
urgency: props.urgency ?? 'silent',
|
||||
createdAt: props.createdAt ?? new Date(),
|
||||
});
|
||||
}
|
||||
@@ -81,10 +116,14 @@ export class Notification {
|
||||
get body(): string { return this.props.body; }
|
||||
get channel(): NotificationChannel { return this.props.channel; }
|
||||
get status(): NotificationStatus { return this.props.status; }
|
||||
get urgency(): NotificationUrgency { return this.props.urgency; }
|
||||
get data(): NotificationData | undefined { return this.props.data ? { ...this.props.data } : undefined; }
|
||||
get actionUrl(): string | undefined { return this.props.actionUrl; }
|
||||
get actions(): NotificationAction[] | undefined { return this.props.actions ? [...this.props.actions] : undefined; }
|
||||
get requiresResponse(): boolean { return this.props.requiresResponse ?? false; }
|
||||
get createdAt(): Date { return this.props.createdAt; }
|
||||
get readAt(): Date | undefined { return this.props.readAt; }
|
||||
get respondedAt(): Date | undefined { return this.props.respondedAt; }
|
||||
|
||||
isUnread(): boolean {
|
||||
return this.props.status === 'unread';
|
||||
@@ -98,6 +137,29 @@ export class Notification {
|
||||
return this.props.status === 'dismissed';
|
||||
}
|
||||
|
||||
isActionRequired(): boolean {
|
||||
return this.props.status === 'action_required';
|
||||
}
|
||||
|
||||
isSilent(): boolean {
|
||||
return this.props.urgency === 'silent';
|
||||
}
|
||||
|
||||
isToast(): boolean {
|
||||
return this.props.urgency === 'toast';
|
||||
}
|
||||
|
||||
isModal(): boolean {
|
||||
return this.props.urgency === 'modal';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if this notification can be dismissed without responding
|
||||
*/
|
||||
canDismiss(): boolean {
|
||||
return !this.props.requiresResponse || this.props.status !== 'action_required';
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark the notification as read
|
||||
*/
|
||||
@@ -112,6 +174,19 @@ export class Notification {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark that the user has responded to an action_required notification
|
||||
*/
|
||||
markAsResponded(actionId?: string): Notification {
|
||||
return new Notification({
|
||||
...this.props,
|
||||
status: 'read',
|
||||
readAt: this.props.readAt ?? new Date(),
|
||||
respondedAt: new Date(),
|
||||
data: actionId ? { ...this.props.data, responseActionId: actionId } : this.props.data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the notification
|
||||
*/
|
||||
@@ -119,6 +194,10 @@ export class Notification {
|
||||
if (this.props.status === 'dismissed') {
|
||||
return this; // Already dismissed
|
||||
}
|
||||
// Cannot dismiss action_required notifications without responding
|
||||
if (this.props.requiresResponse && this.props.status === 'action_required') {
|
||||
throw new Error('Cannot dismiss notification that requires response');
|
||||
}
|
||||
return new Notification({
|
||||
...this.props,
|
||||
status: 'dismissed',
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { LeagueVisibilityType } from '../../domain/value-objects/LeagueVisibility';
|
||||
import type { StewardingDecisionMode } from '../../domain/entities/League';
|
||||
|
||||
export type LeagueStructureMode = 'solo' | 'fixedTeams';
|
||||
|
||||
@@ -57,6 +58,49 @@ export interface LeagueTimingsFormDTO {
|
||||
monthlyWeekday?: import('../../domain/value-objects/Weekday').Weekday;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stewarding configuration for protests and penalties.
|
||||
*/
|
||||
export interface LeagueStewardingFormDTO {
|
||||
/**
|
||||
* How protest decisions are made
|
||||
*/
|
||||
decisionMode: StewardingDecisionMode;
|
||||
/**
|
||||
* Number of votes required to uphold/reject a protest
|
||||
* Used with steward_vote, member_vote, steward_veto, member_veto modes
|
||||
*/
|
||||
requiredVotes?: number;
|
||||
/**
|
||||
* Whether to require a defense from the accused before deciding
|
||||
*/
|
||||
requireDefense: boolean;
|
||||
/**
|
||||
* Time limit (hours) for accused to submit defense
|
||||
*/
|
||||
defenseTimeLimit: number;
|
||||
/**
|
||||
* Time limit (hours) for voting to complete
|
||||
*/
|
||||
voteTimeLimit: number;
|
||||
/**
|
||||
* Time limit (hours) after race ends when protests can be filed
|
||||
*/
|
||||
protestDeadlineHours: number;
|
||||
/**
|
||||
* Time limit (hours) after race ends when stewarding is closed
|
||||
*/
|
||||
stewardingClosesHours: number;
|
||||
/**
|
||||
* Whether to notify the accused when a protest is filed
|
||||
*/
|
||||
notifyAccusedOnProtest: boolean;
|
||||
/**
|
||||
* Whether to notify eligible voters when a vote is required
|
||||
*/
|
||||
notifyOnVoteRequired: boolean;
|
||||
}
|
||||
|
||||
export interface LeagueConfigFormModel {
|
||||
leagueId?: string; // present for admin, omitted for create
|
||||
basics: {
|
||||
@@ -80,6 +124,7 @@ export interface LeagueConfigFormModel {
|
||||
scoring: LeagueScoringFormDTO;
|
||||
dropPolicy: LeagueDropPolicyFormDTO;
|
||||
timings: LeagueTimingsFormDTO;
|
||||
stewarding: LeagueStewardingFormDTO;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -77,4 +77,5 @@ export type {
|
||||
LeagueDropPolicyFormDTO,
|
||||
LeagueStructureMode,
|
||||
LeagueTimingsFormDTO,
|
||||
LeagueStewardingFormDTO,
|
||||
} from './dto/LeagueConfigFormDTO';
|
||||
@@ -5,6 +5,56 @@
|
||||
* Immutable entity with factory methods and domain validation.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Stewarding decision mode for protests
|
||||
*/
|
||||
export type StewardingDecisionMode =
|
||||
| 'admin_only' // Only admins can decide
|
||||
| 'steward_vote' // X stewards must vote to uphold
|
||||
| 'member_vote' // X members must vote to uphold
|
||||
| 'steward_veto' // Upheld unless X stewards vote against
|
||||
| 'member_veto'; // Upheld unless X members vote against
|
||||
|
||||
export interface StewardingSettings {
|
||||
/**
|
||||
* How protest decisions are made
|
||||
*/
|
||||
decisionMode: StewardingDecisionMode;
|
||||
/**
|
||||
* Number of votes required to uphold/reject a protest
|
||||
* Used with steward_vote, member_vote, steward_veto, member_veto modes
|
||||
*/
|
||||
requiredVotes?: number;
|
||||
/**
|
||||
* Whether to require a defense from the accused before deciding
|
||||
*/
|
||||
requireDefense?: boolean;
|
||||
/**
|
||||
* Time limit (hours) for accused to submit defense
|
||||
*/
|
||||
defenseTimeLimit?: number;
|
||||
/**
|
||||
* Time limit (hours) for voting to complete
|
||||
*/
|
||||
voteTimeLimit?: number;
|
||||
/**
|
||||
* Time limit (hours) after race ends when protests can be filed
|
||||
*/
|
||||
protestDeadlineHours?: number;
|
||||
/**
|
||||
* Time limit (hours) after race ends when stewarding is closed (no more decisions)
|
||||
*/
|
||||
stewardingClosesHours?: number;
|
||||
/**
|
||||
* Whether to notify the accused when a protest is filed
|
||||
*/
|
||||
notifyAccusedOnProtest?: boolean;
|
||||
/**
|
||||
* Whether to notify eligible voters when a vote is required
|
||||
*/
|
||||
notifyOnVoteRequired?: boolean;
|
||||
}
|
||||
|
||||
export interface LeagueSettings {
|
||||
pointsSystem: 'f1-2024' | 'indycar' | 'custom';
|
||||
sessionDuration?: number;
|
||||
@@ -15,6 +65,10 @@ export interface LeagueSettings {
|
||||
* Used for simple capacity display on the website.
|
||||
*/
|
||||
maxDrivers?: number;
|
||||
/**
|
||||
* Stewarding settings for protest handling
|
||||
*/
|
||||
stewarding?: StewardingSettings;
|
||||
}
|
||||
|
||||
export interface LeagueSocialLinks {
|
||||
@@ -64,11 +118,23 @@ export class League {
|
||||
}): League {
|
||||
this.validate(props);
|
||||
|
||||
const defaultStewardingSettings: StewardingSettings = {
|
||||
decisionMode: 'admin_only',
|
||||
requireDefense: false,
|
||||
defenseTimeLimit: 48,
|
||||
voteTimeLimit: 72,
|
||||
protestDeadlineHours: 48,
|
||||
stewardingClosesHours: 168, // 7 days
|
||||
notifyAccusedOnProtest: true,
|
||||
notifyOnVoteRequired: true,
|
||||
};
|
||||
|
||||
const defaultSettings: LeagueSettings = {
|
||||
pointsSystem: 'f1-2024',
|
||||
sessionDuration: 60,
|
||||
qualifyingFormat: 'open',
|
||||
maxDrivers: 32,
|
||||
stewarding: defaultStewardingSettings,
|
||||
};
|
||||
|
||||
return new League({
|
||||
|
||||
Reference in New Issue
Block a user