feat: Implement admin panel redesign plan

src/App.tsx

@@ -34,6 +34,10 @@ import Terms from "./pages/Terms";
 import Privacy from "./pages/Privacy";
 import SubmissionGuidelines from "./pages/SubmissionGuidelines";
 import Admin from "./pages/Admin";
+import AdminDashboard from "./pages/AdminDashboard";
+import AdminModeration from "./pages/AdminModeration";
+import AdminReports from "./pages/AdminReports";
+import AdminUsers from "./pages/AdminUsers";
 import AdminSettings from "./pages/AdminSettings";
 
 const queryClient = new QueryClient();
@@ -71,7 +75,10 @@ function AppContent() {
                 <Route path="/profile" element={<Profile />} />
                 <Route path="/profile/:username" element={<Profile />} />
                 <Route path="/settings" element={<UserSettings />} />
-                <Route path="/admin" element={<Admin />} />
+                <Route path="/admin" element={<AdminDashboard />} />
+                <Route path="/admin/moderation" element={<AdminModeration />} />
+                <Route path="/admin/reports" element={<AdminReports />} />
+                <Route path="/admin/users" element={<AdminUsers />} />
                 <Route path="/admin/settings" element={<AdminSettings />} />
                 <Route path="/terms" element={<Terms />} />
                 <Route path="/privacy" element={<Privacy />} />

src/components/admin/UserManagement.tsx

@@ -1,12 +1,10 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { ProfileManager } from '@/components/moderation/ProfileManager';
 import { UserRoleManager } from '@/components/moderation/UserRoleManager';
-import { Users, Shield, UserCheck, UserX } from 'lucide-react';
+import { Shield, UserCheck } from 'lucide-react';
 export function UserManagement() {
-  return <div className="space-y-6">
+  return (
-      
+    <div className="space-y-6">
-      
       <Tabs defaultValue="profiles" className="space-y-4">
         <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="profiles" className="flex items-center gap-2">
@@ -20,22 +18,13 @@ export function UserManagement() {
         </TabsList>
 
         <TabsContent value="profiles">
-          <Card>
-            
-            <CardContent>
           <ProfileManager />
-            </CardContent>
-          </Card>
         </TabsContent>
 
         <TabsContent value="roles">
-          <Card>
-            
-            <CardContent>
           <UserRoleManager />
-            </CardContent>
-          </Card>
         </TabsContent>
       </Tabs>
-    </div>;
+    </div>
+  );
 }

src/components/layout/AdminLayout.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { AdminSidebar } from './AdminSidebar';
+import { AdminTopBar } from './AdminTopBar';
+
+interface AdminLayoutProps {
+  children: ReactNode;
+  onRefresh?: () => void;
+  refreshMode?: 'auto' | 'manual';
+  pollInterval?: number;
+  lastUpdated?: Date;
+  isRefreshing?: boolean;
+}
+
+export function AdminLayout({ 
+  children, 
+  onRefresh,
+  refreshMode,
+  pollInterval,
+  lastUpdated,
+  isRefreshing
+}: AdminLayoutProps) {
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <div className="flex min-h-screen w-full">
+        <AdminSidebar />
+        <main className="flex-1 flex flex-col overflow-hidden">
+          <AdminTopBar 
+            onRefresh={onRefresh}
+            refreshMode={refreshMode}
+            pollInterval={pollInterval}
+            lastUpdated={lastUpdated}
+            isRefreshing={isRefreshing}
+          />
+          <div className="flex-1 overflow-auto bg-muted/30">
+            <div className="container mx-auto px-6 py-8 max-w-7xl">
+              {children}
+            </div>
+          </div>
+        </main>
+      </div>
+    </SidebarProvider>
+  );
+}

src/components/layout/AdminSidebar.tsx

@@ -0,0 +1,115 @@
+import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
+import { NavLink } from 'react-router-dom';
+import { useUserRole } from '@/hooks/useUserRole';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar';
+
+export function AdminSidebar() {
+  const { state } = useSidebar();
+  const { permissions } = useUserRole();
+  const isSuperuser = permissions?.role_level === 'superuser';
+  const collapsed = state === 'collapsed';
+
+  const navItems = [
+    {
+      title: 'Dashboard',
+      url: '/admin',
+      icon: LayoutDashboard,
+    },
+    {
+      title: 'Moderation',
+      url: '/admin/moderation',
+      icon: FileText,
+    },
+    {
+      title: 'Reports',
+      url: '/admin/reports',
+      icon: Flag,
+    },
+    {
+      title: 'Users',
+      url: '/admin/users',
+      icon: Users,
+    },
+    ...(isSuperuser ? [{
+      title: 'Settings',
+      url: '/admin/settings',
+      icon: Settings,
+    }] : []),
+  ];
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader className="border-b border-border/40 px-4 py-4">
+        {!collapsed && (
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
+              <span className="text-lg">🎢</span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold">ThrillWiki</span>
+              <span className="text-xs text-muted-foreground">Admin Panel</span>
+            </div>
+          </div>
+        )}
+        {collapsed && (
+          <div className="flex items-center justify-center">
+            <span className="text-lg">🎢</span>
+          </div>
+        )}
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.url}>
+                  <SidebarMenuButton asChild tooltip={collapsed ? item.title : undefined}>
+                    <NavLink
+                      to={item.url}
+                      end={item.url === '/admin'}
+                      className={({ isActive }) =>
+                        isActive
+                          ? 'bg-accent text-accent-foreground font-medium'
+                          : 'hover:bg-accent/50'
+                      }
+                    >
+                      <item.icon className="w-4 h-4" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-border/40">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild tooltip={collapsed ? 'Back to ThrillWiki' : undefined}>
+              <NavLink to="/" className="hover:bg-accent/50">
+                <ArrowLeft className="w-4 h-4" />
+                {!collapsed && <span>Back to ThrillWiki</span>}
+              </NavLink>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

src/components/layout/AdminTopBar.tsx

@@ -0,0 +1,71 @@
+import { RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ThemeToggle } from '@/components/theme/ThemeToggle';
+import { AuthButtons } from '@/components/auth/AuthButtons';
+import { NotificationCenter } from '@/components/notifications/NotificationCenter';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { useAuth } from '@/hooks/useAuth';
+
+interface AdminTopBarProps {
+  onRefresh?: () => void;
+  refreshMode?: 'auto' | 'manual';
+  pollInterval?: number;
+  lastUpdated?: Date;
+  isRefreshing?: boolean;
+}
+
+export function AdminTopBar({ 
+  onRefresh, 
+  refreshMode, 
+  pollInterval, 
+  lastUpdated,
+  isRefreshing 
+}: AdminTopBarProps) {
+  const { user } = useAuth();
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 items-center justify-between px-4 gap-4">
+        {/* Left Section */}
+        <div className="flex items-center gap-3">
+          <SidebarTrigger className="-ml-1" />
+          
+          {refreshMode && (
+            <div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground">
+              <RefreshCw className="w-3 h-3" />
+              {refreshMode === 'auto' ? (
+                <span>Auto: {pollInterval ? pollInterval / 1000 : 30}s</span>
+              ) : (
+                <span>Manual</span>
+              )}
+              {lastUpdated && (
+                <span className="hidden md:inline">
+                  • {lastUpdated.toLocaleTimeString()}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Right Section */}
+        <div className="flex items-center gap-2">
+          {onRefresh && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onRefresh}
+              disabled={isRefreshing}
+              title="Refresh data"
+            >
+              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+              <span className="hidden sm:ml-2 sm:inline">Refresh</span>
+            </Button>
+          )}
+          <ThemeToggle />
+          {user && <NotificationCenter />}
+          <AuthButtons />
+        </div>
+      </div>
+    </header>
+  );
+}

src/pages/AdminDashboard.tsx

@@ -0,0 +1,156 @@
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FileText, Flag, AlertCircle } from 'lucide-react';
+import { useUserRole } from '@/hooks/useUserRole';
+import { useAuth } from '@/hooks/useAuth';
+import { Card, CardContent } from '@/components/ui/card';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { useModerationStats } from '@/hooks/useModerationStats';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
+
+export default function AdminDashboard() {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  const navigate = useNavigate();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  
+  const { 
+    getAdminPanelRefreshMode, 
+    getAdminPanelPollInterval,
+  } = useAdminSettings();
+  
+  const refreshMode = getAdminPanelRefreshMode();
+  const pollInterval = getAdminPanelPollInterval();
+  
+  const { stats, refresh: refreshStats, lastUpdated } = useModerationStats({
+    enabled: !!user && !authLoading && !roleLoading && isModerator(),
+    pollingEnabled: refreshMode === 'auto',
+    pollingInterval: pollInterval,
+  });
+
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true);
+    await refreshStats();
+    setTimeout(() => setIsRefreshing(false), 500);
+  }, [refreshStats]);
+
+  useEffect(() => {
+    if (!authLoading && !roleLoading) {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      
+      if (!isModerator()) {
+        navigate('/');
+        return;
+      }
+    }
+  }, [user, authLoading, roleLoading, navigate, isModerator]);
+
+  if (authLoading || roleLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading admin panel...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !isModerator()) {
+    return null;
+  }
+
+  const statCards = [
+    {
+      label: 'Pending Submissions',
+      value: stats.pendingSubmissions,
+      icon: FileText,
+      color: 'amber',
+      link: '/admin/moderation',
+    },
+    {
+      label: 'Open Reports',
+      value: stats.openReports,
+      icon: Flag,
+      color: 'red',
+      link: '/admin/reports',
+    },
+    {
+      label: 'Flagged Content',
+      value: stats.flaggedContent,
+      icon: AlertCircle,
+      color: 'orange',
+      link: '/admin/moderation',
+    },
+  ];
+
+  return (
+    <AdminLayout
+      onRefresh={handleRefresh}
+      refreshMode={refreshMode}
+      pollInterval={pollInterval}
+      lastUpdated={lastUpdated}
+      isRefreshing={isRefreshing}
+    >
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
+          <p className="text-muted-foreground mt-1">
+            Overview of moderation activity and pending items
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {statCards.map((card) => {
+            const Icon = card.icon;
+            const colorClasses = {
+              amber: {
+                card: 'hover:border-amber-500/50',
+                bg: 'bg-amber-500/10',
+                icon: 'text-amber-600 dark:text-amber-400',
+              },
+              red: {
+                card: 'hover:border-red-500/50',
+                bg: 'bg-red-500/10',
+                icon: 'text-red-600 dark:text-red-400',
+              },
+              orange: {
+                card: 'hover:border-orange-500/50',
+                bg: 'bg-orange-500/10',
+                icon: 'text-orange-600 dark:text-orange-400',
+              },
+            };
+            const colors = colorClasses[card.color as keyof typeof colorClasses];
+            
+            return (
+              <Card
+                key={card.label}
+                className={`${colors.card} transition-colors cursor-pointer`}
+                onClick={() => navigate(card.link)}
+              >
+                <CardContent className="flex items-center justify-between p-6">
+                  <div className="flex items-center gap-4">
+                    <div className={`p-3 ${colors.bg} rounded-lg`}>
+                      <Icon className={`w-5 h-5 ${colors.icon}`} />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground">
+                        {card.label}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-4xl font-bold">{card.value}</div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

src/pages/AdminModeration.tsx

@@ -0,0 +1,85 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useUserRole } from '@/hooks/useUserRole';
+import { useAuth } from '@/hooks/useAuth';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
+import { useModerationStats } from '@/hooks/useModerationStats';
+
+export default function AdminModeration() {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  const navigate = useNavigate();
+  const moderationQueueRef = useRef<ModerationQueueRef>(null);
+  
+  const { 
+    getAdminPanelRefreshMode, 
+    getAdminPanelPollInterval,
+  } = useAdminSettings();
+  
+  const refreshMode = getAdminPanelRefreshMode();
+  const pollInterval = getAdminPanelPollInterval();
+  
+  const { refresh: refreshStats, lastUpdated } = useModerationStats({
+    enabled: !!user && !authLoading && !roleLoading && isModerator(),
+    pollingEnabled: refreshMode === 'auto',
+    pollingInterval: pollInterval,
+  });
+
+  const handleRefresh = useCallback(() => {
+    moderationQueueRef.current?.refresh();
+    refreshStats();
+  }, [refreshStats]);
+
+  useEffect(() => {
+    if (!authLoading && !roleLoading) {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      
+      if (!isModerator()) {
+        navigate('/');
+        return;
+      }
+    }
+  }, [user, authLoading, roleLoading, navigate, isModerator]);
+
+  if (authLoading || roleLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading moderation queue...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !isModerator()) {
+    return null;
+  }
+
+  return (
+    <AdminLayout
+      onRefresh={handleRefresh}
+      refreshMode={refreshMode}
+      pollInterval={pollInterval}
+      lastUpdated={lastUpdated}
+    >
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Moderation Queue</h1>
+          <p className="text-muted-foreground mt-1">
+            Review and manage pending content submissions
+          </p>
+        </div>
+
+        <ModerationQueue ref={moderationQueueRef} />
+      </div>
+    </AdminLayout>
+  );
+}

src/pages/AdminReports.tsx

@@ -0,0 +1,85 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useUserRole } from '@/hooks/useUserRole';
+import { useAuth } from '@/hooks/useAuth';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
+import { useModerationStats } from '@/hooks/useModerationStats';
+
+export default function AdminReports() {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  const navigate = useNavigate();
+  const reportsQueueRef = useRef<ReportsQueueRef>(null);
+  
+  const { 
+    getAdminPanelRefreshMode, 
+    getAdminPanelPollInterval,
+  } = useAdminSettings();
+  
+  const refreshMode = getAdminPanelRefreshMode();
+  const pollInterval = getAdminPanelPollInterval();
+  
+  const { refresh: refreshStats, lastUpdated } = useModerationStats({
+    enabled: !!user && !authLoading && !roleLoading && isModerator(),
+    pollingEnabled: refreshMode === 'auto',
+    pollingInterval: pollInterval,
+  });
+
+  const handleRefresh = useCallback(() => {
+    reportsQueueRef.current?.refresh();
+    refreshStats();
+  }, [refreshStats]);
+
+  useEffect(() => {
+    if (!authLoading && !roleLoading) {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      
+      if (!isModerator()) {
+        navigate('/');
+        return;
+      }
+    }
+  }, [user, authLoading, roleLoading, navigate, isModerator]);
+
+  if (authLoading || roleLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading reports...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !isModerator()) {
+    return null;
+  }
+
+  return (
+    <AdminLayout
+      onRefresh={handleRefresh}
+      refreshMode={refreshMode}
+      pollInterval={pollInterval}
+      lastUpdated={lastUpdated}
+    >
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
+          <p className="text-muted-foreground mt-1">
+            Review and resolve user-submitted reports
+          </p>
+        </div>
+
+        <ReportsQueue ref={reportsQueueRef} />
+      </div>
+    </AdminLayout>
+  );
+}

src/pages/AdminSettings.tsx

@@ -7,7 +7,7 @@ import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { AdminHeader } from '@/components/layout/AdminHeader';
+import { AdminLayout } from '@/components/layout/AdminLayout';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
@@ -28,20 +28,17 @@ export default function AdminSettings() {
 
   if (roleLoading || isLoading) {
     return (
-      <>
+      <AdminLayout>
-        <AdminHeader />
+        <div className="flex items-center justify-center min-h-[400px]">
-        <div className="flex items-center justify-center min-h-screen">
           <Loader2 className="w-8 h-8 animate-spin" />
         </div>
-      </>
+      </AdminLayout>
     );
   }
 
   if (!user || !isSuperuser()) {
     return (
-      <>
+      <AdminLayout>
-        <AdminHeader />
-        <div className="container mx-auto px-4 py-8">
         <div className="text-center space-y-4">
           <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
           <p className="text-muted-foreground">You don't have permission to access admin settings.</p>
@@ -51,16 +48,13 @@ export default function AdminSettings() {
             </div>
           )}
         </div>
-        </div>
+      </AdminLayout>
-      </>
     );
   }
 
   if (!settings || settings.length === 0) {
     return (
-      <>
+      <AdminLayout>
-        <AdminHeader />
-        <div className="container mx-auto px-4 py-8">
         <div className="text-center space-y-4">
           <h1 className="text-2xl font-bold mb-4">No Settings Found</h1>
           <p className="text-muted-foreground">
@@ -72,8 +66,7 @@ export default function AdminSettings() {
             </div>
           )}
         </div>
-        </div>
+      </AdminLayout>
-      </>
     );
   }
 
@@ -431,13 +424,12 @@ export default function AdminSettings() {
   };
 
   return (
-    <>
+    <AdminLayout>
-      <AdminHeader />
+      <div className="space-y-6 max-w-4xl">
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+        <div>
-        <div className="mb-8">
+          <h1 className="text-2xl font-bold tracking-tight">Admin Settings</h1>
-          <h1 className="text-3xl font-bold mb-2">Admin Settings</h1>
+          <p className="text-muted-foreground mt-1">
-          <p className="text-muted-foreground">
+            Configure system-wide settings and preferences
-            Configure system-wide settings and preferences with easy-to-use controls
           </p>
         </div>
 
@@ -598,6 +590,6 @@ export default function AdminSettings() {
           </TabsContent>
         </Tabs>
       </div>
-    </>
+    </AdminLayout>
   );
 }

src/pages/AdminUsers.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useUserRole } from '@/hooks/useUserRole';
+import { useAuth } from '@/hooks/useAuth';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { UserManagement } from '@/components/admin/UserManagement';
+
+export default function AdminUsers() {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!authLoading && !roleLoading) {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      
+      if (!isModerator()) {
+        navigate('/');
+        return;
+      }
+    }
+  }, [user, authLoading, roleLoading, navigate, isModerator]);
+
+  if (authLoading || roleLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading user management...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !isModerator()) {
+    return null;
+  }
+
+  return (
+    <AdminLayout>
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">User Management</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage user profiles, roles, and permissions
+          </p>
+        </div>
+
+        <UserManagement />
+      </div>
+    </AdminLayout>
+  );
+}