Commit 6: Adminbereich (TanStack Router, 8 Menüpunkte, Scan-Logs)

apps/frontend/src/routes/admin/SettingsPage.tsx

@@ -0,0 +1,55 @@
+import { useBackendHealth } from "../../hooks/useBackendHealth.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { AdminPageHeader } from "./AdminPageHeader.js";
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between border-b border-black/5 py-3 last:border-0 dark:border-white/5">
+      <span className="text-sm text-black/50 dark:text-white/50">{label}</span>
+      <span className="text-sm font-medium text-black dark:text-white">{value}</span>
+    </div>
+  );
+}
+
+export function SettingsPage() {
+  const { health, error } = useBackendHealth();
+  const [theme, toggleTheme] = useTheme();
+
+  return (
+    <div>
+      <AdminPageHeader title="Einstellungen" />
+
+      <div className="max-w-lg space-y-6">
+        <div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
+          <h2 className="mb-2 font-medium text-black dark:text-white">Darstellung</h2>
+          <div className="flex items-center justify-between py-2">
+            <span className="text-sm text-black/50 dark:text-white/50">Theme</span>
+            <button
+              onClick={toggleTheme}
+              className="rounded-lg border border-black/10 px-3 py-1.5 text-sm text-black
+                transition-colors hover:bg-black/5 dark:border-white/10 dark:text-white
+                dark:hover:bg-white/10"
+            >
+              {theme === "dark" ? "🌙 Dunkel" : "☀️ Hell"} – wechseln
+            </button>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
+          <h2 className="mb-2 font-medium text-black dark:text-white">Backend</h2>
+          {error ? (
+            <p className="text-sm text-red-500">Backend nicht erreichbar.</p>
+          ) : health ? (
+            <div>
+              <InfoRow label="Status" value={health.status} />
+              <InfoRow label="Version" value={health.version} />
+              <InfoRow label="Läuft seit" value={`${health.uptimeSeconds}s`} />
+            </div>
+          ) : (
+            <p className="text-sm text-black/40 dark:text-white/40">Lade …</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}