website refactor

apps/website/templates/RacesAllTemplate.tsx

@@ -1,26 +1,17 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import {
-  Flag,
-  SlidersHorizontal,
-  Calendar,
-} from 'lucide-react';
-import { RaceFilterModal } from '@/ui/RaceFilterModal';
-import { Pagination } from '@/ui/Pagination';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
 import { Skeleton } from '@/ui/Skeleton';
-import { RaceListItem } from '@/components/races/RaceListItemWrapper';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Pagination } from '@/ui/Pagination';
+import { RaceFilterModal } from '@/ui/RaceFilterModal';
+import { RacesHeader } from '@/components/races/RacesHeader';
+import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 
 export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 
@@ -66,26 +57,18 @@ export function RacesAllTemplate({
   setLeagueFilter,
   searchQuery,
   setSearchQuery,
-  showFilters,
-  setShowFilters,
   showFilterModal,
   setShowFilterModal,
   onRaceClick,
 }: RacesAllTemplateProps) {
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    { label: 'All Races' },
-  ];
-
   if (isLoading) {
     return (
       <Container size="lg" py={8}>
         <Stack gap={6}>
-          <Skeleton width="8rem" height="1.5rem" />
-          <Skeleton width="12rem" height="2.5rem" />
+          <Skeleton width="100%" height="12rem" />
           <Stack gap={4}>
             {[1, 2, 3, 4, 5].map(i => (
-              <Skeleton key={i} width="100%" height="6rem" />
+              <Skeleton key={i} width="100%" height="4rem" />
             ))}
           </Stack>
         </Stack>
@@ -94,98 +77,84 @@ export function RacesAllTemplate({
   }
 
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={6}>
-        {/* Breadcrumbs */}
-        <Breadcrumbs items={breadcrumbItems} />
+    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
+      <Container size="lg">
+        <Stack gap={8}>
+          <RacesHeader 
+            totalCount={viewData.totalCount}
+            scheduledCount={viewData.scheduledCount}
+            runningCount={viewData.runningCount}
+            completedCount={viewData.completedCount}
+          />
 
-        {/* Header */}
-        <Stack direction="row" align="center" justify="between" wrap gap={4}>
-          <Box>
-            <Heading level={1} icon={<Icon icon={Flag} size={6} color="#3b82f6" />}>
-              All Races
-            </Heading>
-            <Text size="sm" color="text-gray-400" block mt={1}>
-              {totalFilteredCount} race{totalFilteredCount !== 1 ? 's' : ''} found
+          <Box display="flex" justifyContent="between" alignItems="center">
+            <Text size="sm" color="text-gray-400">
+              Showing <Text as="span" color="text-white" weight="bold">{totalFilteredCount}</Text> races
             </Text>
+            <Box 
+              as="button"
+              onClick={() => setShowFilterModal(true)}
+              px={4}
+              py={2}
+              bg="bg-surface-charcoal"
+              border
+              borderColor="border-outline-steel"
+              fontSize="10px"
+              weight="bold"
+              uppercase
+              letterSpacing="wider"
+              hoverBorderColor="border-primary-accent"
+              transition
+            >
+              Filters
+            </Box>
           </Box>
-          
-          <Button
-            variant="secondary"
-            onClick={() => setShowFilters(!showFilters)}
-            icon={<Icon icon={SlidersHorizontal} size={4} />}
-          >
-            Filters
-          </Button>
+
+          <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
+            {races.length === 0 ? (
+              <Box p={12} textAlign="center">
+                <Text color="text-gray-500">No races found matching your criteria.</Text>
+              </Box>
+            ) : (
+              <RaceScheduleTable 
+                races={races.map(race => ({
+                  id: race.id,
+                  track: race.track,
+                  car: race.car,
+                  leagueName: race.leagueName,
+                  time: race.timeLabel,
+                  status: race.status as SessionStatus
+                }))}
+                onRaceClick={onRaceClick}
+              />
+            )}
+          </Box>
+
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            totalItems={totalFilteredCount}
+            itemsPerPage={itemsPerPage}
+            onPageChange={onPageChange}
+          />
+
+          <RaceFilterModal
+            isOpen={showFilterModal}
+            onClose={() => setShowFilterModal(false)}
+            statusFilter={statusFilter}
+            setStatusFilter={setStatusFilter}
+            leagueFilter={leagueFilter}
+            setLeagueFilter={setLeagueFilter}
+            timeFilter="all"
+            setTimeFilter={() => {}}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            leagues={viewData.leagues}
+            showSearch={true}
+            showTimeFilter={false}
+          />
         </Stack>
-
-        {/* Search & Filters (Simplified for template) */}
-        {showFilters && (
-          <Card>
-            <Stack gap={4}>
-              <Text size="sm" color="text-gray-400">
-                Use the filter button to open advanced search and filtering options.
-              </Text>
-              <Box>
-                <Button variant="primary" onClick={() => setShowFilterModal(true)}>
-                  Open Filters
-                </Button>
-              </Box>
-            </Stack>
-          </Card>
-        )}
-
-        {/* Race List */}
-        {races.length === 0 ? (
-          <Card>
-            <Stack align="center" py={12} gap={4}>
-              <Surface variant="muted" rounded="full" padding={4}>
-                <Icon icon={Calendar} size={8} color="#525252" />
-              </Surface>
-              <Box textAlign="center">
-                <Text weight="medium" color="text-white" block mb={1}>No races found</Text>
-                <Text size="sm" color="text-gray-500">
-                  {viewData.races.length === 0 
-                    ? 'No races have been scheduled yet'
-                    : 'Try adjusting your search or filters'}
-                </Text>
-              </Box>
-            </Stack>
-          </Card>
-        ) : (
-          <Stack gap={3}>
-            {races.map(race => (
-              <RaceListItem key={race.id} race={race} onClick={onRaceClick} />
-            ))}
-          </Stack>
-        )}
-
-        {/* Pagination */}
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          totalItems={totalFilteredCount}
-          itemsPerPage={itemsPerPage}
-          onPageChange={onPageChange}
-        />
-
-        {/* Filter Modal */}
-        <RaceFilterModal
-          isOpen={showFilterModal}
-          onClose={() => setShowFilterModal(false)}
-          statusFilter={statusFilter}
-          setStatusFilter={setStatusFilter}
-          leagueFilter={leagueFilter}
-          setLeagueFilter={setLeagueFilter}
-          timeFilter="all"
-          setTimeFilter={() => {}}
-          searchQuery={searchQuery}
-          setSearchQuery={setSearchQuery}
-          leagues={viewData.leagues}
-          showSearch={true}
-          showTimeFilter={false}
-        />
-      </Stack>
-    </Container>
+      </Container>
+    </Box>
   );
 }