refactor: migrate AdminUsersPage to TanStack Query

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/hooks/useUsers.ts

@@ -0,0 +1,33 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import api from '@/services/api'
+import type { UserResponse, CreateUserPayload, UpdateUserPayload } from '@/types'
+
+export function useUsers() {
+  return useQuery({
+    queryKey: ['users'],
+    queryFn: () =>
+      api.get<UserResponse[]>('/admin/users', { params: { skip: 0, limit: 200 } }).then(r => r.data),
+  })
+}
+
+export function useCreateUser() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (payload: CreateUserPayload) =>
+      api.post<UserResponse>('/admin/users', payload).then(r => r.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['users'] })
+    },
+  })
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: number; payload: UpdateUserPayload }) =>
+      api.put<UserResponse>(`/admin/users/${id}`, payload).then(r => r.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['users'] })
+    },
+  })
+}

frontend/src/pages/AdminUsersPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { Plus, Pencil, Loader2 } from 'lucide-react'
-import api from '@/services/api'
+import { useUsers, useCreateUser, useUpdateUser } from '@/hooks/useUsers'
 import type { UserResponse, CreateUserPayload, UpdateUserPayload } from '@/types'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -20,51 +20,36 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 
 export function AdminUsersPage() {
-  const [users, setUsers] = useState<UserResponse[]>([])
+  const { data: users = [], isLoading: loading } = useUsers()
-  const [loading, setLoading] = useState(true)
+  const createMutation = useCreateUser()
+  const updateMutation = useUpdateUser()
 
   // Create dialog
   const [createOpen, setCreateOpen] = useState(false)
   const [createForm, setCreateForm] = useState<CreateUserPayload>({
     username: '', email: '', password: '', role: 'dak_mitarbeiter',
   })
-  const [creating, setCreating] = useState(false)
   const [createError, setCreateError] = useState('')
 
   // Edit dialog
   const [editOpen, setEditOpen] = useState(false)
   const [editUser, setEditUser] = useState<UserResponse | null>(null)
   const [editForm, setEditForm] = useState<UpdateUserPayload>({})
-  const [editing, setEditing] = useState(false)
   const [editError, setEditError] = useState('')
 
-  // Fetch users
+  const creating = createMutation.isPending
-  useEffect(() => {
+  const editing = updateMutation.isPending
-    fetchUsers()
-  }, [])
-
-  const fetchUsers = () => {
-    setLoading(true)
-    api.get<UserResponse[]>('/admin/users', { params: { skip: 0, limit: 200 } })
-      .then((res) => setUsers(res.data))
-      .catch(() => setUsers([]))
-      .finally(() => setLoading(false))
-  }
 
   // Create user
   const handleCreate = async () => {
-    setCreating(true)
     setCreateError('')
     try {
-      await api.post<UserResponse>('/admin/users', createForm)
+      await createMutation.mutateAsync(createForm)
       setCreateOpen(false)
       setCreateForm({ username: '', email: '', password: '', role: 'dak_mitarbeiter' })
-      fetchUsers()
     } catch (err: unknown) {
       const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail
       setCreateError(msg || 'Fehler beim Erstellen des Benutzers.')
-    } finally {
-      setCreating(false)
     }
   }
 
@@ -78,18 +63,14 @@ export function AdminUsersPage() {
 
   const handleEdit = async () => {
     if (!editUser) return
-    setEditing(true)
     setEditError('')
     try {
-      await api.put<UserResponse>(`/admin/users/${editUser.id}`, editForm)
+      await updateMutation.mutateAsync({ id: editUser.id, payload: editForm })
       setEditOpen(false)
       setEditUser(null)
-      fetchUsers()
     } catch (err: unknown) {
       const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail
       setEditError(msg || 'Fehler beim Aktualisieren des Benutzers.')
-    } finally {
-      setEditing(false)
     }
   }