website refactor

apps/website/app/drivers/DriversPageClient.tsx

@@ -1,11 +1,17 @@
 'use client';
 
-import React from 'react';
+import React, { useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
 import { DriversTemplate } from '@/templates/DriversTemplate';
-import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
+import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+import { routes } from '@/lib/routing/RouteConfig';
 
 interface DriversPageClientProps {
-  pageDto: DriverLeaderboardViewModel | null;
+  viewData: DriversViewData | null;
   error?: string;
   empty?: {
     title: string;
@@ -17,34 +23,67 @@ interface DriversPageClientProps {
  * DriversPageClient
  *
  * Client component that:
- * 1. Passes ViewModel directly to Template
- *
- * No business logic, filtering, or sorting here.
- * All data transformation happens in the PageQuery and ViewModelBuilder.
+ * 1. Manages search state
+ * 2. Filters drivers based on search
+ * 3. Passes ViewData to Template
  */
-export function DriversPageClient({ pageDto, error, empty }: DriversPageClientProps) {
+export function DriversPageClient({ viewData, error, empty }: DriversPageClientProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const router = useRouter();
+
+  const filteredDrivers = useMemo(() => {
+    if (!viewData) return [];
+    if (!searchQuery) return viewData.drivers;
+    
+    const query = searchQuery.toLowerCase();
+    return viewData.drivers.filter(driver => 
+      driver.name.toLowerCase().includes(query) || 
+      driver.nationality.toLowerCase().includes(query)
+    );
+  }, [viewData, searchQuery]);
+
+  const handleDriverClick = (id: string) => {
+    router.push(routes.driver.detail(id));
+  };
+
+  const handleViewLeaderboard = () => {
+    router.push(routes.leaderboards.drivers);
+  };
+
   // Handle error/empty states
   if (error) {
     return (
-      <div className="max-w-7xl mx-auto px-4 py-12 text-center">
-        <div className="text-red-400 mb-4">Error loading drivers</div>
-        <p className="text-gray-400">Please try again later</p>
-      </div>
+      <Container size="lg" py={12}>
+        <Stack align="center" gap={4}>
+          <Text color="text-red-400">Error loading drivers</Text>
+          <Text color="text-gray-400">Please try again later</Text>
+        </Stack>
+      </Container>
     );
   }
 
-  if (!pageDto || pageDto.drivers.length === 0) {
+  if (!viewData || viewData.drivers.length === 0) {
     if (empty) {
       return (
-        <div className="max-w-7xl mx-auto px-4 py-12 text-center">
-          <h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
-          <p className="text-gray-400">{empty.description}</p>
-        </div>
+        <Container size="lg" py={12}>
+          <Stack align="center" gap={2}>
+            <Text size="xl" weight="semibold" color="text-white">{empty.title}</Text>
+            <Text color="text-gray-400">{empty.description}</Text>
+          </Stack>
+        </Container>
       );
     }
     return null;
   }
 
-  // Pass ViewModel directly to template
-  return <DriversTemplate data={pageDto} />;
+  return (
+    <DriversTemplate 
+      viewData={viewData}
+      searchQuery={searchQuery}
+      onSearchChange={setSearchQuery}
+      filteredDrivers={filteredDrivers}
+      onDriverClick={handleDriverClick}
+      onViewLeaderboard={handleViewLeaderboard}
+    />
+  );
 }

apps/website/app/drivers/[id]/DriverProfilePageClient.tsx

@@ -3,10 +3,14 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
-import type { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
+import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
+import type { ProfileTab } from '@/ui/ProfileTabs';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 interface DriverProfilePageClientProps {
-  pageDto: DriverProfileViewModel | null;
+  viewData: DriverProfileViewData | null;
   error?: string;
   empty?: {
     title: string;
@@ -19,16 +23,13 @@ interface DriverProfilePageClientProps {
  *
  * Client component that:
  * 1. Handles UI state (tabs, friend requests)
- * 2. Passes ViewModel directly to Template
- *
- * No business logic or data transformation here.
- * All data transformation happens in the PageQuery and ViewModelBuilder.
+ * 2. Passes ViewData directly to Template
  */
-export function DriverProfilePageClient({ pageDto, error, empty }: DriverProfilePageClientProps) {
+export function DriverProfilePageClient({ viewData, error, empty }: DriverProfilePageClientProps) {
   const router = useRouter();
   
   // UI State (UI-only concerns)
-  const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
+  const [activeTab, setActiveTab] = useState<ProfileTab>('overview');
   const [friendRequestSent, setFriendRequestSent] = useState(false);
 
   // Event handlers (UI-only concerns)
@@ -43,46 +44,38 @@ export function DriverProfilePageClient({ pageDto, error, empty }: DriverProfile
   // Handle error/empty states
   if (error) {
     return (
-      <div className="max-w-6xl mx-auto px-4 py-12 text-center">
-        <div className="text-red-400 mb-4">Error loading driver profile</div>
-        <p className="text-gray-400">Please try again later</p>
-      </div>
+      <Container size="lg" py={12}>
+        <Stack align="center" gap={4}>
+          <Text color="text-red-400">Error loading driver profile</Text>
+          <Text color="text-gray-400">Please try again later</Text>
+        </Stack>
+      </Container>
     );
   }
 
-  if (!pageDto || !pageDto.currentDriver) {
+  if (!viewData || !viewData.currentDriver) {
     if (empty) {
       return (
-        <div className="max-w-4xl mx-auto px-4">
-          <div className="text-center py-12">
-            <h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
-            <p className="text-gray-400">{empty.description}</p>
-          </div>
-        </div>
+        <Container size="lg" py={12}>
+          <Stack align="center" gap={2}>
+            <Text size="xl" weight="semibold" color="text-white">{empty.title}</Text>
+            <Text color="text-gray-400">{empty.description}</Text>
+          </Stack>
+        </Container>
       );
     }
     return null;
   }
 
-  // Pass ViewModel directly to template
+  // Pass ViewData directly to template
   return (
     <DriverProfileTemplate
-      driverProfile={pageDto}
-      allTeamMemberships={pageDto.teamMemberships.map(m => ({
-        team: {
-          id: m.teamId,
-          name: m.teamName,
-        },
-        role: m.role,
-        joinedAt: new Date(m.joinedAt),
-      }))}
-      isLoading={false}
-      error={null}
+      viewData={viewData}
       onBackClick={handleBackClick}
       onAddFriend={handleAddFriend}
       friendRequestSent={friendRequestSent}
       activeTab={activeTab}
-      setActiveTab={setActiveTab}
+      onTabChange={setActiveTab}
     />
   );
 }

apps/website/app/drivers/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { redirect } from 'next/navigation';
 import { routes } from '@/lib/routing/RouteConfig';
-import { DriverProfilePageQuery } from '@/lib/page-queries/page-queries/DriverProfilePageQuery';
-import { DriverProfilePageClient } from '@/components/drivers/DriverProfilePageClient';
+import { DriverProfilePageQuery } from '@/lib/page-queries/DriverProfilePageQuery';
+import { DriverProfilePageClient } from './DriverProfilePageClient';
 
 export default async function DriverProfilePage({ params }: { params: { id: string } }) {
   const result = await DriverProfilePageQuery.execute(params.id);
@@ -13,7 +13,7 @@ export default async function DriverProfilePage({ params }: { params: { id: stri
     }
     return (
       <DriverProfilePageClient
-        pageDto={null}
+        viewData={null}
         error={error}
       />
     );
@@ -22,7 +22,7 @@ export default async function DriverProfilePage({ params }: { params: { id: stri
   const viewData = result.unwrap();
   return (
     <DriverProfilePageClient
-      pageDto={viewData}
+      viewData={viewData}
     />
   );
 }

apps/website/app/drivers/page.tsx

@@ -1,7 +1,7 @@
 import { redirect } from 'next/navigation';
 import { routes } from '@/lib/routing/RouteConfig';
-import { DriversPageQuery } from '@/lib/page-queries/page-queries/DriversPageQuery';
-import { DriversPageClient } from '@/components/drivers/DriversPageClient';
+import { DriversPageQuery } from '@/lib/page-queries/DriversPageQuery';
+import { DriversPageClient } from './DriversPageClient';
 
 export default async function Page() {
   const result = await DriversPageQuery.execute();
@@ -13,7 +13,7 @@ export default async function Page() {
     }
     return (
       <DriversPageClient
-        pageDto={null}
+        viewData={null}
         error={error}
       />
     );
@@ -22,7 +22,7 @@ export default async function Page() {
   const viewData = result.unwrap();
   return (
     <DriversPageClient
-      pageDto={viewData}
+      viewData={viewData}
     />
   );
 }