Add global providers for react-query, theming, and auth

Introduce a new Providers component to manage global contexts including react-query, theme switching, and authentication. Added necessary dependencies: `@tanstack/react-query-devtools` and `next-themes`, and configured default options for react-query.

frontend/package-lock.json

@@ -21,6 +21,7 @@
         "@eslint/eslintrc": "^3",
         "@hey-api/openapi-ts": "^0.64.10",
         "@tailwindcss/postcss": "^4",
+        "@tanstack/react-query-devtools": "^5.67.1",
         "@types/node": "^20.17.23",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -28,6 +29,7 @@
         "eslint-config-next": "15.2.0",
         "eslint-config-prettier": "^10.0.2",
         "eslint-plugin-prettier": "^5.2.3",
+        "next-themes": "^0.4.4",
         "openapi-typescript-codegen": "^0.29.0",
         "prettier": "^3.5.3",
         "tailwindcss": "^4",
@@ -1182,6 +1184,17 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.65.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.65.0.tgz",
+      "integrity": "sha512-g5y7zc07U9D3esMdqUfTEVu9kMHoIaVBsD0+M3LPdAdD710RpTcLiNvJY1JkYXqkq9+NV+CQoemVNpQPBXVsJg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.67.1",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.67.1.tgz",
@@ -1198,6 +1211,24 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.67.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.67.1.tgz",
+      "integrity": "sha512-a/2I8ORNalh+ek6Nyb9mEiq2u7vydjVMvaQz5ZieGq7r7DxgIFcPiMs4Ay0qkQvHfptESgXR5nImGTHmmt19yQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.65.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.67.1",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -4656,6 +4687,17 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz",
+      "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "@eslint/eslintrc": "^3",
     "@hey-api/openapi-ts": "^0.64.10",
     "@tailwindcss/postcss": "^4",
+    "@tanstack/react-query-devtools": "^5.67.1",
     "@types/node": "^20.17.23",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -33,6 +34,7 @@
     "eslint-config-next": "15.2.0",
     "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-prettier": "^5.2.3",
+    "next-themes": "^0.4.4",
     "openapi-typescript-codegen": "^0.29.0",
     "prettier": "^3.5.3",
     "tailwindcss": "^4",

frontend/src/providers/index.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import React from "react";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { AuthProvider } from "@/context/auth-context";
+import { ThemeProvider } from "next-themes";
+
+// Create a client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 1000 * 60 * 5, // 5 minutes
+    },
+  },
+});
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <AuthProvider>{children}</AuthProvider>
+      </ThemeProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}