website refactor
This commit is contained in:
@@ -1,249 +1,90 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
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
|
||||
// ============================================================================
|
||||
import { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Section } from '@/ui/Section';
|
||||
import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
|
||||
|
||||
interface LeagueScheduleTemplateProps {
|
||||
data: LeagueScheduleViewModel;
|
||||
leagueId: string;
|
||||
viewData: LeagueScheduleViewData;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 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');
|
||||
}
|
||||
};
|
||||
|
||||
export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-white mb-4">Schedule</h2>
|
||||
|
||||
{/* Filter Controls */}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<p className="text-sm text-gray-400">
|
||||
{displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
|
||||
<Section>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white">Race Schedule</h2>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
Upcoming and completed races for this season
|
||||
</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>
|
||||
|
||||
{/* Race List */}
|
||||
{displayRaces.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
<p className="mb-2">No {filter} races</p>
|
||||
{filter === 'upcoming' && (
|
||||
<p className="text-sm text-gray-500">Schedule your first race to get started</p>
|
||||
)}
|
||||
{viewData.races.length === 0 ? (
|
||||
<Card>
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
|
||||
<Calendar className="w-8 h-8 text-performance-green" />
|
||||
</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 className="space-y-3">
|
||||
{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 (
|
||||
<div
|
||||
key={race.id}
|
||||
className={`p-4 rounded-lg border transition-all duration-200 cursor-pointer hover:scale-[1.02] ${
|
||||
isPast
|
||||
? '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>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{viewData.races.map((race) => (
|
||||
<Card key={race.id}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className={`w-3 h-3 rounded-full ${race.isPast ? 'bg-performance-green' : 'bg-primary-blue'}`} />
|
||||
<h3 className="font-semibold text-white text-lg">{race.name}</h3>
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
race.status === 'completed'
|
||||
? 'bg-performance-green/20 text-performance-green'
|
||||
: 'bg-primary-blue/20 text-primary-blue'
|
||||
}`}>
|
||||
{race.status === 'completed' ? 'Completed' : 'Scheduled'}
|
||||
</span>
|
||||
</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>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
121
apps/website/templates/LeagueSettingsTemplate.tsx
Normal file
121
apps/website/templates/LeagueSettingsTemplate.tsx
Normal 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
168
apps/website/templates/LeagueSponsorshipsTemplate.tsx
Normal 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
155
apps/website/templates/LeagueWalletTemplate.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user