184 lines
9.7 KiB
TypeScript
184 lines
9.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Flag, AlertCircle, Calendar, MapPin, Gavel } from 'lucide-react';
|
|
import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
|
|
|
|
interface StewardingTemplateProps {
|
|
viewData: StewardingViewData;
|
|
}
|
|
|
|
export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
|
|
return (
|
|
<Stack gap={6}>
|
|
<Card>
|
|
<Stack gap={6}>
|
|
<Box>
|
|
<Heading level={1}>Stewarding</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
Quick overview of protests and penalties across all races
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Stats summary */}
|
|
<Grid cols={3} gap={4}>
|
|
<StatItem label="Pending" value={viewData.totalPending} color="#f59e0b" />
|
|
<StatItem label="Resolved" value={viewData.totalResolved} color="#10b981" />
|
|
<StatItem label="Penalties" value={viewData.totalPenalties} color="#ef4444" />
|
|
</Grid>
|
|
|
|
{/* Content */}
|
|
{viewData.races.length === 0 ? (
|
|
<Stack align="center" py={12} gap={4}>
|
|
<Surface variant="muted" rounded="full" padding={4}>
|
|
<Icon icon={Flag} size={8} color="#10b981" />
|
|
</Surface>
|
|
<Box style={{ textAlign: 'center' }}>
|
|
<Text weight="semibold" size="lg" color="text-white" block mb={1}>All Clear!</Text>
|
|
<Text size="sm" color="text-gray-400">No protests or penalties to review.</Text>
|
|
</Box>
|
|
</Stack>
|
|
) : (
|
|
<Stack gap={4}>
|
|
{viewData.races.map((race) => (
|
|
<Surface
|
|
key={race.id}
|
|
variant="muted"
|
|
rounded="lg"
|
|
border
|
|
style={{ overflow: 'hidden', borderColor: '#262626' }}
|
|
>
|
|
{/* Race Header */}
|
|
<Box p={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderBottom: '1px solid #262626' }}>
|
|
<Stack direction="row" align="center" gap={4} wrap>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={MapPin} size={4} color="#9ca3af" />
|
|
<Text weight="medium" color="text-white">{race.track}</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Calendar} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-400">{new Date(race.scheduledAt).toLocaleDateString()}</Text>
|
|
</Stack>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
|
<Text size="xs" weight="medium" color="text-warning-amber">{race.pendingProtests.length} pending</Text>
|
|
</Surface>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Race Content */}
|
|
<Box p={4}>
|
|
{race.pendingProtests.length === 0 && race.resolvedProtests.length === 0 && race.penalties.length === 0 ? (
|
|
<Box py={4}>
|
|
<Text size="sm" color="text-gray-400" block style={{ textAlign: 'center' }}>No items to display</Text>
|
|
</Box>
|
|
) : (
|
|
<Stack gap={3}>
|
|
{race.pendingProtests.map((protest) => {
|
|
const protester = viewData.drivers.find(d => d.id === protest.protestingDriverId);
|
|
const accused = viewData.drivers.find(d => d.id === protest.accusedDriverId);
|
|
|
|
return (
|
|
<Surface
|
|
key={protest.id}
|
|
variant="muted"
|
|
rounded="lg"
|
|
border
|
|
padding={4}
|
|
style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}
|
|
>
|
|
<Stack direction="row" align="start" justify="between" gap={4}>
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Stack direction="row" align="center" gap={2} mb={2} wrap>
|
|
<Icon icon={AlertCircle} size={4} color="#f59e0b" />
|
|
<Text weight="medium" color="text-white">
|
|
{protester?.name || 'Unknown'} vs {accused?.name || 'Unknown'}
|
|
</Text>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
|
<Text size="xs" weight="medium" color="text-warning-amber">Pending</Text>
|
|
</Surface>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={4} mb={2}>
|
|
<Text size="sm" color="text-gray-400">Lap {protest.incident.lap}</Text>
|
|
<Text size="sm" color="text-gray-400">•</Text>
|
|
<Text size="sm" color="text-gray-400">Filed {new Date(protest.filedAt).toLocaleDateString()}</Text>
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-300" block truncate>{protest.incident.description}</Text>
|
|
</Box>
|
|
<Text size="sm" color="text-gray-500">Review needed</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
})}
|
|
|
|
{race.penalties.map((penalty) => {
|
|
const driver = viewData.drivers.find(d => d.id === penalty.driverId);
|
|
return (
|
|
<Surface
|
|
key={penalty.id}
|
|
variant="muted"
|
|
rounded="lg"
|
|
border
|
|
padding={4}
|
|
style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}
|
|
>
|
|
<Stack direction="row" align="center" justify="between" gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="full" padding={2} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)' }}>
|
|
<Icon icon={Gavel} size={4} color="#ef4444" />
|
|
</Surface>
|
|
<Box>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Text weight="medium" color="text-white">{driver?.name || 'Unknown'}</Text>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
|
<Text size="xs" weight="medium" color="text-error-red" style={{ textTransform: 'capitalize' }}>
|
|
{penalty.type.replace('_', ' ')}
|
|
</Text>
|
|
</Surface>
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>{penalty.reason}</Text>
|
|
</Box>
|
|
</Stack>
|
|
<Box style={{ textAlign: 'right' }}>
|
|
<Text weight="bold" color="text-error-red" style={{ fontSize: '1.125rem' }}>
|
|
{penalty.type === 'time_penalty' && `+${penalty.value}s`}
|
|
{penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
|
|
{penalty.type === 'points_deduction' && `-${penalty.value} pts`}
|
|
{penalty.type === 'disqualification' && 'DSQ'}
|
|
{penalty.type === 'warning' && 'Warning'}
|
|
{penalty.type === 'license_points' && `${penalty.value} LP`}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
})}
|
|
</Stack>
|
|
)}
|
|
</Box>
|
|
</Surface>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function StatItem({ label, value, color }: { label: string, value: string | number, color: string }) {
|
|
return (
|
|
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626', textAlign: 'center' }}>
|
|
<Text size="2xl" weight="bold" style={{ color }}>{value}</Text>
|
|
<Text size="sm" color="text-gray-500" block mt={1}>{label}</Text>
|
|
</Surface>
|
|
);
|
|
}
|