416 lines
14 KiB
TypeScript
416 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Heading from '@/components/ui/Heading';
|
|
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
|
import {
|
|
Calendar,
|
|
Clock,
|
|
Flag,
|
|
ChevronRight,
|
|
ChevronLeft,
|
|
Car,
|
|
Trophy,
|
|
Zap,
|
|
PlayCircle,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Search,
|
|
SlidersHorizontal,
|
|
} from 'lucide-react';
|
|
import { RaceFilterModal } from '@/components/races/RaceFilterModal';
|
|
import { RacePagination } from '@/components/races/RacePagination';
|
|
|
|
export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
|
|
|
|
export interface Race {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
scheduledAt: string;
|
|
status: 'scheduled' | 'running' | 'completed' | 'cancelled';
|
|
sessionType: string;
|
|
leagueId?: string;
|
|
leagueName?: string;
|
|
strengthOfField?: number | null;
|
|
}
|
|
|
|
export interface RacesAllTemplateProps {
|
|
races: Race[];
|
|
isLoading: boolean;
|
|
// Pagination
|
|
currentPage: number;
|
|
totalPages: number;
|
|
itemsPerPage: number;
|
|
onPageChange: (page: number) => void;
|
|
// Filters
|
|
statusFilter: StatusFilter;
|
|
setStatusFilter: (filter: StatusFilter) => void;
|
|
leagueFilter: string;
|
|
setLeagueFilter: (filter: string) => void;
|
|
searchQuery: string;
|
|
setSearchQuery: (query: string) => void;
|
|
// UI State
|
|
showFilters: boolean;
|
|
setShowFilters: (show: boolean) => void;
|
|
showFilterModal: boolean;
|
|
setShowFilterModal: (show: boolean) => void;
|
|
// Actions
|
|
onRaceClick: (raceId: string) => void;
|
|
onLeagueClick: (leagueId: string) => void;
|
|
}
|
|
|
|
export function RacesAllTemplate({
|
|
races,
|
|
isLoading,
|
|
currentPage,
|
|
totalPages,
|
|
itemsPerPage,
|
|
onPageChange,
|
|
statusFilter,
|
|
setStatusFilter,
|
|
leagueFilter,
|
|
setLeagueFilter,
|
|
searchQuery,
|
|
setSearchQuery,
|
|
showFilters,
|
|
setShowFilters,
|
|
showFilterModal,
|
|
setShowFilterModal,
|
|
onRaceClick,
|
|
onLeagueClick,
|
|
}: RacesAllTemplateProps) {
|
|
// Filter races
|
|
const filteredRaces = useMemo(() => {
|
|
return races.filter(race => {
|
|
if (statusFilter !== 'all' && race.status !== statusFilter) {
|
|
return false;
|
|
}
|
|
|
|
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
|
|
return false;
|
|
}
|
|
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
const matchesTrack = race.track.toLowerCase().includes(query);
|
|
const matchesCar = race.car.toLowerCase().includes(query);
|
|
const matchesLeague = race.leagueName?.toLowerCase().includes(query);
|
|
if (!matchesTrack && !matchesCar && !matchesLeague) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
});
|
|
}, [races, statusFilter, leagueFilter, searchQuery]);
|
|
|
|
// Paginate
|
|
const paginatedRaces = useMemo(() => {
|
|
const start = (currentPage - 1) * itemsPerPage;
|
|
return filteredRaces.slice(start, start + itemsPerPage);
|
|
}, [filteredRaces, currentPage, itemsPerPage]);
|
|
|
|
// Reset page when filters change
|
|
useEffect(() => {
|
|
onPageChange(1);
|
|
}, [statusFilter, leagueFilter, searchQuery]);
|
|
|
|
const formatDate = (date: Date | string) => {
|
|
const d = typeof date === 'string' ? new Date(date) : date;
|
|
return d.toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
};
|
|
|
|
const formatTime = (date: Date | string) => {
|
|
const d = typeof date === 'string' ? new Date(date) : date;
|
|
return d.toLocaleTimeString('en-US', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
const statusConfig = {
|
|
scheduled: {
|
|
icon: Clock,
|
|
color: 'text-primary-blue',
|
|
bg: 'bg-primary-blue/10',
|
|
border: 'border-primary-blue/30',
|
|
label: 'Scheduled',
|
|
},
|
|
running: {
|
|
icon: PlayCircle,
|
|
color: 'text-performance-green',
|
|
bg: 'bg-performance-green/10',
|
|
border: 'border-performance-green/30',
|
|
label: 'LIVE',
|
|
},
|
|
completed: {
|
|
icon: CheckCircle2,
|
|
color: 'text-gray-400',
|
|
bg: 'bg-gray-500/10',
|
|
border: 'border-gray-500/30',
|
|
label: 'Completed',
|
|
},
|
|
cancelled: {
|
|
icon: XCircle,
|
|
color: 'text-warning-amber',
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30',
|
|
label: 'Cancelled',
|
|
},
|
|
};
|
|
|
|
const breadcrumbItems = [
|
|
{ label: 'Races', href: '/races' },
|
|
{ label: 'All Races' },
|
|
];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="animate-pulse space-y-6">
|
|
<div className="h-6 bg-iron-gray rounded w-1/4" />
|
|
<div className="h-10 bg-iron-gray rounded w-1/3" />
|
|
<div className="space-y-4">
|
|
{[1, 2, 3, 4, 5].map(i => (
|
|
<div key={i} className="h-24 bg-iron-gray rounded-lg" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-5xl mx-auto space-y-6">
|
|
{/* Breadcrumbs */}
|
|
<Breadcrumbs items={breadcrumbItems} />
|
|
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<Heading level={1} className="text-2xl font-bold text-white flex items-center gap-3">
|
|
<Flag className="w-6 h-6 text-primary-blue" />
|
|
All Races
|
|
</Heading>
|
|
<p className="text-gray-400 text-sm mt-1">
|
|
{filteredRaces.length} race{filteredRaces.length !== 1 ? 's' : ''} found
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<SlidersHorizontal className="w-4 h-4" />
|
|
Filters
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Search & Filters */}
|
|
<Card className={`!p-4 ${showFilters ? '' : 'hidden sm:block'}`}>
|
|
<div className="space-y-4">
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Search by track, car, or league..."
|
|
className="w-full pl-10 pr-4 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
|
|
/>
|
|
</div>
|
|
|
|
{/* Filter Row */}
|
|
<div className="flex flex-wrap gap-4">
|
|
{/* Status Filter */}
|
|
<select
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
|
|
className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
|
|
>
|
|
<option value="all">All Statuses</option>
|
|
<option value="scheduled">Scheduled</option>
|
|
<option value="running">Live</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
|
|
{/* League Filter */}
|
|
<select
|
|
value={leagueFilter}
|
|
onChange={(e) => setLeagueFilter(e.target.value)}
|
|
className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
|
|
>
|
|
<option value="all">All Leagues</option>
|
|
{races && [...new Set(races.map(r => r.leagueId))].filter(Boolean).map(leagueId => {
|
|
const race = races.find(r => r.leagueId === leagueId);
|
|
return race ? (
|
|
<option key={leagueId} value={leagueId}>
|
|
{race.leagueName}
|
|
</option>
|
|
) : null;
|
|
})}
|
|
</select>
|
|
|
|
{/* Clear Filters */}
|
|
{(statusFilter !== 'all' || leagueFilter !== 'all' || searchQuery) && (
|
|
<button
|
|
onClick={() => {
|
|
setStatusFilter('all');
|
|
setLeagueFilter('all');
|
|
setSearchQuery('');
|
|
}}
|
|
className="px-4 py-2 text-sm text-primary-blue hover:underline"
|
|
>
|
|
Clear filters
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Race List */}
|
|
{paginatedRaces.length === 0 ? (
|
|
<Card className="text-center py-12">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="p-4 bg-iron-gray rounded-full">
|
|
<Calendar className="w-8 h-8 text-gray-500" />
|
|
</div>
|
|
<div>
|
|
<p className="text-white font-medium mb-1">No races found</p>
|
|
<p className="text-sm text-gray-500">
|
|
{races.length === 0
|
|
? 'No races have been scheduled yet'
|
|
: 'Try adjusting your search or filters'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{paginatedRaces.map(race => {
|
|
const config = statusConfig[race.status as keyof typeof statusConfig];
|
|
const StatusIcon = config.icon;
|
|
|
|
return (
|
|
<div
|
|
key={race.id}
|
|
onClick={() => onRaceClick(race.id)}
|
|
className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
|
|
>
|
|
{/* Live indicator */}
|
|
{race.status === 'running' && (
|
|
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
|
|
)}
|
|
|
|
<div className="flex items-center gap-4">
|
|
{/* Date Column */}
|
|
<div className="hidden sm:flex flex-col items-center min-w-[80px] text-center">
|
|
<p className="text-xs text-gray-500 uppercase">
|
|
{new Date(race.scheduledAt).toLocaleDateString('en-US', { month: 'short' })}
|
|
</p>
|
|
<p className="text-2xl font-bold text-white">
|
|
{new Date(race.scheduledAt).getDate()}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
{formatTime(race.scheduledAt)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="hidden sm:block w-px h-16 bg-charcoal-outline" />
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0">
|
|
<h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
|
|
{race.track}
|
|
</h3>
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1">
|
|
<span className="flex items-center gap-1.5 text-sm text-gray-400">
|
|
<Car className="w-3.5 h-3.5" />
|
|
{race.car}
|
|
</span>
|
|
{race.strengthOfField && (
|
|
<span className="flex items-center gap-1.5 text-sm text-warning-amber">
|
|
<Zap className="w-3.5 h-3.5" />
|
|
SOF {race.strengthOfField}
|
|
</span>
|
|
)}
|
|
<span className="sm:hidden text-sm text-gray-500">
|
|
{formatDate(race.scheduledAt)}
|
|
</span>
|
|
</div>
|
|
<Link
|
|
href={`/leagues/${race.leagueId}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="inline-flex items-center gap-1.5 mt-2 text-sm text-primary-blue hover:underline"
|
|
>
|
|
<Trophy className="w-3.5 h-3.5" />
|
|
{race.leagueName}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Status Badge */}
|
|
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border flex-shrink-0`}>
|
|
<StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
|
|
<span className={`text-xs font-medium ${config.color}`}>
|
|
{config.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Arrow */}
|
|
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
<RacePagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
totalItems={filteredRaces.length}
|
|
itemsPerPage={itemsPerPage}
|
|
onPageChange={onPageChange}
|
|
/>
|
|
|
|
{/* Filter Modal */}
|
|
<RaceFilterModal
|
|
isOpen={showFilterModal}
|
|
onClose={() => setShowFilterModal(false)}
|
|
statusFilter={statusFilter}
|
|
setStatusFilter={setStatusFilter}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
timeFilter="all"
|
|
setTimeFilter={() => {}}
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
leagues={[...new Set(races.map(r => ({ id: r.leagueId || '', name: r.leagueName || '' })))]}
|
|
showSearch={true}
|
|
showTimeFilter={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |