Refactor voice page and hooks to use React Query for data fetching

- Updated VoicePage component to utilize useVoiceConnect, useVoiceDisconnect, and useMicTransmit mutations.
- Replaced local state management with React Query's useQuery for voice status, guilds, and channels.
- Removed custom useAsync hook and replaced it with useQuery in useConfig, useStats, useUsers, useChannels, and useMessages hooks.
- Simplified useRecordings and useSpeakers hooks to leverage React Query for data fetching and mutations.
- Removed deprecated use-async hook and related code.
- Enhanced error handling and loading states across various hooks.

services/frontend/src/app/(dashboard)/layout.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Suspense } from "react";
 
 import { Chatbot } from "@/components/chatbot/chatbot";
@@ -8,32 +9,44 @@ import { AppSidebar } from "@/components/layout/app-sidebar";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { WsProvider } from "@/lib/ws/context";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 15_000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <WsProvider>
-      <div className="flex h-screen overflow-hidden bg-background">
-        <AppSidebar />
-        <div className="flex flex-1 flex-col min-w-0">
-          <AppHeader />
-          <main className="flex-1 overflow-y-auto p-4 md:p-6 pb-20 md:pb-6">
-            <Suspense
-              fallback={
-                <div className="flex h-full items-center justify-center">
-                  <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-                </div>
-              }
-            >
-              {children}
-            </Suspense>
-          </main>
+    <QueryClientProvider client={queryClient}>
+      <WsProvider>
+        <div className="flex h-screen overflow-hidden bg-background">
+          <AppSidebar />
+          <div className="flex flex-1 flex-col min-w-0">
+            <AppHeader />
+            <main className="flex-1 overflow-y-auto p-4 md:p-6 pb-20 md:pb-6">
+              <Suspense
+                fallback={
+                  <div className="flex h-full items-center justify-center">
+                    <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                  </div>
+                }
+              >
+                {children}
+              </Suspense>
+            </main>
+          </div>
+          <MobileNav />
         </div>
-        <MobileNav />
-      </div>
-      <Chatbot />
-    </WsProvider>
+        <Chatbot />
+      </WsProvider>
+    </QueryClientProvider>
   );
 }