414 lines
16 KiB
TypeScript
414 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
|
|
import { Checkbox } from '@/ui/Checkbox';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Select } from '@/ui/Select';
|
|
import { Text } from '@/ui/Text';
|
|
import { AlertTriangle, Bell, Clock, Scale, Shield, Vote } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface LeagueStewardingSectionProps {
|
|
form: LeagueConfigFormModel;
|
|
onChange: (form: LeagueConfigFormModel) => void;
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
type DecisionModeOption = {
|
|
value: NonNullable<LeagueConfigFormModel['stewarding']>['decisionMode'];
|
|
label: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
requiresVotes: boolean;
|
|
};
|
|
|
|
const decisionModeOptions: DecisionModeOption[] = [
|
|
{
|
|
value: 'single_steward',
|
|
label: 'Single Steward',
|
|
description: 'A single steward/admin makes all penalty decisions',
|
|
icon: <Icon icon={Shield} size={5} />,
|
|
requiresVotes: false,
|
|
},
|
|
{
|
|
value: 'committee_vote',
|
|
label: 'Committee Vote',
|
|
description: 'A group votes to uphold/dismiss protests',
|
|
icon: <Icon icon={Scale} size={5} />,
|
|
requiresVotes: true,
|
|
},
|
|
];
|
|
|
|
export function LeagueStewardingSection({
|
|
form,
|
|
onChange,
|
|
readOnly = false,
|
|
}: LeagueStewardingSectionProps) {
|
|
// Provide default stewarding settings if not present
|
|
const stewarding = form.stewarding ?? {
|
|
decisionMode: 'single_steward' as const,
|
|
requiredVotes: 2,
|
|
requireDefense: false,
|
|
defenseTimeLimit: 48,
|
|
voteTimeLimit: 72,
|
|
protestDeadlineHours: 48,
|
|
stewardingClosesHours: 168,
|
|
notifyAccusedOnProtest: true,
|
|
notifyOnVoteRequired: true,
|
|
};
|
|
|
|
const updateStewarding = (updates: Partial<NonNullable<LeagueConfigFormModel['stewarding']>>) => {
|
|
onChange({
|
|
...form,
|
|
stewarding: {
|
|
...stewarding,
|
|
...updates,
|
|
},
|
|
});
|
|
};
|
|
|
|
const selectedMode = decisionModeOptions.find((m) => m.value === stewarding.decisionMode);
|
|
|
|
return (
|
|
<Stack gap={8}>
|
|
{/* Decision Mode Selection */}
|
|
<Stack>
|
|
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Scale} size={4} color="text-primary-blue" />
|
|
How are protest decisions made?
|
|
</Stack>
|
|
</Heading>
|
|
<Text size="xs" color="text-gray-400" mb={4} block>
|
|
Choose who has the authority to issue penalties
|
|
</Text>
|
|
|
|
<Stack display="grid" gridCols={{ base: 1, sm: 2, lg: 3 }} gap={3}>
|
|
{decisionModeOptions.map((option) => (
|
|
<Stack
|
|
key={option.value}
|
|
as="button"
|
|
type="button"
|
|
disabled={readOnly}
|
|
onClick={() => updateStewarding({ decisionMode: option.value })}
|
|
position="relative"
|
|
display="flex"
|
|
flexDirection="col"
|
|
alignItems="start"
|
|
gap={2}
|
|
p={4}
|
|
rounded="xl"
|
|
border
|
|
borderWidth="2px"
|
|
transition
|
|
textAlign="left"
|
|
borderColor={stewarding.decisionMode === option.value ? 'border-primary-blue' : 'border-charcoal-outline'}
|
|
bg={stewarding.decisionMode === option.value ? 'bg-primary-blue/5' : 'bg-iron-gray/30'}
|
|
shadow={stewarding.decisionMode === option.value ? '0_0_16px_rgba(25,140,255,0.15)' : undefined}
|
|
hoverBorderColor={!readOnly && stewarding.decisionMode !== option.value ? 'border-gray-500' : undefined}
|
|
opacity={readOnly ? 0.6 : 1}
|
|
cursor={readOnly ? 'not-allowed' : 'pointer'}
|
|
>
|
|
<Stack
|
|
p={2}
|
|
rounded="lg"
|
|
bg={stewarding.decisionMode === option.value ? 'bg-primary-blue/20' : 'bg-charcoal-outline/50'}
|
|
color={stewarding.decisionMode === option.value ? 'text-primary-blue' : 'text-gray-400'}
|
|
>
|
|
{option.icon}
|
|
</Stack>
|
|
<Stack>
|
|
<Text size="sm" weight="medium" color="text-white" block>{option.label}</Text>
|
|
<Text size="xs" color="text-gray-400" mt={0.5} block>{option.description}</Text>
|
|
</Stack>
|
|
{stewarding.decisionMode === option.value && (
|
|
<Stack position="absolute" top="2" right="2" w="2" h="2" rounded="full" bg="bg-primary-blue" />
|
|
)}
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Vote Requirements (conditional) */}
|
|
{selectedMode?.requiresVotes && (
|
|
<Stack p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
|
|
<Stack gap={4}>
|
|
<Heading level={4} fontSize="sm" weight="medium" color="text-white">
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Vote} size={4} color="text-primary-blue" />
|
|
Voting Configuration
|
|
</Stack>
|
|
</Heading>
|
|
|
|
<Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
|
|
<Stack>
|
|
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
|
|
Required votes to uphold
|
|
</Text>
|
|
<Select
|
|
value={stewarding.requiredVotes?.toString() ?? '2'}
|
|
onChange={(e) => updateStewarding({ requiredVotes: parseInt(e.target.value, 10) })}
|
|
disabled={readOnly}
|
|
options={[
|
|
{ value: '1', label: '1 vote' },
|
|
{ value: '2', label: '2 votes' },
|
|
{ value: '3', label: '3 votes (majority of 5)' },
|
|
{ value: '4', label: '4 votes' },
|
|
{ value: '5', label: '5 votes' },
|
|
]}
|
|
/>
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
|
|
Voting time limit
|
|
</Text>
|
|
<Select
|
|
value={stewarding.voteTimeLimit?.toString()}
|
|
onChange={(e) => updateStewarding({ voteTimeLimit: parseInt(e.target.value, 10) })}
|
|
disabled={readOnly}
|
|
options={[
|
|
{ value: '24', label: '24 hours' },
|
|
{ value: '48', label: '48 hours' },
|
|
{ value: '72', label: '72 hours (3 days)' },
|
|
{ value: '96', label: '96 hours (4 days)' },
|
|
{ value: '168', label: '168 hours (7 days)' },
|
|
]}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
)}
|
|
|
|
{/* Defense Settings */}
|
|
<Stack>
|
|
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Shield} size={4} color="text-primary-blue" />
|
|
Defense Requirements
|
|
</Stack>
|
|
</Heading>
|
|
<Text size="xs" color="text-gray-400" mb={4} block>
|
|
Should accused drivers be required to submit a defense?
|
|
</Text>
|
|
|
|
<Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={3}>
|
|
<Stack
|
|
as="button"
|
|
type="button"
|
|
disabled={readOnly}
|
|
onClick={() => updateStewarding({ requireDefense: false })}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
p={4}
|
|
rounded="xl"
|
|
border
|
|
borderWidth="2px"
|
|
transition
|
|
textAlign="left"
|
|
borderColor={!stewarding.requireDefense ? 'border-primary-blue' : 'border-charcoal-outline'}
|
|
bg={!stewarding.requireDefense ? 'bg-primary-blue/5' : 'bg-iron-gray/30'}
|
|
hoverBorderColor={!readOnly && stewarding.requireDefense ? 'border-gray-500' : undefined}
|
|
opacity={readOnly ? 0.6 : 1}
|
|
cursor={readOnly ? 'not-allowed' : 'pointer'}
|
|
>
|
|
<Stack w="4" h="4" rounded="full" border borderWidth="2px" display="flex" alignItems="center" justifyContent="center" borderColor={!stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'}>
|
|
{!stewarding.requireDefense && <Stack w="2" h="2" rounded="full" bg="bg-primary-blue" />}
|
|
</Stack>
|
|
<Stack>
|
|
<Text size="sm" weight="medium" color="text-white" block>Defense optional</Text>
|
|
<Text size="xs" color="text-gray-400" block>Proceed without waiting for defense</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack
|
|
as="button"
|
|
type="button"
|
|
disabled={readOnly}
|
|
onClick={() => updateStewarding({ requireDefense: true })}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
p={4}
|
|
rounded="xl"
|
|
border
|
|
borderWidth="2px"
|
|
transition
|
|
textAlign="left"
|
|
borderColor={stewarding.requireDefense ? 'border-primary-blue' : 'border-charcoal-outline'}
|
|
bg={stewarding.requireDefense ? 'bg-primary-blue/5' : 'bg-iron-gray/30'}
|
|
hoverBorderColor={!readOnly && !stewarding.requireDefense ? 'border-gray-500' : undefined}
|
|
opacity={readOnly ? 0.6 : 1}
|
|
cursor={readOnly ? 'not-allowed' : 'pointer'}
|
|
>
|
|
<Stack w="4" h="4" rounded="full" border borderWidth="2px" display="flex" alignItems="center" justifyContent="center" borderColor={stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'}>
|
|
{stewarding.requireDefense && <Stack w="2" h="2" rounded="full" bg="bg-primary-blue" />}
|
|
</Stack>
|
|
<Stack>
|
|
<Text size="sm" weight="medium" color="text-white" block>Defense required</Text>
|
|
<Text size="xs" color="text-gray-400" block>Wait for defense before deciding</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{stewarding.requireDefense && (
|
|
<Stack mt={4} p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
|
|
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
|
|
Defense time limit
|
|
</Text>
|
|
<Select
|
|
value={stewarding.defenseTimeLimit?.toString()}
|
|
onChange={(e) => updateStewarding({ defenseTimeLimit: parseInt(e.target.value, 10) })}
|
|
disabled={readOnly}
|
|
options={[
|
|
{ value: '24', label: '24 hours' },
|
|
{ value: '48', label: '48 hours (2 days)' },
|
|
{ value: '72', label: '72 hours (3 days)' },
|
|
{ value: '96', label: '96 hours (4 days)' },
|
|
]}
|
|
/>
|
|
<Text size="xs" color="text-gray-500" mt={2} block>
|
|
After this time, the decision can proceed without a defense
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
|
|
{/* Deadlines */}
|
|
<Stack>
|
|
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Clock} size={4} color="text-primary-blue" />
|
|
Deadlines
|
|
</Stack>
|
|
</Heading>
|
|
<Text size="xs" color="text-gray-400" mb={4} block>
|
|
Set time limits for filing protests and closing stewarding
|
|
</Text>
|
|
|
|
<Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
|
|
<Stack p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
|
|
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
|
|
Protest filing deadline (after race)
|
|
</Text>
|
|
<Select
|
|
value={stewarding.protestDeadlineHours?.toString()}
|
|
onChange={(e) => updateStewarding({ protestDeadlineHours: parseInt(e.target.value, 10) })}
|
|
disabled={readOnly}
|
|
options={[
|
|
{ value: '12', label: '12 hours' },
|
|
{ value: '24', label: '24 hours (1 day)' },
|
|
{ value: '48', label: '48 hours (2 days)' },
|
|
{ value: '72', label: '72 hours (3 days)' },
|
|
{ value: '168', label: '168 hours (7 days)' },
|
|
]}
|
|
/>
|
|
<Text size="xs" color="text-gray-500" mt={2} block>
|
|
Drivers cannot file protests after this time
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
|
|
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
|
|
Stewarding closes (after race)
|
|
</Text>
|
|
<Select
|
|
value={stewarding.stewardingClosesHours?.toString()}
|
|
onChange={(e) => updateStewarding({ stewardingClosesHours: parseInt(e.target.value, 10) })}
|
|
disabled={readOnly}
|
|
options={[
|
|
{ value: '72', label: '72 hours (3 days)' },
|
|
{ value: '96', label: '96 hours (4 days)' },
|
|
{ value: '168', label: '168 hours (7 days)' },
|
|
{ value: '336', label: '336 hours (14 days)' },
|
|
]}
|
|
/>
|
|
<Text size="xs" color="text-gray-500" mt={2} block>
|
|
All stewarding must be concluded by this time
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Notifications */}
|
|
<Stack>
|
|
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Bell} size={4} color="text-primary-blue" />
|
|
Notifications
|
|
</Stack>
|
|
</Heading>
|
|
<Text size="xs" color="text-gray-400" mb={4} block>
|
|
Configure automatic notifications for involved parties
|
|
</Text>
|
|
|
|
<Stack gap={3}>
|
|
<Stack
|
|
p={4}
|
|
rounded="xl"
|
|
bg="bg-iron-gray/40"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
transition
|
|
hoverBg={!readOnly ? 'bg-iron-gray/60' : undefined}
|
|
opacity={readOnly ? 0.6 : 1}
|
|
>
|
|
<Checkbox
|
|
label="Notify accused driver"
|
|
checked={stewarding.notifyAccusedOnProtest}
|
|
onChange={(checked) => updateStewarding({ notifyAccusedOnProtest: checked })}
|
|
disabled={readOnly}
|
|
/>
|
|
<Stack ml={7} mt={1}>
|
|
<Text size="xs" color="text-gray-400" block>
|
|
Send notification when a protest is filed against them
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack
|
|
p={4}
|
|
rounded="xl"
|
|
bg="bg-iron-gray/40"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
transition
|
|
hoverBg={!readOnly ? 'bg-iron-gray/60' : undefined}
|
|
opacity={readOnly ? 0.6 : 1}
|
|
>
|
|
<Checkbox
|
|
label="Notify voters"
|
|
checked={stewarding.notifyOnVoteRequired}
|
|
onChange={(checked) => updateStewarding({ notifyOnVoteRequired: checked })}
|
|
disabled={readOnly}
|
|
/>
|
|
<Stack ml={7} mt={1}>
|
|
<Text size="xs" color="text-gray-400" block>
|
|
Send notification to stewards/members when their vote is needed
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Warning about strict settings */}
|
|
{stewarding.requireDefense && stewarding.decisionMode !== 'single_steward' && (
|
|
<Stack display="flex" alignItems="start" gap={3} p={4} rounded="xl" bg="bg-warning-amber/10" border borderColor="border-warning-amber/20">
|
|
<Icon icon={AlertTriangle} size={5} color="text-warning-amber" mt={0.5} />
|
|
<Stack>
|
|
<Text size="sm" weight="medium" color="text-warning-amber" block>Strict settings enabled</Text>
|
|
<Text size="xs" color="text-warning-amber" opacity={0.8} mt={1} block>
|
|
Requiring defense and voting may delay penalty decisions. Make sure your stewards/members
|
|
are active enough to meet the deadlines.
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|