code quality

apps/website/templates/DriverRankingsTemplate.tsx

@@ -1,5 +1,3 @@
-
-
 import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
 import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';
 import { RankingsPodium } from '@/components/leaderboards/RankingsPodium';
@@ -8,13 +6,27 @@ import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
 import { PageHeader } from '@/ui/PageHeader';
-import { ChevronLeft, Trophy } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Select } from '@/ui/Select';
+import { ChevronLeft, Trophy, ChevronRight } from 'lucide-react';
 import React from 'react';
 
+type SkillLevel = 'all' | 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
+
 interface DriverRankingsTemplateProps {
   viewData: DriverRankingsViewData;
   searchQuery: string;
   onSearchChange: (query: string) => void;
+  onSkillChange: (skill: SkillLevel) => void;
+  onTeamChange: (teamId: string) => void;
+  onSortChange: (sort: SortBy) => void;
+  onPageChange: (page: number) => void;
+  currentPage: number;
+  totalPages: number;
+  totalDrivers: number;
   onDriverClick?: (id: string) => void;
   onBackToLeaderboards?: () => void;
 }
@@ -23,9 +35,37 @@ export function DriverRankingsTemplate({
   viewData,
   searchQuery,
   onSearchChange,
+  onSkillChange,
+  onTeamChange,
+  onSortChange,
+  onPageChange,
+  currentPage,
+  totalPages,
+  totalDrivers,
   onDriverClick,
   onBackToLeaderboards,
 }: DriverRankingsTemplateProps): React.ReactElement {
+  const skillOptions = [
+    { value: 'all', label: 'All Skills' },
+    { value: 'pro', label: 'Pro' },
+    { value: 'advanced', label: 'Advanced' },
+    { value: 'intermediate', label: 'Intermediate' },
+    { value: 'beginner', label: 'Beginner' },
+  ];
+
+  const sortOptions = [
+    { value: 'rank', label: 'Rank' },
+    { value: 'rating', label: 'Rating' },
+    { value: 'wins', label: 'Wins' },
+    { value: 'podiums', label: 'Podiums' },
+    { value: 'winRate', label: 'Win Rate' },
+  ];
+
+  const teamOptions = [
+    { value: 'all', label: 'All Teams' },
+    ...viewData.availableTeams.map(t => ({ value: t.id, label: t.name })),
+  ];
+
   return (
     <Container size="lg" spacing="md">
       <PageHeader
@@ -34,10 +74,11 @@ export function DriverRankingsTemplate({
         icon={Trophy}
         action={
           onBackToLeaderboards && (
-            <Button 
-              variant="secondary" 
-              onClick={onBackToLeaderboards} 
+            <Button
+              variant="secondary"
+              onClick={onBackToLeaderboards}
               icon={<Icon icon={ChevronLeft} size={4} />}
+              data-testid="back-to-leaderboards"
             >
               Back to Leaderboards
             </Button>
@@ -46,7 +87,7 @@ export function DriverRankingsTemplate({
       />
 
       {/* Top 3 Podium */}
-      {viewData.podium.length > 0 && !searchQuery && (
+      {viewData.podium.length > 0 && !searchQuery && currentPage === 1 && (
         <RankingsPodium 
           podium={viewData.podium.map(d => ({
             ...d,
@@ -58,23 +99,90 @@ export function DriverRankingsTemplate({
         />
       )}
 
-      <LeaderboardFiltersBar 
+      <LeaderboardFiltersBar
         searchQuery={searchQuery}
         onSearchChange={onSearchChange}
         placeholder="Search drivers..."
-      />
+      >
+        <Group gap={2}>
+          <Select
+            size="sm"
+            value={viewData.selectedSkill}
+            options={skillOptions}
+            onChange={(e) => onSkillChange(e.target.value as SkillLevel)}
+            data-testid="skill-filter"
+          />
+          <Select
+            size="sm"
+            value={viewData.selectedTeam}
+            options={teamOptions}
+            onChange={(e) => onTeamChange(e.target.value)}
+            data-testid="team-filter"
+          />
+          <Select
+            size="sm"
+            value={viewData.sortBy}
+            options={sortOptions}
+            onChange={(e) => onSortChange(e.target.value as SortBy)}
+            data-testid="sort-filter"
+          />
+        </Group>
+      </LeaderboardFiltersBar>
 
-      {/* Leaderboard Table */}
-      <LeaderboardTable 
-        drivers={viewData.drivers.map(d => ({
-          ...d,
-          rating: Number(d.rating),
-          wins: Number(d.wins),
-          racesCompleted: d.racesCompleted || 0,
-          avatarUrl: d.avatarUrl || ''
-        }))} 
-        onDriverClick={onDriverClick} 
-      />
+      <Box paddingY={2}>
+        <Text variant="low" size="sm" data-testid="driver-count">
+          Showing {totalDrivers} drivers
+        </Text>
+      </Box>
+
+      {viewData.drivers.length === 0 ? (
+        <Box paddingY={12} textAlign="center" data-testid="empty-state">
+          <Text variant="low">{searchQuery ? `No drivers found matching "${searchQuery}"` : 'No drivers available'}</Text>
+        </Box>
+      ) : (
+        <>
+          <LeaderboardTable
+            drivers={viewData.drivers.map(d => ({
+              ...d,
+              rating: Number(d.rating),
+              wins: Number(d.wins),
+              racesCompleted: d.racesCompleted || 0,
+              avatarUrl: d.avatarUrl || ''
+            }))}
+            onDriverClick={onDriverClick}
+          />
+
+          {totalPages > 1 && (
+            <Box paddingY={8}>
+              <Group justify="center" gap={4} data-testid="pagination-controls">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  disabled={currentPage === 1}
+                  onClick={() => onPageChange(currentPage - 1)}
+                  icon={<Icon icon={ChevronLeft} size={4} />}
+                  data-testid="prev-page"
+                >
+                  Previous
+                </Button>
+                <Text variant="low" size="sm" font="mono">
+                  Page {currentPage} of {totalPages}
+                </Text>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  disabled={currentPage === totalPages}
+                  onClick={() => onPageChange(currentPage + 1)}
+                  icon={<Icon icon={ChevronRight} size={4} />}
+                  data-testid="next-page"
+                >
+                  Next
+                </Button>
+              </Group>
+            </Box>
+          )}
+        </>
+      )}
     </Container>
   );
 }