Feature: Settings-Tabs, Login-Redesign und Security-Tests

- Einstellungen-Seite in fokussierte Komponenten aufgeteilt
  (settings-tabs, status-banner, section-card)
- Login-Seite ueberarbeitet
- Neue security.test.ts fuer 2FA-Verlust-/Recovery-Logik
- health.test.ts erweitert
- next-env.d.ts auf Next.js dev-types-Pfad aktualisiert

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/admin/app/(authed)/einstellungen/_components/section-card.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+export function SectionCard({
+  title,
+  description,
+  children,
+  footer,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  return (
+    <section className="rounded-2xl bg-white shadow-sm ring-1 ring-gray-100">
+      <header className="border-b border-gray-100 px-6 py-5">
+        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+        {description ? <p className="mt-1 text-sm text-gray-500">{description}</p> : null}
+      </header>
+      <div className="space-y-5 px-6 py-6">{children}</div>
+      {footer ? <div className="border-t border-gray-100 px-6 py-4">{footer}</div> : null}
+    </section>
+  );
+}

apps/admin/app/(authed)/einstellungen/_components/settings-tabs.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+export type SettingsTabId =
+  | "profil"
+  | "ernaehrung"
+  | "ziele"
+  | "sicherheit"
+  | "anwendung";
+
+const tabs: { id: SettingsTabId; label: string; description: string }[] = [
+  { id: "profil", label: "Profil", description: "Persoenliche Daten und Kontakt" },
+  { id: "ernaehrung", label: "Ernaehrung", description: "Rezept- und Mahlzeiten-Praeferenzen" },
+  { id: "ziele", label: "Ziele", description: "Kalorien, Makros, Gewicht, Fasten" },
+  { id: "sicherheit", label: "Sicherheit", description: "2FA, Passkeys, Passwort" },
+  { id: "anwendung", label: "Anwendung", description: "Erscheinungsbild und Erinnerungen" },
+];
+
+export function useSettingsTab(): {
+  active: SettingsTabId;
+  setActive: (id: SettingsTabId) => void;
+} {
+  const router = useRouter();
+  const search = useSearchParams();
+  const tabParam = search.get("tab");
+  const active: SettingsTabId =
+    tabs.find((tab) => tab.id === tabParam)?.id ?? "profil";
+
+  const setActive = useCallback(
+    (id: SettingsTabId) => {
+      const params = new URLSearchParams(search.toString());
+      params.set("tab", id);
+      router.replace(`/einstellungen?${params.toString()}`, { scroll: false });
+    },
+    [router, search],
+  );
+
+  return { active, setActive };
+}
+
+export function SettingsTabs({
+  active,
+  onChange,
+}: {
+  active: SettingsTabId;
+  onChange: (id: SettingsTabId) => void;
+}) {
+  const activeMeta = tabs.find((tab) => tab.id === active);
+  return (
+    <div className="space-y-3">
+      <div
+        role="tablist"
+        aria-label="Einstellungs-Kategorien"
+        className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1"
+      >
+        {tabs.map((tab) => {
+          const isActive = tab.id === active;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              onClick={() => onChange(tab.id)}
+              className={`shrink-0 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
+                isActive
+                  ? "bg-[#0F766E] text-white shadow-sm"
+                  : "bg-white text-gray-600 ring-1 ring-gray-200 hover:bg-gray-50"
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+      {activeMeta?.description ? (
+        <p className="px-1 text-sm text-gray-500">{activeMeta.description}</p>
+      ) : null}
+    </div>
+  );
+}

apps/admin/app/(authed)/einstellungen/_components/status-banner.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+export function StatusBanner({
+  status,
+  error,
+}: {
+  status: string | null;
+  error: string | null;
+}) {
+  if (!status && !error) return null;
+  if (error) {
+    return (
+      <div
+        role="alert"
+        className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+      >
+        {error}
+      </div>
+    );
+  }
+  return (
+    <div
+      role="status"
+      className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700"
+    >
+      {status}
+    </div>
+  );
+}

apps/admin/app/login/page.tsx

@@ -194,79 +194,130 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-[#F9F9F9]">
+    <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-[#F5F9F8] via-[#F9FAFB] to-[#ECFDF5]">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -top-32 -left-32 h-96 w-96 rounded-full bg-[#0F766E]/15 blur-3xl"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-40 -right-32 h-[28rem] w-[28rem] rounded-full bg-emerald-200/40 blur-3xl"
+      />
+
+      <div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6">
         {!otpStepChecked ? (
-            <div className="w-8 h-8 rounded-full border-2 border-[#0F766E] border-t-transparent animate-spin" />
+          <div className="h-10 w-10 animate-spin rounded-full border-2 border-[#0F766E] border-t-transparent" />
         ) : (
           <div className="w-full max-w-sm">
-        <div className="flex flex-col items-center mb-8">
-          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[#0F766E] text-lg font-bold text-white shadow-sm">
+            <div className="mb-8 flex flex-col items-center text-center">
+              <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#0F766E] to-[#0d9488] text-xl font-bold text-white shadow-lg shadow-[#0F766E]/25 ring-1 ring-white/40">
                 HH
               </div>
-          <h1 className="text-xl font-bold text-[#333333]">Hellth Hub</h1>
-          <p className="mt-2 text-sm text-gray-500">Health-Tracking für dein Home-Lab</p>
+              <h1 className="text-2xl font-bold tracking-tight text-gray-900">Hellth Hub</h1>
+              <p className="mt-1.5 text-sm text-gray-500">
+                Health-Tracking fuer dein Home-Lab
+              </p>
             </div>
 
-        <form
-          onSubmit={handleSubmit}
-          className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-4"
-        >
+            <div className="rounded-2xl border border-gray-100 bg-white/90 p-6 shadow-xl shadow-gray-900/5 backdrop-blur sm:p-7">
+              <form onSubmit={handleSubmit} className="space-y-4">
                 {error && (
-            <div className="flex items-center gap-2 text-sm text-red-600 bg-[#ECFDF5] border border-red-100 px-3 py-2.5 rounded-lg">
-              <span className="w-4 h-4 text-[#0F766E] shrink-0">!</span>
-              {error}
+                  <div
+                    role="alert"
+                    className="flex items-start gap-2 rounded-lg border border-red-100 bg-red-50 px-3 py-2.5 text-sm text-red-700"
+                  >
+                    <span aria-hidden="true" className="mt-0.5 font-bold text-red-500">
+                      !
+                    </span>
+                    <span>{error}</span>
                   </div>
                 )}
 
                 <div>
-            <label className="block text-sm font-medium text-[#333333] mb-1.5">
+                  <label htmlFor="login-email" className="mb-1.5 block text-sm font-medium text-gray-700">
                     E-Mail
                   </label>
                   <input
+                    id="login-email"
                     type="email"
                     required
                     autoComplete="username webauthn"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-              placeholder="admin@example.com"
-              className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-[#333333] placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-[#0F766E] focus:border-transparent transition-shadow"
+                    placeholder="du@example.com"
+                    className="w-full rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 transition-shadow focus:border-[#0F766E] focus:outline-none focus:ring-2 focus:ring-[#0F766E]/20"
                   />
                 </div>
 
                 <div>
-            <label className="block text-sm font-medium text-[#333333] mb-1.5">
+                  <label htmlFor="login-password" className="mb-1.5 block text-sm font-medium text-gray-700">
                     Passwort
                   </label>
                   <input
+                    id="login-password"
                     type="password"
                     required
                     autoComplete="current-password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-              placeholder="************"
-              className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-[#333333] placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-[#0F766E] focus:border-transparent transition-shadow"
+                    placeholder="••••••••••••"
+                    className="w-full rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 transition-shadow focus:border-[#0F766E] focus:outline-none focus:ring-2 focus:ring-[#0F766E]/20"
                   />
                 </div>
 
                 <button
                   type="submit"
                   disabled={loading}
-            className="w-full py-2.5 bg-[#0F766E] text-white text-sm font-semibold rounded-lg hover:bg-[#115E59] transition-colors disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+                  className="mt-1 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-[#0F766E] py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[#115E59] disabled:cursor-not-allowed disabled:opacity-50"
                 >
+                  {loading ? (
+                    <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                  ) : null}
                   {loading ? "Anmelden..." : "Anmelden"}
                 </button>
 
+                <div className="relative pt-1">
+                  <div aria-hidden="true" className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-gray-200" />
+                  </div>
+                  <div className="relative flex justify-center">
+                    <span className="bg-white px-3 text-xs uppercase tracking-wider text-gray-400">
+                      oder
+                    </span>
+                  </div>
+                </div>
+
                 <button
                   type="button"
                   onClick={handlePasskeyLogin}
                   disabled={loading}
-            className="w-full py-2.5 bg-white text-[#333333] text-sm font-semibold rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white py-2.5 text-sm font-semibold text-gray-800 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                 >
+                  <svg
+                    aria-hidden="true"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.8"
+                    className="h-4 w-4 text-[#0F766E]"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M15.75 5.25a3 3 0 11-6 0 3 3 0 016 0zM4.5 19.5l4.5-7.5h6l4.5 7.5"
+                    />
+                  </svg>
                   Mit Passkey anmelden
                 </button>
               </form>
             </div>
+
+            <p className="mt-6 text-center text-xs text-gray-400">
+              Geschuetzt durch 2FA, Passkeys und verschluesselte Verbindungen.
+            </p>
+          </div>
         )}
       </div>
+    </div>
   );
 }

apps/admin/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/api/src/trpc/health.test.ts

@@ -589,3 +589,85 @@ test("health.statsSummary uses database logs for weekly and projection data", as
   assert.equal(summary.projection?.trendKgPerWeek, -1.1);
 });
 
+test("health.upsertWeeklyCaloriePlan speichert Tageskalorien pro Nutzer und Datum", async () => {
+  const { db, calls } = createHealthDbMock();
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const result = await caller.health.upsertWeeklyCaloriePlan({
+    date: "2026-05-30",
+    plannedCalories: 1800,
+    note: "Refeed-Tag",
+  });
+
+  assert.deepEqual(result, { ok: true });
+  const values = calls.find((call) => call.op === "insert.values")?.payload as {
+    userId?: string;
+    date?: string;
+    plannedCalories?: number;
+    note?: string | null;
+  };
+  assert.equal(values.userId, "user-health");
+  assert.equal(values.date, "2026-05-30");
+  assert.equal(values.plannedCalories, 1800);
+  assert.equal(values.note, "Refeed-Tag");
+
+  const conflict = calls.find((call) => call.op === "insert.values.result.onConflictDoUpdate")?.payload as {
+    set?: { plannedCalories?: number; note?: string | null };
+  };
+  assert.equal(conflict.set?.plannedCalories, 1800);
+  assert.equal(conflict.set?.note, "Refeed-Tag");
+});
+
+test("health.upsertWeeklyCaloriePlan lehnt unrealistische Kalorienwerte ab", async () => {
+  const caller = appRouter.createCaller(createContext() as never);
+
+  await assert.rejects(
+    () => caller.health.upsertWeeklyCaloriePlan({ date: "2026-05-30", plannedCalories: 500 }),
+    (error: unknown) => {
+      assert.equal((error as { code?: string }).code, "BAD_REQUEST");
+      return true;
+    },
+  );
+  await assert.rejects(
+    () => caller.health.upsertWeeklyCaloriePlan({ date: "2026-05-30", plannedCalories: 9000 }),
+    (error: unknown) => {
+      assert.equal((error as { code?: string }).code, "BAD_REQUEST");
+      return true;
+    },
+  );
+});
+
+test("health.addActivityLog schreibt Hellfireclub-Punkte mit Quelle und Idempotenz", async () => {
+  const { db, calls } = createHealthDbMock();
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  await caller.health.addActivityLog({
+    date: "2026-05-26",
+    name: "30 Minuten Joggen",
+    minutes: 30,
+    points: 45,
+    calories: 280,
+    source: "fitbit",
+    externalId: "fitbit-activity-99",
+  });
+
+  const values = calls.find((call) => call.op === "insert.values")?.payload as {
+    userId?: string;
+    name?: string;
+    points?: number;
+    calories?: number;
+    source?: string;
+    externalId?: string | null;
+  };
+  assert.equal(values.userId, "user-health");
+  assert.equal(values.name, "30 Minuten Joggen");
+  assert.equal(values.points, 45);
+  assert.equal(values.calories, 280);
+  assert.equal(values.source, "fitbit");
+  assert.equal(values.externalId, "fitbit-activity-99");
+  assert.ok(
+    calls.some((call) => call.op === "insert.values.result.onConflictDoNothing"),
+    "Wiederholtes Importieren der gleichen externalId darf nicht doppelt zaehlen",
+  );
+});
+

packages/api/src/trpc/security.test.ts

@@ -0,0 +1,229 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { appRouter } from "./index";
+import { twoFactorLossReasons } from "../lib/security-audit";
+
+type Call = { op: string; payload?: unknown };
+
+type DbUserRow = {
+  email?: string;
+  role?: string;
+  twoFactorEnabled?: boolean | null;
+  twoFactorRecoveryRequired?: boolean | null;
+} | null;
+
+type TwoFactorRow = { enabled?: boolean | null } | null;
+
+function chain(calls: Call[], op: string, payload?: unknown): any {
+  calls.push({ op, payload });
+  return {
+    set(value: unknown) {
+      calls.push({ op: `${op}.set`, payload: value });
+      return chain(calls, `${op}.set.result`);
+    },
+    where(value?: unknown) {
+      calls.push({ op: `${op}.where`, payload: value });
+      return Promise.resolve([]);
+    },
+  };
+}
+
+function createSecurityDbMock(options: { dbUser?: DbUserRow; twoFactorRow?: TwoFactorRow } = {}) {
+  const calls: Call[] = [];
+  const db = {
+    query: {
+      user: { findFirst: async () => options.dbUser ?? null },
+      twoFactor: { findFirst: async () => options.twoFactorRow ?? null },
+    },
+    update(table: unknown) {
+      return chain(calls, "update", table);
+    },
+  };
+  return { db, calls };
+}
+
+function createContext(overrides: Record<string, unknown> = {}) {
+  const user = { id: "user-1", email: "user@example.org", role: "user" };
+  return {
+    db: {},
+    headers: new Headers(),
+    session: { user },
+    user,
+    userRole: "user",
+    isPlatformAdmin: false,
+    ...overrides,
+  };
+}
+
+function createUnauthedContext() {
+  return {
+    db: {},
+    headers: new Headers(),
+    session: null,
+    user: null,
+    userRole: "user",
+    isPlatformAdmin: false,
+  };
+}
+
+test("twoFactorLossReasons meldet nur Probleme fuer privilegierte Accounts", () => {
+  assert.deepEqual(
+    twoFactorLossReasons({
+      isPrivileged: false,
+      userTwoFactorEnabled: false,
+      twoFactorRowExists: false,
+      twoFactorRowEnabled: false,
+      recoveryRequired: true,
+    }),
+    [],
+    "Normale Nutzer sind nicht zu 2FA verpflichtet",
+  );
+
+  const reasons = twoFactorLossReasons({
+    isPrivileged: true,
+    userTwoFactorEnabled: false,
+    twoFactorRowExists: false,
+    twoFactorRowEnabled: false,
+    recoveryRequired: true,
+  });
+  assert.ok(reasons.includes("user.twoFactorEnabled=false"));
+  assert.ok(reasons.includes("twoFactor row missing"));
+  assert.ok(reasons.includes("twoFactorRecoveryRequired=true"));
+
+  assert.deepEqual(
+    twoFactorLossReasons({
+      isPrivileged: true,
+      userTwoFactorEnabled: true,
+      twoFactorRowExists: true,
+      twoFactorRowEnabled: true,
+      recoveryRequired: false,
+    }),
+    [],
+    "Sauberer Admin-Account hat keine Recovery-Reasons",
+  );
+});
+
+test("twoFactorLossReasons unterscheidet fehlende Row von deaktivierter Row", () => {
+  const missing = twoFactorLossReasons({
+    isPrivileged: true,
+    userTwoFactorEnabled: true,
+    twoFactorRowExists: false,
+    twoFactorRowEnabled: false,
+    recoveryRequired: false,
+  });
+  assert.deepEqual(missing, ["twoFactor row missing"]);
+
+  const disabled = twoFactorLossReasons({
+    isPrivileged: true,
+    userTwoFactorEnabled: true,
+    twoFactorRowExists: true,
+    twoFactorRowEnabled: false,
+    recoveryRequired: false,
+  });
+  assert.deepEqual(disabled, ["twoFactor.enabled=false"]);
+});
+
+test("security.status erfordert Authentifizierung", async () => {
+  const caller = appRouter.createCaller(createUnauthedContext() as never);
+  await assert.rejects(
+    () => caller.security.status(),
+    (error: unknown) => {
+      assert.equal((error as { code?: string }).code, "UNAUTHORIZED");
+      return true;
+    },
+  );
+});
+
+test("security.status meldet sauberen Admin mit aktivem 2FA", async () => {
+  const { db, calls } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "admin",
+      twoFactorEnabled: true,
+      twoFactorRecoveryRequired: false,
+    },
+    twoFactorRow: { enabled: true },
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.deepEqual(status, {
+    isAdminAccount: true,
+    twoFactorEnabled: true,
+    hasTwoFactorSecret: true,
+    twoFactorRecoveryRequired: false,
+    requiresTwoFactorSetup: false,
+  });
+  assert.equal(calls.length, 0, "Keine Recovery-Updates noetig");
+});
+
+test("security.status markiert Admin ohne 2FA-Row als setup-pflichtig", async () => {
+  const { db } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "platform_admin",
+      twoFactorEnabled: false,
+      twoFactorRecoveryRequired: false,
+    },
+    twoFactorRow: null,
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.equal(status.isAdminAccount, true);
+  assert.equal(status.twoFactorEnabled, false);
+  assert.equal(status.hasTwoFactorSecret, false);
+  assert.equal(status.requiresTwoFactorSetup, true);
+});
+
+test("security.status loescht Recovery-Flag automatisch wenn 2FA wieder aktiv", async () => {
+  const { db, calls } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "admin",
+      twoFactorEnabled: true,
+      twoFactorRecoveryRequired: true,
+    },
+    twoFactorRow: { enabled: true },
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.equal(status.twoFactorRecoveryRequired, false, "Flag wird im Response zurueckgesetzt");
+  assert.equal(status.requiresTwoFactorSetup, false);
+  const updateSet = calls.find((call) => call.op === "update.set")?.payload as {
+    twoFactorRecoveryRequired?: boolean;
+    twoFactorRecoveryStartedAt?: Date | null;
+    twoFactorRecoveryStartedBy?: string | null;
+  };
+  assert.equal(updateSet.twoFactorRecoveryRequired, false);
+  assert.equal(updateSet.twoFactorRecoveryStartedAt, null);
+  assert.equal(updateSet.twoFactorRecoveryStartedBy, null);
+});
+
+test("security.status haelt requiresTwoFactorSetup aktiv solange Recovery noch laeuft mit deaktivierter Row", async () => {
+  const { db, calls } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "admin",
+      twoFactorEnabled: true,
+      twoFactorRecoveryRequired: true,
+    },
+    twoFactorRow: { enabled: false },
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.equal(status.twoFactorEnabled, false, "Row.enabled=false -> 2FA gilt als aus");
+  assert.equal(status.twoFactorRecoveryRequired, true);
+  assert.equal(status.requiresTwoFactorSetup, true);
+  assert.equal(
+    calls.some((call) => call.op === "update.set"),
+    false,
+    "Kein Auto-Clear solange 2FA effektiv aus ist",
+  );
+});