Reverted to commit 095907b3a5

src/App.tsx

@@ -33,10 +33,7 @@ import NotFound from "./pages/NotFound";
 import Terms from "./pages/Terms";
 import Privacy from "./pages/Privacy";
 import SubmissionGuidelines from "./pages/SubmissionGuidelines";
-import AdminDashboard from "./pages/AdminDashboard";
-import AdminModeration from "./pages/AdminModeration";
-import AdminReports from "./pages/AdminReports";
-import AdminUsers from "./pages/AdminUsers";
+import Admin from "./pages/Admin";
 import AdminSettings from "./pages/AdminSettings";
 
 const queryClient = new QueryClient();
@@ -74,10 +71,7 @@ function AppContent() {
                 <Route path="/profile" element={<Profile />} />
                 <Route path="/profile/:username" element={<Profile />} />
                 <Route path="/settings" element={<UserSettings />} />
-            <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" element={<Admin />} />
                 <Route path="/admin/settings" element={<AdminSettings />} />
                 <Route path="/terms" element={<Terms />} />
                 <Route path="/privacy" element={<Privacy />} />

src/components/admin/UserManagement.tsx

@@ -4,7 +4,9 @@ import { ProfileManager } from '@/components/moderation/ProfileManager';
 import { UserRoleManager } from '@/components/moderation/UserRoleManager';
 import { Users, Shield, UserCheck, UserX } from 'lucide-react';
 export function UserManagement() {
-  return (
+  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">
@@ -17,13 +19,23 @@ export function UserManagement() {
           </TabsTrigger>
         </TabsList>
 
-      <TabsContent value="profiles" className="mt-4">
+        <TabsContent value="profiles">
+          <Card>
+            
+            <CardContent>
               <ProfileManager />
+            </CardContent>
+          </Card>
         </TabsContent>
 
-      <TabsContent value="roles" className="mt-4">
+        <TabsContent value="roles">
+          <Card>
+            
+            <CardContent>
               <UserRoleManager />
+            </CardContent>
+          </Card>
         </TabsContent>
       </Tabs>
-  );
+    </div>;
 }

src/components/layout/AdminHeader.tsx

@@ -27,24 +27,27 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
   const pageTitle = isSettingsPage ? 'Admin Settings' : 'Admin Dashboard';
   
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 items-center justify-between px-4 max-w-7xl">
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between px-4">
         {/* Left Section - Navigation */}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <Button variant="ghost" size="sm" asChild>
             <Link to={backLink} className="flex items-center gap-2">
               <ArrowLeft className="w-4 h-4" />
-              <span className="hidden sm:inline text-sm">{backText}</span>
+              <span className="hidden sm:inline">{backText}</span>
             </Link>
           </Button>
           
-          <div className="h-4 w-px bg-border/50 hidden sm:block" />
+          <div className="h-6 w-px bg-border hidden sm:block" />
           
-          <h1 className="text-base font-semibold">
+          <div className="flex items-center gap-2">
+            <Shield className="w-6 h-6 text-primary" />
+            <h1 className="text-lg font-semibold">
               <span className="sm:hidden">Admin</span>
               <span className="hidden sm:inline">{pageTitle}</span>
             </h1>
           </div>
+        </div>
 
         {/* Right Section - Admin actions */}
         <div className="flex items-center gap-2">
@@ -91,16 +94,16 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
             size="sm" 
             onClick={onRefresh}
             title="Refresh admin data"
-            className="hidden md:flex gap-2"
+            className="hidden md:flex"
           >
             <RefreshCw className="w-4 h-4" />
-            <span className="text-sm">Refresh</span>
+            <span className="hidden sm:ml-2 sm:inline">Refresh</span>
           </Button>
           {permissions?.role_level === 'superuser' && !isSettingsPage && (
-            <Button variant="ghost" size="sm" asChild className="hidden md:flex gap-2">
+            <Button variant="ghost" size="sm" asChild className="hidden md:flex">
               <Link to="/admin/settings">
                 <Settings className="w-4 h-4" />
-                <span className="text-sm">Settings</span>
+                <span className="hidden sm:ml-2 sm:inline">Settings</span>
               </Link>
             </Button>
           )}

src/components/layout/AdminLayout.tsx

@@ -1,62 +0,0 @@
-import { ReactNode, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import { AdminSidebar } from './AdminSidebar';
-import { AdminTopBar } from './AdminTopBar';
-import { useAuth } from '@/hooks/useAuth';
-import { useUserRole } from '@/hooks/useUserRole';
-
-interface AdminLayoutProps {
-  children: ReactNode;
-  onRefresh?: () => void;
-  isRefreshing?: boolean;
-}
-
-export function AdminLayout({ children, onRefresh, isRefreshing }: AdminLayoutProps) {
-  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="flex items-center justify-center min-h-screen">
-        <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>
-    );
-  }
-
-  if (!user || !isModerator()) {
-    return null;
-  }
-
-  return (
-    <SidebarProvider defaultOpen={true}>
-      <div className="flex min-h-screen w-full">
-        <AdminSidebar />
-        <main className="flex-1 flex flex-col">
-          <AdminTopBar onRefresh={onRefresh} isRefreshing={isRefreshing} />
-          <div className="flex-1 overflow-auto">
-            {children}
-          </div>
-        </main>
-      </div>
-    </SidebarProvider>
-  );
-}

src/components/layout/AdminSidebar.tsx

@@ -1,148 +0,0 @@
-import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
-import { NavLink, useLocation } from 'react-router-dom';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarFooter,
-  SidebarHeader,
-  useSidebar,
-} from '@/components/ui/sidebar';
-import { cn } from '@/lib/utils';
-import { useUserRole } from '@/hooks/useUserRole';
-
-const navigationItems = [
-  {
-    title: 'Dashboard',
-    url: '/admin',
-    icon: LayoutDashboard,
-  },
-  {
-    title: 'Moderation Queue',
-    url: '/admin/moderation',
-    icon: FileText,
-  },
-  {
-    title: 'Reports',
-    url: '/admin/reports',
-    icon: Flag,
-  },
-  {
-    title: 'User Management',
-    url: '/admin/users',
-    icon: Users,
-  },
-];
-
-export function AdminSidebar() {
-  const location = useLocation();
-  const { state } = useSidebar();
-  const { isSuperuser } = useUserRole();
-  const isCollapsed = state === 'collapsed';
-
-  const isActive = (path: string) => {
-    if (path === '/admin') {
-      return location.pathname === '/admin';
-    }
-    return location.pathname.startsWith(path);
-  };
-
-  return (
-    <Sidebar collapsible="icon" className="border-r">
-      <SidebarHeader className="border-b px-4 py-3">
-        <div className="flex items-center gap-2">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <span className="text-sm font-bold">TW</span>
-          </div>
-          {!isCollapsed && (
-            <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>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {navigationItems.map((item) => (
-                <SidebarMenuItem key={item.url}>
-                  <SidebarMenuButton
-                    asChild
-                    isActive={isActive(item.url)}
-                    tooltip={isCollapsed ? item.title : undefined}
-                  >
-                    <NavLink
-                      to={item.url}
-                      end={item.url === '/admin'}
-                      className={({ isActive }) =>
-                        cn(
-                          'flex items-center gap-3 rounded-md transition-colors',
-                          isActive
-                            ? 'bg-primary/10 text-primary font-medium'
-                            : 'hover:bg-muted/50'
-                        )
-                      }
-                    >
-                      <item.icon className="h-5 w-5" />
-                      {!isCollapsed && <span>{item.title}</span>}
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-
-              {isSuperuser() && (
-                <SidebarMenuItem>
-                  <SidebarMenuButton
-                    asChild
-                    isActive={isActive('/admin/settings')}
-                    tooltip={isCollapsed ? 'Settings' : undefined}
-                  >
-                    <NavLink
-                      to="/admin/settings"
-                      className={({ isActive }) =>
-                        cn(
-                          'flex items-center gap-3 rounded-md transition-colors',
-                          isActive
-                            ? 'bg-primary/10 text-primary font-medium'
-                            : 'hover:bg-muted/50'
-                        )
-                      }
-                    >
-                      <Settings className="h-5 w-5" />
-                      {!isCollapsed && <span>Settings</span>}
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              )}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-
-      <SidebarFooter className="border-t p-2">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild tooltip={isCollapsed ? 'Back to ThrillWiki' : undefined}>
-              <NavLink
-                to="/"
-                className="flex items-center gap-3 text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <ArrowLeft className="h-5 w-5" />
-                {!isCollapsed && <span>Back to ThrillWiki</span>}
-              </NavLink>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-    </Sidebar>
-  );
-}

src/components/layout/AdminTopBar.tsx

@@ -1,38 +0,0 @@
-import { RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import { ThemeToggle } from '@/components/theme/ThemeToggle';
-import { NotificationCenter } from '@/components/notifications/NotificationCenter';
-import { AuthButtons } from '@/components/auth/AuthButtons';
-
-interface AdminTopBarProps {
-  onRefresh?: () => void;
-  isRefreshing?: boolean;
-}
-
-export function AdminTopBar({ onRefresh, isRefreshing }: AdminTopBarProps) {
-  return (
-    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4">
-      <SidebarTrigger className="-ml-1" />
-      
-      {onRefresh && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onRefresh}
-          disabled={isRefreshing}
-          className="gap-2"
-        >
-          <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
-          <span className="hidden sm:inline">Refresh</span>
-        </Button>
-      )}
-
-      <div className="ml-auto flex items-center gap-2">
-        <NotificationCenter />
-        <ThemeToggle />
-        <AuthButtons />
-      </div>
-    </header>
-  );
-}

src/components/moderation/ProfileManager.tsx

@@ -264,32 +264,32 @@ export function ProfileManager() {
   }
 
   return (
-    <div className="space-y-4">
-      {/* Filters - compact single row */}
-      <div className="flex flex-col sm:flex-row gap-3">
+    <div className="space-y-6">
+      {/* Filters */}
+      <div className="flex flex-col sm:flex-row gap-4">
         <div className="relative flex-1">
           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
           <Input
             placeholder="Search users..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-10 h-9"
+            className="pl-10"
           />
         </div>
         
         <Select value={statusFilter} onValueChange={(value: 'all' | 'active' | 'banned') => setStatusFilter(value)}>
-          <SelectTrigger className="w-full sm:w-[140px] h-9">
+          <SelectTrigger className="w-full sm:w-[180px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all">All Status</SelectItem>
+            <SelectItem value="all">All Users</SelectItem>
             <SelectItem value="active">Active</SelectItem>
             <SelectItem value="banned">Banned</SelectItem>
           </SelectContent>
         </Select>
 
         <Select value={roleFilter} onValueChange={(value: 'all' | UserRole) => setRoleFilter(value)}>
-          <SelectTrigger className="w-full sm:w-[140px] h-9">
+          <SelectTrigger className="w-full sm:w-[180px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -305,51 +305,49 @@ export function ProfileManager() {
       {/* Users List */}
       {loading ? (
         <div className="flex items-center justify-center py-8">
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
         </div>
       ) : (
-        <div className="space-y-2">
+        <div className="grid gap-4">
           {filteredProfiles.map((profile) => (
-            <Card key={profile.id} className="border-border/50 hover:border-border transition-colors">
-              <CardContent className="p-4">
-                <div className="flex items-center justify-between gap-4">
-                  <div className="flex items-center gap-3 min-w-0 flex-1">
-                    <Avatar className="w-10 h-10 flex-shrink-0">
+            <Card key={profile.id}>
+              <CardContent className="p-6">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-4">
+                    <Avatar className="w-12 h-12">
                       <AvatarImage src={profile.avatar_url} alt={profile.username} />
-                      <AvatarFallback className="text-xs">
+                      <AvatarFallback>
                         {profile.display_name?.[0] || profile.username[0]}
                       </AvatarFallback>
                     </Avatar>
                     
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-2 flex-wrap">
-                        <h3 className="font-medium text-sm truncate">{profile.display_name || profile.username}</h3>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-medium">{profile.display_name || profile.username}</h3>
                         {profile.banned && (
-                          <Badge variant="destructive" className="text-xs h-5">
+                          <Badge variant="destructive" className="text-xs">
                             <Ban className="w-3 h-3 mr-1" />
                             Banned
                           </Badge>
                         )}
                       </div>
-                      <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-                        <p className="text-xs text-muted-foreground">@{profile.username}</p>
-                        <div className="flex gap-1.5">
+                      <p className="text-sm text-muted-foreground">@{profile.username}</p>
+                      <div className="flex gap-2 mt-1">
                         {profile.roles.length > 0 ? (
                           profile.roles.map((role) => (
-                              <Badge key={role} variant="secondary" className="text-xs h-5">
+                            <Badge key={role} variant="secondary" className="text-xs">
                               {role}
                             </Badge>
                           ))
                         ) : (
-                            <Badge variant="outline" className="text-xs h-5">User</Badge>
+                          <Badge variant="outline" className="text-xs">User</Badge>
                         )}
                       </div>
                     </div>
                   </div>
-                  </div>
 
                   {canManageUser(profile) && (
-                    <div className="flex items-center gap-2 flex-shrink-0">
+                    <div className="flex items-center gap-2">
                       {/* Ban/Unban Button */}
                       {permissions.can_ban_any_user && (
                         <AlertDialog>
@@ -357,18 +355,17 @@ export function ProfileManager() {
                             <Button
                               variant={profile.banned ? "outline" : "destructive"}
                               size="sm"
-                              className="h-8"
                               disabled={actionLoading === profile.user_id}
                             >
                               {profile.banned ? (
                                 <>
-                                  <UserCheck className="w-3 h-3 sm:mr-2" />
-                                  <span className="hidden sm:inline">Unban</span>
+                                  <UserCheck className="w-4 h-4 mr-2" />
+                                  Unban
                                 </>
                               ) : (
                                 <>
-                                  <UserX className="w-3 h-3 sm:mr-2" />
-                                  <span className="hidden sm:inline">Ban</span>
+                                  <UserX className="w-4 h-4 mr-2" />
+                                  Ban
                                 </>
                               )}
                             </Button>
@@ -402,18 +399,18 @@ export function ProfileManager() {
                           onValueChange={(value) => handleRoleChange(profile.user_id, value as UserRole | 'remove', profile.roles)}
                           disabled={actionLoading === profile.user_id}
                         >
-                          <SelectTrigger className="w-[100px] sm:w-[130px] h-8">
-                            <SelectValue placeholder="Role" />
+                          <SelectTrigger className="w-[140px]">
+                            <SelectValue placeholder="Change Role" />
                           </SelectTrigger>
                           <SelectContent>
-                            <SelectItem value="user">User</SelectItem>
+                            <SelectItem value="user">Make User</SelectItem>
                             {permissions.can_manage_moderator_roles && (
-                              <SelectItem value="moderator">Moderator</SelectItem>
+                              <SelectItem value="moderator">Make Moderator</SelectItem>
                             )}
                             {permissions.can_manage_admin_roles && (
-                              <SelectItem value="admin">Admin</SelectItem>
+                              <SelectItem value="admin">Make Admin</SelectItem>
                             )}
-                            <SelectItem value="remove">Remove</SelectItem>
+                            <SelectItem value="remove">Remove Roles</SelectItem>
                           </SelectContent>
                         </Select>
                       )}
@@ -425,10 +422,10 @@ export function ProfileManager() {
           ))}
           
           {filteredProfiles.length === 0 && (
-            <div className="text-center py-12">
-              <AlertTriangle className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
-              <h3 className="text-base font-semibold mb-1">No Users Found</h3>
-              <p className="text-sm text-muted-foreground">
+            <div className="text-center py-8">
+              <AlertTriangle className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+              <h3 className="text-lg font-semibold mb-2">No Users Found</h3>
+              <p className="text-muted-foreground">
                 No users match your current filters.
               </p>
             </div>

src/components/moderation/ReportsQueue.tsx

@@ -212,44 +212,47 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       {reports.map((report) => (
-        <Card key={report.id} className="border-border/50 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-red-500/50 before:rounded-l">
-          <CardHeader className="pb-3 pt-4">
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex items-center gap-2 flex-wrap">
-                <Badge variant="destructive" className="text-xs">
+        <Card key={report.id} className="border-l-4 border-l-red-500">
+          <CardHeader className="pb-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Badge variant="destructive">
                   <Flag className="w-3 h-3 mr-1" />
                   {REPORT_TYPE_LABELS[report.report_type as keyof typeof REPORT_TYPE_LABELS]}
                 </Badge>
-                <Badge variant="outline" className="text-xs">
+                <Badge variant="outline">
                   {report.reported_entity_type}
                 </Badge>
               </div>
-              <div className="flex items-center gap-1.5 text-xs text-muted-foreground whitespace-nowrap">
-                <Calendar className="w-3 h-3" />
-                {format(new Date(report.created_at), 'MMM d, HH:mm')}
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Calendar className="w-4 h-4" />
+                {format(new Date(report.created_at), 'MMM d, yyyy HH:mm')}
               </div>
             </div>
             
             {report.reporter_profile && (
-              <div className="flex items-center gap-2 text-xs text-muted-foreground mt-2">
-                <User className="w-3 h-3" />
-                <span className="font-medium text-foreground">
+              <div className="flex items-center gap-2 text-sm">
+                <User className="w-4 h-4 text-muted-foreground" />
+                <span>Reported by:</span>
+                <span className="font-medium">
                   {report.reporter_profile.display_name || report.reporter_profile.username}
                 </span>
                 {report.reporter_profile.display_name && (
-                  <span>@{report.reporter_profile.username}</span>
+                  <span className="text-muted-foreground">
+                    @{report.reporter_profile.username}
+                  </span>
                 )}
               </div>
             )}
           </CardHeader>
           
-          <CardContent className="space-y-3 pt-0">
+          <CardContent className="space-y-4">
             {report.reason && (
               <div>
-                <Label className="text-xs text-muted-foreground">Reason</Label>
-                <p className="text-sm bg-muted/30 p-2.5 rounded-lg mt-1">
+                <Label>Report Reason:</Label>
+                <p className="text-sm bg-muted/50 p-3 rounded-lg mt-1">
                   {report.reason}
                 </p>
               </div>
@@ -257,17 +260,17 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
             
             {report.reported_content && (
               <div>
-                <Label className="text-xs text-muted-foreground">Reported Content</Label>
-                <div className="bg-muted/30 border border-border/50 p-3 rounded-lg mt-1">
+                <Label>Reported Content:</Label>
+                <div className="bg-destructive/5 border border-destructive/20 p-4 rounded-lg mt-1">
                   {report.reported_entity_type === 'review' && (
                     <div>
                       {report.reported_content.title && (
-                        <h4 className="font-medium text-sm mb-1.5">{report.reported_content.title}</h4>
+                        <h4 className="font-semibold mb-2">{report.reported_content.title}</h4>
                       )}
                       {report.reported_content.content && (
-                        <p className="text-sm text-muted-foreground mb-2">{report.reported_content.content}</p>
+                        <p className="text-sm mb-2">{report.reported_content.content}</p>
                       )}
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-sm text-muted-foreground">
                         Rating: {report.reported_content.rating}/5
                       </div>
                     </div>
@@ -276,11 +279,10 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
               </div>
             )}
             
-            <div className="flex gap-2 pt-1">
+            <div className="flex gap-2 pt-2">
               <Button
                 onClick={() => handleReportAction(report.id, 'reviewed')}
                 disabled={actionLoading === report.id}
-                size="sm"
                 className="flex-1"
               >
                 <CheckCircle className="w-4 h-4 mr-2" />
@@ -288,7 +290,6 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
               </Button>
               <Button
                 variant="outline"
-                size="sm"
                 onClick={() => handleReportAction(report.id, 'dismissed')}
                 disabled={actionLoading === report.id}
                 className="flex-1"

src/components/moderation/UserRoleManager.tsx

@@ -179,30 +179,28 @@ export function UserRoleManager() {
       </div>;
   }
   const filteredRoles = userRoles.filter(role => role.profiles?.username?.toLowerCase().includes(searchTerm.toLowerCase()) || role.profiles?.display_name?.toLowerCase().includes(searchTerm.toLowerCase()) || role.role.toLowerCase().includes(searchTerm.toLowerCase()));
-  return <div className="space-y-4">
+  return <div className="space-y-6">
       {/* Add new role */}
-      <Card className="border-border/50">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-base">Grant Role</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <Card>
+        
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <Label htmlFor="user-search" className="text-sm">Search Users</Label>
+              <Label htmlFor="user-search">Search Users</Label>
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-                <Input id="user-search" placeholder="Search by username..." value={newUserSearch} onChange={e => setNewUserSearch(e.target.value)} className="pl-10 h-9 mt-1" />
+                <Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+                <Input id="user-search" placeholder="Search by username or display name..." value={newUserSearch} onChange={e => setNewUserSearch(e.target.value)} className="pl-10" />
               </div>
               
-              {searchResults.length > 0 && <div className="mt-2 border border-border/50 rounded-lg bg-background max-h-[200px] overflow-y-auto">
-                  {searchResults.map(profile => <div key={profile.user_id} className="p-2.5 hover:bg-muted/50 cursor-pointer border-b border-border/50 last:border-b-0 text-sm" onClick={() => {
+              {searchResults.length > 0 && <div className="mt-2 border rounded-lg bg-background">
+                  {searchResults.map(profile => <div key={profile.user_id} className="p-3 hover:bg-muted/50 cursor-pointer border-b last:border-b-0" onClick={() => {
                 setNewUserSearch(profile.display_name || profile.username);
                 setSearchResults([profile]);
               }}>
                       <div className="font-medium">
                         {profile.display_name || profile.username}
                       </div>
-                      {profile.display_name && <div className="text-xs text-muted-foreground">
+                      {profile.display_name && <div className="text-sm text-muted-foreground">
                           @{profile.username}
                         </div>}
                     </div>)}
@@ -210,10 +208,10 @@ export function UserRoleManager() {
             </div>
             
             <div>
-              <Label htmlFor="role-select" className="text-sm">Role</Label>
+              <Label htmlFor="role-select">Role</Label>
               <Select value={newRole} onValueChange={setNewRole}>
-                <SelectTrigger className="h-9 mt-1">
-                  <SelectValue placeholder="Select role" />
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a role" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="moderator">Moderator</SelectItem>
@@ -228,7 +226,7 @@ export function UserRoleManager() {
           if (selectedUser && newRole) {
             grantRole(selectedUser.user_id, newRole as 'admin' | 'moderator' | 'user');
           }
-        }} disabled={!newRole || !searchResults.find(p => (p.display_name || p.username) === newUserSearch) || actionLoading === 'grant'} size="sm" className="w-full md:w-auto">
+        }} disabled={!newRole || !searchResults.find(p => (p.display_name || p.username) === newUserSearch) || actionLoading === 'grant'} className="w-full md:w-auto">
             {actionLoading === 'grant' ? 'Granting...' : 'Grant Role'}
           </Button>
         </CardContent>
@@ -236,39 +234,39 @@ export function UserRoleManager() {
 
       {/* Search existing roles */}
       <div>
-        <Label htmlFor="role-search" className="text-sm">Search Existing Roles</Label>
+        <Label htmlFor="role-search">Search Existing Roles</Label>
         <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <Input id="role-search" placeholder="Search users with roles..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10 h-9 mt-1" />
+          <Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+          <Input id="role-search" placeholder="Search users with roles..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10" />
         </div>
       </div>
 
       {/* User roles list */}
-      <div className="space-y-2">
-        {filteredRoles.length === 0 ? <div className="text-center py-12">
-            <Shield className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
-            <h3 className="text-base font-semibold mb-1">No roles found</h3>
-            <p className="text-sm text-muted-foreground">
-              {searchTerm ? 'No users match your search.' : 'No user roles granted yet.'}
+      <div className="space-y-3">
+        {filteredRoles.length === 0 ? <div className="text-center py-8">
+            <Shield className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No roles found</h3>
+            <p className="text-muted-foreground">
+              {searchTerm ? 'No users match your search criteria.' : 'No user roles have been granted yet.'}
             </p>
-          </div> : filteredRoles.map(userRole => <Card key={userRole.id} className="border-border/50">
-              <CardContent className="flex items-center justify-between p-3">
-                <div className="flex items-center gap-3 min-w-0 flex-1">
-                  <div className="min-w-0">
-                    <div className="font-medium text-sm truncate">
+          </div> : filteredRoles.map(userRole => <Card key={userRole.id}>
+              <CardContent className="flex items-center justify-between p-4">
+                <div className="flex items-center gap-3">
+                  <div>
+                    <div className="font-medium">
                       {userRole.profiles?.display_name || userRole.profiles?.username}
                     </div>
-                    {userRole.profiles?.display_name && <div className="text-xs text-muted-foreground">
+                    {userRole.profiles?.display_name && <div className="text-sm text-muted-foreground">
                         @{userRole.profiles.username}
                       </div>}
                   </div>
-                  <Badge variant={userRole.role === 'admin' ? 'default' : 'secondary'} className="text-xs h-5">
+                  <Badge variant={userRole.role === 'admin' ? 'default' : 'secondary'}>
                     {userRole.role}
                   </Badge>
                 </div>
                 
                 {/* Only show revoke button if current user can manage this role */}
-                {(isSuperuser() || isAdmin() && !['admin', 'superuser'].includes(userRole.role)) && <Button variant="outline" size="sm" onClick={() => revokeRole(userRole.id)} disabled={actionLoading === userRole.id} className="h-8 w-8 p-0 flex-shrink-0">
+                {(isSuperuser() || isAdmin() && !['admin', 'superuser'].includes(userRole.role)) && <Button variant="outline" size="sm" onClick={() => revokeRole(userRole.id)} disabled={actionLoading === userRole.id}>
                     <X className="w-4 h-4" />
                   </Button>}
               </CardContent>

src/pages/Admin.tsx

@@ -79,88 +79,75 @@ export default function Admin() {
   return (
     <>
       <AdminHeader onRefresh={handleRefresh} />
-      <div className="container mx-auto px-4 py-8 max-w-7xl">
-        {/* Refresh status indicator - subtle */}
-        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
-          <RefreshCw className="w-3 h-3" />
+      <div className="container mx-auto px-4 py-8">
+      <div className="space-y-4 mb-8">
+        {/* Refresh status indicator */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <RefreshCw className="w-4 h-4" />
             {refreshMode === 'auto' ? (
               <span>Auto-refresh: every {pollInterval / 1000}s</span>
             ) : (
-            <span>Manual refresh</span>
+              <span>Manual refresh only</span>
             )}
             {lastUpdated && (
-            <span>• {lastUpdated.toLocaleTimeString()}</span>
+              <span className="text-xs">
+                • Last updated: {lastUpdated.toLocaleTimeString()}
+              </span>
             )}
           </div>
+        </div>
 
-        {/* Stats cards - horizontal layout */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
-          <Card className="border-border/50 hover:border-border/80 transition-colors">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="p-2 rounded-lg bg-amber-500/10">
-                    <FileText className="h-5 w-5 text-amber-700 dark:text-amber-300" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">Pending</p>
-                    <p className="text-xs text-muted-foreground/80">Submissions</p>
-                  </div>
-                </div>
-                <div className="text-4xl font-bold text-amber-700 dark:text-amber-300">
+        {/* Stats cards */}
+        <div className="grid grid-cols-3 gap-3 md:gap-6">
+          <Card>
+            <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
+              <FileText className="h-4 w-4 text-muted-foreground mb-2" />
+              <CardTitle className="text-sm font-medium">Pending Submissions</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <div className="text-2xl font-bold">
                 {stats.pendingSubmissions}
               </div>
-              </div>
             </CardContent>
           </Card>
           
-          <Card className="border-border/50 hover:border-border/80 transition-colors">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="p-2 rounded-lg bg-red-500/10">
-                    <Flag className="h-5 w-5 text-red-700 dark:text-red-300" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">Open</p>
-                    <p className="text-xs text-muted-foreground/80">Reports</p>
-                  </div>
-                </div>
-                <div className="text-4xl font-bold text-red-700 dark:text-red-300">
+          <Card>
+            <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
+              <Flag className="h-4 w-4 text-muted-foreground mb-2" />
+              <CardTitle className="text-sm font-medium">Open Reports</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <div className="text-2xl font-bold">
                 {stats.openReports}
               </div>
-              </div>
             </CardContent>
           </Card>
           
-          <Card className="border-border/50 hover:border-border/80 transition-colors">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="p-2 rounded-lg bg-orange-500/10">
-                    <AlertCircle className="h-5 w-5 text-orange-700 dark:text-orange-300" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">Flagged</p>
-                    <p className="text-xs text-muted-foreground/80">Content</p>
-                  </div>
-                </div>
-                <div className="text-4xl font-bold text-orange-700 dark:text-orange-300">
+          <Card>
+            <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
+              <AlertCircle className="h-4 w-4 text-muted-foreground mb-2" />
+              <CardTitle className="text-sm font-medium">Flagged Content</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <div className="text-2xl font-bold">
                 {stats.flaggedContent}
               </div>
-              </div>
             </CardContent>
           </Card>
         </div>
+      </div>
 
-        {/* Content Moderation Section - flatter design */}
-        <div className="space-y-8">
-          <div>
-            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+      {/* Content Moderation Section */}
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
             <Shield className="w-5 h-5" />
             Moderation Queue
-            </h2>
-            <Tabs defaultValue="queue" className="space-y-4">
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="queue" className="space-y-6">
             <TabsList className="grid w-full grid-cols-2">
               <TabsTrigger value="queue" className="flex items-center gap-2">
                 <FileText className="w-4 h-4" />
@@ -172,25 +159,29 @@ export default function Admin() {
               </TabsTrigger>
             </TabsList>
             
-              <TabsContent value="queue" className="mt-4">
+            <TabsContent value="queue">
               <ModerationQueue ref={moderationQueueRef} />
             </TabsContent>
             
-              <TabsContent value="reports" className="mt-4">
+            <TabsContent value="reports">
               <ReportsQueue ref={reportsQueueRef} />
             </TabsContent>
           </Tabs>
-          </div>
+        </CardContent>
+      </Card>
 
-          {/* User Management Section - flatter design */}
-          <div>
-            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+      {/* User Management Section */}
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
             <Users className="w-5 h-5" />
             User Management
-            </h2>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
           <UserManagement />
-          </div>
-        </div>
+        </CardContent>
+      </Card>
       </div>
     </>
   );

src/pages/AdminDashboard.tsx

@@ -1,116 +0,0 @@
-import { useRef, useCallback } from 'react';
-import { RefreshCw, FileText, Flag, AlertCircle } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-import { AdminLayout } from '@/components/layout/AdminLayout';
-import { useModerationStats } from '@/hooks/useModerationStats';
-import { useAdminSettings } from '@/hooks/useAdminSettings';
-import { useAuth } from '@/hooks/useAuth';
-import { useUserRole } from '@/hooks/useUserRole';
-
-export default function AdminDashboard() {
-  const { user, loading: authLoading } = useAuth();
-  const { isModerator, loading: roleLoading } = useUserRole();
-  
-  // Get admin settings for polling configuration
-  const { 
-    getAdminPanelRefreshMode, 
-    getAdminPanelPollInterval,
-  } = useAdminSettings();
-  
-  const refreshMode = getAdminPanelRefreshMode();
-  const pollInterval = getAdminPanelPollInterval();
-  
-  // Use stats hook with configurable polling
-  const { stats, refresh: refreshStats, lastUpdated } = useModerationStats({
-    enabled: !!user && !authLoading && !roleLoading && isModerator(),
-    pollingEnabled: refreshMode === 'auto',
-    pollingInterval: pollInterval,
-  });
-
-  const handleRefresh = useCallback(() => {
-    refreshStats();
-  }, [refreshStats]);
-
-  return (
-    <AdminLayout onRefresh={handleRefresh}>
-      <div className="container mx-auto px-6 py-8 max-w-7xl">
-        {/* Refresh status indicator */}
-        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
-          <RefreshCw className="w-3 h-3" />
-          {refreshMode === 'auto' ? (
-            <span>Auto-refresh: every {pollInterval / 1000}s</span>
-          ) : (
-            <span>Manual refresh</span>
-          )}
-          {lastUpdated && (
-            <span>• {lastUpdated.toLocaleTimeString()}</span>
-          )}
-        </div>
-
-        {/* Stats Overview */}
-        <div>
-          <h1 className="text-2xl font-bold mb-6">Dashboard Overview</h1>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <Card className="border-border/50 hover:border-border/80 transition-colors">
-              <CardContent className="p-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="p-2 rounded-lg bg-amber-500/10">
-                      <FileText className="h-5 w-5 text-amber-700 dark:text-amber-300" />
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-muted-foreground">Pending</p>
-                      <p className="text-xs text-muted-foreground/80">Submissions</p>
-                    </div>
-                  </div>
-                  <div className="text-4xl font-bold text-amber-700 dark:text-amber-300">
-                    {stats.pendingSubmissions}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-            
-            <Card className="border-border/50 hover:border-border/80 transition-colors">
-              <CardContent className="p-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="p-2 rounded-lg bg-red-500/10">
-                      <Flag className="h-5 w-5 text-red-700 dark:text-red-300" />
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-muted-foreground">Open</p>
-                      <p className="text-xs text-muted-foreground/80">Reports</p>
-                    </div>
-                  </div>
-                  <div className="text-4xl font-bold text-red-700 dark:text-red-300">
-                    {stats.openReports}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-            
-            <Card className="border-border/50 hover:border-border/80 transition-colors">
-              <CardContent className="p-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="p-2 rounded-lg bg-orange-500/10">
-                      <AlertCircle className="h-5 w-5 text-orange-700 dark:text-orange-300" />
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-muted-foreground">Flagged</p>
-                      <p className="text-xs text-muted-foreground/80">Content</p>
-                    </div>
-                  </div>
-                  <div className="text-4xl font-bold text-orange-700 dark:text-orange-300">
-                    {stats.flaggedContent}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </AdminLayout>
-  );
-}

src/pages/AdminModeration.tsx

@@ -1,22 +0,0 @@
-import { useRef, useCallback } from 'react';
-import { AdminLayout } from '@/components/layout/AdminLayout';
-import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
-
-export default function AdminModeration() {
-  const moderationQueueRef = useRef<ModerationQueueRef>(null);
-
-  const handleRefresh = useCallback(() => {
-    moderationQueueRef.current?.refresh();
-  }, []);
-
-  return (
-    <AdminLayout onRefresh={handleRefresh}>
-      <div className="container mx-auto px-6 py-8 max-w-7xl">
-        <div>
-          <h1 className="text-2xl font-bold mb-6">Moderation Queue</h1>
-          <ModerationQueue ref={moderationQueueRef} />
-        </div>
-      </div>
-    </AdminLayout>
-  );
-}

src/pages/AdminReports.tsx

@@ -1,22 +0,0 @@
-import { useRef, useCallback } from 'react';
-import { AdminLayout } from '@/components/layout/AdminLayout';
-import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
-
-export default function AdminReports() {
-  const reportsQueueRef = useRef<ReportsQueueRef>(null);
-
-  const handleRefresh = useCallback(() => {
-    reportsQueueRef.current?.refresh();
-  }, []);
-
-  return (
-    <AdminLayout onRefresh={handleRefresh}>
-      <div className="container mx-auto px-6 py-8 max-w-7xl">
-        <div>
-          <h1 className="text-2xl font-bold mb-6">Reports Queue</h1>
-          <ReportsQueue ref={reportsQueueRef} />
-        </div>
-      </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 { AdminLayout } from '@/components/layout/AdminLayout';
+import { AdminHeader } from '@/components/layout/AdminHeader';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
@@ -28,18 +28,20 @@ export default function AdminSettings() {
 
   if (roleLoading || isLoading) {
     return (
-      <AdminLayout>
+      <>
+        <AdminHeader />
         <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>
-        <div className="container mx-auto px-6 py-8">
+      <>
+        <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>
@@ -50,14 +52,15 @@ export default function AdminSettings() {
             )}
           </div>
         </div>
-      </AdminLayout>
+      </>
     );
   }
 
   if (!settings || settings.length === 0) {
     return (
-      <AdminLayout>
-        <div className="container mx-auto px-6 py-8">
+      <>
+        <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">
@@ -70,7 +73,7 @@ export default function AdminSettings() {
             )}
           </div>
         </div>
-      </AdminLayout>
+      </>
     );
   }
 
@@ -428,10 +431,11 @@ export default function AdminSettings() {
   };
 
   return (
-    <AdminLayout>
-      <div className="container mx-auto px-6 py-8 max-w-6xl">
+    <>
+      <AdminHeader />
+      <div className="container mx-auto px-4 py-8 max-w-4xl">
         <div className="mb-8">
-          <h1 className="text-2xl font-bold mb-2">Admin Settings</h1>
+          <h1 className="text-3xl font-bold mb-2">Admin Settings</h1>
           <p className="text-muted-foreground">
             Configure system-wide settings and preferences with easy-to-use controls
           </p>
@@ -594,6 +598,6 @@ export default function AdminSettings() {
           </TabsContent>
         </Tabs>
       </div>
-    </AdminLayout>
+    </>
   );
 }

src/pages/AdminUsers.tsx

@@ -1,15 +0,0 @@
-import { AdminLayout } from '@/components/layout/AdminLayout';
-import { UserManagement } from '@/components/admin/UserManagement';
-
-export default function AdminUsers() {
-  return (
-    <AdminLayout>
-      <div className="container mx-auto px-6 py-8 max-w-7xl">
-        <div>
-          <h1 className="text-2xl font-bold mb-6">User Management</h1>
-          <UserManagement />
-        </div>
-      </div>
-    </AdminLayout>
-  );
-}