website refactor
This commit is contained in:
@@ -1,9 +1,16 @@
|
||||
/* eslint-disable gridpilot-rules/no-raw-html-in-app */
|
||||
'use client';
|
||||
|
||||
import { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
|
||||
import React from 'react';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Section } from '@/ui/Section';
|
||||
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;
|
||||
@@ -11,146 +18,166 @@ interface StewardingTemplateProps {
|
||||
|
||||
export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
|
||||
return (
|
||||
<Section>
|
||||
<Stack gap={6}>
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white">Stewarding</h2>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
<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
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Stats summary */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline text-center">
|
||||
<div className="text-2xl font-bold text-warning-amber">{viewData.totalPending}</div>
|
||||
<div className="text-sm text-gray-400">Pending</div>
|
||||
</div>
|
||||
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline text-center">
|
||||
<div className="text-2xl font-bold text-performance-green">{viewData.totalResolved}</div>
|
||||
<div className="text-sm text-gray-400">Resolved</div>
|
||||
</div>
|
||||
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline text-center">
|
||||
<div className="text-2xl font-bold text-red-400">{viewData.totalPenalties}</div>
|
||||
<div className="text-sm text-gray-400">Penalties</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 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 ? (
|
||||
<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">
|
||||
<Flag className="w-8 h-8 text-performance-green" />
|
||||
</div>
|
||||
<p className="font-semibold text-lg text-white mb-2">All Clear!</p>
|
||||
<p className="text-sm text-gray-400">No protests or penalties to review.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{viewData.races.map((race) => (
|
||||
<div key={race.id} className="rounded-lg border border-charcoal-outline overflow-hidden">
|
||||
{/* Race Header */}
|
||||
<div className="px-4 py-3 bg-iron-gray/30">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4 text-gray-400" />
|
||||
<span className="font-medium text-white">{race.track}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-400 text-sm">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>{new Date(race.scheduledAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
|
||||
{race.pendingProtests.length} pending
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 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 */}
|
||||
<div className="p-4 space-y-3 bg-deep-graphite/50">
|
||||
{race.pendingProtests.length === 0 && race.resolvedProtests.length === 0 && race.penalties.length === 0 ? (
|
||||
<p className="text-sm text-gray-400 text-center py-4">No items to display</p>
|
||||
) : (
|
||||
<>
|
||||
{race.pendingProtests.map((protest) => {
|
||||
const protester = viewData.drivers.find(d => d.id === protest.protestingDriverId);
|
||||
const accused = viewData.drivers.find(d => d.id === protest.accusedDriverId);
|
||||
{/* 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 (
|
||||
<div
|
||||
key={protest.id}
|
||||
className="rounded-lg border border-charcoal-outline bg-iron-gray/30 p-4"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertCircle className="w-4 h-4 text-warning-amber flex-shrink-0" />
|
||||
<span className="font-medium text-white">
|
||||
{protester?.name || 'Unknown'} vs {accused?.name || 'Unknown'}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">Pending</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
|
||||
<span>Lap {protest.incident.lap}</span>
|
||||
<span>•</span>
|
||||
<span>Filed {new Date(protest.filedAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 line-clamp-2">
|
||||
{protest.incident.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Review needed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
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 (
|
||||
<div
|
||||
key={penalty.id}
|
||||
className="rounded-lg border border-charcoal-outline bg-iron-gray/30 p-4"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
|
||||
<Gavel className="w-4 h-4 text-red-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-white">{driver?.name || 'Unknown'}</span>
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
|
||||
{penalty.type.replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">{penalty.reason}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-lg font-bold text-red-400">
|
||||
{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`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{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>
|
||||
</Section>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user