PacketStation/frontend/src/App.tsx

import { BrowserRouter, Route, Routes } from "react-router";
import { AuthProvider } from "./auth/AuthProvider";
import { Layout } from "./components/Layout";
import { RequireAuth } from "./components/RequireAuth";
import { AboutPage } from "./pages/AboutPage";
import { HomePage } from "./pages/HomePage";
import { PacketPage } from "./packet/PacketPage";
import { NotFoundPage } from "./pages/NotFoundPage";
import { SignInPage } from "./pages/SignInPage";
import { AccountPage } from "./screens/account/AccountPage";
import { ProjectPage } from "./screens/clerical/ProjectPage";
import { UnitPage } from "./screens/clerical/UnitPage";
import { RequireScreen, ScreenRoute } from "./screens/ScreenRoute";

/** Route table. Exported apart from the router so tests can mount it in a MemoryRouter. */
export function AppRoutes() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route index element={<HomePage />} />
        <Route path="signin" element={<SignInPage />} />
        <Route path="about" element={<AboutPage />} />
        <Route element={<RequireAuth />}>
          <Route path="account" element={<AccountPage />} />
          <Route path=":screen" element={<ScreenRoute />} />
          <Route
            path="clerical/projects/:projectId"
            element={
              <RequireScreen screen="clerical">
                <ProjectPage />
              </RequireScreen>
            }
          />
          <Route
            path="clerical/units/:unitId"
            element={
              <RequireScreen screen="clerical">
                <UnitPage />
              </RequireScreen>
            }
          />
          <Route path="packets/:id" element={<PacketPage />} />
        </Route>
        <Route path="*" element={<NotFoundPage />} />
      </Route>
    </Routes>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <AppRoutes />
      </AuthProvider>
    </BrowserRouter>
  );
}