snp-connection-monitoring/frontend/src/App.tsx

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ThemeProvider from './store/ThemeContext';
import AuthProvider from './store/AuthContext';
import AuthLayout from './layouts/AuthLayout';
import MainLayout from './layouts/MainLayout';
import ProtectedRoute from './components/ProtectedRoute';
import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';
import RequestLogsPage from './pages/monitoring/RequestLogsPage';
import RequestLogDetailPage from './pages/monitoring/RequestLogDetailPage';
import ServiceStatusPage from './pages/monitoring/ServiceStatusPage';
import ServiceStatusDetailPage from './pages/monitoring/ServiceStatusDetailPage';
import MyKeysPage from './pages/apikeys/MyKeysPage';
import KeyRequestPage from './pages/apikeys/KeyRequestPage';
import KeyAdminPage from './pages/apikeys/KeyAdminPage';
import ServicesPage from './pages/admin/ServicesPage';
import UsersPage from './pages/admin/UsersPage';
import TenantsPage from './pages/admin/TenantsPage';
import NotFoundPage from './pages/NotFoundPage';

const BASE_PATH = '/snp-connection';

const App = () => {
  return (
    <BrowserRouter basename={BASE_PATH}>
      <ThemeProvider>
      <AuthProvider>
        <Routes>
          <Route element={<AuthLayout />}>
            <Route path="/login" element={<LoginPage />} />
          </Route>

          <Route element={<ProtectedRoute />}>
            <Route element={<MainLayout />}>
              <Route path="/" element={<Navigate to="/dashboard" replace />} />
              <Route path="/dashboard" element={<DashboardPage />} />
              <Route path="/monitoring/request-logs" element={<RequestLogsPage />} />
              <Route path="/monitoring/request-logs/:id" element={<RequestLogDetailPage />} />
              <Route path="/monitoring/service-status" element={<ServiceStatusPage />} />
              <Route path="/monitoring/service-status/:serviceId" element={<ServiceStatusDetailPage />} />
              <Route path="/apikeys/my-keys" element={<MyKeysPage />} />
              <Route path="/apikeys/request" element={<KeyRequestPage />} />
              <Route path="/apikeys/admin" element={<KeyAdminPage />} />
              <Route path="/admin/services" element={<ServicesPage />} />
              <Route path="/admin/users" element={<UsersPage />} />
              <Route path="/admin/tenants" element={<TenantsPage />} />
              <Route path="*" element={<NotFoundPage />} />
            </Route>
          </Route>
        </Routes>
      </AuthProvider>
      </ThemeProvider>
    </BrowserRouter>
  );
};

export default App;