Refactor user management in usuarios.tsx: integrate react-query for data fetching and mutations, streamline role handling, and enhance user ban/unban functionality.

src/main.tsx

@@ -1,6 +1,8 @@
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
@@ -9,6 +11,8 @@ import './styles.css'
 import reportWebVitals from './reportWebVitals.ts'
 import { SupabaseAuthProvider, useSupabaseAuth } from './auth/supabase.tsx'
 
+const queryClient = new QueryClient()
+
 const router = createRouter({
   routeTree,
   defaultPreload: 'intent',
@@ -17,6 +21,7 @@ const router = createRouter({
   defaultPreloadStaleTime: 0,
   context: {
     auth: undefined!,
+    queryClient
   },
 })
 
@@ -50,9 +55,13 @@ if (rootElement && !rootElement.innerHTML) {
   root.render(
     <StrictMode>
       <SupabaseAuthProvider>
-        <InnerApp />
+        <QueryClientProvider client={queryClient}>
+
+          <InnerApp />
+        </QueryClientProvider>,
       </SupabaseAuthProvider>
-    </StrictMode>,
+
+    </StrictMode >,
   )
 }