- {displayRaces.map((race) => {
- const isPast = race.isPast;
- const isUpcoming = race.isUpcoming;
- const isRegistered = Boolean(race.isRegistered);
- const trackLabel = race.track ?? race.name;
- const carLabel = race.car ?? '—';
- const sessionTypeLabel = (race.sessionType ?? 'race').toLowerCase();
- const isProcessing =
- registerMutation.isPending || withdrawMutation.isPending;
-
- return (
-
router.push(`/races/${race.id}`)}
- >
-
-
-
-
{trackLabel}
- {isUpcoming && !isRegistered && (
-
- Upcoming
-
- )}
- {isUpcoming && isRegistered && (
-
- ✓ Registered
-
- )}
- {isPast && (
-
- Completed
-
- )}
-
-
{carLabel}
-
-
-
-
-
-
- {race.scheduledAt.toLocaleDateString('en-US', {
- month: 'short',
- day: 'numeric',
- year: 'numeric',
- })}
-
-
- {race.scheduledAt.toLocaleTimeString([], {
- hour: '2-digit',
- minute: '2-digit',
- })}
-
- {isPast && race.status === 'completed' && (
-
View Results →
- )}
-
-
- {/* Registration Actions */}
- {isUpcoming && (
-
e.stopPropagation()}>
- {!isRegistered ? (
-
- ) : (
-
- )}
-
- )}
-
+
+ ) : (
+
+ {viewData.races.map((race) => (
+
+
+
+
+
+
{race.name}
+
+ {race.status === 'completed' ? 'Completed' : 'Scheduled'}
+
+
+
+
+
+ {new Date(race.scheduledAt).toLocaleDateString()}
+
+
+
+
+ {new Date(race.scheduledAt).toLocaleTimeString()}
+
+
+ {race.track && (
+
+
+ {race.track}
+
+ )}
+
+ {race.car && (
+
+
+ {race.car}
+
+ )}
+
+
+ {race.sessionType && (
+
+
+ {race.sessionType} Session
+
+ )}
- );
- })}
-
-
+
+
+ ))}
+
+ )}
+
);
}
\ No newline at end of file
diff --git a/apps/website/templates/LeagueSettingsTemplate.tsx b/apps/website/templates/LeagueSettingsTemplate.tsx
new file mode 100644
index 000000000..c949cf50c
--- /dev/null
+++ b/apps/website/templates/LeagueSettingsTemplate.tsx
@@ -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 (
+
+
+
+
League Settings
+
+ Manage your league configuration and preferences
+
+
+
+ {/* League Information */}
+
+
+
+
+
+
+
League Information
+
Basic league details
+
+
+
+
+
{viewData.league.name}
+
+
+
+
{viewData.league.visibility}
+
+
+
+
{viewData.league.description}
+
+
+
+
{new Date(viewData.league.createdAt).toLocaleDateString()}
+
+
+
+
{viewData.league.ownerId}
+
+
+
+ {/* Configuration */}
+
+
+
+
+
+
+
Configuration
+
League rules and limits
+
+
+
+
+
+
Max Drivers
+
{viewData.config.maxDrivers}
+
+
+
+
+
+
+
Require Approval
+
{viewData.config.requireApproval ? 'Yes' : 'No'}
+
+
+
+
+
+
+
Allow Late Join
+
{viewData.config.allowLateJoin ? 'Yes' : 'No'}
+
+
+
+
+
+
+
Scoring Preset
+
{viewData.config.scoringPresetId}
+
+
+
+
+ {/* Note about forms */}
+
+
+
+
+
+
Settings Management
+
+ Form-based editing and ownership transfer functionality will be implemented in future updates.
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/website/templates/LeagueSponsorshipsTemplate.tsx b/apps/website/templates/LeagueSponsorshipsTemplate.tsx
new file mode 100644
index 000000000..0f1b5daa8
--- /dev/null
+++ b/apps/website/templates/LeagueSponsorshipsTemplate.tsx
@@ -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 (
+
+
+
+
Sponsorships
+
+ Manage sponsorship slots and review requests
+
+
+
+ {/* Sponsorship Slots */}
+
+
+
+
+
+
+
Sponsorship Slots
+
Available sponsorship opportunities
+
+
+
+
No sponsorship slots available
+
+ {viewData.sponsorshipSlots.map((slot) => (
+
+
+
{slot.name}
+
+ {slot.isAvailable ? 'Available' : 'Taken'}
+
+
+
+
{slot.description}
+
+
+
+
+ {slot.price} {slot.currency}
+
+
+
+ {!slot.isAvailable && slot.sponsoredBy && (
+
+
Sponsored by
+
{slot.sponsoredBy.name}
+
+ )}
+
+ ))}
+
+
+ {/* Sponsorship Requests */}
+
+
+
+
+
+
+
Sponsorship Requests
+
Pending and processed sponsorship applications
+
+
+
+
No sponsorship requests
+
+ {viewData.sponsorshipRequests.map((request) => {
+ const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
+ const statusIcon = {
+ pending:
,
+ approved:
,
+ rejected:
,
+ }[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 (
+
+
+
+
+ {statusIcon}
+ {request.sponsorName}
+
+ {request.status}
+
+
+
+
+ Requested: {slot?.name || 'Unknown slot'}
+
+
+
+ {new Date(request.requestedAt).toLocaleDateString()}
+
+
+
+
+ );
+ })}
+
+
+ {/* Note about management */}
+
+
+
+
+
+
Sponsorship Management
+
+ Interactive management features for approving requests and managing slots will be implemented in future updates.
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/website/templates/LeagueWalletTemplate.tsx b/apps/website/templates/LeagueWalletTemplate.tsx
new file mode 100644
index 000000000..52cd29843
--- /dev/null
+++ b/apps/website/templates/LeagueWalletTemplate.tsx
@@ -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
;
+ case 'withdrawal':
+ return
;
+ case 'sponsorship':
+ return
;
+ case 'prize':
+ return
;
+ default:
+ return
;
+ }
+ };
+
+ 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 (
+
+
+
+
League Wallet
+
+ Financial overview and transaction history
+
+
+
+ {/* Balance Card */}
+
+
+
+
+
+
+
Current Balance
+
+ {formatCurrency(viewData.balance)}
+
+
+
+
+ {/* Transaction History */}
+
+
+
+
+
+
+
Transaction History
+
Recent financial activity
+
+
+
+
No transactions yet
+
+ {viewData.transactions.map((transaction) => (
+
+
+
+ {getTransactionIcon(transaction.type)}
+
+
+
+ {transaction.description}
+
+
+ {new Date(transaction.createdAt).toLocaleDateString()}
+ •
+
+ {transaction.type}
+
+ •
+
+ {transaction.status}
+
+
+
+
+
+
+
= 0 ? 'text-performance-green' : 'text-red-400'
+ }`}>
+ {transaction.amount >= 0 ? '+' : '-'}{formatCurrency(transaction.amount)}
+
+
+
+ ))}
+
+
+ {/* Note about features */}
+
+
+
+
+
+
Wallet Management
+
+ Interactive withdrawal and export features will be implemented in future updates.
+
+
+
+ );
+}
\ No newline at end of file