website refactor
This commit is contained in:
@@ -40,8 +40,8 @@ export function AdminDashboardTemplate(props: {
|
||||
System overview and statistics
|
||||
</Text>
|
||||
</div>
|
||||
<Button
|
||||
onClick={onRefresh}
|
||||
<Button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
variant="secondary"
|
||||
className="flex items-center gap-2"
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
import Card from '@/components/ui/Card';
|
||||
import { Card } from '@/ui/Card';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import {
|
||||
Search,
|
||||
Filter,
|
||||
RefreshCw,
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Select } from '@/ui/Select';
|
||||
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Text } from '@/ui/Text';
|
||||
import {
|
||||
Search,
|
||||
Filter,
|
||||
RefreshCw,
|
||||
Users,
|
||||
Shield,
|
||||
Trash2,
|
||||
@@ -94,17 +99,18 @@ export function AdminUsersTemplate(props: {
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">User Management</h1>
|
||||
<p className="text-gray-400 mt-1">Manage and monitor all system users</p>
|
||||
<Text size="2xl" weight="bold" color="text-white">User Management</Text>
|
||||
<Text size="sm" color="text-gray-400" className="mt-1">Manage and monitor all system users</Text>
|
||||
</div>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
<Button
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:bg-iron-gray/80 transition-colors flex items-center gap-2 disabled:opacity-50"
|
||||
variant="secondary"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Error Banner */}
|
||||
@@ -112,15 +118,16 @@ export function AdminUsersTemplate(props: {
|
||||
<div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">Error</div>
|
||||
<div className="text-sm opacity-90">{error}</div>
|
||||
<Text weight="medium">Error</Text>
|
||||
<Text size="sm" className="opacity-90">{error}</Text>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
onClick={() => {}}
|
||||
className="text-racing-red hover:opacity-70"
|
||||
variant="secondary"
|
||||
className="text-racing-red hover:opacity-70 p-0"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -130,52 +137,53 @@ export function AdminUsersTemplate(props: {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-4 h-4 text-gray-400" />
|
||||
<span className="font-medium text-white">Filters</span>
|
||||
<Text weight="medium" color="text-white">Filters</Text>
|
||||
</div>
|
||||
{(search || roleFilter || statusFilter) && (
|
||||
<button
|
||||
<Button
|
||||
onClick={onClearFilters}
|
||||
className="text-xs text-primary-blue hover:text-blue-400"
|
||||
variant="secondary"
|
||||
className="text-xs p-0"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by email or name..."
|
||||
value={search}
|
||||
onChange={(e) => onSearch(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={roleFilter}
|
||||
onChange={(e) => onFilterRole(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue transition-colors"
|
||||
>
|
||||
<option value="">All Roles</option>
|
||||
<option value="owner">Owner</option>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="user">User</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => onFilterStatus(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue transition-colors"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="suspended">Suspended</option>
|
||||
<option value="deleted">Deleted</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search by email or name..."
|
||||
value={search}
|
||||
onChange={(e) => onSearch(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
value={roleFilter}
|
||||
onChange={(e) => onFilterRole(e.target.value)}
|
||||
options={[
|
||||
{ value: '', label: 'All Roles' },
|
||||
{ value: 'owner', label: 'Owner' },
|
||||
{ value: 'admin', label: 'Admin' },
|
||||
{ value: 'user', label: 'User' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onChange={(e) => onFilterStatus(e.target.value)}
|
||||
options={[
|
||||
{ value: '', label: 'All Status' },
|
||||
{ value: 'active', label: 'Active' },
|
||||
{ value: 'suspended', label: 'Suspended' },
|
||||
{ value: 'deleted', label: 'Deleted' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -184,113 +192,115 @@ export function AdminUsersTemplate(props: {
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 space-y-3">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-blue"></div>
|
||||
<div className="text-gray-400">Loading users...</div>
|
||||
<Text color="text-gray-400">Loading users...</Text>
|
||||
</div>
|
||||
) : !viewData.users || viewData.users.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 space-y-3">
|
||||
<Users className="w-12 h-12 text-gray-600" />
|
||||
<div className="text-gray-400">No users found</div>
|
||||
<button
|
||||
<Text color="text-gray-400">No users found</Text>
|
||||
<Button
|
||||
onClick={onClearFilters}
|
||||
className="text-primary-blue hover:text-blue-400 text-sm"
|
||||
variant="secondary"
|
||||
className="text-sm p-0"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-charcoal-outline">
|
||||
<th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">User</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Email</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Roles</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Status</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Last Login</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{viewData.users.map((user, index: number) => (
|
||||
<tr
|
||||
key={user.id}
|
||||
className={`border-b border-charcoal-outline/50 hover:bg-iron-gray/30 transition-colors ${index % 2 === 0 ? 'bg-transparent' : 'bg-iron-gray/10'}`}
|
||||
>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-primary-blue/20 flex items-center justify-center">
|
||||
<Shield className="w-4 h-4 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-white">{user.displayName}</div>
|
||||
<div className="text-xs text-gray-500">ID: {user.id}</div>
|
||||
{user.primaryDriverId && (
|
||||
<div className="text-xs text-gray-500">Driver: {user.primaryDriverId}</div>
|
||||
)}
|
||||
</div>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>User</TableHeader>
|
||||
<TableHeader>Email</TableHeader>
|
||||
<TableHeader>Roles</TableHeader>
|
||||
<TableHeader>Status</TableHeader>
|
||||
<TableHeader>Last Login</TableHeader>
|
||||
<TableHeader>Actions</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{viewData.users.map((user, index: number) => (
|
||||
<TableRow
|
||||
key={user.id}
|
||||
className={index % 2 === 0 ? 'bg-transparent' : 'bg-iron-gray/10'}
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-primary-blue/20 flex items-center justify-center">
|
||||
<Shield className="w-4 h-4 text-primary-blue" />
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="text-sm text-gray-300">{user.email}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{user.roles.map((role: string, idx: number) => (
|
||||
<span
|
||||
key={idx}
|
||||
className={`px-2 py-1 text-xs rounded-full font-medium ${getRoleBadgeClass(role)}`}
|
||||
>
|
||||
{getRoleBadgeLabel(role)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{(() => {
|
||||
const badge = toStatusBadgeProps(user.status);
|
||||
return <StatusBadge status={badge.status} label={badge.label} />;
|
||||
})()}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="text-sm text-gray-400">
|
||||
{user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString() : 'Never'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
{user.status === 'active' && (
|
||||
<button
|
||||
onClick={() => onUpdateStatus(user.id, 'suspended')}
|
||||
className="px-3 py-1 text-xs rounded bg-yellow-500/20 text-yellow-300 hover:bg-yellow-500/30 transition-colors"
|
||||
>
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
{user.status === 'suspended' && (
|
||||
<button
|
||||
onClick={() => onUpdateStatus(user.id, 'active')}
|
||||
className="px-3 py-1 text-xs rounded bg-performance-green/20 text-performance-green hover:bg-performance-green/30 transition-colors"
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
{user.status !== 'deleted' && (
|
||||
<button
|
||||
onClick={() => onDeleteUser(user.id)}
|
||||
disabled={deletingUser === user.id}
|
||||
className="px-3 py-1 text-xs rounded bg-racing-red/20 text-racing-red hover:bg-racing-red/30 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
{deletingUser === user.id ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
<div>
|
||||
<div className="font-medium text-white">{user.displayName}</div>
|
||||
<div className="text-xs text-gray-500">ID: {user.id}</div>
|
||||
{user.primaryDriverId && (
|
||||
<div className="text-xs text-gray-500">Driver: {user.primaryDriverId}</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm text-gray-300">{user.email}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{user.roles.map((role: string, idx: number) => (
|
||||
<span
|
||||
key={idx}
|
||||
className={`px-2 py-1 text-xs rounded-full font-medium ${getRoleBadgeClass(role)}`}
|
||||
>
|
||||
{getRoleBadgeLabel(role)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{(() => {
|
||||
const badge = toStatusBadgeProps(user.status);
|
||||
return <StatusBadge status={badge.status} label={badge.label} />;
|
||||
})()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm text-gray-400">
|
||||
{user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString() : 'Never'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{user.status === 'active' && (
|
||||
<Button
|
||||
onClick={() => onUpdateStatus(user.id, 'suspended')}
|
||||
variant="secondary"
|
||||
className="px-3 py-1 text-xs bg-yellow-500/20 text-yellow-300 hover:bg-yellow-500/30"
|
||||
>
|
||||
Suspend
|
||||
</Button>
|
||||
)}
|
||||
{user.status === 'suspended' && (
|
||||
<Button
|
||||
onClick={() => onUpdateStatus(user.id, 'active')}
|
||||
variant="secondary"
|
||||
className="px-3 py-1 text-xs bg-performance-green/20 text-performance-green hover:bg-performance-green/30"
|
||||
>
|
||||
Activate
|
||||
</Button>
|
||||
)}
|
||||
{user.status !== 'deleted' && (
|
||||
<Button
|
||||
onClick={() => onDeleteUser(user.id)}
|
||||
disabled={deletingUser === user.id}
|
||||
variant="secondary"
|
||||
className="px-3 py-1 text-xs bg-racing-red/20 text-racing-red hover:bg-racing-red/30 flex items-center gap-1"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
{deletingUser === user.id ? 'Deleting...' : 'Delete'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
@@ -300,8 +310,8 @@ export function AdminUsersTemplate(props: {
|
||||
<Card className="bg-gradient-to-br from-blue-900/20 to-blue-700/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">Total Users</div>
|
||||
<div className="text-2xl font-bold text-white">{viewData.total}</div>
|
||||
<Text size="sm" color="text-gray-400" className="mb-1">Total Users</Text>
|
||||
<Text size="2xl" weight="bold" color="text-white">{viewData.total}</Text>
|
||||
</div>
|
||||
<Users className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
@@ -309,10 +319,10 @@ export function AdminUsersTemplate(props: {
|
||||
<Card className="bg-gradient-to-br from-green-900/20 to-green-700/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">Active</div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<Text size="sm" color="text-gray-400" className="mb-1">Active</Text>
|
||||
<Text size="2xl" weight="bold" color="text-white">
|
||||
{viewData.activeUserCount}
|
||||
</div>
|
||||
</Text>
|
||||
</div>
|
||||
<div className="w-6 h-6 text-green-400">✓</div>
|
||||
</div>
|
||||
@@ -320,10 +330,10 @@ export function AdminUsersTemplate(props: {
|
||||
<Card className="bg-gradient-to-br from-purple-900/20 to-purple-700/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">Admins</div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
<Text size="sm" color="text-gray-400" className="mb-1">Admins</Text>
|
||||
<Text size="2xl" weight="bold" color="text-white">
|
||||
{viewData.adminCount}
|
||||
</div>
|
||||
</Text>
|
||||
</div>
|
||||
<Shield className="w-6 h-6 text-purple-400" />
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,18 @@
|
||||
import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
|
||||
import {
|
||||
Trophy,
|
||||
Medal,
|
||||
Target,
|
||||
Users,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
Clock,
|
||||
Activity,
|
||||
Award,
|
||||
UserPlus,
|
||||
Flag,
|
||||
User,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface DashboardTemplateProps {
|
||||
viewData: DashboardViewData;
|
||||
@@ -72,7 +86,7 @@ export function DashboardTemplate({ viewData }: DashboardTemplateProps) {
|
||||
<span>Flag</span>
|
||||
Browse Leagues
|
||||
</a>
|
||||
<a href="/profile" className="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm font-medium transition-colors flex items-center gap-2">
|
||||
<a href=routes.protected.profile className="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm font-medium transition-colors flex items-center gap-2">
|
||||
<span>Activity</span>
|
||||
View Profile
|
||||
</a>
|
||||
@@ -189,7 +203,7 @@ export function DashboardTemplate({ viewData }: DashboardTemplateProps) {
|
||||
<span>Award</span>
|
||||
Your Championship Standings
|
||||
</h2>
|
||||
<a href="/profile/leagues" className="text-sm text-primary-blue hover:underline flex items-center gap-1">
|
||||
<a href=routes.protected.profileLeagues className="text-sm text-primary-blue hover:underline flex items-center gap-1">
|
||||
View all <span>ChevronRight</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -307,7 +321,7 @@ export function DashboardTemplate({ viewData }: DashboardTemplateProps) {
|
||||
))}
|
||||
{friends.length > 6 && (
|
||||
<a
|
||||
href="/profile"
|
||||
href=routes.protected.profile
|
||||
className="block text-center py-2 text-sm text-primary-blue hover:underline"
|
||||
>
|
||||
+{friends.length - 6} more
|
||||
|
||||
@@ -95,7 +95,7 @@ export function DriverRankingsTemplate({
|
||||
</p>
|
||||
|
||||
<p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
|
||||
{driver.rating.toLocaleString()}
|
||||
{driver.rating.toString()}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
|
||||
@@ -139,14 +139,6 @@ export function DriverRankingsTemplate({
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{viewData.drivers.map((driver) => {
|
||||
const position = driver.rank;
|
||||
const medalBg = position === 1 ? 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40' :
|
||||
position === 2 ? 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40' :
|
||||
position === 3 ? 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40' :
|
||||
'bg-iron-gray/50 border-charcoal-outline';
|
||||
const medalColor = position === 1 ? 'text-yellow-400' :
|
||||
position === 2 ? 'text-gray-300' :
|
||||
position === 3 ? 'text-amber-600' :
|
||||
'text-gray-500';
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -157,7 +149,7 @@ export function DriverRankingsTemplate({
|
||||
>
|
||||
{/* Position */}
|
||||
<div className="col-span-1 flex items-center justify-center">
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${medalBg} ${medalColor}`}>
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${driver.medalBg} ${driver.medalColor}`}>
|
||||
{position <= 3 ? <Medal className="w-4 h-4" /> : position}
|
||||
</div>
|
||||
</div>
|
||||
@@ -190,7 +182,7 @@ export function DriverRankingsTemplate({
|
||||
{/* Rating */}
|
||||
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
||||
<span className="font-mono font-semibold text-white">
|
||||
{driver.rating.toLocaleString()}
|
||||
{driver.rating.toString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,56 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Trophy, Users, Award } from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
|
||||
import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
|
||||
import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
|
||||
interface LeaderboardsTemplateProps {
|
||||
drivers: {
|
||||
id: string;
|
||||
name: string;
|
||||
rating: number;
|
||||
skillLevel: string;
|
||||
nationality: string;
|
||||
wins: number;
|
||||
rank: number;
|
||||
avatarUrl: string;
|
||||
position: number;
|
||||
}[];
|
||||
teams: {
|
||||
id: string;
|
||||
name: string;
|
||||
tag: string;
|
||||
memberCount: number;
|
||||
category?: string;
|
||||
totalWins: number;
|
||||
logoUrl: string;
|
||||
position: number;
|
||||
}[];
|
||||
onDriverClick: (driverId: string) => void;
|
||||
onTeamClick: (teamId: string) => void;
|
||||
onNavigateToDrivers: () => void;
|
||||
onNavigateToTeams: () => void;
|
||||
viewData: LeaderboardsViewData;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// MAIN TEMPLATE COMPONENT
|
||||
// ============================================================================
|
||||
|
||||
export function LeaderboardsTemplate({
|
||||
drivers,
|
||||
teams,
|
||||
onDriverClick,
|
||||
onTeamClick,
|
||||
onNavigateToDrivers,
|
||||
onNavigateToTeams,
|
||||
}: LeaderboardsTemplateProps) {
|
||||
export function LeaderboardsTemplate({ viewData }: LeaderboardsTemplateProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleDriverClick = (driverId: string) => {
|
||||
router.push(routes.driver.detail(driverId));
|
||||
};
|
||||
|
||||
const handleTeamClick = (teamId: string) => {
|
||||
router.push(routes.team.detail(teamId));
|
||||
};
|
||||
|
||||
const handleNavigateToDrivers = () => {
|
||||
router.push(routes.leaderboards.drivers);
|
||||
};
|
||||
|
||||
const handleNavigateToTeams = () => {
|
||||
router.push(routes.team.leaderboard);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 pb-12">
|
||||
<div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
|
||||
@@ -78,7 +68,7 @@ export function LeaderboardsTemplate({
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onNavigateToDrivers}
|
||||
onClick={handleNavigateToDrivers}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Trophy className="w-4 h-4 text-primary-blue" />
|
||||
@@ -86,7 +76,7 @@ export function LeaderboardsTemplate({
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onNavigateToTeams}
|
||||
onClick={handleNavigateToTeams}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Users className="w-4 h-4 text-purple-400" />
|
||||
@@ -97,8 +87,8 @@ export function LeaderboardsTemplate({
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<DriverLeaderboardPreview drivers={drivers} onDriverClick={onDriverClick} onNavigateToDrivers={onNavigateToDrivers} />
|
||||
<TeamLeaderboardPreview teams={teams} onTeamClick={onTeamClick} onNavigateToTeams={onNavigateToTeams} />
|
||||
<DriverLeaderboardPreview drivers={viewData.drivers} onDriverClick={handleDriverClick} onNavigateToDrivers={handleNavigateToDrivers} />
|
||||
<TeamLeaderboardPreview teams={viewData.teams} onTeamClick={handleTeamClick} onNavigateToTeams={handleNavigateToTeams} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,691 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import {
|
||||
Trophy,
|
||||
Users,
|
||||
Globe,
|
||||
Award,
|
||||
Search,
|
||||
Plus,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Sparkles,
|
||||
Flag,
|
||||
Filter,
|
||||
Flame,
|
||||
Clock,
|
||||
Target,
|
||||
Timer,
|
||||
} from 'lucide-react';
|
||||
import LeagueCard from '@/components/leagues/LeagueCard';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
|
||||
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
|
||||
type CategoryId =
|
||||
| 'all'
|
||||
| 'driver'
|
||||
| 'team'
|
||||
| 'nations'
|
||||
| 'trophy'
|
||||
| 'new'
|
||||
| 'popular'
|
||||
| 'iracing'
|
||||
| 'acc'
|
||||
| 'f1'
|
||||
| 'endurance'
|
||||
| 'sprint'
|
||||
| 'openSlots';
|
||||
|
||||
interface Category {
|
||||
id: CategoryId;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
description: string;
|
||||
filter: (league: LeaguesViewData['leagues'][number]) => boolean;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
interface LeagueSliderProps {
|
||||
title: string;
|
||||
icon: React.ElementType;
|
||||
description: string;
|
||||
leagues: LeaguesViewData['leagues'];
|
||||
autoScroll?: boolean;
|
||||
iconColor?: string;
|
||||
scrollSpeedMultiplier?: number;
|
||||
scrollDirection?: 'left' | 'right';
|
||||
}
|
||||
|
||||
interface LeaguesTemplateProps {
|
||||
data: LeaguesViewData;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// CATEGORIES
|
||||
// ============================================================================
|
||||
|
||||
const CATEGORIES: Category[] = [
|
||||
{
|
||||
id: 'all',
|
||||
label: 'All',
|
||||
icon: Globe,
|
||||
description: 'Browse all available leagues',
|
||||
filter: () => true,
|
||||
},
|
||||
{
|
||||
id: 'popular',
|
||||
label: 'Popular',
|
||||
icon: Flame,
|
||||
description: 'Most active leagues right now',
|
||||
filter: (league) => {
|
||||
const fillRate = (league.usedDriverSlots ?? 0) / (league.maxDrivers ?? 1);
|
||||
return fillRate > 0.7;
|
||||
},
|
||||
color: 'text-orange-400',
|
||||
},
|
||||
{
|
||||
id: 'new',
|
||||
label: 'New',
|
||||
icon: Sparkles,
|
||||
description: 'Fresh leagues looking for members',
|
||||
filter: (league) => {
|
||||
const oneWeekAgo = new Date();
|
||||
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
|
||||
return new Date(league.createdAt) > oneWeekAgo;
|
||||
},
|
||||
color: 'text-performance-green',
|
||||
},
|
||||
{
|
||||
id: 'openSlots',
|
||||
label: 'Open Slots',
|
||||
icon: Target,
|
||||
description: 'Leagues with available spots',
|
||||
filter: (league) => {
|
||||
// Check for team slots if it's a team league
|
||||
if (league.maxTeams && league.maxTeams > 0) {
|
||||
const usedTeams = league.usedTeamSlots ?? 0;
|
||||
return usedTeams < league.maxTeams;
|
||||
}
|
||||
// Otherwise check driver slots
|
||||
const used = league.usedDriverSlots ?? 0;
|
||||
const max = league.maxDrivers ?? 0;
|
||||
return max > 0 && used < max;
|
||||
},
|
||||
color: 'text-neon-aqua',
|
||||
},
|
||||
{
|
||||
id: 'driver',
|
||||
label: 'Driver',
|
||||
icon: Trophy,
|
||||
description: 'Compete as an individual',
|
||||
filter: (league) => league.scoring?.primaryChampionshipType === 'driver',
|
||||
},
|
||||
{
|
||||
id: 'team',
|
||||
label: 'Team',
|
||||
icon: Users,
|
||||
description: 'Race together as a team',
|
||||
filter: (league) => league.scoring?.primaryChampionshipType === 'team',
|
||||
},
|
||||
{
|
||||
id: 'nations',
|
||||
label: 'Nations',
|
||||
icon: Flag,
|
||||
description: 'Represent your country',
|
||||
filter: (league) => league.scoring?.primaryChampionshipType === 'nations',
|
||||
},
|
||||
{
|
||||
id: 'trophy',
|
||||
label: 'Trophy',
|
||||
icon: Award,
|
||||
description: 'Special championship events',
|
||||
filter: (league) => league.scoring?.primaryChampionshipType === 'trophy',
|
||||
},
|
||||
{
|
||||
id: 'endurance',
|
||||
label: 'Endurance',
|
||||
icon: Timer,
|
||||
description: 'Long-distance racing',
|
||||
filter: (league) =>
|
||||
league.scoring?.scoringPresetId?.includes('endurance') ??
|
||||
league.timingSummary?.includes('h Race') ??
|
||||
false,
|
||||
},
|
||||
{
|
||||
id: 'sprint',
|
||||
label: 'Sprint',
|
||||
icon: Clock,
|
||||
description: 'Quick, intense races',
|
||||
filter: (league) =>
|
||||
(league.scoring?.scoringPresetId?.includes('sprint') ?? false) &&
|
||||
!(league.scoring?.scoringPresetId?.includes('endurance') ?? false),
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// LEAGUE SLIDER COMPONENT
|
||||
// ============================================================================
|
||||
|
||||
function LeagueSlider({
|
||||
title,
|
||||
icon: Icon,
|
||||
description,
|
||||
leagues,
|
||||
autoScroll = true,
|
||||
iconColor = 'text-primary-blue',
|
||||
scrollSpeedMultiplier = 1,
|
||||
scrollDirection = 'right',
|
||||
}: LeagueSliderProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(true);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const animationRef = useRef<number | null>(null);
|
||||
const scrollPositionRef = useRef(0);
|
||||
|
||||
const checkScrollButtons = useCallback(() => {
|
||||
if (scrollRef.current) {
|
||||
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
|
||||
setCanScrollLeft(scrollLeft > 0);
|
||||
setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scroll = useCallback((direction: 'left' | 'right') => {
|
||||
if (scrollRef.current) {
|
||||
const cardWidth = 340;
|
||||
const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
|
||||
// Update the ref so auto-scroll continues from new position
|
||||
scrollPositionRef.current = scrollRef.current.scrollLeft + scrollAmount;
|
||||
scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Initialize scroll position for left-scrolling sliders
|
||||
const initializeScroll = useCallback(() => {
|
||||
if (scrollDirection === 'left' && scrollRef.current) {
|
||||
const { scrollWidth, clientWidth } = scrollRef.current;
|
||||
scrollPositionRef.current = scrollWidth - clientWidth;
|
||||
scrollRef.current.scrollLeft = scrollPositionRef.current;
|
||||
}
|
||||
}, [scrollDirection]);
|
||||
|
||||
// Smooth continuous auto-scroll using requestAnimationFrame with variable speed and direction
|
||||
const setupAutoScroll = useCallback(() => {
|
||||
// Allow scroll even with just 2 leagues (minimum threshold = 1)
|
||||
if (!autoScroll || leagues.length <= 1) return;
|
||||
|
||||
const scrollContainer = scrollRef.current;
|
||||
if (!scrollContainer) return;
|
||||
|
||||
let lastTimestamp = 0;
|
||||
// Base speed with multiplier for variation between sliders
|
||||
const baseSpeed = 0.025;
|
||||
const scrollSpeed = baseSpeed * scrollSpeedMultiplier;
|
||||
const directionMultiplier = scrollDirection === 'left' ? -1 : 1;
|
||||
|
||||
const animate = (timestamp: number) => {
|
||||
if (!isHovering && scrollContainer) {
|
||||
const delta = lastTimestamp ? timestamp - lastTimestamp : 0;
|
||||
lastTimestamp = timestamp;
|
||||
|
||||
scrollPositionRef.current += scrollSpeed * delta * directionMultiplier;
|
||||
|
||||
const { scrollWidth, clientWidth } = scrollContainer;
|
||||
const maxScroll = scrollWidth - clientWidth;
|
||||
|
||||
// Handle wrap-around for both directions
|
||||
if (scrollDirection === 'right' && scrollPositionRef.current >= maxScroll) {
|
||||
scrollPositionRef.current = 0;
|
||||
} else if (scrollDirection === 'left' && scrollPositionRef.current <= 0) {
|
||||
scrollPositionRef.current = maxScroll;
|
||||
}
|
||||
|
||||
scrollContainer.scrollLeft = scrollPositionRef.current;
|
||||
} else {
|
||||
lastTimestamp = timestamp;
|
||||
}
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
|
||||
return () => {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, [autoScroll, leagues.length, isHovering, scrollSpeedMultiplier, scrollDirection]);
|
||||
|
||||
// Sync scroll position when user manually scrolls
|
||||
const setupManualScroll = useCallback(() => {
|
||||
const scrollContainer = scrollRef.current;
|
||||
if (!scrollContainer) return;
|
||||
|
||||
const handleScroll = () => {
|
||||
scrollPositionRef.current = scrollContainer.scrollLeft;
|
||||
checkScrollButtons();
|
||||
};
|
||||
|
||||
scrollContainer.addEventListener('scroll', handleScroll);
|
||||
return () => scrollContainer.removeEventListener('scroll', handleScroll);
|
||||
}, [checkScrollButtons]);
|
||||
|
||||
// Initialize effects
|
||||
useState(() => {
|
||||
initializeScroll();
|
||||
});
|
||||
|
||||
// Setup auto-scroll effect
|
||||
useState(() => {
|
||||
setupAutoScroll();
|
||||
});
|
||||
|
||||
// Setup manual scroll effect
|
||||
useState(() => {
|
||||
setupManualScroll();
|
||||
});
|
||||
|
||||
if (leagues.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mb-10">
|
||||
{/* Section header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-10 w-10 items-center justify-center rounded-xl bg-iron-gray border border-charcoal-outline`}>
|
||||
<Icon className={`w-5 h-5 ${iconColor}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">{title}</h2>
|
||||
<p className="text-xs text-gray-500">{description}</p>
|
||||
</div>
|
||||
<span className="ml-2 px-2 py-0.5 rounded-full text-xs bg-charcoal-outline/50 text-gray-400">
|
||||
{leagues.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Navigation arrows */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scroll('left')}
|
||||
disabled={!canScrollLeft}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all ${
|
||||
canScrollLeft
|
||||
? 'bg-iron-gray border border-charcoal-outline text-white hover:border-primary-blue hover:text-primary-blue'
|
||||
: 'bg-iron-gray/30 border border-charcoal-outline/30 text-gray-600 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scroll('right')}
|
||||
disabled={!canScrollRight}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all ${
|
||||
canScrollRight
|
||||
? 'bg-iron-gray border border-charcoal-outline text-white hover:border-primary-blue hover:text-primary-blue'
|
||||
: 'bg-iron-gray/30 border border-charcoal-outline/30 text-gray-600 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable container with fade edges */}
|
||||
<div className="relative">
|
||||
{/* Left fade gradient */}
|
||||
<div className="absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-deep-graphite to-transparent z-10 pointer-events-none" />
|
||||
{/* Right fade gradient */}
|
||||
<div className="absolute right-0 top-0 bottom-4 w-12 bg-gradient-to-l from-deep-graphite to-transparent z-10 pointer-events-none" />
|
||||
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
className="flex gap-4 overflow-x-auto pb-4 px-4"
|
||||
style={{
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
}}
|
||||
>
|
||||
<style jsx>{`
|
||||
div::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`}</style>
|
||||
{leagues.map((league) => {
|
||||
// Convert ViewData to ViewModel for LeagueCard
|
||||
const viewModel: LeagueSummaryViewModel = {
|
||||
id: league.id,
|
||||
name: league.name,
|
||||
description: league.description ?? '',
|
||||
logoUrl: league.logoUrl,
|
||||
ownerId: league.ownerId,
|
||||
createdAt: league.createdAt,
|
||||
maxDrivers: league.maxDrivers,
|
||||
usedDriverSlots: league.usedDriverSlots,
|
||||
maxTeams: league.maxTeams ?? 0,
|
||||
usedTeamSlots: league.usedTeamSlots ?? 0,
|
||||
structureSummary: league.structureSummary,
|
||||
timingSummary: league.timingSummary,
|
||||
category: league.category ?? undefined,
|
||||
scoring: league.scoring ? {
|
||||
...league.scoring,
|
||||
primaryChampionshipType: league.scoring.primaryChampionshipType as 'driver' | 'team' | 'nations' | 'trophy',
|
||||
} : undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={league.id} className="flex-shrink-0 w-[320px] h-full">
|
||||
<a href={`/leagues/${league.id}`} className="block h-full">
|
||||
<LeagueCard league={viewModel} />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// MAIN TEMPLATE COMPONENT
|
||||
// ============================================================================
|
||||
|
||||
export function LeaguesTemplate({
|
||||
data,
|
||||
}: LeaguesTemplateProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
// Filter by search query
|
||||
const searchFilteredLeagues = data.leagues.filter((league) => {
|
||||
if (!searchQuery) return true;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return (
|
||||
league.name.toLowerCase().includes(query) ||
|
||||
(league.description ?? '').toLowerCase().includes(query) ||
|
||||
(league.scoring?.gameName ?? '').toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
|
||||
// Get leagues for active category
|
||||
const activeCategoryData = CATEGORIES.find((c) => c.id === activeCategory);
|
||||
const categoryFilteredLeagues = activeCategoryData
|
||||
? searchFilteredLeagues.filter(activeCategoryData.filter)
|
||||
: searchFilteredLeagues;
|
||||
|
||||
// Group leagues by category for slider view
|
||||
const leaguesByCategory = CATEGORIES.reduce(
|
||||
(acc, category) => {
|
||||
// First try to use the dedicated category field, fall back to scoring-based filtering
|
||||
acc[category.id] = searchFilteredLeagues.filter((league) => {
|
||||
// If league has a category field, use it directly
|
||||
if (league.category) {
|
||||
return league.category === category.id;
|
||||
}
|
||||
// Otherwise fall back to the existing scoring-based filter
|
||||
return category.filter(league);
|
||||
});
|
||||
return acc;
|
||||
},
|
||||
{} as Record<CategoryId, LeaguesViewData['leagues']>,
|
||||
);
|
||||
|
||||
// Featured categories to show as sliders with different scroll speeds and alternating directions
|
||||
const featuredCategoriesWithSpeed: { id: CategoryId; speed: number; direction: 'left' | 'right' }[] = [
|
||||
{ id: 'popular', speed: 1.0, direction: 'right' },
|
||||
{ id: 'new', speed: 1.3, direction: 'left' },
|
||||
{ id: 'driver', speed: 0.8, direction: 'right' },
|
||||
{ id: 'team', speed: 1.1, direction: 'left' },
|
||||
{ id: 'nations', speed: 0.9, direction: 'right' },
|
||||
{ id: 'endurance', speed: 0.7, direction: 'left' },
|
||||
{ id: 'sprint', speed: 1.2, direction: 'right' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 pb-12">
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60 border border-charcoal-outline/50 overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
|
||||
|
||||
<div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
|
||||
<div className="max-w-2xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
|
||||
<Trophy className="w-6 h-6 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="text-3xl lg:text-4xl">
|
||||
Find Your Grid
|
||||
</Heading>
|
||||
</div>
|
||||
<p className="text-gray-400 text-lg leading-relaxed mb-6">
|
||||
From casual sprints to epic endurance battles — discover the perfect league for your racing style.
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
|
||||
<span className="text-sm text-gray-400">
|
||||
<span className="text-white font-semibold">{data.leagues.length}</span> active leagues
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-blue" />
|
||||
<span className="text-sm text-gray-400">
|
||||
<span className="text-white font-semibold">{leaguesByCategory.new.length}</span> new this week
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-neon-aqua" />
|
||||
<span className="text-sm text-gray-400">
|
||||
<span className="text-white font-semibold">{leaguesByCategory.openSlots.length}</span> with open slots
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<a href="/leagues/create" className="flex items-center gap-2 px-6 py-3 bg-primary-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<Plus className="w-5 h-5" />
|
||||
<span>Create League</span>
|
||||
</a>
|
||||
<p className="text-xs text-gray-500 text-center">Set up your own racing series</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter Bar */}
|
||||
<div className="mb-6">
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
{/* Search */}
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search leagues by name, description, or game..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter toggle (mobile) */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="lg:hidden flex items-center gap-2"
|
||||
>
|
||||
<Filter className="w-4 h-4" />
|
||||
Filters
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Category Tabs */}
|
||||
<div className={`mt-4 ${showFilters ? 'block' : 'hidden lg:block'}`}>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{CATEGORIES.map((category) => {
|
||||
const Icon = category.icon;
|
||||
const count = leaguesByCategory[category.id].length;
|
||||
const isActive = activeCategory === category.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
type="button"
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200 ${
|
||||
isActive
|
||||
? 'bg-primary-blue text-white shadow-[0_0_15px_rgba(25,140,255,0.3)]'
|
||||
: 'bg-iron-gray/60 text-gray-400 border border-charcoal-outline hover:border-gray-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`w-3.5 h-3.5 ${!isActive && category.color ? category.color : ''}`} />
|
||||
<span>{category.label}</span>
|
||||
{count > 0 && (
|
||||
<span className={`px-1.5 py-0.5 rounded-full text-[10px] ${isActive ? 'bg-white/20' : 'bg-charcoal-outline/50'}`}>
|
||||
{count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{data.leagues.length === 0 ? (
|
||||
/* Empty State */
|
||||
<Card className="text-center py-16">
|
||||
<div className="max-w-md mx-auto">
|
||||
<div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20 mb-6">
|
||||
<Trophy className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={2} className="text-2xl mb-3">
|
||||
No leagues yet
|
||||
</Heading>
|
||||
<p className="text-gray-400 mb-8">
|
||||
Be the first to create a racing series. Start your own league and invite drivers to compete for glory.
|
||||
</p>
|
||||
<a href="/leagues/create" className="inline-flex items-center gap-2 px-6 py-3 bg-primary-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Create Your First League
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
) : activeCategory === 'all' && !searchQuery ? (
|
||||
/* Slider View - Show featured categories with sliders at different speeds and directions */
|
||||
<div>
|
||||
{featuredCategoriesWithSpeed
|
||||
.map(({ id, speed, direction }) => {
|
||||
const category = CATEGORIES.find((c) => c.id === id)!;
|
||||
return { category, speed, direction };
|
||||
})
|
||||
.filter(({ category }) => leaguesByCategory[category.id].length > 0)
|
||||
.map(({ category, speed, direction }) => (
|
||||
<LeagueSlider
|
||||
key={category.id}
|
||||
title={category.label}
|
||||
icon={category.icon}
|
||||
description={category.description}
|
||||
leagues={leaguesByCategory[category.id]}
|
||||
autoScroll={true}
|
||||
iconColor={category.color || 'text-primary-blue'}
|
||||
scrollSpeedMultiplier={speed}
|
||||
scrollDirection={direction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Grid View - Filtered by category or search */
|
||||
<div>
|
||||
{categoryFilteredLeagues.length > 0 ? (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<p className="text-sm text-gray-400">
|
||||
Showing <span className="text-white font-medium">{categoryFilteredLeagues.length}</span>{' '}
|
||||
{categoryFilteredLeagues.length === 1 ? 'league' : 'leagues'}
|
||||
{searchQuery && (
|
||||
<span>
|
||||
{' '}
|
||||
for "<span className="text-primary-blue">{searchQuery}</span>"
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{categoryFilteredLeagues.map((league) => {
|
||||
// Convert ViewData to ViewModel for LeagueCard
|
||||
const viewModel: LeagueSummaryViewModel = {
|
||||
id: league.id,
|
||||
name: league.name,
|
||||
description: league.description ?? '',
|
||||
logoUrl: league.logoUrl,
|
||||
ownerId: league.ownerId,
|
||||
createdAt: league.createdAt,
|
||||
maxDrivers: league.maxDrivers,
|
||||
usedDriverSlots: league.usedDriverSlots,
|
||||
maxTeams: league.maxTeams ?? 0,
|
||||
usedTeamSlots: league.usedTeamSlots ?? 0,
|
||||
structureSummary: league.structureSummary,
|
||||
timingSummary: league.timingSummary,
|
||||
category: league.category ?? undefined,
|
||||
scoring: league.scoring ? {
|
||||
...league.scoring,
|
||||
primaryChampionshipType: league.scoring.primaryChampionshipType as 'driver' | 'team' | 'nations' | 'trophy',
|
||||
} : undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<a key={league.id} href={`/leagues/${league.id}`} className="block h-full">
|
||||
<LeagueCard league={viewModel} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Card className="text-center py-12">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Search className="w-10 h-10 text-gray-600" />
|
||||
<p className="text-gray-400">
|
||||
No leagues found{searchQuery ? ` matching "${searchQuery}"` : ' in this category'}
|
||||
</p>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setSearchQuery('');
|
||||
setActiveCategory('all');
|
||||
}}
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -521,7 +521,7 @@ export function RacesTemplate({
|
||||
{filteredRaces.length > 0 && (
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="/races/all"
|
||||
href="/races"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:border-primary-blue transition-colors"
|
||||
>
|
||||
View All Races
|
||||
|
||||
336
apps/website/templates/SponsorDashboardTemplate.tsx
Normal file
336
apps/website/templates/SponsorDashboardTemplate.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import InfoBanner from '@/components/ui/InfoBanner';
|
||||
import MetricCard from '@/components/sponsors/MetricCard';
|
||||
import SponsorshipCategoryCard from '@/components/sponsors/SponsorshipCategoryCard';
|
||||
import ActivityItem from '@/components/sponsors/ActivityItem';
|
||||
import RenewalAlert from '@/components/sponsors/RenewalAlert';
|
||||
import {
|
||||
BarChart3,
|
||||
Eye,
|
||||
Users,
|
||||
Trophy,
|
||||
TrendingUp,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
Target,
|
||||
ArrowUpRight,
|
||||
ArrowDownRight,
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
Car,
|
||||
Flag,
|
||||
Megaphone,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Bell,
|
||||
Settings,
|
||||
CreditCard,
|
||||
FileText,
|
||||
RefreshCw
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import type { SponsorDashboardViewData } from '@/lib/view-data/SponsorDashboardViewData';
|
||||
|
||||
interface SponsorDashboardTemplateProps {
|
||||
viewData: SponsorDashboardViewData;
|
||||
}
|
||||
|
||||
export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const categoryData = viewData.categoryData;
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-8 px-4">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Sponsor Dashboard</h2>
|
||||
<p className="text-gray-400">Welcome back, {viewData.sponsorName}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Time Range Selector */}
|
||||
<div className="flex items-center bg-iron-gray/50 rounded-lg p-1">
|
||||
{(['7d', '30d', '90d', 'all'] as const).map((range) => (
|
||||
<button
|
||||
key={range}
|
||||
onClick={() => {}}
|
||||
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
||||
false
|
||||
? 'bg-primary-blue text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{range === 'all' ? 'All' : range}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Button variant="secondary" className="hidden sm:flex">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
</Button>
|
||||
<Link href=routes.sponsor.settings>
|
||||
<Button variant="secondary" className="hidden sm:flex">
|
||||
<Settings className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<MetricCard
|
||||
title="Total Impressions"
|
||||
value={viewData.totalImpressions}
|
||||
change={viewData.metrics.impressionsChange}
|
||||
icon={Eye}
|
||||
delay={0}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Unique Viewers"
|
||||
value="12.5k" // Mock
|
||||
change={viewData.metrics.viewersChange}
|
||||
icon={Users}
|
||||
delay={0.1}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Engagement Rate"
|
||||
value="4.2%" // Mock
|
||||
change={viewData.metrics.exposureChange}
|
||||
icon={TrendingUp}
|
||||
suffix="%"
|
||||
delay={0.2}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Total Investment"
|
||||
value={viewData.totalInvestment}
|
||||
icon={DollarSign}
|
||||
prefix="$"
|
||||
delay={0.3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sponsorship Categories */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white">Your Sponsorships</h3>
|
||||
<Link href=routes.sponsor.campaigns>
|
||||
<Button variant="secondary" className="text-sm">
|
||||
View All
|
||||
<ChevronRight className="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
|
||||
<SponsorshipCategoryCard
|
||||
icon={Trophy}
|
||||
title="Leagues"
|
||||
count={categoryData.leagues.count}
|
||||
impressions={categoryData.leagues.impressions}
|
||||
color="text-primary-blue"
|
||||
href="/sponsor/campaigns?type=leagues"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Users}
|
||||
title="Teams"
|
||||
count={categoryData.teams.count}
|
||||
impressions={categoryData.teams.impressions}
|
||||
color="text-purple-400"
|
||||
href="/sponsor/campaigns?type=teams"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Car}
|
||||
title="Drivers"
|
||||
count={categoryData.drivers.count}
|
||||
impressions={categoryData.drivers.impressions}
|
||||
color="text-performance-green"
|
||||
href="/sponsor/campaigns?type=drivers"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Flag}
|
||||
title="Races"
|
||||
count={categoryData.races.count}
|
||||
impressions={categoryData.races.impressions}
|
||||
color="text-warning-amber"
|
||||
href="/sponsor/campaigns?type=races"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Megaphone}
|
||||
title="Platform Ads"
|
||||
count={categoryData.platform.count}
|
||||
impressions={categoryData.platform.impressions}
|
||||
color="text-racing-red"
|
||||
href="/sponsor/campaigns?type=platform"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Sponsored Entities */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Top Performing Sponsorships */}
|
||||
<Card>
|
||||
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
|
||||
<h3 className="text-lg font-semibold text-white">Top Performing</h3>
|
||||
<Link href="/leagues">
|
||||
<Button variant="secondary" className="text-sm">
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
Find More
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{/* Mock data for now */}
|
||||
<div className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="px-2 py-1 rounded text-xs font-medium bg-primary-blue/20 text-primary-blue border border-primary-blue/30">
|
||||
Main
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gray-500" />
|
||||
<span className="font-medium text-white">Sample League</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">Sample details</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-white">1.2k</div>
|
||||
<div className="text-xs text-gray-500">impressions</div>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-xs">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<Card>
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-warning-amber" />
|
||||
Upcoming Sponsored Events
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No upcoming sponsored events</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Activity & Quick Actions */}
|
||||
<div className="space-y-6">
|
||||
{/* Quick Actions */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
|
||||
<div className="space-y-2">
|
||||
<Link href="/leagues" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<Target className="w-4 h-4 mr-2" />
|
||||
Find Leagues to Sponsor
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/teams" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Browse Teams
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/drivers" className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<Car className="w-4 h-4 mr-2" />
|
||||
Discover Drivers
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href=routes.sponsor.billing className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<CreditCard className="w-4 h-4 mr-2" />
|
||||
Manage Billing
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href=routes.sponsor.campaigns className="block">
|
||||
<Button variant="secondary" className="w-full justify-start">
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
View Analytics
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Renewal Alerts */}
|
||||
{viewData.upcomingRenewals.length > 0 && (
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Bell className="w-5 h-5 text-warning-amber" />
|
||||
Upcoming Renewals
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{viewData.upcomingRenewals.map((renewal: any) => (
|
||||
<RenewalAlert key={renewal.id} renewal={renewal} />
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
|
||||
<div>
|
||||
{viewData.recentActivity.map((activity: any) => (
|
||||
<ActivityItem key={activity.id} activity={activity} />
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Investment Summary */}
|
||||
<Card className="p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-primary-blue" />
|
||||
Investment Summary
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Active Sponsorships</span>
|
||||
<span className="font-medium text-white">{viewData.activeSponsorships}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Total Investment</span>
|
||||
<span className="font-medium text-white">{viewData.formattedTotalInvestment}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Cost per 1K Views</span>
|
||||
<span className="font-medium text-performance-green">
|
||||
{viewData.costPerThousandViews}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-400">Next Invoice</span>
|
||||
<span className="font-medium text-white">Jan 1, 2026</span>
|
||||
</div>
|
||||
<div className="pt-3 border-t border-charcoal-outline">
|
||||
<Link href=routes.sponsor.billing>
|
||||
<Button variant="secondary" className="w-full text-sm">
|
||||
<CreditCard className="w-4 h-4 mr-2" />
|
||||
View Billing Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -111,9 +111,9 @@ export function SponsorLeagueDetailTemplate({ data }: SponsorLeagueDetailTemplat
|
||||
<div className="max-w-7xl mx-auto py-8 px-4">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
|
||||
<Link href="/sponsor/dashboard" className="hover:text-white transition-colors">Dashboard</Link>
|
||||
<Link href=routes.sponsor.dashboard className="hover:text-white transition-colors">Dashboard</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<Link href="/sponsor/leagues" className="hover:text-white transition-colors">Leagues</Link>
|
||||
<Link href=routes.sponsor.leagues className="hover:text-white transition-colors">Leagues</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<span className="text-white">{league.name}</span>
|
||||
</div>
|
||||
|
||||
@@ -247,7 +247,7 @@ export function SponsorLeaguesTemplate({ data }: SponsorLeaguesTemplateProps) {
|
||||
<div className="max-w-7xl mx-auto py-8 px-4">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
|
||||
<Link href="/sponsor/dashboard" className="hover:text-white transition-colors">Dashboard</Link>
|
||||
<Link href=routes.sponsor.dashboard className="hover:text-white transition-colors">Dashboard</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<span className="text-white">Browse Leagues</span>
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@ export function TeamsTemplate({ teams }: TeamsTemplateProps) {
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Teams</h1>
|
||||
<p className="text-gray-400">Browse and manage your racing teams</p>
|
||||
</div>
|
||||
<Link href="/teams/create">
|
||||
<Link href=routes.team.detail('create')>
|
||||
<Button variant="primary">Create Team</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -82,7 +82,7 @@ export function TeamsTemplate({ teams }: TeamsTemplateProps) {
|
||||
<Users className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-white mb-2">No teams yet</h3>
|
||||
<p className="text-gray-400 mb-4">Get started by creating your first racing team</p>
|
||||
<Link href="/teams/create">
|
||||
<Link href=routes.team.detail('create')>
|
||||
<Button variant="primary">Create Team</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -27,7 +27,7 @@ import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPas
|
||||
interface ForgotPasswordTemplateProps {
|
||||
viewData: ForgotPasswordViewData;
|
||||
formActions: {
|
||||
setFormData: React.Dispatch<React.SetStateAction<{ email: string }>>;
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
setShowSuccess: (show: boolean) => void;
|
||||
};
|
||||
@@ -77,7 +77,7 @@ export function ForgotPasswordTemplate({ viewData, formActions, mutationState }:
|
||||
id="email"
|
||||
type="email"
|
||||
value={viewData.formState.fields.email.value}
|
||||
onChange={(e) => formActions.setFormData({ email: e.target.value })}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.email.error}
|
||||
errorMessage={viewData.formState.fields.email.error}
|
||||
placeholder="you@example.com"
|
||||
|
||||
@@ -28,7 +28,7 @@ import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPassw
|
||||
|
||||
interface ResetPasswordTemplateProps extends ResetPasswordViewData {
|
||||
formActions: {
|
||||
setFormData: React.Dispatch<React.SetStateAction<{ newPassword: string; confirmPassword: string }>>;
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
setShowSuccess: (show: boolean) => void;
|
||||
setShowPassword: (show: boolean) => void;
|
||||
@@ -87,7 +87,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
name="newPassword"
|
||||
type={uiState.showPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.newPassword.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, newPassword: e.target.value }))}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.newPassword.error}
|
||||
errorMessage={viewData.formState.fields.newPassword.error}
|
||||
placeholder="••••••••"
|
||||
@@ -117,7 +117,7 @@ export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
name="confirmPassword"
|
||||
type={uiState.showConfirmPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.confirmPassword.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.confirmPassword.error}
|
||||
errorMessage={viewData.formState.fields.confirmPassword.error}
|
||||
placeholder="••••••••"
|
||||
|
||||
@@ -37,7 +37,7 @@ import { checkPasswordStrength } from '@/lib/utils/validation';
|
||||
interface SignupTemplateProps {
|
||||
viewData: SignupViewData;
|
||||
formActions: {
|
||||
setFormData: React.Dispatch<React.SetStateAction<{ firstName: string; lastName: string; email: string; password: string; confirmPassword: string }>>;
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
setShowPassword: (show: boolean) => void;
|
||||
setShowConfirmPassword: (show: boolean) => void;
|
||||
@@ -213,7 +213,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
|
||||
name="firstName"
|
||||
type="text"
|
||||
value={viewData.formState.fields.firstName.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, firstName: e.target.value }))}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.firstName.error}
|
||||
errorMessage={viewData.formState.fields.firstName.error}
|
||||
placeholder="John"
|
||||
@@ -236,7 +236,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
|
||||
name="lastName"
|
||||
type="text"
|
||||
value={viewData.formState.fields.lastName.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, lastName: e.target.value }))}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.lastName.error}
|
||||
errorMessage={viewData.formState.fields.lastName.error}
|
||||
placeholder="Smith"
|
||||
@@ -268,7 +268,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
|
||||
name="email"
|
||||
type="email"
|
||||
value={viewData.formState.fields.email.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.email.error}
|
||||
errorMessage={viewData.formState.fields.email.error}
|
||||
placeholder="you@example.com"
|
||||
@@ -291,7 +291,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
|
||||
name="password"
|
||||
type={uiState.showPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.password.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, password: e.target.value }))}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.password.error}
|
||||
errorMessage={viewData.formState.fields.password.error}
|
||||
placeholder="••••••••"
|
||||
@@ -359,7 +359,7 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
|
||||
name="confirmPassword"
|
||||
type={uiState.showConfirmPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.confirmPassword.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.confirmPassword.error}
|
||||
errorMessage={viewData.formState.fields.confirmPassword.error}
|
||||
placeholder="••••••••"
|
||||
|
||||
Reference in New Issue
Block a user