Homelab-manager/web/src/App.tsx

import { useEffect, useState, type ReactNode } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import { api, type CurrentUser, type UserRole, UnauthorizedError } from "./api/client";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import Users from "./pages/Users";
import Sessions from "./pages/Sessions";
import AuditLog from "./pages/AuditLog";
import DiagLog from "./pages/DiagLog";
import Secrets from "./pages/Secrets";
import Ipam from "./pages/Ipam";
import Dns from "./pages/Dns";
import Servers from "./pages/Servers";
import ServerDetail from "./pages/ServerDetail";
import Integrations from "./pages/Integrations";
import Docker from "./pages/Docker";
import Tailscale from "./pages/Tailscale";
import Semaphore from "./pages/Semaphore";
import Gitea from "./pages/Gitea";
import Proxmox from "./pages/Proxmox";
import Synology from "./pages/Synology";
import Generator from "./pages/Generator";
import Maintenance from "./pages/Maintenance";
import Domains from "./pages/Domains";
import Settings from "./pages/Settings";
import NotificationSettings from "./pages/settings/NotificationSettings";
import BadgeSettings from "./pages/settings/BadgeSettings";
import DisplaySettings from "./pages/settings/DisplaySettings";
import CacheSettings from "./pages/settings/CacheSettings";
import LogSettings from "./pages/settings/LogSettings";
import BackupSettings from "./pages/settings/BackupSettings";
import AppShell from "./layout/AppShell";
import { setDateTimeSettings } from "./utils/date";
import { setPageSize } from "./utils/pageSize";

const roleRank: Record<UserRole, number> = { viewer: 0, operator: 1, admin: 2 };

function RequireRole({
  user,
  minRole,
  children,
}: {
  user: CurrentUser;
  minRole: UserRole;
  children: ReactNode;
}) {
  if (roleRank[user.role] < roleRank[minRole]) {
    return (
      <div className="alert alert-danger">You don't have permission to view this page.</div>
    );
  }
  return <>{children}</>;
}

export default function App() {
  const [user, setUser] = useState<CurrentUser | null | undefined>(undefined);

  useEffect(() => {
    api.me().then(
      (res) => setUser(res.user),
      (err) => {
        if (!(err instanceof UnauthorizedError)) {
          console.error(err);
        }
        setUser(null);
      },
    );
    api.settings.display().then((res) => {
      setDateTimeSettings(res.display);
      setPageSize(res.display.pageSize);
    }).catch(() => {});
  }, []);

  if (user === undefined) {
    return <div className="loading-screen">Loading…</div>;
  }

  if (user === null) {
    return <Login />;
  }

  return (
    <AppShell user={user}>
      <Routes>
        <Route path="/" element={<Dashboard user={user} />} />
        <Route path="/servers" element={<Servers user={user} />} />
        <Route path="/servers/:id" element={<ServerDetail user={user} />} />
        <Route path="/dns" element={<Dns user={user} />} />
        <Route path="/ipam" element={<Ipam user={user} />} />
        <Route path="/secrets" element={<Secrets user={user} />} />
        <Route path="/integrations" element={<Integrations user={user} />} />
        <Route path="/generator" element={<Generator />} />
        <Route path="/domains" element={<Domains user={user} />} />
        <Route path="/maintenance" element={<Maintenance user={user} />} />
        <Route path="/docker" element={<Docker user={user} />} />
        <Route path="/tailscale" element={<Tailscale user={user} />} />
        <Route path="/semaphore" element={<Semaphore user={user} />} />
        <Route path="/gitea" element={<Gitea user={user} />} />
        <Route path="/proxmox" element={<Proxmox user={user} />} />
        <Route path="/synology" element={<Synology user={user} />} />
        <Route
          path="/users"
          element={
            <RequireRole user={user} minRole="admin">
              <Users />
            </RequireRole>
          }
        />
        <Route
          path="/sessions"
          element={
            <RequireRole user={user} minRole="admin">
              <Sessions />
            </RequireRole>
          }
        />
        <Route
          path="/audit-log"
          element={
            <RequireRole user={user} minRole="operator">
              <AuditLog />
            </RequireRole>
          }
        />
        <Route
          path="/diag-log"
          element={
            <RequireRole user={user} minRole="admin">
              <DiagLog />
            </RequireRole>
          }
        />
        <Route
          path="/settings"
          element={
            <RequireRole user={user} minRole="admin">
              <Settings />
            </RequireRole>
          }
        >
          <Route index element={<Navigate to="notifications" replace />} />
          <Route path="notifications" element={<NotificationSettings />} />
          <Route path="badges" element={<BadgeSettings />} />
          <Route path="display" element={<DisplaySettings />} />
          <Route path="cache" element={<CacheSettings />} />
          <Route path="logs" element={<LogSettings />} />
          <Route path="backup" element={<BackupSettings />} />
        </Route>
      </Routes>
    </AppShell>
  );
}