fix issues

apps/website/app/admin/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { RouteGuard } from '@/lib/gateways/RouteGuard';
+
+interface AdminLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Admin Layout
+ * 
+ * Provides role-based protection for admin routes.
+ * Uses RouteGuard to ensure only users with 'owner' or 'admin' roles can access.
+ */
+export default function AdminLayout({ children }: AdminLayoutProps) {
+  return (
+    <RouteGuard config={{ requiredRoles: ['owner', 'admin'] }}>
+      <div className="min-h-screen bg-deep-graphite">
+        {children}
+      </div>
+    </RouteGuard>
+  );
+}

apps/website/app/admin/page.tsx

@@ -1,13 +1,10 @@
 import { AdminLayout } from '@/components/admin/AdminLayout';
 import { AdminDashboardPage } from '@/components/admin/AdminDashboardPage';
-import { RouteGuard } from '@/lib/gateways/RouteGuard';
 
 export default function AdminPage() {
   return (
-    <RouteGuard config={{ requiredRoles: ['owner', 'admin'] }}>
-      <AdminLayout>
-        <AdminDashboardPage />
-      </AdminLayout>
-    </RouteGuard>
+    <AdminLayout>
+      <AdminDashboardPage />
+    </AdminLayout>
   );
 }

apps/website/app/dashboard/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { AuthGuard } from '@/lib/gateways/AuthGuard';
+import { ReactNode } from 'react';
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Dashboard Layout
+ * 
+ * Provides authentication protection for all dashboard routes.
+ * Wraps children with AuthGuard to ensure only authenticated users can access.
+ */
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <AuthGuard redirectPath="/auth/login">
+      <div className="min-h-screen bg-deep-graphite">
+        {children}
+      </div>
+    </AuthGuard>
+  );
+}

apps/website/app/dashboard/page.tsx

@@ -34,31 +34,31 @@ import { getGreeting, timeUntil } from '@/lib/utilities/time';
 export default function DashboardPage() {
     const { data: dashboardData, isLoading, error } = useDashboardOverview();
 
-   if (isLoading) {
-     return (
-       <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-         <div className="text-white">Loading dashboard...</div>
-       </main>
-     );
-   }
+    if (isLoading) {
+      return (
+        <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
+          <div className="text-white">Loading dashboard...</div>
+        </main>
+      );
+    }
 
-   if (error || !dashboardData) {
-     return (
-       <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-         <div className="text-red-400">Failed to load dashboard</div>
-       </main>
-     );
-   }
+    if (error || !dashboardData) {
+      return (
+        <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
+          <div className="text-red-400">Failed to load dashboard</div>
+        </main>
+      );
+    }
 
-   const currentDriver = dashboardData.currentDriver;
-   const nextRace = dashboardData.nextRace;
-   const upcomingRaces = dashboardData.upcomingRaces;
-   const leagueStandingsSummaries = dashboardData.leagueStandings;
-   const feedSummary = { items: dashboardData.feedItems };
-   const friends = dashboardData.friends;
-   const activeLeaguesCount = dashboardData.activeLeaguesCount;
+    const currentDriver = dashboardData.currentDriver;
+    const nextRace = dashboardData.nextRace;
+    const upcomingRaces = dashboardData.upcomingRaces;
+    const leagueStandingsSummaries = dashboardData.leagueStandings;
+    const feedSummary = { items: dashboardData.feedItems };
+    const friends = dashboardData.friends;
+    const activeLeaguesCount = dashboardData.activeLeaguesCount;
 
-   const { totalRaces, wins, podiums, rating, globalRank, consistency } = currentDriver;
+    const { totalRaces, wins, podiums, rating, globalRank, consistency } = currentDriver;
 
   return (
     <main className="min-h-screen bg-deep-graphite">

apps/website/app/onboarding/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { AuthGuard } from '@/lib/gateways/AuthGuard';
+import { ReactNode } from 'react';
+
+interface OnboardingLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Onboarding Layout
+ * 
+ * Provides authentication protection for the onboarding flow.
+ * Wraps children with AuthGuard to ensure only authenticated users can access.
+ */
+export default function OnboardingLayout({ children }: OnboardingLayoutProps) {
+  return (
+    <AuthGuard redirectPath="/auth/login">
+      <div className="min-h-screen bg-deep-graphite">
+        {children}
+      </div>
+    </AuthGuard>
+  );
+}

apps/website/app/profile/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { AuthGuard } from '@/lib/gateways/AuthGuard';
+import { ReactNode } from 'react';
+
+interface ProfileLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Profile Layout
+ * 
+ * Provides authentication protection for all profile-related routes.
+ * Wraps children with AuthGuard to ensure only authenticated users can access.
+ */
+export default function ProfileLayout({ children }: ProfileLayoutProps) {
+  return (
+    <AuthGuard redirectPath="/auth/login">
+      <div className="min-h-screen bg-deep-graphite">
+        {children}
+      </div>
+    </AuthGuard>
+  );
+}

apps/website/app/sponsor/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { AuthGuard } from '@/lib/gateways/AuthGuard';
+import { ReactNode } from 'react';
+
+interface SponsorLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Sponsor Layout
+ * 
+ * Provides authentication protection for all sponsor-related routes.
+ * Wraps children with AuthGuard to ensure only authenticated users can access.
+ */
+export default function SponsorLayout({ children }: SponsorLayoutProps) {
+  return (
+    <AuthGuard redirectPath="/auth/login">
+      <div className="min-h-screen bg-deep-graphite">
+        {children}
+      </div>
+    </AuthGuard>
+  );
+}