bug fixes, new fonts, etc

src/features/admin/components/award-badges.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Box, Card, Text, Select, Button, Group, Stack } from "@mantine/core";
+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";
@@ -27,10 +27,14 @@ const AwardBadges = () => {
         },
       });
 
-      toast.success("Badge awarded successfully");
+      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);
-      setSelectedBadgeId(null);
     } catch (error) {
       toast.error("Failed to award badge");
     } finally {
@@ -48,48 +52,59 @@ const AwardBadges = () => {
     label: badge.name,
   }));
 
+  const selectedBadge = manualBadges.find((b) => b.id === selectedBadgeId);
+
   return (
     <Box p="md">
       <Card withBorder radius="md" p="md">
-        <Stack gap="md">
+        <Stack gap="lg">
           <Box>
             <Text size="lg" fw={600} mb="xs">
               Award Manual Badge
             </Text>
-            <Text size="sm" c="dimmed">
-              Select a player and a manual badge to award
-            </Text>
           </Box>
 
           <Select
-            label="Player"
-            placeholder="Select a player"
-            data={playerOptions}
-            value={selectedPlayerId}
-            onChange={setSelectedPlayerId}
-            searchable
-            clearable
-          />
-
-          <Select
-            label="Badge"
+            label="Badge Type"
             placeholder="Select a badge"
             data={badgeOptions}
             value={selectedBadgeId}
             onChange={setSelectedBadgeId}
             searchable
             clearable
+            size="md"
           />
 
-          <Group justify="flex-end">
-            <Button
-              onClick={handleAwardBadge}
-              disabled={!selectedPlayerId || !selectedBadgeId}
-              loading={isAwarding}
-            >
-              Award Badge
-            </Button>
-          </Group>
+          {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>