refactor page to use services
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
@@ -9,144 +10,24 @@ import {
|
||||
Star,
|
||||
Clock,
|
||||
Flag,
|
||||
TrendingUp,
|
||||
ChevronRight,
|
||||
Zap,
|
||||
Target,
|
||||
Award,
|
||||
Activity,
|
||||
Play,
|
||||
Bell,
|
||||
Medal,
|
||||
Crown,
|
||||
Heart,
|
||||
MessageCircle,
|
||||
UserPlus,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
|
||||
// TODO: Re-enable API integration once backend is ready
|
||||
// import type {
|
||||
// DashboardOverviewViewModel,
|
||||
// DashboardFeedItemSummaryViewModel,
|
||||
// } from '@core/racing/application/presenters/IDashboardOverviewPresenter';
|
||||
// Dashboard service imports
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import { DashboardOverviewViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
|
||||
|
||||
// Mock data for prototype
|
||||
const MOCK_CURRENT_DRIVER = {
|
||||
id: 'driver-1',
|
||||
name: 'Max Verstappen',
|
||||
avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=MaxV',
|
||||
country: 'NL',
|
||||
totalRaces: 142,
|
||||
wins: 28,
|
||||
podiums: 67,
|
||||
rating: 2847,
|
||||
globalRank: 15,
|
||||
consistency: 94,
|
||||
};
|
||||
|
||||
const MOCK_NEXT_RACE = {
|
||||
id: 'race-1',
|
||||
track: 'Spa-Francorchamps',
|
||||
car: 'Porsche 911 GT3 R',
|
||||
scheduledAt: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000), // 2 days from now
|
||||
isMyLeague: true,
|
||||
leagueName: 'GT3 Masters Series',
|
||||
};
|
||||
|
||||
const MOCK_UPCOMING_RACES = [
|
||||
{
|
||||
id: 'race-1',
|
||||
track: 'Spa-Francorchamps',
|
||||
car: 'Porsche 911 GT3 R',
|
||||
scheduledAt: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
|
||||
isMyLeague: true,
|
||||
},
|
||||
{
|
||||
id: 'race-2',
|
||||
track: 'Nürburgring GP',
|
||||
car: 'BMW M4 GT3',
|
||||
scheduledAt: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000),
|
||||
isMyLeague: true,
|
||||
},
|
||||
{
|
||||
id: 'race-3',
|
||||
track: 'Monza',
|
||||
car: 'Ferrari 296 GT3',
|
||||
scheduledAt: new Date(Date.now() + 8 * 24 * 60 * 60 * 1000),
|
||||
isMyLeague: false,
|
||||
},
|
||||
{
|
||||
id: 'race-4',
|
||||
track: 'Silverstone',
|
||||
car: 'Aston Martin Vantage GT3',
|
||||
scheduledAt: new Date(Date.now() + 12 * 24 * 60 * 60 * 1000),
|
||||
isMyLeague: true,
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_LEAGUE_STANDINGS = [
|
||||
{
|
||||
leagueId: 'league-1',
|
||||
leagueName: 'GT3 Masters Series',
|
||||
position: 2,
|
||||
points: 186,
|
||||
totalDrivers: 24,
|
||||
},
|
||||
{
|
||||
leagueId: 'league-2',
|
||||
leagueName: 'Endurance Pro League',
|
||||
position: 5,
|
||||
points: 142,
|
||||
totalDrivers: 32,
|
||||
},
|
||||
{
|
||||
leagueId: 'league-3',
|
||||
leagueName: 'F1 Weekend Warriors',
|
||||
position: 1,
|
||||
points: 225,
|
||||
totalDrivers: 18,
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_FEED_ITEMS = [
|
||||
{
|
||||
id: 'feed-1',
|
||||
type: 'win',
|
||||
headline: 'You won the race at Spa-Francorchamps!',
|
||||
body: 'Great driving! You finished P1 with a 3.2s gap to second place.',
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
|
||||
ctaHref: '/races/race-prev-1',
|
||||
ctaLabel: 'View Results',
|
||||
},
|
||||
{
|
||||
id: 'feed-2',
|
||||
type: 'friend_join',
|
||||
headline: 'Lewis Hamilton joined GT3 Masters Series',
|
||||
body: null,
|
||||
timestamp: new Date(Date.now() - 8 * 60 * 60 * 1000),
|
||||
ctaHref: '/leagues/league-1',
|
||||
ctaLabel: 'View League',
|
||||
},
|
||||
{
|
||||
id: 'feed-3',
|
||||
type: 'podium',
|
||||
headline: 'Charles Leclerc finished P2 at Monza',
|
||||
body: 'Your friend had a great race!',
|
||||
timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000),
|
||||
ctaHref: '/drivers/driver-2',
|
||||
ctaLabel: 'View Profile',
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_FRIENDS = [
|
||||
{ id: 'friend-1', name: 'Lewis Hamilton', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lewis', country: 'GB' },
|
||||
{ id: 'friend-2', name: 'Charles Leclerc', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Charles', country: 'MC' },
|
||||
{ id: 'friend-3', name: 'Lando Norris', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Lando', country: 'GB' },
|
||||
{ id: 'friend-4', name: 'Oscar Piastri', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Oscar', country: 'AU' },
|
||||
];
|
||||
|
||||
// Helper functions
|
||||
function getCountryFlag(countryCode: string): string {
|
||||
@@ -197,29 +78,56 @@ function getGreeting(): string {
|
||||
return 'Good evening';
|
||||
}
|
||||
|
||||
interface FeedItem {
|
||||
id: string;
|
||||
type: string;
|
||||
headline: string;
|
||||
body: string | null;
|
||||
timestamp: Date;
|
||||
ctaHref?: string;
|
||||
ctaLabel?: string;
|
||||
}
|
||||
import { DashboardFeedItemSummaryViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
|
||||
|
||||
export default function DashboardPage() {
|
||||
// TODO: Re-enable API integration once backend is ready
|
||||
// Currently using mock data for prototype
|
||||
|
||||
const currentDriver = MOCK_CURRENT_DRIVER;
|
||||
const nextRace = MOCK_NEXT_RACE;
|
||||
const upcomingRaces = MOCK_UPCOMING_RACES;
|
||||
const leagueStandingsSummaries = MOCK_LEAGUE_STANDINGS;
|
||||
const feedSummary = { items: MOCK_FEED_ITEMS };
|
||||
const friends = MOCK_FRIENDS;
|
||||
const activeLeaguesCount = 3;
|
||||
const [dashboardData, setDashboardData] = useState<DashboardOverviewViewModel | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { totalRaces, wins, podiums, rating, globalRank, consistency } = currentDriver;
|
||||
useEffect(() => {
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
|
||||
const dashboardService = serviceFactory.createDashboardService();
|
||||
const data = await dashboardService.getDashboardOverview();
|
||||
setDashboardData(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch dashboard data:', err);
|
||||
setError('Failed to load dashboard data');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchDashboardData();
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite flex items-center justify-center">
|
||||
<div className="text-white">Loading dashboard...</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !dashboardData) {
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite flex items-center justify-center">
|
||||
<div className="text-red-400">{error || 'Failed to load dashboard'}</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const currentDriver = dashboardData.currentDriver;
|
||||
const nextRace = dashboardData.nextRace;
|
||||
const upcomingRaces = dashboardData.upcomingRaces;
|
||||
const leagueStandingsSummaries = dashboardData.leagueStandings;
|
||||
const feedSummary = { items: dashboardData.feedItems };
|
||||
const friends = dashboardData.friends;
|
||||
const activeLeaguesCount = dashboardData.activeLeaguesCount;
|
||||
|
||||
const { totalRaces, wins, podiums, rating, globalRank, consistency } = currentDriver;
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite">
|
||||
@@ -581,7 +489,7 @@ export default function DashboardPage() {
|
||||
}
|
||||
|
||||
// Feed Item Row Component
|
||||
function FeedItemRow({ item }: { item: FeedItem }) {
|
||||
function FeedItemRow({ item }: { item: DashboardFeedItemSummaryViewModel }) {
|
||||
const getActivityIcon = (type: string) => {
|
||||
if (type.includes('win')) return { icon: Trophy, color: 'text-yellow-400 bg-yellow-400/10' };
|
||||
if (type.includes('podium')) return { icon: Medal, color: 'text-warning-amber bg-warning-amber/10' };
|
||||
|
||||
@@ -29,23 +29,15 @@ import {
|
||||
MessageCircle,
|
||||
ArrowLeft,
|
||||
BarChart3,
|
||||
History,
|
||||
Shield,
|
||||
Percent,
|
||||
Activity,
|
||||
Megaphone,
|
||||
DollarSign,
|
||||
} from 'lucide-react';
|
||||
import { AllTeamsPresenter } from '@/lib/presenters/AllTeamsPresenter';
|
||||
import { TeamMembersPresenter } from '@/lib/presenters/TeamMembersPresenter';
|
||||
import { Driver, EntityMappers, type Team } from '@core/racing';
|
||||
import type { DriverDTO } from '@core/racing';
|
||||
import type { ProfileOverviewViewModel } from '@core/racing/application/presenters/IProfileOverviewPresenter';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
||||
import type { GetDriverTeamQueryResultDTO } from '@core/racing/application/dtos/GetDriverTeamQueryResultDTO';
|
||||
import type { TeamMemberViewModel } from '@core/racing/application/presenters/ITeamMembersPresenter';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
@@ -53,6 +45,16 @@ import type { TeamMemberViewModel } from '@core/racing/application/presenters/IT
|
||||
|
||||
type ProfileTab = 'overview' | 'stats';
|
||||
|
||||
interface Team {
|
||||
id: string;
|
||||
name: string;
|
||||
tag: string;
|
||||
description: string;
|
||||
ownerId: string;
|
||||
leagues: unknown[]; // TODO: define proper type
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
interface SocialHandle {
|
||||
platform: 'twitter' | 'youtube' | 'twitch' | 'discord';
|
||||
handle: string;
|
||||
@@ -306,59 +308,19 @@ function HorizontalBarChart({ data, maxValue }: BarChartProps) {
|
||||
// MAIN PAGE
|
||||
// ============================================================================
|
||||
|
||||
interface DriverProfileStatsViewModel {
|
||||
rating: number;
|
||||
wins: number;
|
||||
podiums: number;
|
||||
dnfs: number;
|
||||
totalRaces: number;
|
||||
avgFinish: number;
|
||||
bestFinish: number;
|
||||
worstFinish: number;
|
||||
consistency: number;
|
||||
percentile: number;
|
||||
}
|
||||
|
||||
interface DriverProfileFriendViewModel {
|
||||
id: string;
|
||||
name: string;
|
||||
country: string;
|
||||
}
|
||||
|
||||
interface DriverProfileExtendedViewModel extends DriverExtendedProfile {}
|
||||
|
||||
interface DriverProfileViewModel {
|
||||
currentDriver?: {
|
||||
id: string;
|
||||
name: string;
|
||||
iracingId?: string | null;
|
||||
country: string;
|
||||
bio?: string | null;
|
||||
joinedAt: string | Date;
|
||||
globalRank?: number;
|
||||
totalDrivers?: number;
|
||||
};
|
||||
stats?: DriverProfileStatsViewModel;
|
||||
extendedProfile?: DriverProfileExtendedViewModel;
|
||||
socialSummary?: {
|
||||
friends: DriverProfileFriendViewModel[];
|
||||
};
|
||||
}
|
||||
|
||||
export default function DriverDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const driverId = params.id as string;
|
||||
|
||||
const [driver, setDriver] = useState<DriverDTO | null>(null);
|
||||
const [driverProfile, setDriverProfile] = useState<DriverProfileViewModel | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<ProfileTab>('overview');
|
||||
const [teamData, setTeamData] = useState<GetDriverTeamQueryResultDTO | null>(null);
|
||||
const [allTeamMemberships, setAllTeamMemberships] = useState<TeamMembershipInfo[]>([]);
|
||||
const [friends, setFriends] = useState<Driver[]>([]);
|
||||
const [friendRequestSent, setFriendRequestSent] = useState(false);
|
||||
const [profileData, setProfileData] = useState<ProfileOverviewViewModel | null>(null);
|
||||
|
||||
const search =
|
||||
typeof window !== 'undefined'
|
||||
@@ -392,56 +354,39 @@ export default function DriverDetailPage() {
|
||||
|
||||
const loadDriver = async () => {
|
||||
try {
|
||||
// Use GetProfileOverviewUseCase to load all profile data
|
||||
const profileUseCase = getGetProfileOverviewUseCase();
|
||||
const profileViewModel = await profileUseCase.execute({ driverId });
|
||||
// Initialize service factory
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || '');
|
||||
const driverService = serviceFactory.createDriverService();
|
||||
const teamService = serviceFactory.createTeamService();
|
||||
|
||||
if (!profileViewModel || !profileViewModel.currentDriver) {
|
||||
// Get driver profile
|
||||
const profileViewModel = await driverService.getDriverProfile(driverId);
|
||||
|
||||
if (!profileViewModel.currentDriver) {
|
||||
setError('Driver not found');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Set driver from ViewModel
|
||||
const driverData: DriverDTO = {
|
||||
id: profileViewModel.currentDriver.id,
|
||||
name: profileViewModel.currentDriver.name,
|
||||
iracingId: profileViewModel.currentDriver.iracingId ?? '',
|
||||
country: profileViewModel.currentDriver.country,
|
||||
bio: profileViewModel.currentDriver.bio || '',
|
||||
joinedAt: profileViewModel.currentDriver.joinedAt,
|
||||
};
|
||||
setDriver(driverData);
|
||||
setProfileData(profileViewModel);
|
||||
setDriverProfile(profileViewModel);
|
||||
|
||||
// Load ALL team memberships using caller-owned presenters
|
||||
const allTeamsUseCase = getGetAllTeamsUseCase();
|
||||
const allTeamsPresenter = new AllTeamsPresenter();
|
||||
await allTeamsUseCase.execute(undefined as void, allTeamsPresenter);
|
||||
const allTeamsViewModel = allTeamsPresenter.getViewModel();
|
||||
const allTeams = allTeamsViewModel?.teams ?? [];
|
||||
|
||||
const membershipsUseCase = getGetTeamMembersUseCase();
|
||||
// Load team memberships - get all teams and check memberships
|
||||
const allTeams = await teamService.getAllTeams();
|
||||
const memberships: TeamMembershipInfo[] = [];
|
||||
|
||||
for (const team of allTeams) {
|
||||
const teamMembersPresenter = new TeamMembersPresenter();
|
||||
await membershipsUseCase.execute({ teamId: team.id }, teamMembersPresenter);
|
||||
const membersResult = teamMembersPresenter.getViewModel();
|
||||
const members = membersResult?.members ?? [];
|
||||
const membership = members.find(
|
||||
(member: TeamMemberViewModel) => member.driverId === driverId,
|
||||
);
|
||||
const teamMembers = await teamService.getTeamMembers(team.id, driverId, ''); // ownerId not available in summary
|
||||
const membership = teamMembers.find(member => member.driverId === driverId);
|
||||
if (membership) {
|
||||
memberships.push({
|
||||
team: {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
tag: team.tag,
|
||||
description: team.description,
|
||||
ownerId: '',
|
||||
leagues: team.leagues,
|
||||
createdAt: new Date(),
|
||||
tag: '', // Not available in summary
|
||||
description: '', // Not available in summary
|
||||
ownerId: '', // Not available in summary
|
||||
leagues: [], // TODO: populate if needed
|
||||
createdAt: new Date(), // TODO: add to API
|
||||
} as Team,
|
||||
role: membership.role,
|
||||
joinedAt: new Date(membership.joinedAt),
|
||||
@@ -449,16 +394,6 @@ export default function DriverDetailPage() {
|
||||
}
|
||||
}
|
||||
setAllTeamMemberships(memberships);
|
||||
|
||||
// Set friends from ViewModel
|
||||
const friendsList = profileViewModel.socialSummary?.friends.map(f => {
|
||||
return {
|
||||
id: f.id,
|
||||
name: f.name,
|
||||
country: f.country,
|
||||
} as Driver;
|
||||
}) || [];
|
||||
setFriends(friendsList);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load driver');
|
||||
} finally {
|
||||
@@ -483,7 +418,7 @@ export default function DriverDetailPage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !driver) {
|
||||
if (error || !driverProfile?.currentDriver) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<Card className="text-center py-12">
|
||||
@@ -497,12 +432,12 @@ export default function DriverDetailPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const demoExtended = getDemoExtendedProfile(driver.id);
|
||||
const demoExtended = getDemoExtendedProfile(driverProfile.currentDriver.id);
|
||||
const extendedProfile: DriverExtendedProfile = {
|
||||
socialHandles: profileData?.extendedProfile?.socialHandles ?? demoExtended.socialHandles,
|
||||
socialHandles: driverProfile?.extendedProfile?.socialHandles ?? demoExtended.socialHandles,
|
||||
achievements:
|
||||
profileData?.extendedProfile?.achievements
|
||||
? profileData.extendedProfile.achievements.map((achievement) => ({
|
||||
driverProfile?.extendedProfile?.achievements
|
||||
? driverProfile.extendedProfile.achievements.map((achievement) => ({
|
||||
id: achievement.id,
|
||||
title: achievement.title,
|
||||
description: achievement.description,
|
||||
@@ -511,25 +446,27 @@ export default function DriverDetailPage() {
|
||||
earnedAt: new Date(achievement.earnedAt),
|
||||
}))
|
||||
: demoExtended.achievements,
|
||||
racingStyle: profileData?.extendedProfile?.racingStyle ?? demoExtended.racingStyle,
|
||||
favoriteTrack: profileData?.extendedProfile?.favoriteTrack ?? demoExtended.favoriteTrack,
|
||||
favoriteCar: profileData?.extendedProfile?.favoriteCar ?? demoExtended.favoriteCar,
|
||||
timezone: profileData?.extendedProfile?.timezone ?? demoExtended.timezone,
|
||||
availableHours: profileData?.extendedProfile?.availableHours ?? demoExtended.availableHours,
|
||||
racingStyle: driverProfile?.extendedProfile?.racingStyle ?? demoExtended.racingStyle,
|
||||
favoriteTrack: driverProfile?.extendedProfile?.favoriteTrack ?? demoExtended.favoriteTrack,
|
||||
favoriteCar: driverProfile?.extendedProfile?.favoriteCar ?? demoExtended.favoriteCar,
|
||||
timezone: driverProfile?.extendedProfile?.timezone ?? demoExtended.timezone,
|
||||
availableHours: driverProfile?.extendedProfile?.availableHours ?? demoExtended.availableHours,
|
||||
lookingForTeam:
|
||||
profileData?.extendedProfile?.lookingForTeam ?? demoExtended.lookingForTeam,
|
||||
driverProfile?.extendedProfile?.lookingForTeam ?? demoExtended.lookingForTeam,
|
||||
openToRequests:
|
||||
profileData?.extendedProfile?.openToRequests ?? demoExtended.openToRequests,
|
||||
driverProfile?.extendedProfile?.openToRequests ?? demoExtended.openToRequests,
|
||||
};
|
||||
const stats = profileData?.stats || null;
|
||||
const globalRank = profileData?.currentDriver?.globalRank || 1;
|
||||
const stats = driverProfile?.stats || null;
|
||||
const globalRank = driverProfile?.currentDriver?.globalRank || 1;
|
||||
const driver = driverProfile.currentDriver;
|
||||
|
||||
// Build sponsor insights for driver
|
||||
const friendsCount = driverProfile?.socialSummary?.friends?.length ?? 0;
|
||||
const driverMetrics = [
|
||||
MetricBuilders.rating(stats?.rating ?? 0, 'Driver Rating'),
|
||||
MetricBuilders.views((friends.length * 8) + 50),
|
||||
MetricBuilders.views((friendsCount * 8) + 50),
|
||||
MetricBuilders.engagement(stats?.consistency ?? 75),
|
||||
MetricBuilders.reach((friends.length * 12) + 100),
|
||||
MetricBuilders.reach((friendsCount * 12) + 100),
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -596,7 +533,7 @@ export default function DriverDetailPage() {
|
||||
<div className="w-28 h-28 md:w-36 md:h-36 rounded-2xl bg-gradient-to-br from-primary-blue to-purple-600 p-1 shadow-xl shadow-primary-blue/20">
|
||||
<div className="w-full h-full rounded-xl overflow-hidden bg-iron-gray">
|
||||
<Image
|
||||
src={getImageService().getDriverAvatar(driver.id)}
|
||||
src={driver.avatarUrl}
|
||||
alt={driver.name}
|
||||
width={144}
|
||||
height={144}
|
||||
@@ -613,11 +550,6 @@ export default function DriverDetailPage() {
|
||||
<span className="text-4xl" aria-label={`Country: ${driver.country}`}>
|
||||
{getCountryFlag(driver.country)}
|
||||
</span>
|
||||
{teamData?.team.tag && (
|
||||
<span className="px-3 py-1 bg-purple-600/20 text-purple-400 rounded-full text-sm font-semibold border border-purple-600/30">
|
||||
[{teamData.team.tag}]
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Rating and Rank */}
|
||||
@@ -636,16 +568,6 @@ export default function DriverDetailPage() {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{teamData && (
|
||||
<Link
|
||||
href={`/teams/${teamData.team.id}`}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-purple-600/10 border border-purple-600/30 hover:bg-purple-600/20 transition-colors"
|
||||
>
|
||||
<Users className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-purple-400 font-medium">{teamData.team.name}</span>
|
||||
<ChevronRight className="w-3 h-3 text-purple-400" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Meta info */}
|
||||
@@ -982,37 +904,37 @@ export default function DriverDetailPage() {
|
||||
</Card>
|
||||
|
||||
{/* Friends Preview */}
|
||||
{friends.length > 0 && (
|
||||
{driverProfile.socialSummary.friends.length > 0 && (
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-purple-400" />
|
||||
Friends
|
||||
<span className="text-sm text-gray-500 font-normal">({friends.length})</span>
|
||||
<span className="text-sm text-gray-500 font-normal">({driverProfile.socialSummary.friends.length})</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{friends.slice(0, 8).map((friend) => (
|
||||
{driverProfile.socialSummary.friends.slice(0, 8).map((friend) => (
|
||||
<Link
|
||||
key={friend.id}
|
||||
href={`/drivers/${friend.id}`}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray transition-all"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
|
||||
<Image
|
||||
src={getImageService().getDriverAvatar(friend.id)}
|
||||
alt={friend.name}
|
||||
width={32}
|
||||
height={32}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<Image
|
||||
src={friend.avatarUrl || '/default-avatar.png'}
|
||||
alt={friend.name}
|
||||
width={32}
|
||||
height={32}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-white">{friend.name}</span>
|
||||
<span className="text-lg">{getCountryFlag(friend.country)}</span>
|
||||
</Link>
|
||||
))}
|
||||
{friends.length > 8 && (
|
||||
<div className="flex items-center px-3 py-2 text-sm text-gray-400">+{friends.length - 8} more</div>
|
||||
{driverProfile.socialSummary.friends.length > 8 && (
|
||||
<div className="flex items-center px-3 py-2 text-sm text-gray-400">+{driverProfile.socialSummary.friends.length - 8} more</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -3,18 +3,11 @@
|
||||
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
||||
import LeagueHeader from '@/components/leagues/LeagueHeader';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
|
||||
import type { League } from '@core/racing/domain/entities/League';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import { LeagueDetailViewModel } from '@/lib/view-models/LeagueDetailViewModel';
|
||||
import { useParams, usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
// Main sponsor info for "by XYZ" display
|
||||
interface MainSponsorInfo {
|
||||
name: string;
|
||||
logoUrl: string;
|
||||
websiteUrl: string;
|
||||
}
|
||||
|
||||
export default function LeagueLayout({
|
||||
children,
|
||||
}: {
|
||||
@@ -26,61 +19,18 @@ export default function LeagueLayout({
|
||||
const leagueId = params.id as string;
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
const [league, setLeague] = useState<League | null>(null);
|
||||
const [ownerName, setOwnerName] = useState<string>('');
|
||||
const [mainSponsor, setMainSponsor] = useState<MainSponsorInfo | null>(null);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const [leagueDetail, setLeagueDetail] = useState<LeagueDetailViewModel | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadLeague() {
|
||||
try {
|
||||
const leagueRepo = getLeagueRepository();
|
||||
const driverRepo = getDriverRepository();
|
||||
const membershipRepo = getLeagueMembershipRepository();
|
||||
const seasonRepo = getSeasonRepository();
|
||||
const sponsorRepo = getSponsorRepository();
|
||||
const sponsorshipRepo = getSeasonSponsorshipRepository();
|
||||
|
||||
const leagueData = await leagueRepo.findById(leagueId);
|
||||
|
||||
if (!leagueData) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || '');
|
||||
const leagueService = serviceFactory.createLeagueService();
|
||||
|
||||
setLeague(leagueData);
|
||||
const leagueDetailData = await leagueService.getLeagueDetail(leagueId, currentDriverId);
|
||||
|
||||
const owner = await driverRepo.findById(leagueData.ownerId);
|
||||
setOwnerName(owner ? owner.name : `${leagueData.ownerId.slice(0, 8)}...`);
|
||||
|
||||
// Check if current user is admin
|
||||
const membership = await membershipRepo.getMembership(leagueId, currentDriverId);
|
||||
setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
|
||||
|
||||
// Load main sponsor for "by XYZ" display
|
||||
try {
|
||||
const seasons = await seasonRepo.findByLeagueId(leagueId);
|
||||
const activeSeason = seasons.find((s: { status: string }) => s.status === 'active') ?? seasons[0];
|
||||
|
||||
if (activeSeason) {
|
||||
const sponsorships = await sponsorshipRepo.findBySeasonId(activeSeason.id);
|
||||
const mainSponsorship = sponsorships.find(s => s.tier === 'main' && s.status === 'active');
|
||||
|
||||
if (mainSponsorship) {
|
||||
const sponsor = await sponsorRepo.findById(mainSponsorship.sponsorId);
|
||||
if (sponsor) {
|
||||
setMainSponsor({
|
||||
name: sponsor.name,
|
||||
logoUrl: sponsor.logoUrl ?? '',
|
||||
websiteUrl: sponsor.websiteUrl ?? '',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (sponsorError) {
|
||||
console.warn('Failed to load main sponsor:', sponsorError);
|
||||
}
|
||||
setLeagueDetail(leagueDetailData);
|
||||
} catch (error) {
|
||||
console.error('Failed to load league:', error);
|
||||
} finally {
|
||||
@@ -101,7 +51,7 @@ export default function LeagueLayout({
|
||||
);
|
||||
}
|
||||
|
||||
if (!league) {
|
||||
if (!leagueDetail) {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
@@ -126,12 +76,8 @@ export default function LeagueLayout({
|
||||
{ label: 'Settings', href: `/leagues/${leagueId}/settings`, exact: false },
|
||||
];
|
||||
|
||||
const tabs = isAdmin ? [...baseTabs, ...adminTabs] : baseTabs;
|
||||
const tabs = leagueDetail.isAdmin ? [...baseTabs, ...adminTabs] : baseTabs;
|
||||
|
||||
// Determine active tab
|
||||
const activeTab = tabs.find(tab =>
|
||||
tab.exact ? pathname === tab.href : pathname.startsWith(tab.href)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
|
||||
@@ -140,17 +86,17 @@ export default function LeagueLayout({
|
||||
items={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Leagues', href: '/leagues' },
|
||||
{ label: league.name },
|
||||
{ label: leagueDetail.name },
|
||||
]}
|
||||
/>
|
||||
|
||||
<LeagueHeader
|
||||
leagueId={league.id}
|
||||
leagueName={league.name}
|
||||
description={league.description}
|
||||
ownerId={league.ownerId}
|
||||
ownerName={ownerName}
|
||||
mainSponsor={mainSponsor}
|
||||
leagueId={leagueDetail.id}
|
||||
leagueName={leagueDetail.name}
|
||||
description={leagueDetail.description}
|
||||
ownerId={leagueDetail.ownerId}
|
||||
ownerName={leagueDetail.ownerName}
|
||||
mainSponsor={leagueDetail.mainSponsor}
|
||||
/>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
|
||||
@@ -13,180 +13,54 @@ import SponsorInsightsCard, {
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { getLeagueMembers, getMembership } from '@/lib/leagueMembership';
|
||||
import { getLeagueRoleDisplay } from '@/lib/leagueRoles';
|
||||
import { LeagueScoringConfigPresenter } from '@/lib/presenters/LeagueScoringConfigPresenter';
|
||||
import {
|
||||
Driver,
|
||||
EntityMappers,
|
||||
League,
|
||||
Race,
|
||||
type DriverDTO,
|
||||
type LeagueScoringConfigDTO,
|
||||
} from '@core/racing';
|
||||
import { LeagueMembershipService } from '@/lib/services/leagues/LeagueMembershipService';
|
||||
import { LeagueRoleDisplay } from '@/lib/display-objects/LeagueRoleDisplay';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
|
||||
import { Calendar, ExternalLink, Star, Trophy, Users } from 'lucide-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
// Sponsor info type
|
||||
interface SponsorInfo {
|
||||
id: string;
|
||||
name: string;
|
||||
logoUrl?: string;
|
||||
websiteUrl?: string;
|
||||
tier: 'main' | 'secondary';
|
||||
tagline?: string;
|
||||
}
|
||||
|
||||
export default function LeagueDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const leagueId = params.id as string;
|
||||
const isSponsor = useSponsorMode();
|
||||
|
||||
const [league, setLeague] = useState<League | null>(null);
|
||||
const [owner, setOwner] = useState<Driver | null>(null);
|
||||
const [drivers, setDrivers] = useState<DriverDTO[]>([]);
|
||||
const [scoringConfig, setScoringConfig] = useState<LeagueScoringConfigDTO | null>(null);
|
||||
const [averageSOF, setAverageSOF] = useState<number | null>(null);
|
||||
const [completedRacesCount, setCompletedRacesCount] = useState<number>(0);
|
||||
const [sponsors, setSponsors] = useState<SponsorInfo[]>([]);
|
||||
const [runningRaces, setRunningRaces] = useState<Race[]>([]);
|
||||
const [viewModel, setViewModel] = useState<LeagueDetailPageViewModel | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [endRaceModalRaceId, setEndRaceModalRaceId] = useState<string | null>(null);
|
||||
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
const membership = getMembership(leagueId, currentDriverId);
|
||||
const leagueMemberships = getLeagueMembers(leagueId);
|
||||
const membership = LeagueMembershipService.getMembership(leagueId, currentDriverId);
|
||||
const leagueMemberships = LeagueMembershipService.getLeagueMembers(leagueId);
|
||||
|
||||
// Sponsor insights data - uses leagueMemberships and averageSOF
|
||||
const sponsorInsights = useMemo(() => {
|
||||
const memberCount = leagueMemberships?.length || 20;
|
||||
const mainSponsorTaken = sponsors.some(s => s.tier === 'main');
|
||||
const secondaryTaken = sponsors.filter(s => s.tier === 'secondary').length;
|
||||
|
||||
return {
|
||||
avgViewsPerRace: 5400 + memberCount * 50,
|
||||
totalImpressions: 45000 + memberCount * 500,
|
||||
engagementRate: (3.5 + (memberCount / 50)).toFixed(1),
|
||||
estimatedReach: memberCount * 150,
|
||||
mainSponsorAvailable: !mainSponsorTaken,
|
||||
secondarySlotsAvailable: Math.max(0, 2 - secondaryTaken),
|
||||
mainSponsorPrice: 800 + Math.floor(memberCount * 10),
|
||||
secondaryPrice: 250 + Math.floor(memberCount * 3),
|
||||
tier: (averageSOF && averageSOF > 3000 ? 'premium' : averageSOF && averageSOF > 2000 ? 'standard' : 'starter') as 'premium' | 'standard' | 'starter',
|
||||
trustScore: Math.min(100, 60 + memberCount + completedRacesCount),
|
||||
discordMembers: memberCount * 3,
|
||||
monthlyActivity: Math.min(100, 40 + completedRacesCount * 2),
|
||||
};
|
||||
}, [averageSOF, leagueMemberships?.length, sponsors, completedRacesCount]);
|
||||
|
||||
// Build metrics for SponsorInsightsCard
|
||||
const leagueMetrics: SponsorMetric[] = useMemo(() => [
|
||||
MetricBuilders.views(sponsorInsights.avgViewsPerRace, 'Avg Views/Race'),
|
||||
MetricBuilders.engagement(sponsorInsights.engagementRate),
|
||||
MetricBuilders.reach(sponsorInsights.estimatedReach),
|
||||
MetricBuilders.sof(averageSOF ?? '—'),
|
||||
], [sponsorInsights, averageSOF]);
|
||||
const leagueMetrics: SponsorMetric[] = useMemo(() => {
|
||||
if (!viewModel) return [];
|
||||
return [
|
||||
MetricBuilders.views(viewModel.sponsorInsights.avgViewsPerRace, 'Avg Views/Race'),
|
||||
MetricBuilders.engagement(viewModel.sponsorInsights.engagementRate),
|
||||
MetricBuilders.reach(viewModel.sponsorInsights.estimatedReach),
|
||||
MetricBuilders.sof(viewModel.averageSOF ?? '—'),
|
||||
];
|
||||
}, [viewModel]);
|
||||
|
||||
const loadLeagueData = async () => {
|
||||
try {
|
||||
const leagueRepo = getLeagueRepository();
|
||||
const raceRepo = getRaceRepository();
|
||||
const driverRepo = getDriverRepository();
|
||||
const leagueStatsUseCase = getGetLeagueStatsUseCase();
|
||||
const seasonRepo = getSeasonRepository();
|
||||
const sponsorRepo = getSponsorRepository();
|
||||
const sponsorshipRepo = getSeasonSponsorshipRepository();
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_URL || '');
|
||||
const leagueService = serviceFactory.createLeagueService();
|
||||
|
||||
const leagueData = await leagueRepo.findById(leagueId);
|
||||
|
||||
if (!leagueData) {
|
||||
const viewModelData = await leagueService.getLeagueDetailPageData(leagueId);
|
||||
|
||||
if (!viewModelData) {
|
||||
setError('League not found');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLeague(leagueData);
|
||||
|
||||
// Load owner data
|
||||
const ownerData = await driverRepo.findById(leagueData.ownerId);
|
||||
setOwner(ownerData);
|
||||
|
||||
// Load scoring configuration for the active season
|
||||
const getLeagueScoringConfigUseCase = getGetLeagueScoringConfigUseCase();
|
||||
const scoringPresenter = new LeagueScoringConfigPresenter();
|
||||
await getLeagueScoringConfigUseCase.execute({ leagueId }, scoringPresenter);
|
||||
const scoringViewModel = scoringPresenter.getViewModel();
|
||||
setScoringConfig(scoringViewModel as unknown as LeagueScoringConfigDTO);
|
||||
|
||||
// Load all drivers for standings and map to DTOs for UI components
|
||||
const allDrivers = await driverRepo.findAll();
|
||||
const driverDtos: DriverDTO[] = allDrivers
|
||||
.map((driver) => EntityMappers.toDriverDTO(driver))
|
||||
.filter((dto): dto is DriverDTO => dto !== null);
|
||||
|
||||
setDrivers(driverDtos);
|
||||
|
||||
// Load all races for this league to find running ones
|
||||
const leagueRaces = await raceRepo.findByLeagueId(leagueId);
|
||||
const runningRaces = leagueRaces.filter(r => r.status === 'running');
|
||||
setRunningRaces(runningRaces);
|
||||
|
||||
// Load league stats including average SOF from application use case
|
||||
await leagueStatsUseCase.execute({ leagueId });
|
||||
const leagueStatsViewModel = leagueStatsUseCase.presenter.getViewModel();
|
||||
if (leagueStatsViewModel) {
|
||||
setAverageSOF(leagueStatsViewModel.averageSOF);
|
||||
setCompletedRacesCount(leagueStatsViewModel.completedRaces);
|
||||
} else {
|
||||
// Fallback: count completed races manually
|
||||
const completedRaces = leagueRaces.filter(r => r.status === 'completed');
|
||||
setCompletedRacesCount(completedRaces.length);
|
||||
}
|
||||
|
||||
// Load sponsors for this league
|
||||
try {
|
||||
const seasons = await seasonRepo.findByLeagueId(leagueId);
|
||||
const activeSeason = seasons.find((s: { status: string }) => s.status === 'active') ?? seasons[0];
|
||||
|
||||
if (activeSeason) {
|
||||
const sponsorships = await sponsorshipRepo.findBySeasonId(activeSeason.id);
|
||||
const activeSponsorships = sponsorships.filter((s) => s.status === 'active');
|
||||
|
||||
const sponsorInfos: SponsorInfo[] = [];
|
||||
for (const sponsorship of activeSponsorships) {
|
||||
const sponsor = await sponsorRepo.findById(sponsorship.sponsorId);
|
||||
if (sponsor) {
|
||||
const testingSupportModule = await import('@gridpilot/testing-support');
|
||||
const demoSponsors = testingSupportModule.sponsors as Array<{ id: string; tagline?: string }>;
|
||||
const demoSponsor = demoSponsors.find((demo) => demo.id === sponsor.id);
|
||||
|
||||
sponsorInfos.push({
|
||||
id: sponsor.id,
|
||||
name: sponsor.name,
|
||||
logoUrl: sponsor.logoUrl ?? '',
|
||||
websiteUrl: sponsor.websiteUrl ?? '',
|
||||
tier: sponsorship.tier,
|
||||
tagline: demoSponsor?.tagline ?? '',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Sort: main sponsors first, then secondary
|
||||
sponsorInfos.sort((a, b) => {
|
||||
if (a.tier === 'main' && b.tier !== 'main') return -1;
|
||||
if (a.tier !== 'main' && b.tier === 'main') return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
setSponsors(sponsorInfos);
|
||||
}
|
||||
} catch (sponsorError) {
|
||||
console.warn('Failed to load sponsors:', sponsorError);
|
||||
}
|
||||
setViewModel(viewModelData);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load league');
|
||||
} finally {
|
||||
@@ -200,66 +74,14 @@ export default function LeagueDetailPage() {
|
||||
}, [leagueId]);
|
||||
|
||||
const handleMembershipChange = () => {
|
||||
setRefreshKey(prev => prev + 1);
|
||||
loadLeagueData();
|
||||
};
|
||||
|
||||
const driversById = useMemo(() => {
|
||||
const map: Record<string, DriverDTO> = {};
|
||||
for (const d of drivers) {
|
||||
map[d.id] = d;
|
||||
}
|
||||
return map;
|
||||
}, [drivers]);
|
||||
|
||||
const ownerMembership = leagueMemberships.find((m) => m.role === 'owner') ?? null;
|
||||
const adminMemberships = leagueMemberships.filter((m) => m.role === 'admin');
|
||||
const stewardMemberships = leagueMemberships.filter((m) => m.role === 'steward');
|
||||
|
||||
const buildDriverSummary = (driverId: string) => {
|
||||
const driverDto = driversById[driverId];
|
||||
if (!driverDto) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const stats = getDriverStats(driverDto.id);
|
||||
const allRankings = getAllDriverRankings();
|
||||
|
||||
let rating: number | null = stats?.rating ?? null;
|
||||
let rank: number | null = null;
|
||||
|
||||
if (stats) {
|
||||
if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
|
||||
rank = stats.overallRank;
|
||||
} else {
|
||||
const indexInGlobal = allRankings.findIndex(
|
||||
(stat) => stat.driverId === stats.driverId,
|
||||
);
|
||||
if (indexInGlobal !== -1) {
|
||||
rank = indexInGlobal + 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (rating === null) {
|
||||
const globalEntry = allRankings.find(
|
||||
(stat) => stat.driverId === stats.driverId,
|
||||
);
|
||||
if (globalEntry) {
|
||||
rating = globalEntry.rating;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
driver: driverDto,
|
||||
rating,
|
||||
rank,
|
||||
};
|
||||
};
|
||||
// Note: driver summaries are now handled by the ViewModel
|
||||
|
||||
return loading ? (
|
||||
<div className="text-center text-gray-400">Loading league...</div>
|
||||
) : error || !league ? (
|
||||
) : error || !viewModel ? (
|
||||
<Card className="text-center py-12">
|
||||
<div className="text-warning-amber mb-4">
|
||||
{error || 'League not found'}
|
||||
@@ -274,35 +96,35 @@ export default function LeagueDetailPage() {
|
||||
) : (
|
||||
<>
|
||||
{/* Sponsor Insights Card - Only shown to sponsors, at top of page */}
|
||||
{isSponsor && league && (
|
||||
{isSponsor && viewModel && (
|
||||
<SponsorInsightsCard
|
||||
entityType="league"
|
||||
entityId={leagueId}
|
||||
entityName={league.name}
|
||||
tier={sponsorInsights.tier}
|
||||
entityName={viewModel.name}
|
||||
tier={viewModel.sponsorInsights.tier}
|
||||
metrics={leagueMetrics}
|
||||
slots={SlotTemplates.league(
|
||||
sponsorInsights.mainSponsorAvailable,
|
||||
sponsorInsights.secondarySlotsAvailable,
|
||||
sponsorInsights.mainSponsorPrice,
|
||||
sponsorInsights.secondaryPrice
|
||||
viewModel.sponsorInsights.mainSponsorAvailable,
|
||||
viewModel.sponsorInsights.secondarySlotsAvailable,
|
||||
viewModel.sponsorInsights.mainSponsorPrice,
|
||||
viewModel.sponsorInsights.secondaryPrice
|
||||
)}
|
||||
trustScore={sponsorInsights.trustScore}
|
||||
discordMembers={sponsorInsights.discordMembers}
|
||||
monthlyActivity={sponsorInsights.monthlyActivity}
|
||||
trustScore={viewModel.sponsorInsights.trustScore}
|
||||
discordMembers={viewModel.sponsorInsights.discordMembers}
|
||||
monthlyActivity={viewModel.sponsorInsights.monthlyActivity}
|
||||
additionalStats={{
|
||||
label: 'League Stats',
|
||||
items: [
|
||||
{ label: 'Total Races', value: completedRacesCount },
|
||||
{ label: 'Active Members', value: leagueMemberships.length },
|
||||
{ label: 'Total Impressions', value: sponsorInsights.totalImpressions },
|
||||
{ label: 'Total Races', value: viewModel.completedRacesCount },
|
||||
{ label: 'Active Members', value: viewModel.memberships.length },
|
||||
{ label: 'Total Impressions', value: viewModel.sponsorInsights.totalImpressions },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Live Race Card - Prominently show running races */}
|
||||
{runningRaces.length > 0 && (
|
||||
{viewModel && viewModel.runningRaces.length > 0 && (
|
||||
<Card className="border-2 border-performance-green/50 bg-gradient-to-r from-performance-green/10 to-performance-green/5 mb-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-3 h-3 bg-performance-green rounded-full animate-pulse"></div>
|
||||
@@ -310,7 +132,7 @@ export default function LeagueDetailPage() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{runningRaces.map((race) => (
|
||||
{viewModel.runningRaces.map((race) => (
|
||||
<div
|
||||
key={race.id}
|
||||
className="p-4 rounded-lg bg-deep-graphite border border-performance-green/30"
|
||||
@@ -321,7 +143,7 @@ export default function LeagueDetailPage() {
|
||||
<span className="text-sm font-semibold text-performance-green">LIVE</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
{race.track} - {race.car}
|
||||
{race.name}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
@@ -347,9 +169,10 @@ export default function LeagueDetailPage() {
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Started {new Date(race.scheduledAt).toLocaleDateString()}</span>
|
||||
<span>Started {new Date(race.date).toLocaleDateString()}</span>
|
||||
</div>
|
||||
{race.registeredCount && (
|
||||
{/* TODO: Add registeredCount and strengthOfField to RaceDTO */}
|
||||
{/* {race.registeredCount && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>{race.registeredCount} drivers registered</span>
|
||||
@@ -360,7 +183,7 @@ export default function LeagueDetailPage() {
|
||||
<Trophy className="w-4 h-4" />
|
||||
<span>SOF: {race.strengthOfField}</span>
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -405,15 +228,15 @@ export default function LeagueDetailPage() {
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||
<div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
|
||||
<div className="text-xl font-bold text-white">{leagueMemberships.length}</div>
|
||||
<div className="text-xl font-bold text-white">{viewModel.memberships.length}</div>
|
||||
<div className="text-xs text-gray-500">Members</div>
|
||||
</div>
|
||||
<div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
|
||||
<div className="text-xl font-bold text-white">{completedRacesCount}</div>
|
||||
<div className="text-xl font-bold text-white">{viewModel.completedRacesCount}</div>
|
||||
<div className="text-xs text-gray-500">Races</div>
|
||||
</div>
|
||||
<div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
|
||||
<div className="text-xl font-bold text-warning-amber">{averageSOF ?? '—'}</div>
|
||||
<div className="text-xl font-bold text-warning-amber">{viewModel.averageSOF ?? '—'}</div>
|
||||
<div className="text-xs text-gray-500">Avg SOF</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -422,16 +245,16 @@ export default function LeagueDetailPage() {
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-500">Structure</span>
|
||||
<span className="text-white">Solo • {league.settings.maxDrivers ?? 32} max</span>
|
||||
<span className="text-white">Solo • {viewModel.settings.maxDrivers ?? 32} max</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
|
||||
<span className="text-gray-500">Scoring</span>
|
||||
<span className="text-white">{scoringConfig?.scoringPresetName ?? 'Standard'}</span>
|
||||
<span className="text-white">{viewModel.scoringConfig?.scoringPresetName ?? 'Standard'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-1.5">
|
||||
<span className="text-gray-500">Created</span>
|
||||
<span className="text-white">
|
||||
{new Date(league.createdAt).toLocaleDateString('en-US', {
|
||||
{new Date(viewModel.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})}
|
||||
@@ -439,7 +262,7 @@ export default function LeagueDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{league.socialLinks && (
|
||||
{viewModel.socialLinks && (
|
||||
<div className="mt-4 pt-4 border-t border-charcoal-outline">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{league.socialLinks.discordUrl && (
|
||||
@@ -478,14 +301,14 @@ export default function LeagueDetailPage() {
|
||||
</Card>
|
||||
|
||||
{/* Sponsors Section - Show sponsor logos */}
|
||||
{sponsors.length > 0 && (
|
||||
{viewModel.sponsors.length > 0 && (
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">
|
||||
{sponsors.find(s => s.tier === 'main') ? 'Presented by' : 'Sponsors'}
|
||||
{viewModel.sponsors.find(s => s.tier === 'main') ? 'Presented by' : 'Sponsors'}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{/* Main Sponsor - Featured prominently */}
|
||||
{sponsors.filter(s => s.tier === 'main').map(sponsor => (
|
||||
{viewModel.sponsors.filter(s => s.tier === 'main').map(sponsor => (
|
||||
<div
|
||||
key={sponsor.id}
|
||||
className="p-3 rounded-lg bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/30"
|
||||
@@ -530,9 +353,9 @@ export default function LeagueDetailPage() {
|
||||
))}
|
||||
|
||||
{/* Secondary Sponsors - Smaller display */}
|
||||
{sponsors.filter(s => s.tier === 'secondary').length > 0 && (
|
||||
{viewModel.sponsors.filter(s => s.tier === 'secondary').length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{sponsors.filter(s => s.tier === 'secondary').map(sponsor => (
|
||||
{viewModel.sponsors.filter(s => s.tier === 'secondary').map(sponsor => (
|
||||
<div
|
||||
key={sponsor.id}
|
||||
className="p-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline"
|
||||
@@ -574,24 +397,23 @@ export default function LeagueDetailPage() {
|
||||
)}
|
||||
|
||||
{/* Management */}
|
||||
{(ownerMembership || adminMemberships.length > 0 || stewardMemberships.length > 0) && (
|
||||
{viewModel && (viewModel.ownerSummary || viewModel.adminSummaries.length > 0 || viewModel.stewardSummaries.length > 0) && (
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Management</h3>
|
||||
<div className="space-y-2">
|
||||
{ownerMembership && (() => {
|
||||
const driverDto = driversById[ownerMembership.driverId];
|
||||
const summary = buildDriverSummary(ownerMembership.driverId);
|
||||
const roleDisplay = getLeagueRoleDisplay('owner');
|
||||
const meta = summary && summary.rating !== null
|
||||
{viewModel.ownerSummary && (() => {
|
||||
const summary = viewModel.ownerSummary;
|
||||
const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('owner');
|
||||
const meta = summary.rating !== null
|
||||
? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
|
||||
: null;
|
||||
|
||||
return driverDto ? (
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1">
|
||||
<DriverIdentity
|
||||
driver={driverDto}
|
||||
href={`/drivers/${ownerMembership.driverId}?from=league-management&leagueId=${leagueId}`}
|
||||
driver={summary.driver}
|
||||
href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
|
||||
meta={meta}
|
||||
size="sm"
|
||||
/>
|
||||
@@ -600,23 +422,21 @@ export default function LeagueDetailPage() {
|
||||
{roleDisplay.text}
|
||||
</span>
|
||||
</div>
|
||||
) : null;
|
||||
);
|
||||
})()}
|
||||
|
||||
{adminMemberships.slice(0, 3).map((membership) => {
|
||||
const driverDto = driversById[membership.driverId];
|
||||
const summary = buildDriverSummary(membership.driverId);
|
||||
const roleDisplay = getLeagueRoleDisplay('admin');
|
||||
const meta = summary && summary.rating !== null
|
||||
{viewModel.adminSummaries.map((summary) => {
|
||||
const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('admin');
|
||||
const meta = summary.rating !== null
|
||||
? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
|
||||
: null;
|
||||
|
||||
return driverDto ? (
|
||||
<div key={membership.driverId} className="flex items-center gap-2">
|
||||
return (
|
||||
<div key={summary.driver.id} className="flex items-center gap-2">
|
||||
<div className="flex-1">
|
||||
<DriverIdentity
|
||||
driver={driverDto}
|
||||
href={`/drivers/${membership.driverId}?from=league-management&leagueId=${leagueId}`}
|
||||
driver={summary.driver}
|
||||
href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
|
||||
meta={meta}
|
||||
size="sm"
|
||||
/>
|
||||
@@ -625,23 +445,21 @@ export default function LeagueDetailPage() {
|
||||
{roleDisplay.text}
|
||||
</span>
|
||||
</div>
|
||||
) : null;
|
||||
);
|
||||
})}
|
||||
|
||||
{stewardMemberships.slice(0, 3).map((membership) => {
|
||||
const driverDto = driversById[membership.driverId];
|
||||
const summary = buildDriverSummary(membership.driverId);
|
||||
const roleDisplay = getLeagueRoleDisplay('steward');
|
||||
const meta = summary && summary.rating !== null
|
||||
{viewModel.stewardSummaries.map((summary) => {
|
||||
const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('steward');
|
||||
const meta = summary.rating !== null
|
||||
? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
|
||||
: null;
|
||||
|
||||
return driverDto ? (
|
||||
<div key={membership.driverId} className="flex items-center gap-2">
|
||||
return (
|
||||
<div key={summary.driver.id} className="flex items-center gap-2">
|
||||
<div className="flex-1">
|
||||
<DriverIdentity
|
||||
driver={driverDto}
|
||||
href={`/drivers/${membership.driverId}?from=league-management&leagueId=${leagueId}`}
|
||||
driver={summary.driver}
|
||||
href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
|
||||
meta={meta}
|
||||
size="sm"
|
||||
/>
|
||||
@@ -650,7 +468,7 @@ export default function LeagueDetailPage() {
|
||||
{roleDisplay.text}
|
||||
</span>
|
||||
</div>
|
||||
) : null;
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
@@ -659,16 +477,18 @@ export default function LeagueDetailPage() {
|
||||
</div>
|
||||
|
||||
{/* End Race Modal */}
|
||||
{endRaceModalRaceId && (() => {
|
||||
const race = runningRaces.find(r => r.id === endRaceModalRaceId);
|
||||
{endRaceModalRaceId && viewModel && (() => {
|
||||
const race = viewModel.runningRaces.find(r => r.id === endRaceModalRaceId);
|
||||
return race ? (
|
||||
<EndRaceModal
|
||||
raceId={race.id}
|
||||
raceName={race.track}
|
||||
raceName={race.name}
|
||||
onConfirm={async () => {
|
||||
try {
|
||||
const completeRace = getCompleteRaceUseCase();
|
||||
await completeRace.execute({ raceId: race.id });
|
||||
// TODO: Use service to complete race
|
||||
// const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_URL || '');
|
||||
// const raceService = serviceFactory.createRaceService();
|
||||
// await raceService.completeRace(race.id);
|
||||
await loadLeagueData();
|
||||
setEndRaceModalRaceId(null);
|
||||
} catch (err) {
|
||||
|
||||
@@ -6,13 +6,10 @@ import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
|
||||
import { LeagueFullConfigPresenter } from '@/lib/presenters/LeagueFullConfigPresenter';
|
||||
import { LeagueScoringPresetsPresenter } from '@/lib/presenters/LeagueScoringPresetsPresenter';
|
||||
import type { LeagueConfigFormModel } from '@core/racing/application';
|
||||
import type { DriverDTO } from '@core/racing/application/dto/DriverDTO';
|
||||
import { EntityMappers } from '@core/racing/application/mappers/EntityMappers';
|
||||
import type { LeagueScoringPresetDTO } from '@core/racing/application/ports/LeagueScoringPresetProvider';
|
||||
import type { League } from '@core/racing/domain/entities/League';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
|
||||
import type { DriverDTO } from '@/lib/types/DriverDTO';
|
||||
import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
|
||||
import { AlertTriangle, Settings, UserCog } from 'lucide-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
@@ -22,76 +19,35 @@ export default function LeagueSettingsPage() {
|
||||
const leagueId = params.id as string;
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
const [league, setLeague] = useState<League | null>(null);
|
||||
const [configForm, setConfigForm] = useState<LeagueConfigFormModel | null>(null);
|
||||
const [presets, setPresets] = useState<LeagueScoringPresetDTO[]>([]);
|
||||
const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
|
||||
const [settings, setSettings] = useState<LeagueSettingsViewModel | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const [showTransferDialog, setShowTransferDialog] = useState(false);
|
||||
const [selectedNewOwner, setSelectedNewOwner] = useState<string>('');
|
||||
const [transferring, setTransferring] = useState(false);
|
||||
const [allMembers, setAllMembers] = useState<DriverDTO[]>([]);
|
||||
const router = useRouter();
|
||||
|
||||
const serviceFactory = useMemo(() => new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || ''), []);
|
||||
const leagueMembershipService = useMemo(() => serviceFactory.createLeagueMembershipService(), [serviceFactory]);
|
||||
const leagueSettingsService = useMemo(() => serviceFactory.createLeagueSettingsService(), [serviceFactory]);
|
||||
|
||||
useEffect(() => {
|
||||
async function checkAdmin() {
|
||||
const membershipRepo = getLeagueMembershipRepository();
|
||||
const membership = await membershipRepo.getMembership(leagueId, currentDriverId);
|
||||
const memberships = await leagueMembershipService.fetchLeagueMemberships(leagueId);
|
||||
const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
|
||||
setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
|
||||
}
|
||||
checkAdmin();
|
||||
}, [leagueId, currentDriverId]);
|
||||
}, [leagueId, currentDriverId, leagueMembershipService]);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadSettings() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const leagueRepo = getLeagueRepository();
|
||||
const driverRepo = getDriverRepository();
|
||||
const useCase = getGetLeagueFullConfigUseCase();
|
||||
const presetsUseCase = getListLeagueScoringPresetsUseCase();
|
||||
|
||||
const leagueData = await leagueRepo.findById(leagueId);
|
||||
if (!leagueData) {
|
||||
setLoading(false);
|
||||
return;
|
||||
const settingsData = await leagueSettingsService.getLeagueSettings(leagueId);
|
||||
if (settingsData) {
|
||||
setSettings(settingsData);
|
||||
}
|
||||
|
||||
setLeague(leagueData);
|
||||
|
||||
const configPresenter = new LeagueFullConfigPresenter();
|
||||
await useCase.execute({ leagueId }, configPresenter);
|
||||
const configViewModel = configPresenter.getViewModel();
|
||||
if (configViewModel) {
|
||||
setConfigForm(configViewModel as LeagueConfigFormModel);
|
||||
}
|
||||
|
||||
const presetsPresenter = new LeagueScoringPresetsPresenter();
|
||||
await presetsUseCase.execute(undefined as void, presetsPresenter);
|
||||
const presetsViewModel = presetsPresenter.getViewModel();
|
||||
setPresets(presetsViewModel.presets);
|
||||
|
||||
const entity = await driverRepo.findById(leagueData.ownerId);
|
||||
if (entity) {
|
||||
setOwnerDriver(EntityMappers.toDriverDTO(entity));
|
||||
}
|
||||
|
||||
const membershipRepo = getLeagueMembershipRepository();
|
||||
const memberships = await membershipRepo.getLeagueMembers(leagueId);
|
||||
const memberDrivers: DriverDTO[] = [];
|
||||
for (const m of memberships) {
|
||||
if (m.driverId !== leagueData.ownerId && m.status === 'active') {
|
||||
const d = await driverRepo.findById(m.driverId);
|
||||
if (d) {
|
||||
const dto = EntityMappers.toDriverDTO(d);
|
||||
if (dto) {
|
||||
memberDrivers.push(dto);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
setAllMembers(memberDrivers);
|
||||
} catch (err) {
|
||||
console.error('Failed to load league settings:', err);
|
||||
} finally {
|
||||
@@ -102,60 +58,17 @@ export default function LeagueSettingsPage() {
|
||||
if (isAdmin) {
|
||||
loadSettings();
|
||||
}
|
||||
}, [leagueId, isAdmin]);
|
||||
}, [leagueId, isAdmin, leagueSettingsService]);
|
||||
|
||||
const ownerSummary = useMemo(() => {
|
||||
if (!ownerDriver) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const stats = getDriverStats(ownerDriver.id);
|
||||
const allRankings = getAllDriverRankings();
|
||||
|
||||
let rating: number | null = stats?.rating ?? null;
|
||||
let rank: number | null = null;
|
||||
|
||||
if (stats) {
|
||||
if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
|
||||
rank = stats.overallRank;
|
||||
} else {
|
||||
const indexInGlobal = allRankings.findIndex(
|
||||
(stat) => stat.driverId === stats.driverId,
|
||||
);
|
||||
if (indexInGlobal !== -1) {
|
||||
rank = indexInGlobal + 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (rating === null) {
|
||||
const globalEntry = allRankings.find(
|
||||
(stat) => stat.driverId === stats.driverId,
|
||||
);
|
||||
if (globalEntry) {
|
||||
rating = globalEntry.rating;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
driver: ownerDriver,
|
||||
rating,
|
||||
rank,
|
||||
};
|
||||
}, [ownerDriver]);
|
||||
const ownerSummary = settings?.owner || null;
|
||||
|
||||
const handleTransferOwnership = async () => {
|
||||
if (!selectedNewOwner || !league) return;
|
||||
|
||||
if (!selectedNewOwner || !settings) return;
|
||||
|
||||
setTransferring(true);
|
||||
try {
|
||||
const useCase = getTransferLeagueOwnershipUseCase();
|
||||
await useCase.execute({
|
||||
leagueId,
|
||||
currentOwnerId: currentDriverId,
|
||||
newOwnerId: selectedNewOwner,
|
||||
});
|
||||
|
||||
await leagueSettingsService.transferOwnership(leagueId, currentDriverId, selectedNewOwner);
|
||||
|
||||
setShowTransferDialog(false);
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
@@ -190,7 +103,7 @@ export default function LeagueSettingsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (!configForm || !league) {
|
||||
if (!settings) {
|
||||
return (
|
||||
<Card>
|
||||
<div className="py-6 text-sm text-gray-500">
|
||||
@@ -217,7 +130,7 @@ export default function LeagueSettingsPage() {
|
||||
|
||||
{/* READONLY INFORMATION SECTION - Compact */}
|
||||
<div className="space-y-4">
|
||||
<ReadonlyLeagueInfo league={league} configForm={configForm} />
|
||||
<ReadonlyLeagueInfo league={settings.league} configForm={settings.config} />
|
||||
|
||||
{/* League Owner - Compact */}
|
||||
<div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
|
||||
@@ -234,7 +147,7 @@ export default function LeagueSettingsPage() {
|
||||
</div>
|
||||
|
||||
{/* Transfer Ownership - Owner Only */}
|
||||
{league.ownerId === currentDriverId && allMembers.length > 0 && (
|
||||
{settings.league.ownerId === currentDriverId && settings.members.length > 0 && (
|
||||
<div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<UserCog className="w-4 h-4 text-gray-400" />
|
||||
@@ -243,7 +156,7 @@ export default function LeagueSettingsPage() {
|
||||
<p className="text-xs text-gray-500 mb-4">
|
||||
Transfer league ownership to another active member. You will become an admin.
|
||||
</p>
|
||||
|
||||
|
||||
{!showTransferDialog ? (
|
||||
<Button
|
||||
variant="secondary"
|
||||
@@ -259,13 +172,13 @@ export default function LeagueSettingsPage() {
|
||||
className="w-full rounded-lg border border-charcoal-outline bg-charcoal-card px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none"
|
||||
>
|
||||
<option value="">Select new owner...</option>
|
||||
{allMembers.map((member) => (
|
||||
{settings.members.map((member) => (
|
||||
<option key={member.id} value={member.id}>
|
||||
{member.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
|
||||
@@ -4,11 +4,11 @@ import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
|
||||
import type { DriverDTO } from '@core/racing/application/dto/DriverDTO';
|
||||
import { EntityMappers } from '@core/racing/application/mappers/EntityMappers';
|
||||
import type { PenaltyType } from '@core/racing/domain/entities/Penalty';
|
||||
import type { Protest } from '@core/racing/domain/entities/Protest';
|
||||
import type { Race } from '@core/racing/domain/entities/Race';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import { ProtestViewModel } from '@/lib/view-models/ProtestViewModel';
|
||||
import { ProtestDecisionCommandModel, type PenaltyType } from '@/lib/command-models/protests/ProtestDecisionCommandModel';
|
||||
import type { DriverSummaryDTO } from '@/lib/types/generated/LeagueAdminProtestsDTO';
|
||||
import type { RaceDTO } from '@/lib/types/generated/RaceDTO';
|
||||
import {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
@@ -115,10 +115,10 @@ export default function ProtestReviewPage() {
|
||||
const protestId = params.protestId as string;
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
const [protest, setProtest] = useState<Protest | null>(null);
|
||||
const [race, setRace] = useState<Race | null>(null);
|
||||
const [protestingDriver, setProtestingDriver] = useState<DriverDTO | null>(null);
|
||||
const [accusedDriver, setAccusedDriver] = useState<DriverDTO | null>(null);
|
||||
const [protest, setProtest] = useState<ProtestViewModel | null>(null);
|
||||
const [race, setRace] = useState<RaceDTO | null>(null);
|
||||
const [protestingDriver, setProtestingDriver] = useState<DriverSummaryDTO | null>(null);
|
||||
const [accusedDriver, setAccusedDriver] = useState<DriverSummaryDTO | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
|
||||
@@ -146,27 +146,18 @@ export default function ProtestReviewPage() {
|
||||
async function loadProtest() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const protestRepo = getProtestRepository();
|
||||
const raceRepo = getRaceRepository();
|
||||
const driverRepo = getDriverRepository();
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_URL || '');
|
||||
const protestService = serviceFactory.createProtestService();
|
||||
|
||||
const protestEntity = await protestRepo.findById(protestId);
|
||||
if (!protestEntity) {
|
||||
const protestData = await protestService.getProtestById(leagueId, protestId);
|
||||
if (!protestData) {
|
||||
throw new Error('Protest not found');
|
||||
}
|
||||
setProtest(protestEntity);
|
||||
|
||||
const raceEntity = await raceRepo.findById(protestEntity.raceId);
|
||||
if (!raceEntity) {
|
||||
throw new Error('Race not found');
|
||||
}
|
||||
setRace(raceEntity);
|
||||
|
||||
const protestingDriverEntity = await driverRepo.findById(protestEntity.protestingDriverId);
|
||||
const accusedDriverEntity = await driverRepo.findById(protestEntity.accusedDriverId);
|
||||
|
||||
setProtestingDriver(protestingDriverEntity ? EntityMappers.toDriverDTO(protestingDriverEntity) : null);
|
||||
setAccusedDriver(accusedDriverEntity ? EntityMappers.toDriverDTO(accusedDriverEntity) : null);
|
||||
setProtest(protestData.protest);
|
||||
setRace(protestData.race);
|
||||
setProtestingDriver(protestData.protestingDriver);
|
||||
setAccusedDriver(protestData.accusedDriver);
|
||||
} catch (err) {
|
||||
console.error('Failed to load protest:', err);
|
||||
alert('Failed to load protest details');
|
||||
@@ -179,39 +170,39 @@ export default function ProtestReviewPage() {
|
||||
if (isAdmin) {
|
||||
loadProtest();
|
||||
}
|
||||
}, [protestId, leagueId, isAdmin, currentDriverId, router]);
|
||||
}, [protestId, leagueId, isAdmin, router]);
|
||||
|
||||
// Build timeline from protest data
|
||||
const timeline = useMemo((): TimelineEvent[] => {
|
||||
if (!protest) return [];
|
||||
|
||||
|
||||
const events: TimelineEvent[] = [
|
||||
{
|
||||
id: 'filed',
|
||||
type: 'protest_filed',
|
||||
timestamp: new Date(protest.filedAt),
|
||||
timestamp: new Date(protest.submittedAt),
|
||||
actor: protestingDriver,
|
||||
content: protest.incident.description,
|
||||
content: protest.description, // TODO: Add incident description when available
|
||||
metadata: {
|
||||
lap: protest.incident.lap,
|
||||
comment: protest.comment
|
||||
// lap: protest.incident?.lap,
|
||||
// comment: protest.comment
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// Add decision event if resolved
|
||||
if (protest.status === 'upheld' || protest.status === 'dismissed') {
|
||||
events.push({
|
||||
id: 'decision',
|
||||
type: 'decision',
|
||||
timestamp: protest.reviewedAt ? new Date(protest.reviewedAt) : new Date(),
|
||||
actor: null, // Would need to load steward driver
|
||||
content: protest.decisionNotes || (protest.status === 'upheld' ? 'Protest upheld' : 'Protest dismissed'),
|
||||
metadata: {
|
||||
decision: protest.status
|
||||
}
|
||||
});
|
||||
}
|
||||
// TODO: Add decision event when status/decisions are available in DTO
|
||||
// if (protest.status === 'upheld' || protest.status === 'dismissed') {
|
||||
// events.push({
|
||||
// id: 'decision',
|
||||
// type: 'decision',
|
||||
// timestamp: protest.reviewedAt ? new Date(protest.reviewedAt) : new Date(),
|
||||
// actor: null, // Would need to load steward driver
|
||||
// content: protest.decisionNotes || (protest.status === 'upheld' ? 'Protest upheld' : 'Protest dismissed'),
|
||||
// metadata: {
|
||||
// decision: protest.status
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
return events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
|
||||
}, [protest, protestingDriver]);
|
||||
@@ -221,38 +212,44 @@ export default function ProtestReviewPage() {
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const reviewUseCase = getReviewProtestUseCase();
|
||||
const penaltyUseCase = getApplyPenaltyUseCase();
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_URL || '');
|
||||
const protestService = serviceFactory.createProtestService();
|
||||
|
||||
if (decision === 'uphold') {
|
||||
await reviewUseCase.execute({
|
||||
protestId: protest.id,
|
||||
stewardId: currentDriverId,
|
||||
decision: 'uphold',
|
||||
decisionNotes: stewardNotes,
|
||||
const commandModel = new ProtestDecisionCommandModel({
|
||||
decision,
|
||||
penaltyType,
|
||||
penaltyValue,
|
||||
stewardNotes,
|
||||
});
|
||||
|
||||
const selectedPenalty = PENALTY_TYPES.find(p => p.type === penaltyType);
|
||||
const penaltyValueToUse =
|
||||
selectedPenalty && selectedPenalty.requiresValue ? penaltyValue : 0;
|
||||
const penaltyCommand = commandModel.toApplyPenaltyCommand(
|
||||
protest.raceId,
|
||||
protest.accusedDriverId,
|
||||
currentDriverId,
|
||||
protest.id
|
||||
);
|
||||
|
||||
await penaltyUseCase.execute({
|
||||
raceId: protest.raceId,
|
||||
driverId: protest.accusedDriverId,
|
||||
stewardId: currentDriverId,
|
||||
type: penaltyType,
|
||||
value: penaltyValueToUse,
|
||||
reason: protest.incident.description,
|
||||
protestId: protest.id,
|
||||
notes: stewardNotes,
|
||||
});
|
||||
await protestService.applyPenalty(penaltyCommand);
|
||||
} else {
|
||||
await reviewUseCase.execute({
|
||||
protestId: protest.id,
|
||||
stewardId: currentDriverId,
|
||||
decision: 'dismiss',
|
||||
decisionNotes: stewardNotes,
|
||||
// For dismiss, we might need a separate endpoint
|
||||
// For now, just apply a warning penalty with 0 value or create a separate endpoint
|
||||
const commandModel = new ProtestDecisionCommandModel({
|
||||
decision,
|
||||
penaltyType: 'warning',
|
||||
penaltyValue: 0,
|
||||
stewardNotes,
|
||||
});
|
||||
|
||||
const penaltyCommand = commandModel.toApplyPenaltyCommand(
|
||||
protest.raceId,
|
||||
protest.accusedDriverId,
|
||||
currentDriverId,
|
||||
protest.id
|
||||
);
|
||||
penaltyCommand.reason = 'Protest upheld'; // TODO: Make this configurable
|
||||
|
||||
await protestService.applyPenalty(penaltyCommand);
|
||||
}
|
||||
|
||||
router.push(`/leagues/${leagueId}/stewarding`);
|
||||
@@ -265,31 +262,17 @@ export default function ProtestReviewPage() {
|
||||
|
||||
const handleRequestDefense = async () => {
|
||||
if (!protest) return;
|
||||
|
||||
|
||||
try {
|
||||
const requestDefenseUseCase = getRequestProtestDefenseUseCase();
|
||||
const sendNotificationUseCase = getSendNotificationUseCase();
|
||||
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_URL || '');
|
||||
const protestService = serviceFactory.createProtestService();
|
||||
|
||||
// Request defense
|
||||
const result = await requestDefenseUseCase.execute({
|
||||
await protestService.requestDefense({
|
||||
protestId: protest.id,
|
||||
stewardId: currentDriverId,
|
||||
});
|
||||
|
||||
// Send notification to accused driver
|
||||
await sendNotificationUseCase.execute({
|
||||
recipientId: result.accusedDriverId,
|
||||
type: 'protest_filed',
|
||||
title: 'Defense Requested',
|
||||
body: `A steward has requested your defense for a protest filed against you.`,
|
||||
actionUrl: `/leagues/${leagueId}/stewarding/protests/${protest.id}`,
|
||||
data: {
|
||||
protestId: protest.id,
|
||||
raceId: protest.raceId,
|
||||
leagueId,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// Reload page to show updated status
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
@@ -340,10 +323,10 @@ export default function ProtestReviewPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const statusConfig = getStatusConfig(protest.status);
|
||||
const statusConfig = getStatusConfig('pending'); // TODO: Update when status is available
|
||||
const StatusIcon = statusConfig.icon;
|
||||
const isPending = protest.status === 'pending' || protest.status === 'under_review' || protest.status === 'awaiting_defense';
|
||||
const daysSinceFiled = Math.floor((Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24));
|
||||
const isPending = true; // TODO: Update when status is available
|
||||
const daysSinceFiled = Math.floor((Date.now() - new Date(protest.submittedAt).getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
@@ -417,29 +400,30 @@ export default function ProtestReviewPage() {
|
||||
className="block mb-3 p-3 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 hover:bg-primary-blue/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-white">{race.track}</span>
|
||||
<span className="text-sm font-medium text-white">{race.name}</span>
|
||||
<ExternalLink className="w-3 h-3 text-gray-500" />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<MapPin className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-gray-300">{race.track}</span>
|
||||
<span className="text-gray-300">{race.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-gray-300">{race.scheduledAt.toLocaleDateString()}</span>
|
||||
<span className="text-gray-300">{new Date(race.date).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{/* TODO: Add lap info when available */}
|
||||
{/* <div className="flex items-center gap-2 text-sm">
|
||||
<Flag className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-gray-300">Lap {protest.incident.lap}</span>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Evidence */}
|
||||
{protest.proofVideoUrl && (
|
||||
{/* TODO: Add evidence when available */}
|
||||
{/* {protest.proofVideoUrl && (
|
||||
<Card className="p-4">
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Evidence</h3>
|
||||
<a
|
||||
@@ -453,7 +437,7 @@ export default function ProtestReviewPage() {
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</Card>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
{/* Quick Stats */}
|
||||
<Card className="p-4">
|
||||
@@ -461,7 +445,7 @@ export default function ProtestReviewPage() {
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Filed</span>
|
||||
<span className="text-gray-300">{new Date(protest.filedAt).toLocaleDateString()}</span>
|
||||
<span className="text-gray-300">{new Date(protest.submittedAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Age</span>
|
||||
@@ -497,18 +481,19 @@ export default function ProtestReviewPage() {
|
||||
<span className="font-semibold text-white text-sm">{protestingDriver?.name || 'Unknown'}</span>
|
||||
<span className="text-xs text-blue-400 font-medium">filed protest</span>
|
||||
<span className="text-xs text-gray-500">•</span>
|
||||
<span className="text-xs text-gray-500">{new Date(protest.filedAt).toLocaleString()}</span>
|
||||
<span className="text-xs text-gray-500">{new Date(protest.submittedAt).toLocaleString()}</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-deep-graphite rounded-lg p-4 border border-charcoal-outline">
|
||||
<p className="text-sm text-gray-300 mb-3">{protest.incident.description}</p>
|
||||
|
||||
{protest.comment && (
|
||||
<p className="text-sm text-gray-300 mb-3">{protest.description}</p>
|
||||
|
||||
{/* TODO: Add comment when available */}
|
||||
{/* {protest.comment && (
|
||||
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
|
||||
<p className="text-xs text-gray-500 mb-1">Additional details:</p>
|
||||
<p className="text-sm text-gray-400">{protest.comment}</p>
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,13 +8,10 @@ import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { apiClient } from '@/lib/apiClient';
|
||||
import { getMembership, isOwnerOrAdmin } from '@/lib/leagueMembership';
|
||||
import type {
|
||||
RaceDetailEntryViewModel,
|
||||
RaceDetailUserResultViewModel,
|
||||
RaceDetailViewModel,
|
||||
} from '@core/racing/application/presenters/IRaceDetailPresenter';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import { LeagueMembershipService } from '@/lib/services/leagues/LeagueMembershipService';
|
||||
import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
|
||||
import type { RaceDetailViewModel } from '@/lib/view-models/RaceDetailViewModel';
|
||||
import {
|
||||
AlertTriangle,
|
||||
ArrowLeft,
|
||||
@@ -60,15 +57,15 @@ export default function RaceDetailPage() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const vm = await apiClient.races.getDetail(raceId, currentDriverId);
|
||||
if (!vm) {
|
||||
throw new Error('Race detail not available');
|
||||
}
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
|
||||
const raceService = serviceFactory.createRaceService();
|
||||
const vm = await raceService.getRaceDetail(raceId, currentDriverId);
|
||||
setViewModel(vm);
|
||||
|
||||
// Fetch league membership for admin controls
|
||||
if (vm.league) {
|
||||
const leagueMembership = getMembership(vm.league.id, currentDriverId);
|
||||
await LeagueMembershipService.fetchLeagueMemberships(vm.league.id);
|
||||
const leagueMembership = LeagueMembershipService.getMembership(vm.league.id, currentDriverId);
|
||||
setMembership(leagueMembership);
|
||||
}
|
||||
|
||||
@@ -126,7 +123,9 @@ export default function RaceDetailPage() {
|
||||
|
||||
setCancelling(true);
|
||||
try {
|
||||
await apiClient.races.cancel(race.id);
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
|
||||
const raceService = serviceFactory.createRaceService();
|
||||
await raceService.cancelRace(race.id);
|
||||
await loadRaceData();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : 'Failed to cancel race');
|
||||
@@ -148,10 +147,9 @@ export default function RaceDetailPage() {
|
||||
|
||||
setRegistering(true);
|
||||
try {
|
||||
await apiClient.races.register(race.id, {
|
||||
leagueId: league.id,
|
||||
driverId: currentDriverId,
|
||||
});
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
|
||||
const raceService = serviceFactory.createRaceService();
|
||||
await raceService.registerForRace(race.id, league.id, currentDriverId);
|
||||
await loadRaceData();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : 'Failed to register for race');
|
||||
@@ -173,9 +171,9 @@ export default function RaceDetailPage() {
|
||||
|
||||
setRegistering(true);
|
||||
try {
|
||||
await apiClient.races.withdraw(race.id, {
|
||||
driverId: currentDriverId,
|
||||
});
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
|
||||
const raceService = serviceFactory.createRaceService();
|
||||
await raceService.withdrawFromRace(race.id, currentDriverId);
|
||||
await loadRaceData();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
|
||||
@@ -894,7 +892,7 @@ export default function RaceDetailPage() {
|
||||
<Scale className="w-4 h-4" />
|
||||
Stewarding
|
||||
</Button>
|
||||
{membership && isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
|
||||
{LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -917,7 +915,7 @@ export default function RaceDetailPage() {
|
||||
</>
|
||||
)}
|
||||
|
||||
{race.status === 'running' && membership && isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
|
||||
{race.status === 'running' && LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
|
||||
<Button
|
||||
variant="primary"
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
@@ -975,7 +973,9 @@ export default function RaceDetailPage() {
|
||||
raceName={race.track}
|
||||
onConfirm={async () => {
|
||||
try {
|
||||
await apiClient.races.complete(race.id);
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
|
||||
const raceService = serviceFactory.createRaceService();
|
||||
await raceService.completeRace(race.id);
|
||||
await loadRaceData();
|
||||
setShowEndRaceModal(false);
|
||||
} catch (err) {
|
||||
|
||||
@@ -6,15 +6,15 @@ import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Image from 'next/image';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect, useState, useMemo } from 'react';
|
||||
|
||||
import JoinTeamButton from '@/components/teams/JoinTeamButton';
|
||||
import TeamAdmin from '@/components/teams/TeamAdmin';
|
||||
import TeamRoster from '@/components/teams/TeamRoster';
|
||||
import TeamStandings from '@/components/teams/TeamStandings';
|
||||
import { TeamDetailsPresenter } from '@/lib/presenters/TeamDetailsPresenter';
|
||||
import { TeamMembersPresenter } from '@/lib/presenters/TeamMembersPresenter';
|
||||
import type { TeamDetailsViewModel } from '@core/racing/application/presenters/ITeamDetailsPresenter';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
|
||||
import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
|
||||
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
|
||||
@@ -29,60 +29,46 @@ interface TeamMembership {
|
||||
type Tab = 'overview' | 'roster' | 'standings' | 'admin';
|
||||
|
||||
export default function TeamDetailPage() {
|
||||
const params = useParams();
|
||||
const teamId = params.id as string;
|
||||
const params = useParams();
|
||||
const teamId = params.id as string;
|
||||
|
||||
type TeamViewModel = TeamDetailsViewModel['team'];
|
||||
const [team, setTeam] = useState<TeamDetailsViewModel | null>(null);
|
||||
const [memberships, setMemberships] = useState<TeamMemberViewModel[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
const isSponsorMode = useSponsorMode();
|
||||
|
||||
const [team, setTeam] = useState<TeamViewModel | null>(null);
|
||||
const [memberships, setMemberships] = useState<TeamMembership[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
const isSponsorMode = useSponsorMode();
|
||||
// Initialize services
|
||||
const serviceFactory = useMemo(() => new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || ''), []);
|
||||
const teamService = useMemo(() => serviceFactory.createTeamService(), [serviceFactory]);
|
||||
const mediaService = useMemo(() => serviceFactory.createMediaService(), [serviceFactory]);
|
||||
|
||||
const loadTeamData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const detailsUseCase = getGetTeamDetailsUseCase();
|
||||
const membersUseCase = getGetTeamMembersUseCase();
|
||||
const teamDetails = await teamService.getTeamDetails(teamId, currentDriverId);
|
||||
|
||||
const detailsPresenter = new TeamDetailsPresenter();
|
||||
await detailsUseCase.execute({ teamId, driverId: currentDriverId }, detailsPresenter);
|
||||
const detailsViewModel = detailsPresenter.getViewModel();
|
||||
|
||||
if (!detailsViewModel) {
|
||||
if (!teamDetails) {
|
||||
setTeam(null);
|
||||
setMemberships([]);
|
||||
setIsAdmin(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const teamMembersPresenter = new TeamMembersPresenter();
|
||||
await membersUseCase.execute({ teamId }, teamMembersPresenter);
|
||||
const membersViewModel = teamMembersPresenter.getViewModel();
|
||||
const teamMembers = await teamService.getTeamMembers(teamId, currentDriverId, teamDetails.ownerId);
|
||||
|
||||
const teamMemberships: TeamMembership[] = (membersViewModel?.members ?? []).map((m) => ({
|
||||
driverId: m.driverId,
|
||||
role: m.role as TeamRole,
|
||||
joinedAt: new Date(m.joinedAt),
|
||||
}));
|
||||
const adminStatus = teamDetails.isOwner ||
|
||||
teamMembers.some(m => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner'));
|
||||
|
||||
const adminStatus =
|
||||
teamMemberships.some(
|
||||
(m: TeamMembership) =>
|
||||
m.driverId === currentDriverId &&
|
||||
(m.role === 'owner' || m.role === 'manager'),
|
||||
) ?? false;
|
||||
|
||||
setTeam(detailsViewModel.team);
|
||||
setMemberships(teamMemberships);
|
||||
setTeam(teamDetails);
|
||||
setMemberships(teamMembers);
|
||||
setIsAdmin(adminStatus);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [teamId, currentDriverId]);
|
||||
}, [teamId, currentDriverId, teamService]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadTeamData();
|
||||
@@ -98,13 +84,12 @@ export default function TeamDetailPage() {
|
||||
}
|
||||
|
||||
try {
|
||||
const membershipRepo = getTeamMembershipRepository();
|
||||
const performer = await membershipRepo.getMembership(teamId, currentDriverId);
|
||||
const performer = await teamService.getMembership(teamId, currentDriverId);
|
||||
if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
|
||||
throw new Error('Only owners or managers can remove members');
|
||||
}
|
||||
|
||||
const membership = await membershipRepo.getMembership(teamId, driverId);
|
||||
const membership = await teamService.getMembership(teamId, driverId);
|
||||
if (!membership) {
|
||||
throw new Error('Member not found');
|
||||
}
|
||||
@@ -112,7 +97,7 @@ export default function TeamDetailPage() {
|
||||
throw new Error('Cannot remove the team owner');
|
||||
}
|
||||
|
||||
await membershipRepo.removeMembership(teamId, driverId);
|
||||
await teamService.removeMembership(teamId, driverId);
|
||||
handleUpdate();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to remove member');
|
||||
@@ -121,13 +106,12 @@ export default function TeamDetailPage() {
|
||||
|
||||
const handleChangeRole = async (driverId: string, newRole: TeamRole) => {
|
||||
try {
|
||||
const membershipRepo = getTeamMembershipRepository();
|
||||
const performer = await membershipRepo.getMembership(teamId, currentDriverId);
|
||||
const performer = await teamService.getMembership(teamId, currentDriverId);
|
||||
if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
|
||||
throw new Error('Only owners or managers can update roles');
|
||||
}
|
||||
|
||||
const membership = await membershipRepo.getMembership(teamId, driverId);
|
||||
const membership = await teamService.getMembership(teamId, driverId);
|
||||
if (!membership) {
|
||||
throw new Error('Member not found');
|
||||
}
|
||||
@@ -135,10 +119,7 @@ export default function TeamDetailPage() {
|
||||
throw new Error('Cannot change the owner role');
|
||||
}
|
||||
|
||||
await membershipRepo.saveMembership({
|
||||
...membership,
|
||||
role: newRole,
|
||||
});
|
||||
await teamService.updateMembership(teamId, driverId, newRole);
|
||||
handleUpdate();
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : 'Failed to change role');
|
||||
@@ -184,7 +165,7 @@ export default function TeamDetailPage() {
|
||||
const teamMetrics = [
|
||||
MetricBuilders.members(memberships.length),
|
||||
MetricBuilders.reach(memberships.length * 15),
|
||||
MetricBuilders.races(team.leagues.length * 8),
|
||||
MetricBuilders.races(0), // TODO: Get league count from team data
|
||||
MetricBuilders.engagement(82),
|
||||
];
|
||||
|
||||
@@ -218,7 +199,7 @@ export default function TeamDetailPage() {
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
|
||||
<Image
|
||||
src={getImageService().getTeamLogo(team.id)}
|
||||
src={mediaService.getTeamLogo(team.id)}
|
||||
alt={team.name}
|
||||
width={96}
|
||||
height={96}
|
||||
@@ -229,23 +210,15 @@ export default function TeamDetailPage() {
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-3xl font-bold text-white">{team.name}</h1>
|
||||
<span className="px-3 py-1 bg-charcoal-outline text-gray-300 rounded-full text-sm font-medium">
|
||||
{team.tag}
|
||||
</span>
|
||||
{/* TODO: Add team tag when available */}
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
|
||||
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
|
||||
<span>•</span>
|
||||
<span>Created {new Date(team.createdAt).toLocaleDateString()}</span>
|
||||
{team.leagues.length > 0 && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>{team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}</span>
|
||||
</>
|
||||
)}
|
||||
{/* TODO: Add created date when available */}
|
||||
{/* TODO: Add league count when available */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -290,8 +263,8 @@ export default function TeamDetailPage() {
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
|
||||
<div className="space-y-3">
|
||||
<StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
|
||||
<StatItem label="Leagues" value={team.leagues.length.toString()} color="text-green-400" />
|
||||
<StatItem label="Founded" value={new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })} color="text-gray-300" />
|
||||
<StatItem label="Leagues" value="0" color="text-green-400" /> {/* TODO: Get league count */}
|
||||
<StatItem label="Founded" value="Unknown" color="text-gray-300" /> {/* TODO: Get founded date */}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -316,7 +289,7 @@ export default function TeamDetailPage() {
|
||||
)}
|
||||
|
||||
{activeTab === 'standings' && (
|
||||
<TeamStandings teamId={teamId} leagues={team.leagues} />
|
||||
<TeamStandings teamId={teamId} leagues={[]} />
|
||||
)}
|
||||
|
||||
{activeTab === 'admin' && isAdmin && (
|
||||
|
||||
Reference in New Issue
Block a user