feat: implement sidebar and random pages for test

src/pages/AdminUsersPage.tsx

@@ -0,0 +1,161 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { useAuth } from '@/contexts/AuthContext'
+
+export function AdminUsersPage() {
+  const { user } = useAuth()
+
+  // Mock user data - in real app this would come from API
+  const users = [
+    {
+      id: '1',
+      name: 'John Doe',
+      email: 'john@example.com',
+      role: 'admin',
+      is_active: true,
+      providers: ['password', 'google'],
+      created_at: '2024-01-15T10:30:00Z'
+    },
+    {
+      id: '2', 
+      name: 'Jane Smith',
+      email: 'jane@example.com',
+      role: 'user',
+      is_active: true,
+      providers: ['github'],
+      created_at: '2024-01-20T14:15:00Z'
+    },
+    {
+      id: '3',
+      name: 'Bob Wilson',
+      email: 'bob@example.com', 
+      role: 'user',
+      is_active: false,
+      providers: ['password'],
+      created_at: '2024-01-25T09:45:00Z'
+    }
+  ]
+
+  if (user?.role !== 'admin') {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Card>
+          <CardHeader>
+            <CardTitle>Access Denied</CardTitle>
+            <CardDescription>You don't have permission to access this page.</CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">User Management</h1>
+          <p className="text-muted-foreground">Manage users and their permissions</p>
+        </div>
+        <Button>Add User</Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Users</CardTitle>
+          <CardDescription>All registered users in the system</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {users.map((userData) => (
+              <div 
+                key={userData.id}
+                className="flex items-center justify-between p-4 border rounded-lg"
+              >
+                <div className="flex items-center space-x-4">
+                  <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
+                    <span className="text-sm font-medium">
+                      {userData.name.split(' ').map(n => n[0]).join('')}
+                    </span>
+                  </div>
+                  
+                  <div className="space-y-1">
+                    <div className="flex items-center space-x-2">
+                      <span className="font-medium">{userData.name}</span>
+                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        userData.role === 'admin' 
+                          ? 'bg-purple-100 text-purple-800' 
+                          : 'bg-green-100 text-green-800'
+                      }`}>
+                        {userData.role}
+                      </span>
+                      {!userData.is_active && (
+                        <span className="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">
+                          Disabled
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-muted-foreground">{userData.email}</p>
+                    <div className="flex gap-1">
+                      {userData.providers.map((provider) => (
+                        <span 
+                          key={provider}
+                          className="px-1.5 py-0.5 bg-secondary rounded text-xs"
+                        >
+                          {provider}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Button variant="outline" size="sm">
+                    Edit
+                  </Button>
+                  <Button 
+                    variant={userData.is_active ? "outline" : "default"} 
+                    size="sm"
+                  >
+                    {userData.is_active ? 'Disable' : 'Enable'}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-6 md:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle>Total Users</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{users.length}</div>
+            <p className="text-xs text-muted-foreground">Registered users</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Active Users</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{users.filter(u => u.is_active).length}</div>
+            <p className="text-xs text-muted-foreground">Currently active</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Admins</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{users.filter(u => u.role === 'admin').length}</div>
+            <p className="text-xs text-muted-foreground">Administrator accounts</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}