feat: integrate React Query for data fetching and state management across dashboard components

apps/web/components/query-provider.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+
+export function ReactQueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 10_000,
+          },
+        },
+      }),
+  );
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}