refactor: migrate AdminAuditPage to TanStack Query

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

frontend/src/hooks/useAuditLog.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query'
+import api from '@/services/api'
+import type { AuditLogEntry } from '@/types'
+
+export interface AuditLogFilters {
+  skip: number
+  limit: number
+  user_id?: string
+  action?: string
+  date_from?: string
+  date_to?: string
+}
+
+export function useAuditLog(filters: AuditLogFilters) {
+  const params: Record<string, string | number> = {
+    skip: filters.skip,
+    limit: filters.limit,
+  }
+  if (filters.user_id) params.user_id = filters.user_id
+  if (filters.action) params.action = filters.action
+  if (filters.date_from) params.date_from = filters.date_from
+  if (filters.date_to) params.date_to = filters.date_to
+
+  return useQuery({
+    queryKey: ['audit-log', params],
+    queryFn: () => api.get<AuditLogEntry[]>('/admin/audit-log', { params }).then(r => r.data),
+  })
+}

frontend/src/pages/AdminAuditPage.tsx

@@ -1,7 +1,6 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { ChevronDown, ChevronRight, Filter } from 'lucide-react'
-import api from '@/services/api'
-import type { AuditLogEntry } from '@/types'
+import { useAuditLog } from '@/hooks/useAuditLog'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
@@ -13,8 +12,6 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 
 export function AdminAuditPage() {
-  const [entries, setEntries] = useState<AuditLogEntry[]>([])
-  const [loading, setLoading] = useState(true)
   const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set())
 
   // Filters
@@ -27,27 +24,17 @@ export function AdminAuditPage() {
   const [skip, setSkip] = useState(0)
   const limit = 50
 
-  const fetchEntries = () => {
-    setLoading(true)
-    const params: Record<string, string | number> = { skip, limit }
-    if (filterUserId) params.user_id = filterUserId
-    if (filterAction) params.action = filterAction
-    if (filterDateFrom) params.date_from = filterDateFrom
-    if (filterDateTo) params.date_to = filterDateTo
-
-    api.get<AuditLogEntry[]>('/admin/audit-log', { params })
-      .then((res) => setEntries(res.data))
-      .catch(() => setEntries([]))
-      .finally(() => setLoading(false))
-  }
-
-  useEffect(() => {
-    fetchEntries()
-  }, [skip]) // eslint-disable-line react-hooks/exhaustive-deps
+  const { data: entries = [], isLoading: loading } = useAuditLog({
+    skip,
+    limit,
+    user_id: filterUserId,
+    action: filterAction,
+    date_from: filterDateFrom,
+    date_to: filterDateTo,
+  })
 
   const handleFilter = () => {
     setSkip(0)
-    fetchEntries()
   }
 
   const toggleExpanded = (id: number) => {
@@ -68,9 +55,6 @@ export function AdminAuditPage() {
     setFilterDateFrom('')
     setFilterDateTo('')
     setSkip(0)
-    // Will trigger fetchEntries via useEffect since skip changes to 0
-    // But if already 0, manually trigger
-    setTimeout(fetchEntries, 0)
   }
 
   return (