website refactor

apps/website/components/drivers/CreateDriverForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState, FormEvent } from 'react';
 import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
 import { useCreateDriver } from "@/lib/hooks/driver/useCreateDriver";
@@ -70,7 +71,7 @@ export default function CreateDriverForm() {
       },
       {
         onSuccess: () => {
-          router.push('/profile');
+          router.push(routes.protected.profile);
           router.refresh();
         },
         onError: (error) => {

apps/website/components/drivers/DriverProfilePageClient.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
+import type { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
+
+interface DriverProfilePageClientProps {
+  pageDto: DriverProfileViewModel | null;
+  error?: string;
+  empty?: {
+    title: string;
+    description: string;
+  };
+}
+
+/**
+ * DriverProfilePageClient
+ *
+ * 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.
+ */
+export function DriverProfilePageClient({ pageDto, error, empty }: DriverProfilePageClientProps) {
+  const router = useRouter();
+  
+  // UI State (UI-only concerns)
+  const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
+  const [friendRequestSent, setFriendRequestSent] = useState(false);
+
+  // Event handlers (UI-only concerns)
+  const handleAddFriend = () => {
+    setFriendRequestSent(true);
+  };
+
+  const handleBackClick = () => {
+    router.push('/drivers');
+  };
+
+  // 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>
+    );
+  }
+
+  if (!pageDto || !pageDto.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>
+      );
+    }
+    return null;
+  }
+
+  // Pass ViewModel 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}
+      onBackClick={handleBackClick}
+      onAddFriend={handleAddFriend}
+      friendRequestSent={friendRequestSent}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+    />
+  );
+}

apps/website/components/drivers/DriversPageClient.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { DriversTemplate } from '@/templates/DriversTemplate';
+import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
+
+interface DriversPageClientProps {
+  pageDto: DriverLeaderboardViewModel | null;
+  error?: string;
+  empty?: {
+    title: string;
+    description: string;
+  };
+}
+
+/**
+ * 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.
+ */
+export function DriversPageClient({ pageDto, error, empty }: DriversPageClientProps) {
+  // 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>
+    );
+  }
+
+  if (!pageDto || pageDto.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>
+      );
+    }
+    return null;
+  }
+
+  // Pass ViewModel directly to template
+  return <DriversTemplate data={pageDto} />;
+}