mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-16 01:00:03 +01:00
parent ce7be39155
commit a98e3e3166
286 changed files with 5522 additions and 5261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/templates/DriverProfileTemplate.tsx
View File

@@ -21,7 +21,7 @@ import {
ArrowLeft,
} from 'lucide-react';
import React from 'react';
import type { DriverProfileViewData } from '../../../lib/types/view-data/DriverProfileViewData';
import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
interface DriverProfileTemplateProps {
viewData: DriverProfileViewData;

107
apps/website/templates/LeagueWalletTemplate.tsx
View File

@@ -1,107 +0,0 @@
'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 { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Wallet, Calendar, DollarSign } from 'lucide-react';
import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { TransactionRow } from '@/components/leagues/TransactionRow';
import { LeagueMembershipFeesSection } from '@/components/leagues/LeagueMembershipFeesSection';
interface LeagueWalletTemplateProps {
viewData: LeagueWalletViewData;
}
export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
return (
<Stack gap={6}>
<Box>
<Heading level={2}>League Wallet</Heading>
<Text size="sm" color="text-gray-400" block mt={1}>
Financial overview and transaction history
</Text>
</Box>
<Stack gap={6}>
{/* Balance Card */}
<Card>
<Stack direction="row" align="center" gap={4}>
<Surface variant="muted" rounded="xl" padding={3} bg="bg-blue-500/10">
<Icon icon={Wallet} size={6} color="#3b82f6" />
</Surface>
<Box>
<Text size="sm" color="text-gray-400" block>Current Balance</Text>
<Text size="3xl" weight="bold" color="text-white">
{viewData.formattedBalance}
</Text>
</Box>
</Stack>
</Card>
{/* Transaction History */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} bg="bg-amber-500/10">
<Icon icon={Calendar} size={5} color="#10b981" />
</Surface>
<Box>
<Heading level={3}>Transaction History</Heading>
<Text size="sm" color="text-gray-400">Recent financial activity</Text>
</Box>
</Stack>
{viewData.transactions.length === 0 ? (
<Stack align="center" py={8} gap={4}>
<Icon icon={Wallet} size={12} color="#525252" />
<Text color="text-gray-400">No transactions yet</Text>
</Stack>
) : (
<Stack gap={3}>
{viewData.transactions.map((transaction) => (
<TransactionRow key={transaction.id} transaction={transaction} />
))}
</Stack>
)}
</Stack>
</Card>
{/* Membership Fees */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} bg="bg-green-500/10">
<Icon icon={DollarSign} size={5} color="#10b981" />
</Surface>
<Box>
<Heading level={3}>Membership Fees</Heading>
<Text size="sm" color="text-gray-400">Configure how drivers pay for participation</Text>
</Box>
</Stack>
<LeagueMembershipFeesSection leagueId={viewData.leagueId} />
</Stack>
</Card>
{/* Note about features */}
<Card>
<Stack align="center" py={8} gap={4}>
<Surface variant="muted" rounded="full" padding={4} bg="bg-blue-500/10">
<Icon icon={Wallet} size={8} color="#3b82f6" />
</Surface>
<Box textAlign="center">
<Heading level={3}>Wallet Management</Heading>
<Text size="sm" color="text-gray-400" block mt={2}>
Interactive withdrawal and export features will be implemented in future updates.
</Text>
</Box>
</Stack>
</Card>
</Stack>
</Stack>
);
}

188
apps/website/templates/StewardingTemplate.tsx
View File

@@ -1,188 +0,0 @@
'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="text-warning-amber" />
<StatItem label="Resolved" value={viewData.totalResolved} color="text-performance-green" />
<StatItem label="Penalties" value={viewData.totalPenalties} color="text-error-red" />
</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 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
borderColor="border-neutral-800"
overflow="hidden"
>
{/* Race Header */}
<Box p={4} bg="bg-neutral-800/50" borderBottom="1px solid" borderColor="border-neutral-800">
<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} bg="bg-amber-500/10" px={2}>
<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 align="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}
bg="bg-neutral-800/30"
borderColor="border-neutral-800"
>
<Stack direction="row" align="start" justify="between" gap={4}>
<Box 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} bg="bg-amber-500/10" px={2}>
<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}
bg="bg-neutral-800/30"
borderColor="border-neutral-800"
>
<Stack direction="row" align="center" justify="between" gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="full" padding={2} bg="bg-red-500/10">
<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} bg="bg-red-500/10" px={2}>
<Text size="xs" weight="medium" color="text-error-red">
{penalty.type.replace('_', ' ').toUpperCase()}
</Text>
</Surface>
</Stack>
<Text size="sm" color="text-gray-400" block mt={1}>{penalty.reason}</Text>
</Box>
</Stack>
<Box textAlign="right">
<Text weight="bold" color="text-error-red" size="lg">
{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} bg="bg-neutral-800/50" borderColor="border-neutral-800">
<Box textAlign="center">
<Text size="2xl" weight="bold" color={color}>{value}</Text>
<Text size="sm" color="text-gray-400" block mt={1}>{label}</Text>
</Box>
</Surface>
);
}