115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
|
import { Box, Card, Text, Select, Button, Group, Stack, Badge, Divider } from "@mantine/core";
|
|
import { awardManualBadge } from "@/features/badges/server";
|
|
import { useAllBadges } from "@/features/badges/queries";
|
|
import toast from "@/lib/sonner";
|
|
import { usePlayers } from "@/features/players/queries";
|
|
|
|
const AwardBadges = () => {
|
|
const { data: players } = usePlayers();
|
|
const { data: allBadges } = useAllBadges();
|
|
|
|
const [selectedPlayerId, setSelectedPlayerId] = useState<string | null>(null);
|
|
const [selectedBadgeId, setSelectedBadgeId] = useState<string | null>(null);
|
|
const [isAwarding, setIsAwarding] = useState(false);
|
|
|
|
const manualBadges = allBadges.filter((badge) => badge.type === "manual");
|
|
|
|
const handleAwardBadge = async () => {
|
|
if (!selectedPlayerId || !selectedBadgeId) return;
|
|
|
|
setIsAwarding(true);
|
|
try {
|
|
await awardManualBadge({
|
|
data: {
|
|
playerId: selectedPlayerId,
|
|
badgeId: selectedBadgeId,
|
|
},
|
|
});
|
|
|
|
const selectedPlayer = players.find((p) => p.id === selectedPlayerId);
|
|
const playerName = selectedPlayer
|
|
? `${selectedPlayer.first_name} ${selectedPlayer.last_name}`
|
|
: "Player";
|
|
|
|
toast.success(`Badge awarded to ${playerName}`);
|
|
|
|
setSelectedPlayerId(null);
|
|
} catch (error) {
|
|
toast.error("Failed to award badge");
|
|
} finally {
|
|
setIsAwarding(false);
|
|
}
|
|
};
|
|
|
|
const playerOptions = players.map((player) => ({
|
|
value: player.id,
|
|
label: `${player.first_name} ${player.last_name}`,
|
|
}));
|
|
|
|
const badgeOptions = manualBadges.map((badge) => ({
|
|
value: badge.id,
|
|
label: badge.name,
|
|
}));
|
|
|
|
const selectedBadge = manualBadges.find((b) => b.id === selectedBadgeId);
|
|
|
|
return (
|
|
<Box p="md">
|
|
<Card withBorder radius="md" p="md">
|
|
<Stack gap="lg">
|
|
<Box>
|
|
<Text size="lg" fw={600} mb="xs">
|
|
Award Manual Badge
|
|
</Text>
|
|
</Box>
|
|
|
|
<Select
|
|
label="Badge Type"
|
|
placeholder="Select a badge"
|
|
data={badgeOptions}
|
|
value={selectedBadgeId}
|
|
onChange={setSelectedBadgeId}
|
|
searchable
|
|
clearable
|
|
size="md"
|
|
/>
|
|
|
|
{selectedBadgeId && (
|
|
<>
|
|
<Divider />
|
|
|
|
<Stack gap="md">
|
|
<Select
|
|
label="Select Player"
|
|
placeholder="Choose a player"
|
|
data={playerOptions}
|
|
value={selectedPlayerId}
|
|
onChange={setSelectedPlayerId}
|
|
searchable
|
|
clearable
|
|
size="md"
|
|
autoFocus
|
|
/>
|
|
|
|
<Group justify="flex-end">
|
|
<Button
|
|
onClick={handleAwardBadge}
|
|
disabled={!selectedPlayerId}
|
|
loading={isAwarding}
|
|
size="md"
|
|
>
|
|
Award Badge
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default AwardBadges;
|