From 6e05ef886d8d93136e88497ce015c4e849730e25 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 28 Sep 2025 18:45:50 +0000
Subject: [PATCH] Refactor Admin Page Structure

---
 src/components/admin/UserManagement.tsx | 57 +++++++++++++++++++++++++
 src/pages/Admin.tsx                     | 39 +++--------------
 2 files changed, 62 insertions(+), 34 deletions(-)
 create mode 100644 src/components/admin/UserManagement.tsx

diff --git a/src/components/admin/UserManagement.tsx b/src/components/admin/UserManagement.tsx
new file mode 100644
index 00000000..24388924
--- /dev/null
+++ b/src/components/admin/UserManagement.tsx
@@ -0,0 +1,57 @@
+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';
+
+export function UserManagement() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <Users className="w-6 h-6 text-primary" />
+        <h2 className="text-2xl font-semibold">User Management</h2>
+      </div>
+      
+      <Tabs defaultValue="profiles" className="space-y-4">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="profiles" className="flex items-center gap-2">
+            <UserCheck className="w-4 h-4" />
+            Profile Management
+          </TabsTrigger>
+          <TabsTrigger value="roles" className="flex items-center gap-2">
+            <Shield className="w-4 h-4" />
+            Role Management
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="profiles">
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile Management</CardTitle>
+              <CardDescription>
+                Manage user profiles, ban users, and handle account moderation
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ProfileManager />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="roles">
+          <Card>
+            <CardHeader>
+              <CardTitle>Role Management</CardTitle>
+              <CardDescription>
+                Assign and manage user roles and permissions
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <UserRoleManager />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
index 71db9387..f3f1056b 100644
--- a/src/pages/Admin.tsx
+++ b/src/pages/Admin.tsx
@@ -8,8 +8,7 @@ import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ModerationQueue } from '@/components/moderation/ModerationQueue';
 import { ReportsQueue } from '@/components/moderation/ReportsQueue';
-import { UserRoleManager } from '@/components/moderation/UserRoleManager';
-import { ProfileManager } from '@/components/moderation/ProfileManager';
+import { UserManagement } from '@/components/admin/UserManagement';
 import { AdminHeader } from '@/components/layout/AdminHeader';
 
 export default function Admin() {
@@ -100,7 +99,7 @@ export default function Admin() {
       </div>
 
       <Tabs defaultValue="queue" className="space-y-6">
-        <TabsList className="grid w-full grid-cols-4">
+        <TabsList className="grid w-full grid-cols-3">
           <TabsTrigger value="queue" className="flex items-center gap-2">
             <FileText className="w-4 h-4" />
             Moderation Queue
@@ -109,13 +108,9 @@ export default function Admin() {
             <Flag className="w-4 h-4" />
             Reports
           </TabsTrigger>
-          <TabsTrigger value="profiles" className="flex items-center gap-2">
-            <Users className="w-4 h-4" />
-            Profile Management
-          </TabsTrigger>
           <TabsTrigger value="users" className="flex items-center gap-2">
-            <Shield className="w-4 h-4" />
-            User Roles
+            <Users className="w-4 h-4" />
+            User Management
           </TabsTrigger>
         </TabsList>
         
@@ -147,32 +142,8 @@ export default function Admin() {
           </Card>
         </TabsContent>
         
-        <TabsContent value="profiles">
-          <Card>
-            <CardHeader>
-              <CardTitle>Profile Management</CardTitle>
-              <CardDescription>
-                Manage user profiles, ban status, and role assignments
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <ProfileManager />
-            </CardContent>
-          </Card>
-        </TabsContent>
-        
         <TabsContent value="users">
-          <Card>
-            <CardHeader>
-              <CardTitle>User Role Management</CardTitle>
-              <CardDescription>
-                Advanced role management and user search
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <UserRoleManager />
-            </CardContent>
-          </Card>
+          <UserManagement />
         </TabsContent>
       </Tabs>
       </div>