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

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-14 13:39:24 +01:00
parent faa4c3309e
commit 8b67295442
28 changed files with 1082 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
apps/website/app/leagues/[id]/schedule/page.tsx
View File

@@ -1,111 +1,31 @@
import { PageWrapper } from '@/components/shared/state/PageWrapper'; import { LeagueSchedulePageQuery } from '@/lib/page-queries/page-queries/LeagueSchedulePageQuery';
import { LeagueScheduleTemplate } from '@/templates/LeagueScheduleTemplate'; import { LeagueScheduleTemplate } from '@/templates/LeagueScheduleTemplate';
import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
import { LeagueService } from '@/lib/services/leagues/LeagueService';
import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient';
import { DriversApiClient } from '@/lib/api/drivers/DriversApiClient';
import { SponsorsApiClient } from '@/lib/api/sponsors/SponsorsApiClient';
import { RacesApiClient } from '@/lib/api/races/RacesApiClient';
import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { LeagueScheduleViewModel, LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
import type { LeagueScheduleDTO } from '@/lib/types/generated/LeagueScheduleDTO';
import type { RaceDTO } from '@/lib/types/generated/RaceDTO';
interface Props { interface Props {
params: { id: string }; params: { id: string };
} }
function mapRaceDtoToViewModel(race: RaceDTO): LeagueScheduleRaceViewModel { export default async function LeagueSchedulePage({ params }: Props) {
const scheduledAt = race.date ? new Date(race.date) : new Date(0); const leagueId = params.id;
const now = new Date();
const isPast = scheduledAt.getTime() < now.getTime();
const isUpcoming = !isPast;
return { if (!leagueId) {
id: race.id,
name: race.name,
scheduledAt,
isPast,
isUpcoming,
status: isPast ? 'completed' : 'scheduled',
track: undefined,
car: undefined,
sessionType: undefined,
isRegistered: undefined,
};
}
function mapScheduleDtoToViewModel(dto: LeagueScheduleDTO): LeagueScheduleViewModel {
const races = dto.races.map(mapRaceDtoToViewModel);
return new LeagueScheduleViewModel(races);
}
export default async function Page({ params }: Props) {
// Validate params
if (!params.id) {
notFound(); notFound();
} }
// Fetch data using PageDataFetcher.fetchManual for multiple dependencies const result = await LeagueSchedulePageQuery.execute(leagueId);
const data = await PageDataFetcher.fetchManual(async () => {
// Create dependencies
const baseUrl = getWebsiteApiBaseUrl();
const logger = new ConsoleLogger();
const errorReporter = new EnhancedErrorReporter(logger, {
showUserNotifications: true,
logToConsole: true,
reportToExternal: process.env.NODE_ENV === 'production',
});
// Create API clients if (result.isErr()) {
const leaguesApiClient = new LeaguesApiClient(baseUrl, errorReporter, logger); const error = result.getError();
const driversApiClient = new DriversApiClient(baseUrl, errorReporter, logger); if (error.type === 'notFound') {
const sponsorsApiClient = new SponsorsApiClient(baseUrl, errorReporter, logger); notFound();
const racesApiClient = new RacesApiClient(baseUrl, errorReporter, logger);
// Create service
const service = new LeagueService(
leaguesApiClient,
driversApiClient,
sponsorsApiClient,
racesApiClient
);
// Fetch data
const result = await service.getLeagueSchedule(params.id);
if (!result) {
throw new Error('League schedule not found');
} }
return mapScheduleDtoToViewModel(result); // For serverError, show the template with empty data
}); return <LeagueScheduleTemplate viewData={{
leagueId,
if (!data) { races: [],
notFound(); }} />;
} }
// Create a wrapper component that passes data to the template return <LeagueScheduleTemplate viewData={result.unwrap()} />;
const TemplateWrapper = ({ data }: { data: LeagueScheduleViewModel }) => {
return (
<LeagueScheduleTemplate
data={data}
leagueId={params.id}
/>
);
};
return (
<PageWrapper
data={data}
Template={TemplateWrapper}
loading={{ variant: 'skeleton', message: 'Loading schedule...' }}
errorConfig={{ variant: 'full-screen' }}
empty={{
title: 'Schedule not found',
description: 'The schedule for this league is not available.',
}}
/>
);
} }

146
apps/website/app/leagues/[id]/settings/page.tsx
View File

@@ -1,105 +1,45 @@
'use client'; import { LeagueSettingsPageQuery } from '@/lib/page-queries/page-queries/LeagueSettingsPageQuery';
import { LeagueSettingsTemplate } from '@/templates/LeagueSettingsTemplate';
import { notFound } from 'next/navigation';
import { ReadonlyLeagueInfo } from '@/components/leagues/ReadonlyLeagueInfo'; interface Props {
import LeagueOwnershipTransfer from '@/components/leagues/LeagueOwnershipTransfer'; params: { id: string };
import Card from '@/components/ui/Card'; }
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
import { useParams, useRouter } from 'next/navigation'; export default async function LeagueSettingsPage({ params }: Props) {
const leagueId = params.id;
// Shared state components
import { StateContainer } from '@/components/shared/state/StateContainer'; if (!leagueId) {
import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper'; notFound();
import { useLeagueAdminStatus } from "@/lib/hooks/league/useLeagueAdminStatus"; }
import { useLeagueSettings } from "@/lib/hooks/league/useLeagueSettings";
import { useInject } from '@/lib/di/hooks/useInject'; const result = await LeagueSettingsPageQuery.execute(leagueId);
import { LEAGUE_SETTINGS_SERVICE_TOKEN } from '@/lib/di/tokens';
import { AlertTriangle, Settings } from 'lucide-react'; if (result.isErr()) {
const error = result.getError();
export default function LeagueSettingsPage() { if (error.type === 'notFound') {
const params = useParams(); notFound();
const leagueId = params.id as string; }
const currentDriverId = useEffectiveDriverId(); // For serverError, show the template with empty data
const leagueSettingsService = useInject(LEAGUE_SETTINGS_SERVICE_TOKEN); return <LeagueSettingsTemplate viewData={{
const router = useRouter(); leagueId,
league: {
// Check admin status using DI + React-Query id: leagueId,
const { data: isAdmin, isLoading: adminLoading } = useLeagueAdminStatus(leagueId, currentDriverId ?? ''); name: 'Unknown League',
description: 'League information unavailable',
// Load settings (only if admin) using DI + React-Query visibility: 'private',
const { data: settings, isLoading: settingsLoading, error, retry } = useLeagueSettings(leagueId, { enabled: !!isAdmin }); ownerId: 'unknown',
createdAt: new Date().toISOString(),
const handleTransferOwnership = async (newOwnerId: string) => { updatedAt: new Date().toISOString(),
try { },
await leagueSettingsService.transferOwnership(leagueId, currentDriverId ?? '', newOwnerId); config: {
router.refresh(); maxDrivers: 0,
} catch (err) { scoringPresetId: 'unknown',
throw err; // Let the component handle the error allowLateJoin: false,
} requireApproval: false,
}; },
}} />;
// Show loading for admin check }
if (adminLoading) {
return <LoadingWrapper variant="full-screen" message="Checking permissions..." />; return <LeagueSettingsTemplate viewData={result.unwrap()} />;
}
// Show access denied if not admin
if (!isAdmin) {
return (
<Card>
<div className="text-center py-12">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
<AlertTriangle className="w-8 h-8 text-warning-amber" />
</div>
<h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
<p className="text-sm text-gray-400">
Only league admins can access settings.
</p>
</div>
</Card>
);
}
return (
<StateContainer
data={settings}
isLoading={settingsLoading}
error={error}
retry={retry}
config={{
loading: { variant: 'spinner', message: 'Loading settings...' },
error: { variant: 'full-screen' },
empty: {
icon: Settings,
title: 'No settings available',
description: 'Unable to load league configuration.',
}
}}
>
{(settingsData) => (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
<Settings className="w-6 h-6 text-primary-blue" />
</div>
<div>
<h1 className="text-2xl font-bold text-white">League Settings</h1>
<p className="text-sm text-gray-400">Manage your league configuration</p>
</div>
</div>
{/* READONLY INFORMATION SECTION - Compact */}
<div className="space-y-4">
<ReadonlyLeagueInfo league={settingsData!.league} configForm={settingsData!.config} />
<LeagueOwnershipTransfer
settings={settingsData!}
currentDriverId={currentDriverId ?? ''}
onTransferOwnership={handleTransferOwnership}
/>
</div>
</div>
)}
</StateContainer>
);
} }

100
apps/website/app/leagues/[id]/sponsorships/page.tsx
View File

@@ -1,79 +1,37 @@
'use client'; import { LeagueSponsorshipsPageQuery } from '@/lib/page-queries/page-queries/LeagueSponsorshipsPageQuery';
import { LeagueSponsorshipsTemplate } from '@/templates/LeagueSponsorshipsTemplate';
import { notFound } from 'next/navigation';
import { LeagueSponsorshipsSection } from '@/components/leagues/LeagueSponsorshipsSection'; interface Props {
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper'; params: { id: string };
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import { useLeagueSponsorshipsPageData } from "@/lib/hooks/league/useLeagueSponsorshipsPageData";
import { ApiError } from '@/lib/api/base/ApiError';
import { Building } from 'lucide-react';
import { useParams } from 'next/navigation';
interface SponsorshipsData {
league: any;
isAdmin: boolean;
} }
function SponsorshipsTemplate({ data }: { data: SponsorshipsData }) { export default async function LeagueSponsorshipsPage({ params }: Props) {
return ( const leagueId = params.id;
<div className="space-y-6">
{/* Header */}
<div className="flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
<Building className="w-6 h-6 text-primary-blue" />
</div>
<div>
<h1 className="text-2xl font-bold text-white">Sponsorships</h1>
<p className="text-sm text-gray-400">Manage sponsorship slots and review requests</p>
</div>
</div>
{/* Sponsorships Section */} if (!leagueId) {
<LeagueSponsorshipsSection notFound();
leagueId={data.league.id} }
readOnly={false}
/>
</div>
);
}
export default function LeagueSponsorshipsPage() { const result = await LeagueSponsorshipsPageQuery.execute(leagueId);
const params = useParams();
const leagueId = params.id as string;
const currentDriverId = useEffectiveDriverId() || '';
// Fetch data using domain hook if (result.isErr()) {
const { data, isLoading, error, refetch } = useLeagueSponsorshipsPageData(leagueId, currentDriverId); const error = result.getError();
if (error.type === 'notFound') {
notFound();
}
// For serverError, show the template with empty data
return <LeagueSponsorshipsTemplate viewData={{
leagueId,
league: {
id: leagueId,
name: 'Unknown League',
description: 'League information unavailable',
},
sponsorshipSlots: [],
sponsorshipRequests: [],
}} />;
}
// Transform data for the template return <LeagueSponsorshipsTemplate viewData={result.unwrap()} />;
const transformedData: SponsorshipsData | undefined = data?.league && data.membership !== null
? {
league: data.league,
isAdmin: LeagueRoleUtility.isLeagueAdminOrHigherRole(data.membership?.role || 'member'),
}
: undefined;
// Check if user is not admin to show appropriate state
const isNotAdmin = transformedData && !transformedData.isAdmin;
return (
<StatefulPageWrapper
data={transformedData}
isLoading={isLoading}
error={error as ApiError | null}
retry={refetch}
Template={SponsorshipsTemplate}
loading={{ variant: 'skeleton', message: 'Loading sponsorships...' }}
errorConfig={{ variant: 'full-screen' }}
empty={isNotAdmin ? {
icon: Building,
title: 'Admin Access Required',
description: 'Only league admins can manage sponsorships.',
} : {
icon: Building,
title: 'League not found',
description: 'The league may have been deleted or is no longer accessible.',
}}
/>
);
} }

71
apps/website/app/leagues/[id]/wallet/page.tsx
View File

@@ -1,52 +1,33 @@
'use client'; import { LeagueWalletPageQuery } from '@/lib/page-queries/page-queries/LeagueWalletPageQuery';
import { LeagueWalletTemplate } from '@/templates/LeagueWalletTemplate';
import { notFound } from 'next/navigation';
import { useParams } from 'next/navigation'; interface Props {
import { useLeagueWalletPageData, useLeagueWalletWithdrawal } from "@/lib/hooks/league/useLeagueWalletPageData"; params: { id: string };
import { PageWrapper } from '@/components/shared/state/PageWrapper'; }
import { WalletTemplate } from './WalletTemplate';
import { Wallet } from 'lucide-react';
export default function LeagueWalletPage() { export default async function LeagueWalletPage({ params }: Props) {
const params = useParams(); const leagueId = params.id;
const leagueId = params.id as string;
// Query for wallet data using domain hook if (!leagueId) {
const { data, isLoading, error, refetch } = useLeagueWalletPageData(leagueId); notFound();
}
// Mutation for withdrawal using domain hook const result = await LeagueWalletPageQuery.execute(leagueId);
const withdrawMutation = useLeagueWalletWithdrawal(leagueId, data, refetch);
// Export handler (placeholder) if (result.isErr()) {
const handleExport = () => { const error = result.getError();
alert('Export functionality coming soon!'); if (error.type === 'notFound') {
}; notFound();
}
// For serverError, show the template with empty data
return <LeagueWalletTemplate viewData={{
leagueId,
balance: 0,
currency: 'USD',
transactions: [],
}} />;
}
// Render function for the template return <LeagueWalletTemplate viewData={result.unwrap()} />;
const renderTemplate = (walletData: any) => {
return (
<WalletTemplate
data={walletData}
onWithdraw={(amount) => withdrawMutation.mutate({ amount })}
onExport={handleExport}
mutationLoading={withdrawMutation.isPending}
/>
);
};
return (
<PageWrapper
data={data}
isLoading={isLoading}
error={error}
retry={refetch}
Template={({ data }) => renderTemplate(data)}
loading={{ variant: 'skeleton', message: 'Loading wallet...' }}
errorConfig={{ variant: 'full-screen' }}
empty={{
icon: Wallet,
title: 'No wallet data available',
description: 'Wallet data will appear here once loaded',
}}
/>
);
} }

56
apps/website/lib/builders/view-data/LeagueScheduleViewDataBuilder.ts
View File

@@ -1,39 +1,29 @@
import type { LeagueScheduleDTO } from '@/lib/types/generated/LeagueScheduleDTO'; import { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
import type { LeagueSeasonSummaryDTO } from '@/lib/types/generated/LeagueSeasonSummaryDTO'; import { LeagueScheduleApiDto } from '@/lib/types/tbd/LeagueScheduleApiDto';
import type { LeagueScheduleViewData, ScheduleRaceData } from '@/lib/view-data/LeagueScheduleViewData';
/**
* LeagueScheduleViewDataBuilder
*
* Transforms API DTOs into LeagueScheduleViewData for server-side rendering.
* Deterministic; side-effect free; no HTTP calls.
*/
export class LeagueScheduleViewDataBuilder { export class LeagueScheduleViewDataBuilder {
static build(input: { static build(apiDto: LeagueScheduleApiDto): LeagueScheduleViewData {
schedule: LeagueScheduleDTO; const now = new Date();
seasons: LeagueSeasonSummaryDTO[];
leagueId: string;
}): LeagueScheduleViewData {
const { schedule, seasons, leagueId } = input;
// Transform races - using available fields from RaceDTO
const races: ScheduleRaceData[] = (schedule.races || []).map(race => ({
id: race.id,
name: race.name,
track: race.leagueName || 'Unknown Track',
car: 'Unknown Car',
scheduledAt: race.date,
status: 'scheduled',
}));
return { return {
leagueId, leagueId: apiDto.leagueId,
races, races: apiDto.races.map((race) => {
seasons: seasons.map(s => ({ const scheduledAt = new Date(race.date);
seasonId: s.seasonId, const isPast = scheduledAt.getTime() < now.getTime();
name: s.name, const isUpcoming = !isPast;
status: s.status,
})), return {
id: race.id,
name: race.name,
scheduledAt: race.date,
track: race.track,
car: race.car,
sessionType: race.sessionType,
isPast,
isUpcoming,
status: isPast ? 'completed' : 'scheduled',
};
}),
}; };
} }
} }

12
apps/website/lib/builders/view-data/LeagueSettingsViewDataBuilder.ts Normal file
View File

@@ -0,0 +1,12 @@
import { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
import { LeagueSettingsApiDto } from '@/lib/types/tbd/LeagueSettingsApiDto';
export class LeagueSettingsViewDataBuilder {
static build(apiDto: LeagueSettingsApiDto): LeagueSettingsViewData {
return {
leagueId: apiDto.leagueId,
league: apiDto.league,
config: apiDto.config,
};
}
}

13
apps/website/lib/builders/view-data/LeagueSponsorshipsViewDataBuilder.ts Normal file
View File

@@ -0,0 +1,13 @@
import { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { LeagueSponsorshipsApiDto } from '@/lib/types/tbd/LeagueSponsorshipsApiDto';
export class LeagueSponsorshipsViewDataBuilder {
static build(apiDto: LeagueSponsorshipsApiDto): LeagueSponsorshipsViewData {
return {
leagueId: apiDto.leagueId,
league: apiDto.league,
sponsorshipSlots: apiDto.sponsorshipSlots,
sponsorshipRequests: apiDto.sponsorshipRequests,
};
}
}

13
apps/website/lib/builders/view-data/LeagueWalletViewDataBuilder.ts Normal file
View File

@@ -0,0 +1,13 @@
import { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { LeagueWalletApiDto } from '@/lib/types/tbd/LeagueWalletApiDto';
export class LeagueWalletViewDataBuilder {
static build(apiDto: LeagueWalletApiDto): LeagueWalletViewData {
return {
leagueId: apiDto.leagueId,
balance: apiDto.balance,
currency: apiDto.currency,
transactions: apiDto.transactions,
};
}
}

61
apps/website/lib/page-queries/page-queries/LeagueSchedulePageQuery.ts
View File

@@ -1,51 +1,28 @@
import { PageQuery } from '@/lib/contracts/page-queries/PageQuery'; import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
import { Result } from '@/lib/contracts/Result'; import { Result } from '@/lib/contracts/Result';
import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient'; import { LeagueScheduleService } from '@/lib/services/leagues/LeagueScheduleService';
import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter'; import { LeagueScheduleViewDataBuilder } from '@/lib/builders/view-data/LeagueScheduleViewDataBuilder';
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger'; import { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
/** interface PresentationError {
* LeagueSchedulePageQuery type: 'notFound' | 'forbidden' | 'serverError';
* message: string;
* Fetches league schedule data for the schedule page. }
* Returns raw API DTO for now - would need ViewDataBuilder for proper transformation.
*/ export class LeagueSchedulePageQuery implements PageQuery<LeagueScheduleViewData, string, PresentationError> {
export class LeagueSchedulePageQuery implements PageQuery<any, string> { async execute(leagueId: string): Promise<Result<LeagueScheduleViewData, PresentationError>> {
async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'SCHEDULE_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { const service = new LeagueScheduleService();
// Manual wiring: create API client const result = await service.getScheduleData(leagueId);
const baseUrl = process.env.NEXT_PUBLIC_API_URL || '';
const errorReporter = new ConsoleErrorReporter(); if (result.isErr()) {
const logger = new ConsoleLogger(); return Result.err({ type: 'serverError', message: 'Failed to load schedule data' });
const apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
try {
const scheduleDto = await apiClient.getSchedule(leagueId);
if (!scheduleDto) {
return Result.err('notFound');
}
return Result.ok(scheduleDto);
} catch (error) {
console.error('LeagueSchedulePageQuery failed:', error);
if (error instanceof Error) {
if (error.message.includes('403') || error.message.includes('401')) {
return Result.err('redirect');
}
if (error.message.includes('404')) {
return Result.err('notFound');
}
if (error.message.includes('5') || error.message.includes('server')) {
return Result.err('SCHEDULE_FETCH_FAILED');
}
}
return Result.err('UNKNOWN_ERROR');
} }
const viewData = LeagueScheduleViewDataBuilder.build(result.unwrap());
return Result.ok(viewData);
} }
static async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'SCHEDULE_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { static async execute(leagueId: string): Promise<Result<LeagueScheduleViewData, PresentationError>> {
const query = new LeagueSchedulePageQuery(); const query = new LeagueSchedulePageQuery();
return query.execute(leagueId); return query.execute(leagueId);
} }

64
apps/website/lib/page-queries/page-queries/LeagueSettingsPageQuery.ts
View File

@@ -1,54 +1,28 @@
import { PageQuery } from '@/lib/contracts/page-queries/PageQuery'; import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
import { Result } from '@/lib/contracts/Result'; import { Result } from '@/lib/contracts/Result';
import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient'; import { LeagueSettingsService } from '@/lib/services/leagues/LeagueSettingsService';
import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter'; import { LeagueSettingsViewDataBuilder } from '@/lib/builders/view-data/LeagueSettingsViewDataBuilder';
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger'; import { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
/** interface PresentationError {
* LeagueSettingsPageQuery type: 'notFound' | 'forbidden' | 'serverError';
* message: string;
* Fetches league settings data. }
*/
export class LeagueSettingsPageQuery implements PageQuery<any, string> { export class LeagueSettingsPageQuery implements PageQuery<LeagueSettingsViewData, string, PresentationError> {
async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'SETTINGS_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { async execute(leagueId: string): Promise<Result<LeagueSettingsViewData, PresentationError>> {
// Manual wiring: create API client const service = new LeagueSettingsService();
const baseUrl = process.env.NEXT_PUBLIC_API_URL || ''; const result = await service.getSettingsData(leagueId);
const errorReporter = new ConsoleErrorReporter();
const logger = new ConsoleLogger(); if (result.isErr()) {
const apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger); return Result.err({ type: 'serverError', message: 'Failed to load settings data' });
try {
// Get league config
const config = await apiClient.getLeagueConfig(leagueId);
if (!config) {
return Result.err('notFound');
}
return Result.ok({
leagueId,
config,
});
} catch (error) {
console.error('LeagueSettingsPageQuery failed:', error);
if (error instanceof Error) {
if (error.message.includes('403') || error.message.includes('401')) {
return Result.err('redirect');
}
if (error.message.includes('404')) {
return Result.err('notFound');
}
if (error.message.includes('5') || error.message.includes('server')) {
return Result.err('SETTINGS_FETCH_FAILED');
}
}
return Result.err('UNKNOWN_ERROR');
} }
const viewData = LeagueSettingsViewDataBuilder.build(result.unwrap());
return Result.ok(viewData);
} }
static async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'SETTINGS_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { static async execute(leagueId: string): Promise<Result<LeagueSettingsViewData, PresentationError>> {
const query = new LeagueSettingsPageQuery(); const query = new LeagueSettingsPageQuery();
return query.execute(leagueId); return query.execute(leagueId);
} }

70
apps/website/lib/page-queries/page-queries/LeagueSponsorshipsPageQuery.ts
View File

@@ -1,60 +1,28 @@
import { PageQuery } from '@/lib/contracts/page-queries/PageQuery'; import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
import { Result } from '@/lib/contracts/Result'; import { Result } from '@/lib/contracts/Result';
import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient'; import { LeagueSponsorshipsService } from '@/lib/services/leagues/LeagueSponsorshipsService';
import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter'; import { LeagueSponsorshipsViewDataBuilder } from '@/lib/builders/view-data/LeagueSponsorshipsViewDataBuilder';
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger'; import { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
/** interface PresentationError {
* LeagueSponsorshipsPageQuery type: 'notFound' | 'forbidden' | 'serverError';
* message: string;
* Fetches league sponsorships data. }
*/
export class LeagueSponsorshipsPageQuery implements PageQuery<any, string> { export class LeagueSponsorshipsPageQuery implements PageQuery<LeagueSponsorshipsViewData, string, PresentationError> {
async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'SPONSORSHIPS_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { async execute(leagueId: string): Promise<Result<LeagueSponsorshipsViewData, PresentationError>> {
// Manual wiring: create API client const service = new LeagueSponsorshipsService();
const baseUrl = process.env.NEXT_PUBLIC_API_URL || ''; const result = await service.getSponsorshipsData(leagueId);
const errorReporter = new ConsoleErrorReporter();
const logger = new ConsoleLogger(); if (result.isErr()) {
const apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger); return Result.err({ type: 'serverError', message: 'Failed to load sponsorships data' });
try {
// Get seasons first to find active season
const seasons = await apiClient.getSeasons(leagueId);
if (!seasons || seasons.length === 0) {
return Result.err('notFound');
}
// Get sponsorships for the first season (or active season)
const activeSeason = seasons.find(s => s.status === 'active') || seasons[0];
const sponsorshipsData = await apiClient.getSeasonSponsorships(activeSeason.seasonId);
return Result.ok({
leagueId,
seasonId: activeSeason.seasonId,
sponsorships: sponsorshipsData.sponsorships || [],
seasons,
});
} catch (error) {
console.error('LeagueSponsorshipsPageQuery failed:', error);
if (error instanceof Error) {
if (error.message.includes('403') || error.message.includes('401')) {
return Result.err('redirect');
}
if (error.message.includes('404')) {
return Result.err('notFound');
}
if (error.message.includes('5') || error.message.includes('server')) {
return Result.err('SPONSORSHIPS_FETCH_FAILED');
}
}
return Result.err('UNKNOWN_ERROR');
} }
const viewData = LeagueSponsorshipsViewDataBuilder.build(result.unwrap());
return Result.ok(viewData);
} }
static async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'SPONSORSHIPS_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { static async execute(leagueId: string): Promise<Result<LeagueSponsorshipsViewData, PresentationError>> {
const query = new LeagueSponsorshipsPageQuery(); const query = new LeagueSponsorshipsPageQuery();
return query.execute(leagueId); return query.execute(leagueId);
} }

72
apps/website/lib/page-queries/page-queries/LeagueWalletPageQuery.ts
View File

@@ -1,62 +1,28 @@
import { PageQuery } from '@/lib/contracts/page-queries/PageQuery'; import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
import { Result } from '@/lib/contracts/Result'; import { Result } from '@/lib/contracts/Result';
import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient'; import { LeagueWalletService } from '@/lib/services/leagues/LeagueWalletService';
import { ConsoleErrorReporter } from '@/lib/infrastructure/logging/ConsoleErrorReporter'; import { LeagueWalletViewDataBuilder } from '@/lib/builders/view-data/LeagueWalletViewDataBuilder';
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger'; import { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
/** interface PresentationError {
* LeagueWalletPageQuery type: 'notFound' | 'forbidden' | 'serverError';
* message: string;
* Fetches league wallet data. }
*/
export class LeagueWalletPageQuery implements PageQuery<any, string> { export class LeagueWalletPageQuery implements PageQuery<LeagueWalletViewData, string, PresentationError> {
async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'WALLET_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { async execute(leagueId: string): Promise<Result<LeagueWalletViewData, PresentationError>> {
// Manual wiring: create API client const service = new LeagueWalletService();
const baseUrl = process.env.NEXT_PUBLIC_API_URL || ''; const result = await service.getWalletData(leagueId);
const errorReporter = new ConsoleErrorReporter();
const logger = new ConsoleLogger(); if (result.isErr()) {
const apiClient = new LeaguesApiClient(baseUrl, errorReporter, logger); return Result.err({ type: 'serverError', message: 'Failed to load wallet data' });
try {
// Get league memberships to verify access
const memberships = await apiClient.getMemberships(leagueId);
if (!memberships) {
return Result.err('notFound');
}
// Return wallet data structure
// In real implementation, would need wallet API endpoints
return Result.ok({
leagueId,
balance: 0,
totalRevenue: 0,
totalFees: 0,
pendingPayouts: 0,
transactions: [],
canWithdraw: false,
withdrawalBlockReason: 'Wallet system not yet implemented',
});
} catch (error) {
console.error('LeagueWalletPageQuery failed:', error);
if (error instanceof Error) {
if (error.message.includes('403') || error.message.includes('401')) {
return Result.err('redirect');
}
if (error.message.includes('404')) {
return Result.err('notFound');
}
if (error.message.includes('5') || error.message.includes('server')) {
return Result.err('WALLET_FETCH_FAILED');
}
}
return Result.err('UNKNOWN_ERROR');
} }
const viewData = LeagueWalletViewDataBuilder.build(result.unwrap());
return Result.ok(viewData);
} }
static async execute(leagueId: string): Promise<Result<any, 'notFound' | 'redirect' | 'WALLET_FETCH_FAILED' | 'UNKNOWN_ERROR'>> { static async execute(leagueId: string): Promise<Result<LeagueWalletViewData, PresentationError>> {
const query = new LeagueWalletPageQuery(); const query = new LeagueWalletPageQuery();
return query.execute(leagueId); return query.execute(leagueId);
} }

39
apps/website/lib/services/leagues/LeagueScheduleService.ts Normal file
View File

@@ -0,0 +1,39 @@
import { Result } from '@/lib/contracts/Result';
import { Service } from '@/lib/contracts/services/Service';
import { LeagueScheduleApiDto } from '@/lib/types/tbd/LeagueScheduleApiDto';
export class LeagueScheduleService implements Service {
async getScheduleData(leagueId: string): Promise<Result<LeagueScheduleApiDto, never>> {
// Mock data since backend not implemented
const mockData: LeagueScheduleApiDto = {
leagueId,
races: [
{
id: 'race-1',
name: 'Round 1 - Monza',
date: '2024-10-15T14:00:00Z',
track: 'Monza Circuit',
car: 'Ferrari SF90',
sessionType: 'Race',
},
{
id: 'race-2',
name: 'Round 2 - Silverstone',
date: '2024-10-22T13:00:00Z',
track: 'Silverstone Circuit',
car: 'Mercedes W10',
sessionType: 'Race',
},
{
id: 'race-3',
name: 'Round 3 - Spa-Francorchamps',
date: '2024-10-29T12:00:00Z',
track: 'Circuit de Spa-Francorchamps',
car: 'Red Bull RB15',
sessionType: 'Race',
},
],
};
return Result.ok(mockData);
}
}

64
apps/website/lib/services/leagues/LeagueSettingsService.ts
View File

@@ -1,46 +1,28 @@
import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient';
import { DriversApiClient } from '@/lib/api/drivers/DriversApiClient';
import { Result } from '@/lib/contracts/Result'; import { Result } from '@/lib/contracts/Result';
import { DomainError } from '@/lib/contracts/services/Service'; import { Service } from '@/lib/contracts/services/Service';
import { LeagueSettingsApiDto } from '@/lib/types/tbd/LeagueSettingsApiDto';
/** export class LeagueSettingsService implements Service {
* League Settings Service - DTO Only async getSettingsData(leagueId: string): Promise<Result<LeagueSettingsApiDto, never>> {
* // Mock data since backend not implemented
* Returns raw API DTOs. No ViewModels or UX logic. const mockData: LeagueSettingsApiDto = {
* All client-side presentation logic must be handled by hooks/components. leagueId,
*/ league: {
export class LeagueSettingsService { id: leagueId,
constructor( name: 'Mock League',
private readonly leagueApiClient: LeaguesApiClient, description: 'A mock league for demonstration',
private readonly driverApiClient: DriversApiClient visibility: 'public',
) {} ownerId: 'owner-123',
createdAt: '2024-01-01T00:00:00Z',
async getLeagueSettings(leagueId: string): Promise<any> { updatedAt: '2024-01-01T00:00:00Z',
// This would typically call multiple endpoints to gather all settings data },
// For now, return a basic structure config: {
return { maxDrivers: 20,
league: await this.leagueApiClient.getAllWithCapacityAndScoring(), scoringPresetId: 'preset-1',
config: { /* config data */ } allowLateJoin: true,
requireApproval: false,
},
}; };
} return Result.ok(mockData);
async transferOwnership(leagueId: string, currentOwnerId: string, newOwnerId: string): Promise<{ success: boolean }> {
return this.leagueApiClient.transferOwnership(leagueId, currentOwnerId, newOwnerId);
}
async selectScoringPreset(leagueId: string, preset: string): Promise<Result<void, DomainError>> {
return Result.err({ type: 'notImplemented', message: 'selectScoringPreset' });
}
async toggleCustomScoring(leagueId: string, enabled: boolean): Promise<Result<void, DomainError>> {
return Result.err({ type: 'notImplemented', message: 'toggleCustomScoring' });
}
getPresetEmoji(preset: string): string {
return '🏆';
}
getPresetDescription(preset: string): string {
return `Scoring preset: ${preset}`;
} }
} }

59
apps/website/lib/services/leagues/LeagueSponsorshipsService.ts Normal file
View File

@@ -0,0 +1,59 @@
import { Result } from '@/lib/contracts/Result';
import { Service } from '@/lib/contracts/services/Service';
import { LeagueSponsorshipsApiDto } from '@/lib/types/tbd/LeagueSponsorshipsApiDto';
export class LeagueSponsorshipsService implements Service {
async getSponsorshipsData(leagueId: string): Promise<Result<LeagueSponsorshipsApiDto, never>> {
// Mock data since backend not implemented
const mockData: LeagueSponsorshipsApiDto = {
leagueId,
league: {
id: leagueId,
name: 'Mock League',
description: 'A league with sponsorship opportunities',
},
sponsorshipSlots: [
{
id: 'slot-1',
name: 'Main Sponsor',
description: 'Primary sponsorship slot',
price: 5000,
currency: 'USD',
isAvailable: false,
sponsoredBy: {
id: 'sponsor-1',
name: 'Acme Racing',
logoUrl: 'https://example.com/logo.png',
},
},
{
id: 'slot-2',
name: 'Helmet Sponsor',
description: 'Helmet branding sponsorship',
price: 2000,
currency: 'USD',
isAvailable: true,
},
{
id: 'slot-3',
name: 'Car Sponsor',
description: 'Car livery sponsorship',
price: 3000,
currency: 'USD',
isAvailable: true,
},
],
sponsorshipRequests: [
{
id: 'request-1',
slotId: 'slot-2',
sponsorId: 'sponsor-2',
sponsorName: 'SpeedWorks',
requestedAt: '2024-10-01T10:00:00Z',
status: 'pending',
},
],
};
return Result.ok(mockData);
}
}

81
apps/website/lib/services/leagues/LeagueWalletService.ts
View File

@@ -1,40 +1,49 @@
import { WalletsApiClient } from '@/lib/api/wallets/WalletsApiClient'; import { Result } from '@/lib/contracts/Result';
import type { LeagueWalletDTO, WithdrawRequestDTO, WithdrawResponseDTO } from '@/lib/api/wallets/WalletsApiClient'; import { Service } from '@/lib/contracts/services/Service';
import { LeagueWalletApiDto } from '@/lib/types/tbd/LeagueWalletApiDto';
/** export class LeagueWalletService implements Service {
* LeagueWalletService - DTO Only async getWalletData(leagueId: string): Promise<Result<LeagueWalletApiDto, never>> {
* // Mock data since backend not implemented
* Returns raw API DTOs. No ViewModels or UX logic. const mockData: LeagueWalletApiDto = {
* All client-side presentation logic must be handled by hooks/components. leagueId,
*/ balance: 15750.00,
export class LeagueWalletService { currency: 'USD',
constructor( transactions: [
private readonly apiClient: WalletsApiClient {
) {} id: 'txn-1',
type: 'sponsorship',
/** amount: 5000.00,
* Get wallet for a league description: 'Main sponsorship from Acme Racing',
*/ createdAt: '2024-10-01T10:00:00Z',
async getWalletForLeague(leagueId: string): Promise<LeagueWalletDTO> { status: 'completed',
return this.apiClient.getLeagueWallet(leagueId); },
} {
id: 'txn-2',
/** type: 'prize',
* Withdraw from league wallet amount: 2500.00,
*/ description: 'Prize money from championship',
async withdraw( createdAt: '2024-09-15T14:30:00Z',
leagueId: string, status: 'completed',
amount: number, },
currency: string, {
seasonId: string, id: 'txn-3',
destinationAccount: string type: 'withdrawal',
): Promise<WithdrawResponseDTO> { amount: -1200.00,
const payload: WithdrawRequestDTO = { description: 'Equipment purchase',
amount, createdAt: '2024-09-10T09:15:00Z',
currency, status: 'completed',
seasonId, },
destinationAccount, {
id: 'txn-4',
type: 'deposit',
amount: 5000.00,
description: 'Entry fees from season registration',
createdAt: '2024-08-01T12:00:00Z',
status: 'completed',
},
],
}; };
return this.apiClient.withdrawFromLeagueWallet(leagueId, payload); return Result.ok(mockData);
} }
} }

11
apps/website/lib/types/tbd/LeagueScheduleApiDto.ts Normal file
View File

@@ -0,0 +1,11 @@
export interface LeagueScheduleApiDto {
leagueId: string;
races: Array<{
id: string;
name: string;
date: string; // ISO string
track?: string;
car?: string;
sessionType?: string;
}>;
}

18
apps/website/lib/types/tbd/LeagueSettingsApiDto.ts Normal file
View File

@@ -0,0 +1,18 @@
export interface LeagueSettingsApiDto {
leagueId: string;
league: {
id: string;
name: string;
description: string;
visibility: 'public' | 'private';
ownerId: string;
createdAt: string;
updatedAt: string;
};
config: {
maxDrivers: number;
scoringPresetId: string;
allowLateJoin: boolean;
requireApproval: boolean;
};
}

29
apps/website/lib/types/tbd/LeagueSponsorshipsApiDto.ts Normal file
View File

@@ -0,0 +1,29 @@
export interface LeagueSponsorshipsApiDto {
leagueId: string;
league: {
id: string;
name: string;
description: string;
};
sponsorshipSlots: Array<{
id: string;
name: string;
description: string;
price: number;
currency: string;
isAvailable: boolean;
sponsoredBy?: {
id: string;
name: string;
logoUrl?: string;
};
}>;
sponsorshipRequests: Array<{
id: string;
slotId: string;
sponsorId: string;
sponsorName: string;
requestedAt: string;
status: 'pending' | 'approved' | 'rejected';
}>;
}

13
apps/website/lib/types/tbd/LeagueWalletApiDto.ts Normal file
View File

@@ -0,0 +1,13 @@
export interface LeagueWalletApiDto {
leagueId: string;
balance: number;
currency: string;
transactions: Array<{
id: string;
type: 'deposit' | 'withdrawal' | 'sponsorship' | 'prize';
amount: number;
description: string;
createdAt: string;
status: 'completed' | 'pending' | 'failed';
}>;
}

14
apps/website/lib/view-data/leagues/LeagueScheduleViewData.ts Normal file
View File

@@ -0,0 +1,14 @@
export interface LeagueScheduleViewData {
leagueId: string;
races: Array<{
id: string;
name: string;
scheduledAt: string; // ISO string
track?: string;
car?: string;
sessionType?: string;
isPast: boolean;
isUpcoming: boolean;
status: 'scheduled' | 'completed';
}>;
}

18
apps/website/lib/view-data/leagues/LeagueSettingsViewData.ts Normal file
View File

@@ -0,0 +1,18 @@
export interface LeagueSettingsViewData {
leagueId: string;
league: {
id: string;
name: string;
description: string;
visibility: 'public' | 'private';
ownerId: string;
createdAt: string;
updatedAt: string;
};
config: {
maxDrivers: number;
scoringPresetId: string;
allowLateJoin: boolean;
requireApproval: boolean;
};
}

29
apps/website/lib/view-data/leagues/LeagueSponsorshipsViewData.ts Normal file
View File

@@ -0,0 +1,29 @@
export interface LeagueSponsorshipsViewData {
leagueId: string;
league: {
id: string;
name: string;
description: string;
};
sponsorshipSlots: Array<{
id: string;
name: string;
description: string;
price: number;
currency: string;
isAvailable: boolean;
sponsoredBy?: {
id: string;
name: string;
logoUrl?: string;
};
}>;
sponsorshipRequests: Array<{
id: string;
slotId: string;
sponsorId: string;
sponsorName: string;
requestedAt: string;
status: 'pending' | 'approved' | 'rejected';
}>;
}

13
apps/website/lib/view-data/leagues/LeagueWalletViewData.ts Normal file
View File

@@ -0,0 +1,13 @@
export interface LeagueWalletViewData {
leagueId: string;
balance: number;
currency: string;
transactions: Array<{
id: string;
type: 'deposit' | 'withdrawal' | 'sponsorship' | 'prize';
amount: number;
description: string;
createdAt: string;
status: 'completed' | 'pending' | 'failed';
}>;
}

313
apps/website/templates/LeagueScheduleTemplate.tsx
View File

@@ -1,249 +1,90 @@
'use client'; import { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
import { Card } from '@/ui/Card';
import { useMemo, useState } from 'react'; import { Section } from '@/ui/Section';
import { useRouter } from 'next/navigation'; import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
import type { LeagueScheduleViewModel, LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
import { StateContainer } from '@/components/shared/state/StateContainer';
import { EmptyState } from '@/components/shared/state/EmptyState';
import { Calendar } from 'lucide-react';
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
import { useRegisterForRace } from "@/lib/hooks/race/useRegisterForRace";
import { useWithdrawFromRace } from "@/lib/hooks/race/useWithdrawFromRace";
import Card from '@/components/ui/Card';
// ============================================================================
// TYPES
// ============================================================================
interface LeagueScheduleTemplateProps { interface LeagueScheduleTemplateProps {
data: LeagueScheduleViewModel; viewData: LeagueScheduleViewData;
leagueId: string;
} }
// ============================================================================ export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
// MAIN TEMPLATE COMPONENT
// ============================================================================
export function LeagueScheduleTemplate({
data,
leagueId,
}: LeagueScheduleTemplateProps) {
const router = useRouter();
const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');
const currentDriverId = useEffectiveDriverId();
const registerMutation = useRegisterForRace();
const withdrawMutation = useWithdrawFromRace();
const races = useMemo(() => {
return data?.races ?? [];
}, [data]);
const upcomingRaces = races.filter((race) => race.isUpcoming);
const pastRaces = races.filter((race) => race.isPast);
const getDisplayRaces = () => {
switch (filter) {
case 'upcoming':
return upcomingRaces;
case 'past':
return [...pastRaces].reverse();
case 'all':
return [...upcomingRaces, ...[...pastRaces].reverse()];
default:
return races;
}
};
const displayRaces = getDisplayRaces();
const handleRegister = async (race: LeagueScheduleRaceViewModel, e: React.MouseEvent) => {
e.stopPropagation();
const confirmed = window.confirm(`Register for ${race.track ?? race.name}?`);
if (!confirmed) return;
if (!currentDriverId) {
alert('You must be logged in to register for races');
return;
}
try {
await registerMutation.mutateAsync({ raceId: race.id, leagueId, driverId: currentDriverId });
} catch (err) {
alert(err instanceof Error ? err.message : 'Failed to register');
}
};
const handleWithdraw = async (race: LeagueScheduleRaceViewModel, e: React.MouseEvent) => {
e.stopPropagation();
const confirmed = window.confirm('Withdraw from this race?');
if (!confirmed) return;
if (!currentDriverId) {
alert('You must be logged in to withdraw from races');
return;
}
try {
await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
} catch (err) {
alert(err instanceof Error ? err.message : 'Failed to withdraw');
}
};
return ( return (
<div className="space-y-6"> <Section>
<Card> <div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-semibold text-white mb-4">Schedule</h2> <div>
<h2 className="text-xl font-semibold text-white">Race Schedule</h2>
{/* Filter Controls */} <p className="text-sm text-gray-400 mt-1">
<div className="mb-4 flex items-center justify-between"> Upcoming and completed races for this season
<p className="text-sm text-gray-400">
{displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
</p> </p>
<div className="flex gap-2">
<button
onClick={() => setFilter('upcoming')}
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
filter === 'upcoming'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
>
Upcoming ({upcomingRaces.length})
</button>
<button
onClick={() => setFilter('past')}
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
filter === 'past'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
>
Past ({pastRaces.length})
</button>
<button
onClick={() => setFilter('all')}
className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
filter === 'all'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
>
All ({races.length})
</button>
</div>
</div> </div>
</div>
{/* Race List */} {viewData.races.length === 0 ? (
{displayRaces.length === 0 ? ( <Card>
<div className="text-center py-8 text-gray-400"> <div className="text-center py-12">
<p className="mb-2">No {filter} races</p> <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
{filter === 'upcoming' && ( <Calendar className="w-8 h-8 text-performance-green" />
<p className="text-sm text-gray-500">Schedule your first race to get started</p> </div>
)} <p className="font-semibold text-lg text-white mb-2">No Races Scheduled</p>
<p className="text-sm text-gray-400">The race schedule will appear here once events are added.</p>
</div> </div>
) : ( </Card>
<div className="space-y-3"> ) : (
{displayRaces.map((race) => { <div className="space-y-4">
const isPast = race.isPast; {viewData.races.map((race) => (
const isUpcoming = race.isUpcoming; <Card key={race.id}>
const isRegistered = Boolean(race.isRegistered); <div className="flex items-start justify-between">
const trackLabel = race.track ?? race.name; <div className="flex-1 min-w-0">
const carLabel = race.car ?? '—'; <div className="flex items-center gap-3 mb-3">
const sessionTypeLabel = (race.sessionType ?? 'race').toLowerCase(); <div className={`w-3 h-3 rounded-full ${race.isPast ? 'bg-performance-green' : 'bg-primary-blue'}`} />
const isProcessing = <h3 className="font-semibold text-white text-lg">{race.name}</h3>
registerMutation.isPending || withdrawMutation.isPending; <span className={`px-2 py-1 text-xs font-medium rounded-full ${
race.status === 'completed'
return ( ? 'bg-performance-green/20 text-performance-green'
<div : 'bg-primary-blue/20 text-primary-blue'
key={race.id} }`}>
className={`p-4 rounded-lg border transition-all duration-200 cursor-pointer hover:scale-[1.02] ${ {race.status === 'completed' ? 'Completed' : 'Scheduled'}
isPast </span>
? 'bg-iron-gray/50 border-charcoal-outline/50 opacity-75'
: 'bg-deep-graphite border-charcoal-outline hover:border-primary-blue'
}`}
onClick={() => router.push(`/races/${race.id}`)}
>
<div className="flex items-center justify-between gap-4">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1 flex-wrap">
<h3 className="text-white font-medium">{trackLabel}</h3>
{isUpcoming && !isRegistered && (
<span className="px-2 py-0.5 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
Upcoming
</span>
)}
{isUpcoming && isRegistered && (
<span className="px-2 py-0.5 text-xs font-medium bg-green-500/10 text-green-400 rounded border border-green-500/30">
✓ Registered
</span>
)}
{isPast && (
<span className="px-2 py-0.5 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50">
Completed
</span>
)}
</div>
<p className="text-sm text-gray-400">{carLabel}</p>
<div className="flex items-center gap-3 mt-2">
<p className="text-xs text-gray-500 uppercase">{sessionTypeLabel}</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="text-right">
<p className="text-white font-medium">
{race.scheduledAt.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
})}
</p>
<p className="text-sm text-gray-400">
{race.scheduledAt.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
})}
</p>
{isPast && race.status === 'completed' && (
<p className="text-xs text-primary-blue mt-1">View Results →</p>
)}
</div>
{/* Registration Actions */}
{isUpcoming && (
<div onClick={(e) => e.stopPropagation()}>
{!isRegistered ? (
<button
onClick={(e) => handleRegister(race, e)}
disabled={isProcessing}
className="px-3 py-1.5 text-sm font-medium bg-primary-blue hover:bg-primary-blue/80 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
>
{registerMutation.isPending ? 'Registering...' : 'Register'}
</button>
) : (
<button
onClick={(e) => handleWithdraw(race, e)}
disabled={isProcessing}
className="px-3 py-1.5 text-sm font-medium bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
>
{withdrawMutation.isPending ? 'Withdrawing...' : 'Withdraw'}
</button>
)}
</div>
)}
</div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
<div className="flex items-center gap-2 text-sm text-gray-300">
<Calendar className="w-4 h-4 text-gray-400" />
<span>{new Date(race.scheduledAt).toLocaleDateString()}</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-300">
<Clock className="w-4 h-4 text-gray-400" />
<span>{new Date(race.scheduledAt).toLocaleTimeString()}</span>
</div>
{race.track && (
<div className="flex items-center gap-2 text-sm text-gray-300">
<MapPin className="w-4 h-4 text-gray-400" />
<span className="truncate">{race.track}</span>
</div>
)}
{race.car && (
<div className="flex items-center gap-2 text-sm text-gray-300">
<Car className="w-4 h-4 text-gray-400" />
<span className="truncate">{race.car}</span>
</div>
)}
</div>
{race.sessionType && (
<div className="flex items-center gap-2 text-sm text-gray-400">
<Trophy className="w-4 h-4" />
<span>{race.sessionType} Session</span>
</div>
)}
</div> </div>
); </div>
})} </Card>
</div> ))}
)} </div>
</Card> )}
</div> </Section>
); );
} }

121
apps/website/templates/LeagueSettingsTemplate.tsx Normal file
View File

@@ -0,0 +1,121 @@
import { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Settings, Users, Trophy, Shield, Clock } from 'lucide-react';
interface LeagueSettingsTemplateProps {
viewData: LeagueSettingsViewData;
}
export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps) {
return (
<Section>
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-semibold text-white">League Settings</h2>
<p className="text-sm text-gray-400 mt-1">
Manage your league configuration and preferences
</p>
</div>
</div>
<div className="space-y-6">
{/* League Information */}
<Card>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
<Settings className="w-5 h-5 text-primary-blue" />
</div>
<div>
<h3 className="text-lg font-semibold text-white">League Information</h3>
<p className="text-sm text-gray-400">Basic league details</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-400 mb-1">Name</label>
<p className="text-white">{viewData.league.name}</p>
</div>
<div>
<label className="block text-sm font-medium text-gray-400 mb-1">Visibility</label>
<p className="text-white capitalize">{viewData.league.visibility}</p>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-400 mb-1">Description</label>
<p className="text-white">{viewData.league.description}</p>
</div>
<div>
<label className="block text-sm font-medium text-gray-400 mb-1">Created</label>
<p className="text-white">{new Date(viewData.league.createdAt).toLocaleDateString()}</p>
</div>
<div>
<label className="block text-sm font-medium text-gray-400 mb-1">Owner ID</label>
<p className="text-white font-mono text-sm">{viewData.league.ownerId}</p>
</div>
</div>
</Card>
{/* Configuration */}
<Card>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
<Trophy className="w-5 h-5 text-performance-green" />
</div>
<div>
<h3 className="text-lg font-semibold text-white">Configuration</h3>
<p className="text-sm text-gray-400">League rules and limits</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center gap-3">
<Users className="w-5 h-5 text-gray-400" />
<div>
<p className="text-sm font-medium text-gray-400">Max Drivers</p>
<p className="text-white">{viewData.config.maxDrivers}</p>
</div>
</div>
<div className="flex items-center gap-3">
<Shield className="w-5 h-5 text-gray-400" />
<div>
<p className="text-sm font-medium text-gray-400">Require Approval</p>
<p className="text-white">{viewData.config.requireApproval ? 'Yes' : 'No'}</p>
</div>
</div>
<div className="flex items-center gap-3">
<Clock className="w-5 h-5 text-gray-400" />
<div>
<p className="text-sm font-medium text-gray-400">Allow Late Join</p>
<p className="text-white">{viewData.config.allowLateJoin ? 'Yes' : 'No'}</p>
</div>
</div>
<div className="flex items-center gap-3">
<Trophy className="w-5 h-5 text-gray-400" />
<div>
<p className="text-sm font-medium text-gray-400">Scoring Preset</p>
<p className="text-white font-mono text-sm">{viewData.config.scoringPresetId}</p>
</div>
</div>
</div>
</Card>
{/* Note about forms */}
<Card>
<div className="text-center py-8">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-warning-amber/10 flex items-center justify-center">
<Settings className="w-8 h-8 text-warning-amber" />
</div>
<h3 className="text-lg font-medium text-white mb-2">Settings Management</h3>
<p className="text-sm text-gray-400">
Form-based editing and ownership transfer functionality will be implemented in future updates.
</p>
</div>
</Card>
</div>
</Section>
);
}

168
apps/website/templates/LeagueSponsorshipsTemplate.tsx Normal file
View File

@@ -0,0 +1,168 @@
import { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Building, DollarSign, Clock, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
interface LeagueSponsorshipsTemplateProps {
viewData: LeagueSponsorshipsViewData;
}
export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
return (
<Section>
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-semibold text-white">Sponsorships</h2>
<p className="text-sm text-gray-400 mt-1">
Manage sponsorship slots and review requests
</p>
</div>
</div>
<div className="space-y-6">
{/* Sponsorship Slots */}
<Card>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
<Building className="w-5 h-5 text-primary-blue" />
</div>
<div>
<h3 className="text-lg font-semibold text-white">Sponsorship Slots</h3>
<p className="text-sm text-gray-400">Available sponsorship opportunities</p>
</div>
</div>
{viewData.sponsorshipSlots.length === 0 ? (
<div className="text-center py-8">
<Building className="w-12 h-12 mx-auto mb-4 text-gray-400" />
<p className="text-gray-400">No sponsorship slots available</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{viewData.sponsorshipSlots.map((slot) => (
<div
key={slot.id}
className={`rounded-lg border p-4 ${
slot.isAvailable
? 'border-performance-green bg-performance-green/5'
: 'border-charcoal-outline bg-iron-gray/30'
}`}
>
<div className="flex items-start justify-between mb-3">
<h4 className="font-semibold text-white">{slot.name}</h4>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
slot.isAvailable
? 'bg-performance-green/20 text-performance-green'
: 'bg-gray-500/20 text-gray-400'
}`}>
{slot.isAvailable ? 'Available' : 'Taken'}
</span>
</div>
<p className="text-sm text-gray-300 mb-3">{slot.description}</p>
<div className="flex items-center gap-2 mb-3">
<DollarSign className="w-4 h-4 text-gray-400" />
<span className="text-white font-semibold">
{slot.price} {slot.currency}
</span>
</div>
{!slot.isAvailable && slot.sponsoredBy && (
<div className="pt-3 border-t border-charcoal-outline">
<p className="text-xs text-gray-400 mb-1">Sponsored by</p>
<p className="text-sm font-medium text-white">{slot.sponsoredBy.name}</p>
</div>
)}
</div>
))}
</div>
)}
</Card>
{/* Sponsorship Requests */}
<Card>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10">
<Clock className="w-5 h-5 text-warning-amber" />
</div>
<div>
<h3 className="text-lg font-semibold text-white">Sponsorship Requests</h3>
<p className="text-sm text-gray-400">Pending and processed sponsorship applications</p>
</div>
</div>
{viewData.sponsorshipRequests.length === 0 ? (
<div className="text-center py-8">
<Clock className="w-12 h-12 mx-auto mb-4 text-gray-400" />
<p className="text-gray-400">No sponsorship requests</p>
</div>
) : (
<div className="space-y-3">
{viewData.sponsorshipRequests.map((request) => {
const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
const statusIcon = {
pending: <AlertCircle className="w-5 h-5 text-warning-amber" />,
approved: <CheckCircle className="w-5 h-5 text-performance-green" />,
rejected: <XCircle className="w-5 h-5 text-red-400" />,
}[request.status];
const statusColor = {
pending: 'border-warning-amber bg-warning-amber/5',
approved: 'border-performance-green bg-performance-green/5',
rejected: 'border-red-400 bg-red-400/5',
}[request.status];
return (
<div
key={request.id}
className={`rounded-lg border p-4 ${statusColor}`}
>
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2">
{statusIcon}
<span className="font-semibold text-white">{request.sponsorName}</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
request.status === 'pending'
? 'bg-warning-amber/20 text-warning-amber'
: request.status === 'approved'
? 'bg-performance-green/20 text-performance-green'
: 'bg-red-400/20 text-red-400'
}`}>
{request.status}
</span>
</div>
<div className="text-sm text-gray-300 mb-2">
Requested: {slot?.name || 'Unknown slot'}
</div>
<div className="text-xs text-gray-400">
{new Date(request.requestedAt).toLocaleDateString()}
</div>
</div>
</div>
</div>
);
})}
</div>
)}
</Card>
{/* Note about management */}
<Card>
<div className="text-center py-8">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary-blue/10 flex items-center justify-center">
<Building className="w-8 h-8 text-primary-blue" />
</div>
<h3 className="text-lg font-medium text-white mb-2">Sponsorship Management</h3>
<p className="text-sm text-gray-400">
Interactive management features for approving requests and managing slots will be implemented in future updates.
</p>
</div>
</Card>
</div>
</Section>
);
}

155
apps/website/templates/LeagueWalletTemplate.tsx Normal file
View File

@@ -0,0 +1,155 @@
import { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Wallet, TrendingUp, TrendingDown, DollarSign, Calendar, ArrowUpRight, ArrowDownRight } from 'lucide-react';
interface LeagueWalletTemplateProps {
viewData: LeagueWalletViewData;
}
export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: viewData.currency,
}).format(Math.abs(amount));
};
const getTransactionIcon = (type: string) => {
switch (type) {
case 'deposit':
return <ArrowUpRight className="w-4 h-4 text-performance-green" />;
case 'withdrawal':
return <ArrowDownRight className="w-4 h-4 text-red-400" />;
case 'sponsorship':
return <DollarSign className="w-4 h-4 text-primary-blue" />;
case 'prize':
return <TrendingUp className="w-4 h-4 text-warning-amber" />;
default:
return <DollarSign className="w-4 h-4 text-gray-400" />;
}
};
const getTransactionColor = (type: string) => {
switch (type) {
case 'deposit':
return 'text-performance-green';
case 'withdrawal':
return 'text-red-400';
case 'sponsorship':
return 'text-primary-blue';
case 'prize':
return 'text-warning-amber';
default:
return 'text-gray-400';
}
};
return (
<Section>
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-semibold text-white">League Wallet</h2>
<p className="text-sm text-gray-400 mt-1">
Financial overview and transaction history
</p>
</div>
</div>
<div className="space-y-6">
{/* Balance Card */}
<Card>
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
<Wallet className="w-6 h-6 text-primary-blue" />
</div>
<div>
<p className="text-sm text-gray-400">Current Balance</p>
<p className="text-3xl font-bold text-white">
{formatCurrency(viewData.balance)}
</p>
</div>
</div>
</Card>
{/* Transaction History */}
<Card>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
<Calendar className="w-5 h-5 text-performance-green" />
</div>
<div>
<h3 className="text-lg font-semibold text-white">Transaction History</h3>
<p className="text-sm text-gray-400">Recent financial activity</p>
</div>
</div>
{viewData.transactions.length === 0 ? (
<div className="text-center py-8">
<Wallet className="w-12 h-12 mx-auto mb-4 text-gray-400" />
<p className="text-gray-400">No transactions yet</p>
</div>
) : (
<div className="space-y-3">
{viewData.transactions.map((transaction) => (
<div
key={transaction.id}
className="flex items-center justify-between p-4 rounded-lg border border-charcoal-outline bg-iron-gray/30"
>
<div className="flex items-center gap-3">
<div className="flex-shrink-0">
{getTransactionIcon(transaction.type)}
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-white truncate">
{transaction.description}
</p>
<div className="flex items-center gap-2 text-xs text-gray-400">
<span>{new Date(transaction.createdAt).toLocaleDateString()}</span>
<span>•</span>
<span className={`capitalize ${getTransactionColor(transaction.type)}`}>
{transaction.type}
</span>
<span>•</span>
<span className={`capitalize ${
transaction.status === 'completed'
? 'text-performance-green'
: transaction.status === 'pending'
? 'text-warning-amber'
: 'text-red-400'
}`}>
{transaction.status}
</span>
</div>
</div>
</div>
<div className="text-right">
<p className={`text-lg font-semibold ${
transaction.amount >= 0 ? 'text-performance-green' : 'text-red-400'
}`}>
{transaction.amount >= 0 ? '+' : '-'}{formatCurrency(transaction.amount)}
</p>
</div>
</div>
))}
</div>
)}
</Card>
{/* Note about features */}
<Card>
<div className="text-center py-8">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary-blue/10 flex items-center justify-center">
<Wallet className="w-8 h-8 text-primary-blue" />
</div>
<h3 className="text-lg font-medium text-white mb-2">Wallet Management</h3>
<p className="text-sm text-gray-400">
Interactive withdrawal and export features will be implemented in future updates.
</p>
</div>
</Card>
</div>
</Section>
);
}