improvements

src/features/tournaments/components/tournament-stats.tsx

@@ -146,12 +146,11 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
   };
 
   const teamStatsWithCalculations = useMemo(() => {
-    return sortedTeamStats.map((stat, index) => ({
+    return sortedTeamStats.map((stat) => ({
       ...stat,
-      index,
       winPercentage: stat.matches > 0 ? (stat.wins / stat.matches) * 100 : 0,
       avgCupsPerMatch: stat.matches > 0 ? stat.total_cups_made / stat.matches : 0,
-    }));
+    })).sort((a, b) => b.winPercentage - a.winPercentage);;
   }, [sortedTeamStats]);
 
   const renderTeamStatsTable = () => {
@@ -170,23 +169,14 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
     return (
       <Stack gap={0}>
         <Text px="md" size="lg" fw={600}>Results</Text>
-        {teamStatsWithCalculations.map((stat) => {
+        <Text px="md" c="dimmed" size="xs" fw={500}>Sorted by win percentage</Text>
+        {teamStatsWithCalculations.map((stat, index) => {
           return (
             <Box key={stat.id}>
               <UnstyledButton
                 w="100%"
                 p="md"
-                style={{
-                  borderRadius: 0,
-                  transition: "background-color 0.15s ease",
-                }}
-                styles={{
-                  root: {
-                    '&:hover': {
-                      backgroundColor: 'var(--mantine-color-gray-0)',
-                    },
-                  },
-                }}
+                style={{ borderRadius: 0 }}
               >
                 <Group justify="space-between" align="center" w="100%">
                   <Group gap="sm" align="center">
@@ -194,12 +184,12 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                     <Stack gap={2}>
                       <Group gap='xs'>
                         <Text size="xs" c="dimmed">
-                          #{stat.index + 1}
+                          #{index + 1}
                         </Text>
                         <Text size="sm" fw={600}>
                           {stat.team_name}
                         </Text>
-                        {stat.index === 0 && isComplete && (
+                        {index === 0 && isComplete && (
                           <ThemeIcon size="xs" color="yellow" variant="light" radius="xl">
                             <CrownIcon size={12} />
                           </ThemeIcon>
@@ -259,7 +249,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                   </Group>
                 </Group>
               </UnstyledButton>
-              {stat.index < teamStatsWithCalculations.length - 1 && <Divider />}
+              {index < teamStatsWithCalculations.length - 1 && <Divider />}
             </Box>
           );
         })}