From 635be2b4e6db071dd827bfcc432d1528b96f786e Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Tue, 16 Dec 2025 07:02:52 +0000
Subject: [PATCH] refactor: migrate team page to use React Query for
 permissions and roles fetching

---
 .../dashboard/[search_space_id]/team/page.tsx  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index b73fda65d..f25c5a576 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import {
 	type ColumnDef,
 	type ColumnFiltersState,
@@ -44,6 +45,8 @@ import { motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
+import { rolesApiService } from "@/lib/apis/roles-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -151,13 +154,20 @@ export default function TeamManagementPage() {
 		removeMember,
 	} = useMembers(searchSpaceId);
 	const {
-		roles,
-		loading: rolesLoading,
-		fetchRoles,
-		createRole,
+	createRole,
 		updateRole,
 		deleteRole,
 	} = useRoles(searchSpaceId);
+
+	const {
+		data: roles = [],
+		isLoading: rolesLoading,
+		refetch: fetchRoles,
+	} = useQuery({
+		queryKey: cacheKeys.roles.all(searchSpaceId.toString()),
+		queryFn: () => rolesApiService.getRoles({ search_space_id: searchSpaceId }),
+		enabled: !!searchSpaceId,
+	});
 	const {
 		invites,
 		loading: invitesLoading,