page wrapper

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

@@ -1,3 +1,81 @@
-import { DriverProfileInteractive } from './DriverProfileInteractive';
+'use client';
 
-export default DriverProfileInteractive;
+import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
+import { useDriverProfilePageData } from '@/hooks/driver/useDriverProfilePageData';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+interface DriverProfileData {
+  driverProfile: any;
+  teamMemberships: Array<{
+    team: { id: string; name: string };
+    role: string;
+    joinedAt: Date;
+  }>;
+}
+
+export default function DriverProfilePage() {
+  const router = useRouter();
+  const params = useParams();
+  const driverId = params.id as string;
+  const currentDriverId = useEffectiveDriverId() || '';
+  
+  // UI State
+  const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
+  const [friendRequestSent, setFriendRequestSent] = useState(false);
+  
+  // Fetch data using domain hook
+  const { data: queries, isLoading, error, refetch } = useDriverProfilePageData(driverId);
+  
+  // Transform data for template
+  const data: DriverProfileData | undefined = queries?.driverProfile && queries?.teamMemberships
+    ? {
+        driverProfile: queries.driverProfile,
+        teamMemberships: queries.teamMemberships,
+      }
+    : undefined;
+  
+  // Actions
+  const handleAddFriend = () => {
+    setFriendRequestSent(true);
+  };
+
+  const handleBackClick = () => {
+    router.push('/drivers');
+  };
+
+  return (
+    <StatefulPageWrapper
+      data={data}
+      isLoading={isLoading}
+      error={error as Error | null}
+      retry={refetch}
+      Template={({ data }) => {
+        if (!data) return null;
+        return (
+          <DriverProfileTemplate
+            driverProfile={data.driverProfile}
+            allTeamMemberships={data.teamMemberships}
+            isLoading={false}
+            error={null}
+            onBackClick={handleBackClick}
+            onAddFriend={handleAddFriend}
+            friendRequestSent={friendRequestSent}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+          />
+        );
+      }}
+      loading={{ variant: 'skeleton', message: 'Loading driver profile...' }}
+      errorConfig={{ variant: 'full-screen' }}
+      empty={{
+        icon: require('lucide-react').Car,
+        title: 'Driver not found',
+        description: 'The driver profile may not exist or you may not have access',
+        action: { label: 'Back to Drivers', onClick: handleBackClick }
+      }}
+    />
+  );
+}