Fix role list refresh after deletion

Made-with: Cursor

src/pages/role-management/RolesListPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   Plus,
@@ -81,9 +81,7 @@ export function RolesListPage() {
     return () => clearTimeout(timer)
   }, [query])
 
-  // Fetch roles
+  const fetchRoles = useCallback(async () => {
-  useEffect(() => {
-    const fetchRoles = async () => {
     setLoading(true)
     setError(null)
     try {
@@ -99,10 +97,13 @@ export function RolesListPage() {
     } finally {
       setLoading(false)
     }
-    }
-    fetchRoles()
   }, [debouncedQuery, page, pageSize])
 
+  // Fetch roles
+  useEffect(() => {
+    fetchRoles()
+  }, [fetchRoles])
+
   // Open role detail
   const handleViewRole = async (roleId: number) => {
     setDetailOpen(true)
@@ -147,7 +148,7 @@ export function RolesListPage() {
 
       setRoleToDelete(null)
       setDeleteDialogOpen(false)
-      setPage(1) // trigger list refresh via the existing effect
+      await fetchRoles()
     } catch (err: unknown) {
       const message =
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??