website refactor

apps/website/components/admin/AdminLayout.tsx

@@ -10,6 +10,7 @@ import {
   Activity
 } from 'lucide-react';
 import { useRouter, usePathname } from 'next/navigation';
+import { logoutAction } from '@/app/actions/logoutAction';
 
 interface AdminLayoutProps {
   children: ReactNode;
@@ -62,15 +63,6 @@ export function AdminLayout({ children }: AdminLayoutProps) {
     }
   };
 
-  const handleLogout = async () => {
-    try {
-      await fetch('/api/auth/logout', { method: 'POST' });
-      router.push('/');
-    } catch (error) {
-      console.error('Logout failed:', error);
-    }
-  };
-
   return (
     <div className="flex h-screen bg-deep-graphite overflow-hidden">
       {/* Sidebar */}
@@ -132,13 +124,16 @@ export function AdminLayout({ children }: AdminLayoutProps) {
             {isSidebarOpen && <span className="text-sm">Toggle Sidebar</span>}
           </button>
           
-          <button
-            onClick={handleLogout}
-            className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-racing-red hover:bg-racing-red/10 transition-colors"
-          >
-            <LogOut className="w-5 h-5" />
-            {isSidebarOpen && <span className="text-sm">Logout</span>}
-          </button>
+          {/* Use form with server action for logout */}
+          <form action={logoutAction}>
+            <button
+              type="submit"
+              className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-racing-red hover:bg-racing-red/10 transition-colors"
+            >
+              <LogOut className="w-5 h-5" />
+              {isSidebarOpen && <span className="text-sm">Logout</span>}
+            </button>
+          </form>
         </div>
       </aside>