cameleer-server/ui/src/router.tsx

import { createBrowserRouter, Navigate } from 'react-router';
import { ProtectedRoute } from './auth/ProtectedRoute';
import { RequireAdmin } from './auth/RequireAdmin';
import { LoginPage } from './auth/LoginPage';
import { OidcCallback } from './auth/OidcCallback';
import { LayoutShell } from './components/LayoutShell';
import { config } from './config';
import { lazy, Suspense } from 'react';
import { Spinner } from '@cameleer/design-system';

const ExchangesPage = lazy(() => import('./pages/Exchanges/ExchangesPage'));
const DashboardPage = lazy(() => import('./pages/DashboardTab/DashboardPage'));
const RuntimePage = lazy(() => import('./pages/RuntimeTab/RuntimePage'));
const AdminLayout = lazy(() => import('./pages/Admin/AdminLayout'));
const RbacPage = lazy(() => import('./pages/Admin/RbacPage'));
const AuditLogPage = lazy(() => import('./pages/Admin/AuditLogPage'));
const OidcConfigPage = lazy(() => import('./pages/Admin/OidcConfigPage'));
const DatabaseAdminPage = lazy(() => import('./pages/Admin/DatabaseAdminPage'));
const ClickHouseAdminPage = lazy(() => import('./pages/Admin/ClickHouseAdminPage'));
const EnvironmentsPage = lazy(() => import('./pages/Admin/EnvironmentsPage'));
const AppConfigPage = lazy(() => import('./pages/Admin/AppConfigPage'));
const AppsTab = lazy(() => import('./pages/AppsTab/AppsTab'));
const LogsPage = lazy(() => import('./pages/LogsTab/LogsPage'));
const SwaggerPage = lazy(() => import('./pages/Swagger/SwaggerPage'));

function SuspenseWrapper({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>}>
      {children}
    </Suspense>
  );
}

const basename = config.basePath.replace(/\/$/, '') || undefined;

export const router = createBrowserRouter([
  { path: '/login', element: <LoginPage /> },
  { path: '/oidc/callback', element: <OidcCallback /> },
  {
    element: <ProtectedRoute />,
    children: [
      {
        element: <LayoutShell />,
        children: [
          // Default redirect
          { index: true, element: <Navigate to="/exchanges" replace /> },

          // Exchanges tab
          { path: 'exchanges', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
          { path: 'exchanges/:appId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
          { path: 'exchanges/:appId/:routeId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
          { path: 'exchanges/:appId/:routeId/:exchangeId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },

          // Dashboard tab
          { path: 'dashboard', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
          { path: 'dashboard/:appId', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
          { path: 'dashboard/:appId/:routeId', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },

          // Runtime tab
          { path: 'runtime', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
          { path: 'runtime/:appId', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
          { path: 'runtime/:appId/:instanceId', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },

          // Logs tab
          { path: 'logs', element: <SuspenseWrapper><LogsPage /></SuspenseWrapper> },
          { path: 'logs/:appId', element: <SuspenseWrapper><LogsPage /></SuspenseWrapper> },
          { path: 'logs/:appId/:routeId', element: <SuspenseWrapper><LogsPage /></SuspenseWrapper> },

          // Config tab (accessible to VIEWER+, shows all apps or single app)
          { path: 'config', element: <SuspenseWrapper><AppConfigPage /></SuspenseWrapper> },
          { path: 'config/:appId', element: <SuspenseWrapper><AppConfigPage /></SuspenseWrapper> },

          // Apps tab (OPERATOR+ via UI guard, shows all or single app)
          { path: 'apps', element: <SuspenseWrapper><AppsTab /></SuspenseWrapper> },
          { path: 'apps/:appId', element: <SuspenseWrapper><AppsTab /></SuspenseWrapper> },

          // Admin (ADMIN role required)
          {
            element: <RequireAdmin />,
            children: [{
              path: 'admin',
              element: <SuspenseWrapper><AdminLayout /></SuspenseWrapper>,
              children: [
                { index: true, element: <Navigate to="/admin/rbac" replace /> },
                { path: 'rbac', element: <SuspenseWrapper><RbacPage /></SuspenseWrapper> },
                { path: 'audit', element: <SuspenseWrapper><AuditLogPage /></SuspenseWrapper> },
                { path: 'oidc', element: <SuspenseWrapper><OidcConfigPage /></SuspenseWrapper> },
                { path: 'database', element: <SuspenseWrapper><DatabaseAdminPage /></SuspenseWrapper> },
                { path: 'clickhouse', element: <SuspenseWrapper><ClickHouseAdminPage /></SuspenseWrapper> },
                { path: 'environments', element: <SuspenseWrapper><EnvironmentsPage /></SuspenseWrapper> },
              ],
            }],
          },
          { path: 'api-docs', element: <SuspenseWrapper><SwaggerPage /></SuspenseWrapper> },
        ],
      },
    ],
  },
], { basename });