minor fixes

react-openapi/Admin.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { AuthProvider, useAuth, AuthPage } from "../react-auth/src";
+import { useAuth, AuthPage } from "../react-auth";
 import { UploadProvider } from "./providers/UploadProvider";
 import AdminLayout from "./components/AdminLayout";
 import ResourceView from "./components/ResourceView";
@@ -10,7 +10,6 @@ import { AppConfig } from "./types/config";
 import { Box, Typography, Paper, CircularProgress } from "@mui/material";
 import AppTheme from "./shared-theme/AppTheme";
 import {
-  BrowserRouter,
   Routes,
   Route,
   useNavigate,
@@ -23,7 +22,7 @@ const queryClient = new QueryClient();
 // Create a context for the app config
 export const ConfigContext = React.createContext<AppConfig | null>(null);
 
-function Dashboard() {
+function Dashboard({ basePath }: { basePath: string }) {
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
   return (
@@ -53,7 +52,7 @@ function Dashboard() {
                 transition: 'transform 0.2s',
                 '&:hover': { transform: 'translateY(-4px)', boxShadow: 4 }
             }}
-            onClick={() => navigate(`/${res.name}`)}
+            onClick={() => navigate(`${basePath}/${res.name}`)}
           >
             <Typography variant="h6" color="primary">{res.pluralLabel}</Typography>
             <Typography variant="body2" color="text.secondary">Manage {res.pluralLabel.toLowerCase()}</Typography>
@@ -66,7 +65,7 @@ function Dashboard() {
 
 import ProfileView from "./components/ProfileView";
 
-function AdminApp() {
+function AdminApp({ basePath }: { basePath: string }) {
   const { currentUser, login, logout, loading, error } = useAuth();
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
@@ -90,11 +89,11 @@ function AdminApp() {
     <AdminLayout
       username={currentUser.username}
       onLogout={logout}
-      onSelectResource={(name) => navigate(`/${name}`)}
+      onSelectResource={(name) => navigate(`${basePath}/${name}`)}
       resources={config?.resources || []}
     >
       <Routes>
-        <Route path="/" element={<Dashboard />} />
+        <Route path="/" element={<Dashboard basePath={basePath} />} />
         <Route path="/profile" element={<ProfileView />} />
         <Route path="/:resourceName" element={<ResourceRouteWrapper />} />
         <Route path="/:resourceName/:id" element={<ResourceRouteWrapper />} />
@@ -115,7 +114,7 @@ function ResourceRouteWrapper() {
   return <ResourceView config={selectedResource} />;
 }
 
-export default function Admin() {
+export default function Admin({ basePath = "/admin" }: { basePath?: string }) {
   const [config, setConfig] = React.useState<AppConfig | null>(null);
 
   React.useEffect(() => {
@@ -146,13 +145,9 @@ export default function Admin() {
     <AppTheme>
       <QueryClientProvider client={queryClient}>
         <ConfigContext.Provider value={config}>
-          <AuthProvider authBaseUrl={config.authBaseUrl}>
-            <UploadProvider>
-              <BrowserRouter>
-                <AdminApp />
-              </BrowserRouter>
-            </UploadProvider>
-          </AuthProvider>
+          <UploadProvider>
+            <AdminApp basePath={basePath} />
+          </UploadProvider>
         </ConfigContext.Provider>
       </QueryClientProvider>
     </AppTheme>