feat: Add refresh button and admin restrictions

src/components/layout/AdminHeader.tsx

@@ -1,4 +1,4 @@
-import { Shield, ArrowLeft, Settings } from 'lucide-react';
+import { Shield, ArrowLeft, Settings, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Link } from 'react-router-dom';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
@@ -30,6 +30,15 @@ export function AdminHeader() {
 
         {/* Right Section - Admin actions */}
         <div className="flex items-center gap-2">
+          <Button 
+            variant="ghost" 
+            size="sm" 
+            onClick={() => window.location.reload()}
+            title="Refresh admin data"
+          >
+            <RefreshCw className="w-4 h-4" />
+            <span className="hidden sm:ml-2 sm:inline">Refresh</span>
+          </Button>
           {permissions?.role_level === 'superuser' && (
             <Button variant="ghost" size="sm" asChild>
               <Link to="/admin/settings">

src/components/moderation/UserRoleManager.tsx

@@ -37,7 +37,7 @@ export function UserRoleManager() {
   const [searchResults, setSearchResults] = useState<any[]>([]);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const { user } = useAuth();
-  const { isAdmin } = useUserRole();
+  const { isAdmin, isSuperuser, permissions } = useUserRole();
   const { toast } = useToast();
 
   const fetchUserRoles = async () => {
@@ -271,7 +271,9 @@ export function UserRoleManager() {
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="moderator">Moderator</SelectItem>
-                  <SelectItem value="admin">Administrator</SelectItem>
+                  {isSuperuser() && (
+                    <SelectItem value="admin">Administrator</SelectItem>
+                  )}
                 </SelectContent>
               </Select>
             </div>
@@ -343,14 +345,17 @@ export function UserRoleManager() {
                   </Badge>
                 </div>
                 
-                <Button
+                {/* Only show revoke button if current user can manage this role */}
-                  variant="outline"
+                {(isSuperuser() || (isAdmin() && !['admin', 'superuser'].includes(userRole.role))) && (
-                  size="sm"
+                  <Button
-                  onClick={() => revokeRole(userRole.id)}
+                    variant="outline"
-                  disabled={actionLoading === userRole.id}
+                    size="sm"
-                >
+                    onClick={() => revokeRole(userRole.id)}
-                  <X className="w-4 h-4" />
+                    disabled={actionLoading === userRole.id}
-                </Button>
+                  >
+                    <X className="w-4 h-4" />
+                  </Button>
+                )}
               </CardContent>
             </Card>
           ))