From 68fe8afab241224c83159fc02236219bfa8467be Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Sat, 9 May 2026 15:47:05 +0200
Subject: [PATCH] =?UTF-8?q?feat(admin):=20Phase=202=20Frontend=20=E2=80=94?=
 =?UTF-8?q?=20Domains/Stats/Users/Moderation=20pages=20+=20responsive=20la?=
 =?UTF-8?q?yout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

4 page-implementations + server-route-proxies (admin-secret stays server-only):

DOMAINS (apps/admin/pages/domains.vue):
- UTable mit pending-submissions queue
- Approve / Reject buttons per row
- Reject-confirm-modal mit optional note
- useToast + refresh nach action
- 3 server-routes: GET list + POST approve/reject

STATS (apps/admin/pages/stats.vue):
- Stat-cards: Total Users + delta-week, Total Posts + delta-week,
  Domains pending (link to /domains), Domains approved, Feedback pending,
  Lyra-Posts (30d)
- UProgress für Domain-Approval-Quote
- Auto-refresh 60s + manual refresh-button
- USkeleton während loading
- 1 server-route: GET /api/stats

USERS (apps/admin/pages/users.vue):
- UTable mit avatar+nickname/username, plan-badge, streak, status, createdAt
- Search-input + plan-filter dropdown
- Action-dropdown per row: Plan-Change / Ban-Toggle / Soft-Delete
- 3 separate UModals mit confirm-pattern
- Cursor-pagination (Mehr laden button)
- 3 server-routes: GET list, PATCH /:id, DELETE /:id

MODERATION (apps/admin/pages/moderation.vue):
- Stack-layout mit card-pro-item (statt table — content-preview braucht space)
- Type-badge (Post/Comment), Author + Plan-badge, content-preview (200 chars),
  reportedAt
- Action-buttons: Dismiss (gray), Delete Content (red soft + reason-modal),
  Ban User (red solid + warning-modal)
- Empty-state, cursor-pagination
- 4 server-routes: GET /queue, POST /:id/dismiss/delete/ban-user

Server-route pattern (apps/admin/server/api/...):
- Use useRuntimeConfig().adminSecret server-only
- Client never sees x-admin-secret
- Body/query passthrough to backend

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/admin/pages/domains.vue                  | 327 ++++++++++-
 apps/admin/pages/moderation.vue               | 516 +++++++++++++++++-
 apps/admin/pages/stats.vue                    | 239 +++++++-
 apps/admin/pages/users.vue                    | 435 ++++++++++++++-
 .../server/api/domain-submissions.get.ts      |  34 ++
 .../domain-submissions/[id]/approve.post.ts   |  41 ++
 .../domain-submissions/[id]/reject.post.ts    |  41 ++
 .../api/moderation/[id]/ban-user.post.ts      |  39 ++
 .../server/api/moderation/[id]/delete.post.ts |  39 ++
 .../api/moderation/[id]/dismiss.post.ts       |  38 ++
 apps/admin/server/api/moderation/queue.get.ts |  62 +++
 apps/admin/server/api/stats.get.ts            |  42 ++
 apps/admin/server/api/users.get.ts            |  27 +
 apps/admin/server/api/users/[id].delete.ts    |  14 +
 apps/admin/server/api/users/[id].patch.ts     |  19 +
 15 files changed, 1890 insertions(+), 23 deletions(-)
 create mode 100644 apps/admin/server/api/domain-submissions.get.ts
 create mode 100644 apps/admin/server/api/domain-submissions/[id]/approve.post.ts
 create mode 100644 apps/admin/server/api/domain-submissions/[id]/reject.post.ts
 create mode 100644 apps/admin/server/api/moderation/[id]/ban-user.post.ts
 create mode 100644 apps/admin/server/api/moderation/[id]/delete.post.ts
 create mode 100644 apps/admin/server/api/moderation/[id]/dismiss.post.ts
 create mode 100644 apps/admin/server/api/moderation/queue.get.ts
 create mode 100644 apps/admin/server/api/stats.get.ts
 create mode 100644 apps/admin/server/api/users.get.ts
 create mode 100644 apps/admin/server/api/users/[id].delete.ts
 create mode 100644 apps/admin/server/api/users/[id].patch.ts

diff --git a/apps/admin/pages/domains.vue b/apps/admin/pages/domains.vue
index 692d8e2..aed9184 100644
--- a/apps/admin/pages/domains.vue
+++ b/apps/admin/pages/domains.vue
@@ -1,14 +1,329 @@
 <template>
   <div>
-    <h1 class="text-xl font-semibold text-white mb-1">Domain-Approval</h1>
-    <p class="text-sm text-gray-500 mb-8">Ausstehende Blocker-Domain-Anfragen genehmigen oder ablehnen.</p>
-    <div class="rounded-lg border border-dashed border-gray-700 bg-gray-900 p-12 text-center">
-      <UIcon name="heroicons:globe-alt" class="h-8 w-8 text-gray-600 mx-auto mb-3" />
-      <p class="text-sm text-gray-500">Phase 2 -- Backend-API /api/admin/domains pending</p>
+    <div class="flex items-start justify-between mb-8">
+      <div>
+        <h1 class="text-xl font-semibold text-white mb-1">Domain-Approval</h1>
+        <p class="text-sm text-gray-500">
+          Ausstehende Blocker-Domain-Anfragen genehmigen oder ablehnen.
+        </p>
+      </div>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        icon="heroicons:arrow-path"
+        :loading="pending"
+        size="sm"
+        @click="refresh()"
+      >
+        Aktualisieren
+      </UButton>
     </div>
+
+    <!-- Error-State -->
+    <div
+      v-if="error"
+      class="rounded-lg border border-red-900 bg-red-950/40 p-4 mb-4 flex items-start gap-3"
+    >
+      <UIcon
+        name="heroicons:exclamation-triangle"
+        class="h-5 w-5 text-red-400 shrink-0 mt-0.5"
+      />
+      <div class="flex-1">
+        <p class="text-sm font-medium text-red-300">
+          Fehler beim Laden der Anfragen
+        </p>
+        <p class="text-xs text-red-400/80 mt-1">
+          {{ error.statusMessage || error.message || "Unbekannter Fehler" }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Loading-State (initial) -->
+    <div
+      v-else-if="pending && !submissions"
+      class="rounded-lg border border-gray-800 bg-gray-900 p-12 text-center"
+    >
+      <UIcon
+        name="heroicons:arrow-path"
+        class="h-6 w-6 text-gray-600 mx-auto mb-3 animate-spin"
+      />
+      <p class="text-sm text-gray-500">Lade Domain-Anfragen…</p>
+    </div>
+
+    <!-- Empty-State -->
+    <div
+      v-else-if="!submissions || submissions.length === 0"
+      class="rounded-lg border border-dashed border-gray-700 bg-gray-900 p-12 text-center"
+    >
+      <UIcon
+        name="heroicons:inbox"
+        class="h-8 w-8 text-gray-600 mx-auto mb-3"
+      />
+      <p class="text-sm text-gray-500">Keine pending requests</p>
+      <p class="text-xs text-gray-600 mt-2">
+        Alle Domain-Anfragen sind aktuell bearbeitet.
+      </p>
+    </div>
+
+    <!-- Tabelle -->
+    <div
+      v-else
+      class="rounded-lg border border-gray-800 bg-gray-900 overflow-hidden"
+    >
+      <UTable
+        :data="submissions"
+        :columns="columns"
+        :ui="{
+          th: 'text-xs uppercase tracking-wider text-gray-500 bg-gray-900/60',
+          td: 'text-sm text-gray-300 align-middle',
+          tr: 'border-b border-gray-800 last:border-b-0',
+        }"
+      >
+        <template #domain-cell="{ row }">
+          <span class="font-mono text-white">{{ row.original.domain }}</span>
+          <UBadge
+            v-if="row.original.status === 'in_review'"
+            color="warning"
+            variant="subtle"
+            size="xs"
+            class="ml-2"
+          >
+            in_review
+          </UBadge>
+        </template>
+
+        <template #requestedBy-cell="{ row }">
+          <span class="font-mono text-xs text-gray-400">
+            {{ shortId(row.original.userId) }}
+          </span>
+        </template>
+
+        <template #requestedAt-cell="{ row }">
+          <span class="text-gray-400">{{
+            formatDate(row.original.createdAt)
+          }}</span>
+        </template>
+
+        <template #votes-cell="{ row }">
+          <div class="flex items-center gap-3">
+            <span class="inline-flex items-center gap-1 text-green-400">
+              <UIcon name="heroicons:hand-thumb-up" class="h-3.5 w-3.5" />
+              {{ row.original.yesVotes }}
+            </span>
+            <span class="inline-flex items-center gap-1 text-red-400">
+              <UIcon name="heroicons:hand-thumb-down" class="h-3.5 w-3.5" />
+              {{ row.original.noVotes }}
+            </span>
+          </div>
+        </template>
+
+        <template #actions-cell="{ row }">
+          <div class="flex items-center justify-end gap-2">
+            <UButton
+              color="success"
+              variant="soft"
+              size="xs"
+              icon="heroicons:check"
+              :loading="busyId === row.original.id && busyAction === 'approve'"
+              :disabled="!!busyId"
+              @click="onApprove(row.original)"
+            >
+              Approve
+            </UButton>
+            <UButton
+              color="error"
+              variant="soft"
+              size="xs"
+              icon="heroicons:x-mark"
+              :loading="busyId === row.original.id && busyAction === 'reject'"
+              :disabled="!!busyId"
+              @click="askReject(row.original)"
+            >
+              Reject
+            </UButton>
+          </div>
+        </template>
+      </UTable>
+    </div>
+
+    <!-- Reject-Confirm-Dialog -->
+    <UModal v-model:open="rejectOpen" title="Domain-Anfrage ablehnen">
+      <template #body>
+        <div class="space-y-4">
+          <p class="text-sm text-gray-300">
+            Anfrage für
+            <span class="font-mono text-white">{{
+              rejectTarget?.domain
+            }}</span>
+            wirklich ablehnen?
+          </p>
+          <UTextarea
+            v-model="rejectNote"
+            placeholder="Optionaler Begründungs-Hinweis (intern)…"
+            :rows="3"
+            class="w-full"
+          />
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2 w-full">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            :disabled="!!busyId"
+            @click="rejectOpen = false"
+          >
+            Abbrechen
+          </UButton>
+          <UButton
+            color="error"
+            :loading="!!busyId"
+            @click="confirmReject"
+          >
+            Ablehnen
+          </UButton>
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({ middleware: "admin-auth" })
+import type { TableColumn } from "@nuxt/ui";
+
+definePageMeta({ middleware: "admin-auth" });
+
+interface DomainSubmission {
+  id: string;
+  domain: string;
+  yesVotes: number;
+  noVotes: number;
+  status: "pending" | "in_review" | "approved" | "rejected";
+  createdAt: string;
+  userId: string;
+  postId: string | null;
+  customDomain: { id: string } | null;
+}
+
+const toast = useToast();
+
+const {
+  data: submissions,
+  pending,
+  error,
+  refresh,
+} = await useFetch<DomainSubmission[]>("/api/domain-submissions", {
+  default: () => [],
+  server: false, // Auth-Guard erst client-side -> SSR-Fetch wuerde unauthenticated landen
+});
+
+const columns: TableColumn<DomainSubmission>[] = [
+  { accessorKey: "domain", header: "Domain" },
+  { accessorKey: "requestedBy", header: "Angefragt von" },
+  { accessorKey: "requestedAt", header: "Angefragt am" },
+  { accessorKey: "votes", header: "Votes" },
+  { accessorKey: "actions", header: "", meta: { class: { td: "text-right" } } },
+];
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function shortId(id: string): string {
+  if (!id) return "—";
+  return id.slice(0, 8);
+}
+
+function formatDate(iso: string): string {
+  if (!iso) return "—";
+  try {
+    return new Date(iso).toLocaleString("de-DE", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+// ─── Approve / Reject ─────────────────────────────────────────────────────────
+
+const busyId = ref<string | null>(null);
+const busyAction = ref<"approve" | "reject" | null>(null);
+
+const rejectOpen = ref(false);
+const rejectTarget = ref<DomainSubmission | null>(null);
+const rejectNote = ref("");
+
+async function onApprove(row: DomainSubmission) {
+  if (busyId.value) return;
+  busyId.value = row.id;
+  busyAction.value = "approve";
+  try {
+    await $fetch(`/api/domain-submissions/${row.id}/approve`, {
+      method: "POST",
+      body: {},
+    });
+    toast.add({
+      title: "Domain genehmigt",
+      description: row.domain,
+      color: "success",
+      icon: "heroicons:check-circle",
+    });
+    await refresh();
+  } catch (err: any) {
+    toast.add({
+      title: "Approve fehlgeschlagen",
+      description:
+        err?.statusMessage ?? err?.message ?? "Unbekannter Fehler",
+      color: "error",
+      icon: "heroicons:exclamation-triangle",
+    });
+  } finally {
+    busyId.value = null;
+    busyAction.value = null;
+  }
+}
+
+function askReject(row: DomainSubmission) {
+  if (busyId.value) return;
+  rejectTarget.value = row;
+  rejectNote.value = "";
+  rejectOpen.value = true;
+}
+
+async function confirmReject() {
+  const target = rejectTarget.value;
+  if (!target || busyId.value) return;
+  busyId.value = target.id;
+  busyAction.value = "reject";
+  try {
+    await $fetch(`/api/domain-submissions/${target.id}/reject`, {
+      method: "POST",
+      body: { note: rejectNote.value || undefined },
+    });
+    toast.add({
+      title: "Domain abgelehnt",
+      description: target.domain,
+      color: "warning",
+      icon: "heroicons:x-circle",
+    });
+    rejectOpen.value = false;
+    rejectTarget.value = null;
+    rejectNote.value = "";
+    await refresh();
+  } catch (err: any) {
+    toast.add({
+      title: "Reject fehlgeschlagen",
+      description:
+        err?.statusMessage ?? err?.message ?? "Unbekannter Fehler",
+      color: "error",
+      icon: "heroicons:exclamation-triangle",
+    });
+  } finally {
+    busyId.value = null;
+    busyAction.value = null;
+  }
+}
 </script>
diff --git a/apps/admin/pages/moderation.vue b/apps/admin/pages/moderation.vue
index 81a680d..130ba2c 100644
--- a/apps/admin/pages/moderation.vue
+++ b/apps/admin/pages/moderation.vue
@@ -1,14 +1,518 @@
 <template>
   <div>
-    <h1 class="text-xl font-semibold text-white mb-1">Moderation</h1>
-    <p class="text-sm text-gray-500 mb-8">Gemeldete Inhalte pruefen und behandeln.</p>
-    <div class="rounded-lg border border-dashed border-gray-700 bg-gray-900 p-12 text-center">
-      <UIcon name="heroicons:shield-check" class="h-8 w-8 text-gray-600 mx-auto mb-3" />
-      <p class="text-sm text-gray-500">Phase 2 -- Backend-API /api/admin/moderation pending</p>
+    <div class="flex items-start justify-between mb-8">
+      <div>
+        <h1 class="text-xl font-semibold text-white mb-1">Moderation</h1>
+        <p class="text-sm text-gray-500">
+          Gemeldete Inhalte prüfen, dismiss / delete / ban-user. Audit-Log persistiert.
+        </p>
+      </div>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        icon="heroicons:arrow-path"
+        :loading="pending"
+        size="sm"
+        @click="reload()"
+      >
+        Aktualisieren
+      </UButton>
     </div>
+
+    <!-- Error-State -->
+    <div
+      v-if="error"
+      class="rounded-lg border border-red-900 bg-red-950/40 p-4 mb-4 flex items-start gap-3"
+    >
+      <UIcon
+        name="heroicons:exclamation-triangle"
+        class="h-5 w-5 text-red-400 shrink-0 mt-0.5"
+      />
+      <div class="flex-1">
+        <p class="text-sm font-medium text-red-300">
+          Fehler beim Laden der Moderation-Queue
+        </p>
+        <p class="text-xs text-red-400/80 mt-1">
+          {{ error.statusMessage || error.message || "Unbekannter Fehler" }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Loading-State (initial) -->
+    <div
+      v-else-if="pending && items.length === 0"
+      class="rounded-lg border border-gray-800 bg-gray-900 p-12 text-center"
+    >
+      <UIcon
+        name="heroicons:arrow-path"
+        class="h-6 w-6 text-gray-600 mx-auto mb-3 animate-spin"
+      />
+      <p class="text-sm text-gray-500">Lade Moderation-Queue…</p>
+    </div>
+
+    <!-- Empty-State -->
+    <div
+      v-else-if="items.length === 0"
+      class="rounded-lg border border-dashed border-gray-700 bg-gray-900 p-12 text-center"
+    >
+      <UIcon
+        name="heroicons:shield-check"
+        class="h-8 w-8 text-emerald-600 mx-auto mb-3"
+      />
+      <p class="text-sm text-gray-300">Keine offene moderation-items</p>
+      <p class="text-xs text-gray-500 mt-2">
+        Alle gemeldeten Inhalte sind bearbeitet.
+      </p>
+    </div>
+
+    <!-- Stack-Layout: ein Card pro Item -->
+    <div v-else class="space-y-3">
+      <div
+        v-for="item in items"
+        :key="`${item.type}:${item.id}`"
+        class="rounded-lg border border-gray-800 bg-gray-900 p-5"
+      >
+        <!-- Header-Row: type-badge, user-info, reportedAt -->
+        <div class="flex items-start justify-between gap-4 mb-3">
+          <div class="flex items-center gap-3 flex-wrap">
+            <UBadge
+              :color="item.type === 'post' ? 'primary' : 'info'"
+              variant="subtle"
+              size="sm"
+            >
+              {{ item.type === "post" ? "Post" : "Comment" }}
+            </UBadge>
+
+            <UBadge
+              v-if="item.isDeleted"
+              color="error"
+              variant="subtle"
+              size="sm"
+            >
+              gelöscht
+            </UBadge>
+
+            <span class="text-xs text-gray-500">
+              <UIcon
+                name="heroicons:user-circle"
+                class="h-3.5 w-3.5 inline -mt-0.5"
+              />
+              {{ item.author?.nickname || "—" }}
+              <span class="text-gray-600 ml-1">
+                ({{ shortId(item.userId) }})
+              </span>
+            </span>
+
+            <UBadge
+              v-if="item.author?.plan && item.author.plan !== 'free'"
+              :color="item.author.plan === 'legend' ? 'warning' : 'success'"
+              variant="subtle"
+              size="xs"
+            >
+              {{ item.author.plan }}
+            </UBadge>
+          </div>
+
+          <span class="text-xs text-gray-500 shrink-0">
+            {{
+              item.reportedAt
+                ? `gemeldet ${formatDate(item.reportedAt)}`
+                : `erstellt ${formatDate(item.createdAt)}`
+            }}
+          </span>
+        </div>
+
+        <!-- Content-Preview (max 200 chars) -->
+        <div
+          class="rounded border border-gray-800 bg-gray-950/60 px-4 py-3 mb-4"
+        >
+          <p
+            v-if="item.isDeleted"
+            class="text-sm italic text-gray-600"
+          >
+            [Inhalt bereits gelöscht — Original im Audit-Log]
+          </p>
+          <p v-else class="text-sm text-gray-200 whitespace-pre-wrap">
+            {{ truncate(item.content, 200) }}
+          </p>
+          <p
+            v-if="item.type === 'comment' && item.postId"
+            class="text-xs text-gray-600 mt-2"
+          >
+            zum Post {{ shortId(item.postId) }}
+          </p>
+        </div>
+
+        <!-- Action-Buttons -->
+        <div class="flex items-center justify-end gap-2 flex-wrap">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            icon="heroicons:check"
+            :loading="busy(item, 'dismiss')"
+            :disabled="anyBusy"
+            @click="onDismiss(item)"
+          >
+            Dismiss
+          </UButton>
+          <UButton
+            color="error"
+            variant="soft"
+            size="xs"
+            icon="heroicons:trash"
+            :disabled="anyBusy || item.isDeleted"
+            :loading="busy(item, 'delete')"
+            @click="askDelete(item)"
+          >
+            Delete Content
+          </UButton>
+          <UButton
+            color="error"
+            variant="solid"
+            size="xs"
+            icon="heroicons:no-symbol"
+            :disabled="anyBusy"
+            :loading="busy(item, 'ban')"
+            @click="askBan(item)"
+          >
+            Ban User
+          </UButton>
+        </div>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="nextCursor" class="flex justify-center pt-4">
+        <UButton
+          color="neutral"
+          variant="outline"
+          size="sm"
+          :loading="loadingMore"
+          @click="loadMore"
+        >
+          Mehr laden
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Delete-Confirm-Modal -->
+    <UModal v-model:open="deleteOpen" title="Inhalt löschen">
+      <template #body>
+        <div class="space-y-4">
+          <p class="text-sm text-gray-300">
+            {{ deleteTarget?.type === "post" ? "Post" : "Kommentar" }}
+            wirklich soft-löschen? Original-Inhalt bleibt im Audit-Log
+            erhalten.
+          </p>
+          <UTextarea
+            v-model="deleteReason"
+            placeholder="Optionale Begründung (intern)…"
+            :rows="3"
+            class="w-full"
+          />
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2 w-full">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            :disabled="anyBusy"
+            @click="deleteOpen = false"
+          >
+            Abbrechen
+          </UButton>
+          <UButton color="error" :loading="anyBusy" @click="confirmDelete">
+            Löschen
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Ban-User-Confirm-Modal -->
+    <UModal v-model:open="banOpen" title="User bannen">
+      <template #body>
+        <div class="space-y-4">
+          <div
+            class="rounded border border-red-900 bg-red-950/40 px-4 py-3 flex items-start gap-3"
+          >
+            <UIcon
+              name="heroicons:exclamation-triangle"
+              class="h-5 w-5 text-red-400 shrink-0 mt-0.5"
+            />
+            <div class="text-xs text-red-300">
+              User wird auf API-Ebene gesperrt (Login bleibt unberührt).
+              Reuses /api/admin/users[id]-Patch-Pattern.
+            </div>
+          </div>
+          <p class="text-sm text-gray-300">
+            User
+            <span class="font-mono text-white">{{
+              banTarget?.author?.nickname || shortId(banTarget?.userId || "")
+            }}</span>
+            wegen
+            {{ banTarget?.type === "post" ? "diesem Post" : "diesem Kommentar" }}
+            bannen?
+          </p>
+          <UTextarea
+            v-model="banReason"
+            placeholder="Begründung (Pflicht intern, im Audit-Log persistiert)…"
+            :rows="3"
+            class="w-full"
+          />
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2 w-full">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            :disabled="anyBusy"
+            @click="banOpen = false"
+          >
+            Abbrechen
+          </UButton>
+          <UButton color="error" :loading="anyBusy" @click="confirmBan">
+            Bannen
+          </UButton>
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({ middleware: "admin-auth" })
+import type {
+  ModerationItem,
+  ModerationQueueResponse,
+} from "~/server/api/moderation/queue.get";
+
+definePageMeta({ middleware: "admin-auth" });
+
+const toast = useToast();
+
+const items = ref<ModerationItem[]>([]);
+const nextCursor = ref<string | null>(null);
+const pending = ref(false);
+const error = ref<{ statusMessage?: string; message?: string } | null>(null);
+
+async function fetchPage(cursor: string | null = null) {
+  const query: Record<string, string> = {};
+  if (cursor) query.cursor = cursor;
+  return $fetch<ModerationQueueResponse>("/api/moderation/queue", { query });
+}
+
+async function reload() {
+  pending.value = true;
+  error.value = null;
+  try {
+    const res = await fetchPage(null);
+    items.value = res.items;
+    nextCursor.value = res.nextCursor;
+  } catch (err: any) {
+    error.value = {
+      statusMessage: err?.statusMessage,
+      message: err?.message,
+    };
+  } finally {
+    pending.value = false;
+  }
+}
+
+const loadingMore = ref(false);
+async function loadMore() {
+  if (!nextCursor.value || loadingMore.value) return;
+  loadingMore.value = true;
+  try {
+    const res = await fetchPage(nextCursor.value);
+    items.value = [...items.value, ...res.items];
+    nextCursor.value = res.nextCursor;
+  } catch (err: any) {
+    toast.add({
+      title: "Laden fehlgeschlagen",
+      description: err?.statusMessage ?? err?.message ?? "Unbekannter Fehler",
+      color: "error",
+      icon: "heroicons:exclamation-triangle",
+    });
+  } finally {
+    loadingMore.value = false;
+  }
+}
+
+// Initial-load — client-side only (Auth-Middleware redirected sonst SSR).
+onMounted(() => {
+  reload();
+});
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function shortId(id: string): string {
+  if (!id) return "—";
+  return id.slice(0, 8);
+}
+
+function formatDate(iso: string): string {
+  if (!iso) return "—";
+  try {
+    return new Date(iso).toLocaleString("de-DE", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function truncate(s: string, max: number): string {
+  if (!s) return "";
+  if (s.length <= max) return s;
+  return s.slice(0, max) + "…";
+}
+
+// ─── Action-Busy-State ───────────────────────────────────────────────────────
+
+type ActionKind = "dismiss" | "delete" | "ban";
+
+const busyKey = ref<string | null>(null); // "{type}:{id}:{action}"
+
+function busy(item: ModerationItem, action: ActionKind): boolean {
+  return busyKey.value === `${item.type}:${item.id}:${action}`;
+}
+
+const anyBusy = computed(() => busyKey.value !== null);
+
+// ─── Dismiss ─────────────────────────────────────────────────────────────────
+
+async function onDismiss(item: ModerationItem) {
+  if (anyBusy.value) return;
+  busyKey.value = `${item.type}:${item.id}:dismiss`;
+  try {
+    await $fetch(`/api/moderation/${item.id}/dismiss`, {
+      method: "POST",
+      body: { type: item.type },
+    });
+    toast.add({
+      title: "Flag gelöscht",
+      description: item.type === "post" ? "Post" : "Kommentar",
+      color: "success",
+      icon: "heroicons:check-circle",
+    });
+    items.value = items.value.filter(
+      (i) => !(i.id === item.id && i.type === item.type),
+    );
+  } catch (err: any) {
+    toast.add({
+      title: "Dismiss fehlgeschlagen",
+      description: err?.statusMessage ?? err?.message ?? "Unbekannter Fehler",
+      color: "error",
+      icon: "heroicons:exclamation-triangle",
+    });
+  } finally {
+    busyKey.value = null;
+  }
+}
+
+// ─── Delete ──────────────────────────────────────────────────────────────────
+
+const deleteOpen = ref(false);
+const deleteTarget = ref<ModerationItem | null>(null);
+const deleteReason = ref("");
+
+function askDelete(item: ModerationItem) {
+  if (anyBusy.value) return;
+  deleteTarget.value = item;
+  deleteReason.value = "";
+  deleteOpen.value = true;
+}
+
+async function confirmDelete() {
+  const target = deleteTarget.value;
+  if (!target || anyBusy.value) return;
+  busyKey.value = `${target.type}:${target.id}:delete`;
+  try {
+    await $fetch(`/api/moderation/${target.id}/delete`, {
+      method: "POST",
+      body: {
+        type: target.type,
+        reason: deleteReason.value || undefined,
+      },
+    });
+    toast.add({
+      title: "Inhalt gelöscht",
+      description: "Original im Audit-Log persistiert",
+      color: "warning",
+      icon: "heroicons:trash",
+    });
+    deleteOpen.value = false;
+    deleteTarget.value = null;
+    deleteReason.value = "";
+    // Item lokal als gelöscht markieren statt aus Liste entfernen — Admin
+    // sieht weiter dass es bearbeitet wurde, kann anschließend dismiss-en.
+    items.value = items.value.map((i) =>
+      i.id === target.id && i.type === target.type
+        ? { ...i, isDeleted: true, content: "" }
+        : i,
+    );
+  } catch (err: any) {
+    toast.add({
+      title: "Delete fehlgeschlagen",
+      description: err?.statusMessage ?? err?.message ?? "Unbekannter Fehler",
+      color: "error",
+      icon: "heroicons:exclamation-triangle",
+    });
+  } finally {
+    busyKey.value = null;
+  }
+}
+
+// ─── Ban-User ────────────────────────────────────────────────────────────────
+
+const banOpen = ref(false);
+const banTarget = ref<ModerationItem | null>(null);
+const banReason = ref("");
+
+function askBan(item: ModerationItem) {
+  if (anyBusy.value) return;
+  banTarget.value = item;
+  banReason.value = "";
+  banOpen.value = true;
+}
+
+async function confirmBan() {
+  const target = banTarget.value;
+  if (!target || anyBusy.value) return;
+  busyKey.value = `${target.type}:${target.id}:ban`;
+  try {
+    await $fetch(`/api/moderation/${target.id}/ban-user`, {
+      method: "POST",
+      body: {
+        type: target.type,
+        reason: banReason.value || undefined,
+      },
+    });
+    toast.add({
+      title: "User gebannt",
+      description: target.author?.nickname || shortId(target.userId),
+      color: "error",
+      icon: "heroicons:no-symbol",
+    });
+    banOpen.value = false;
+    banTarget.value = null;
+    banReason.value = "";
+    // Refresh — andere Items vom selben User sind jetzt auch ban-betroffen.
+    await reload();
+  } catch (err: any) {
+    toast.add({
+      title: "Ban fehlgeschlagen",
+      description: err?.statusMessage ?? err?.message ?? "Unbekannter Fehler",
+      color: "error",
+      icon: "heroicons:exclamation-triangle",
+    });
+  } finally {
+    busyKey.value = null;
+  }
+}
 </script>
diff --git a/apps/admin/pages/stats.vue b/apps/admin/pages/stats.vue
index 0a445c7..a3229b9 100644
--- a/apps/admin/pages/stats.vue
+++ b/apps/admin/pages/stats.vue
@@ -1,14 +1,243 @@
 <template>
   <div>
-    <h1 class="text-xl font-semibold text-white mb-1">Statistiken</h1>
-    <p class="text-sm text-gray-500 mb-8">Aggregierte, anonyme Nutzungsmetriken.</p>
-    <div class="rounded-lg border border-dashed border-gray-700 bg-gray-900 p-12 text-center">
-      <UIcon name="heroicons:chart-bar" class="h-8 w-8 text-gray-600 mx-auto mb-3" />
-      <p class="text-sm text-gray-500">Phase 2 -- Backend-API /api/admin/stats pending</p>
+    <div class="flex items-start justify-between mb-8">
+      <div>
+        <h1 class="text-xl font-semibold text-white mb-1">Statistiken</h1>
+        <p class="text-sm text-gray-500">Aggregierte, anonyme Nutzungsmetriken. Auto-refresh alle 60s.</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <span v-if="lastUpdated" class="text-xs text-gray-600">
+          Aktualisiert {{ lastUpdatedLabel }}
+        </span>
+        <UButton
+          icon="heroicons:arrow-path"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :loading="status === 'pending'"
+          @click="refresh()"
+        />
+      </div>
+    </div>
+
+    <!-- Loading-skeleton beim ersten Load -->
+    <div v-if="status === 'pending' && !data" class="grid grid-cols-2 gap-4 lg:grid-cols-4 mb-8">
+      <div
+        v-for="n in 6"
+        :key="n"
+        class="rounded-lg border border-gray-800 bg-gray-900 p-4"
+      >
+        <USkeleton class="h-4 w-24 mb-3" />
+        <USkeleton class="h-8 w-16" />
+      </div>
+    </div>
+
+    <!-- Error / Empty-state -->
+    <div
+      v-else-if="error || !data"
+      class="rounded-lg border border-dashed border-red-900 bg-gray-900 p-12 text-center"
+    >
+      <UIcon name="heroicons:exclamation-triangle" class="h-8 w-8 text-red-500 mx-auto mb-3" />
+      <p class="text-sm text-red-400 mb-1">Stats konnten nicht geladen werden</p>
+      <p class="text-xs text-gray-500">{{ error?.statusMessage || error?.message || 'Backend nicht erreichbar' }}</p>
+      <UButton
+        class="mt-4"
+        size="xs"
+        color="neutral"
+        variant="outline"
+        @click="refresh()"
+      >
+        Erneut versuchen
+      </UButton>
+    </div>
+
+    <!-- Stat-cards-grid -->
+    <div v-else>
+      <div class="grid grid-cols-2 gap-4 lg:grid-cols-4 mb-8">
+        <div
+          v-for="card in cards"
+          :key="card.label"
+          class="rounded-lg border border-gray-800 bg-gray-900 p-4"
+          :class="[card.linkTo ? 'hover:border-gray-700 cursor-pointer transition-colors' : '']"
+          @click="card.linkTo ? navigateTo(card.linkTo) : undefined"
+        >
+          <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+              <UIcon :name="card.icon" class="h-4 w-4 text-gray-500" />
+              <span class="text-xs text-gray-500">{{ card.label }}</span>
+            </div>
+            <UIcon
+              v-if="card.linkTo"
+              name="heroicons:arrow-top-right-on-square"
+              class="h-3 w-3 text-gray-700"
+            />
+          </div>
+          <p class="text-2xl font-bold text-white">{{ formatNumber(card.value) }}</p>
+          <div v-if="card.delta !== undefined" class="mt-2 flex items-center gap-1">
+            <UIcon
+              :name="card.delta > 0 ? 'heroicons:arrow-trending-up' : card.delta < 0 ? 'heroicons:arrow-trending-down' : 'heroicons:minus'"
+              class="h-3 w-3"
+              :class="card.delta > 0 ? 'text-emerald-500' : card.delta < 0 ? 'text-red-500' : 'text-gray-600'"
+            />
+            <span
+              class="text-xs"
+              :class="card.delta > 0 ? 'text-emerald-500' : card.delta < 0 ? 'text-red-500' : 'text-gray-600'"
+            >
+              {{ card.delta > 0 ? '+' : '' }}{{ card.delta }}
+            </span>
+            <span class="text-xs text-gray-600">{{ card.deltaLabel }}</span>
+          </div>
+          <div v-else-if="card.sublabel" class="mt-2">
+            <span class="text-xs text-gray-600">{{ card.sublabel }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Domain-Approval-Progress-Section -->
+      <div class="rounded-lg border border-gray-800 bg-gray-900 p-6 mb-4">
+        <div class="flex items-center justify-between mb-3">
+          <h2 class="text-sm font-medium text-gray-400">Domain-Genehmigungs-Quote</h2>
+          <span class="text-xs text-gray-600">
+            {{ data.domains.approved }} / {{ data.domains.approved + data.domains.pending }}
+          </span>
+        </div>
+        <UProgress
+          :model-value="approvalRatio"
+          :max="100"
+          color="primary"
+          size="sm"
+        />
+        <p class="text-xs text-gray-500 mt-2">
+          {{ data.domains.pending }} Domain(s) warten auf Review.
+          <NuxtLink to="/domains" class="text-primary-400 hover:text-primary-300">
+            Zur Approval-Queue
+          </NuxtLink>
+        </p>
+      </div>
+
+      <!-- Lyra-Activity -->
+      <div class="rounded-lg border border-gray-800 bg-gray-900 p-6">
+        <div class="flex items-center gap-2 mb-2">
+          <UIcon name="heroicons:sparkles" class="h-4 w-4 text-purple-400" />
+          <h2 class="text-sm font-medium text-gray-400">Lyra-Bot-Aktivitaet (30d)</h2>
+        </div>
+        <p class="text-2xl font-bold text-white">{{ formatNumber(data.lyra.postsLast30d) }}</p>
+        <p class="text-xs text-gray-500 mt-1">Community-Posts in den letzten 30 Tagen</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { AdminStats } from "~/server/api/stats.get"
+
 definePageMeta({ middleware: "admin-auth" })
+
+const { data, error, status, refresh } = await useFetch<AdminStats>("/api/stats", {
+  // Stats kommen aggregiert vom Backend -- kein client-side caching, immer frisch.
+  key: "admin-stats",
+  default: () => null as unknown as AdminStats,
+})
+
+// Auto-refresh alle 60s.
+const lastUpdated = ref<Date | null>(data.value ? new Date() : null)
+const now = ref(new Date())
+
+let refreshInterval: ReturnType<typeof setInterval> | null = null
+let clockInterval: ReturnType<typeof setInterval> | null = null
+
+onMounted(() => {
+  refreshInterval = setInterval(async () => {
+    await refresh()
+    lastUpdated.value = new Date()
+  }, 60_000)
+  // Clock-tick fuer "vor X sek" label.
+  clockInterval = setInterval(() => { now.value = new Date() }, 5_000)
+})
+
+onUnmounted(() => {
+  if (refreshInterval) clearInterval(refreshInterval)
+  if (clockInterval) clearInterval(clockInterval)
+})
+
+watch(data, (val) => {
+  if (val) lastUpdated.value = new Date()
+})
+
+const lastUpdatedLabel = computed(() => {
+  if (!lastUpdated.value) return ""
+  const seconds = Math.floor((now.value.getTime() - lastUpdated.value.getTime()) / 1000)
+  if (seconds < 5) return "gerade eben"
+  if (seconds < 60) return `vor ${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  return `vor ${minutes}m`
+})
+
+interface StatCard {
+  label: string
+  value: number
+  icon: string
+  delta?: number
+  deltaLabel?: string
+  sublabel?: string
+  linkTo?: string
+}
+
+const cards = computed<StatCard[]>(() => {
+  if (!data.value) return []
+  const d = data.value
+  return [
+    {
+      label: "Total Users",
+      value: d.users.total,
+      icon: "heroicons:users",
+      delta: d.users.newThisWeek,
+      deltaLabel: "neue diese Woche",
+    },
+    {
+      label: "Total Posts",
+      value: d.posts.total,
+      icon: "heroicons:chat-bubble-left-right",
+      delta: d.posts.newThisWeek,
+      deltaLabel: "neue diese Woche",
+    },
+    {
+      label: "Domains pending",
+      value: d.domains.pending,
+      icon: "heroicons:clock",
+      sublabel: "warten auf Review",
+      linkTo: "/domains",
+    },
+    {
+      label: "Domains approved",
+      value: d.domains.approved,
+      icon: "heroicons:check-badge",
+      sublabel: "genehmigt",
+    },
+    {
+      label: "Feedback pending",
+      value: d.feedback.pending,
+      icon: "heroicons:inbox",
+      sublabel: `${d.feedback.total} insgesamt`,
+    },
+    {
+      label: "Lyra-Posts (30d)",
+      value: d.lyra.postsLast30d,
+      icon: "heroicons:sparkles",
+      sublabel: "Bot-Aktivitaet",
+    },
+  ]
+})
+
+const approvalRatio = computed(() => {
+  if (!data.value) return 0
+  const total = data.value.domains.approved + data.value.domains.pending
+  if (total === 0) return 0
+  return Math.round((data.value.domains.approved / total) * 100)
+})
+
+function formatNumber(n: number): string {
+  if (n === undefined || n === null) return "-"
+  return new Intl.NumberFormat("de-DE").format(n)
+}
 </script>
diff --git a/apps/admin/pages/users.vue b/apps/admin/pages/users.vue
index b26a22a..e7159bd 100644
--- a/apps/admin/pages/users.vue
+++ b/apps/admin/pages/users.vue
@@ -1,17 +1,440 @@
 <template>
   <div>
     <h1 class="text-xl font-semibold text-white mb-1">User-Management</h1>
-    <p class="text-sm text-gray-500 mb-8">
-      User-Liste, Plan-Status, letzte Aktivitaet. Anonymisiert -- keine echten Namen, nur Nicknames.
+    <p class="text-sm text-gray-500 mb-6">
+      User-Liste, Plan-Status, Ban / Soft-Delete. Anonym -- nur Nicknames, niemals E-Mail oder Klarname.
     </p>
-    <div class="rounded-lg border border-dashed border-gray-700 bg-gray-900 p-12 text-center">
-      <UIcon name="heroicons:users" class="h-8 w-8 text-gray-600 mx-auto mb-3" />
-      <p class="text-sm text-gray-500">Phase 2 -- Backend-API /api/admin/users pending</p>
-      <p class="text-xs text-gray-600 mt-2">DSGVO: Nur Nickname sichtbar, niemals E-Mail oder Name</p>
+
+    <!-- Filter-Bar -->
+    <div class="flex flex-wrap items-center gap-3 mb-4">
+      <UInput
+        v-model="searchInput"
+        placeholder="Suche Nickname / Username"
+        icon="heroicons:magnifying-glass"
+        size="sm"
+        class="w-72"
+        @keyup.enter="reload"
+      />
+      <USelect
+        v-model="planFilter"
+        :items="planOptions"
+        placeholder="Alle Pläne"
+        size="sm"
+        class="w-40"
+        @update:model-value="reload"
+      />
+      <UButton size="sm" color="neutral" variant="soft" @click="reload">
+        Aktualisieren
+      </UButton>
+      <span class="text-xs text-gray-500 ml-auto">
+        {{ rows.length }} User geladen
+      </span>
     </div>
+
+    <!-- Tabelle -->
+    <div class="rounded-lg border border-gray-800 bg-gray-900 overflow-hidden">
+      <UTable
+        :data="rows"
+        :columns="columns"
+        :loading="loading"
+        :empty-state="{ icon: 'heroicons:users', label: 'Keine User gefunden.' }"
+        class="w-full"
+      >
+        <template #nickname-cell="{ row }">
+          <div class="flex items-center gap-2">
+            <UAvatar
+              :src="row.original.avatar ?? undefined"
+              :alt="row.original.nickname ?? row.original.username ?? ''"
+              size="xs"
+            />
+            <div class="flex flex-col">
+              <span class="text-sm text-white">
+                {{ row.original.nickname ?? row.original.username ?? "—" }}
+              </span>
+              <span v-if="row.original.username && row.original.nickname" class="text-xs text-gray-500">
+                {{ row.original.username }}
+              </span>
+            </div>
+          </div>
+        </template>
+
+        <template #plan-cell="{ row }">
+          <UBadge
+            :color="planBadgeColor(row.original.plan)"
+            variant="subtle"
+            size="xs"
+            class="uppercase"
+          >
+            {{ row.original.plan }}
+          </UBadge>
+        </template>
+
+        <template #streak-cell="{ row }">
+          <span class="text-sm text-gray-300">{{ row.original.streak }}</span>
+        </template>
+
+        <template #status-cell="{ row }">
+          <UBadge
+            v-if="row.original.deletedAt"
+            color="neutral"
+            variant="subtle"
+            size="xs"
+          >
+            gelöscht
+          </UBadge>
+          <UBadge
+            v-else-if="row.original.banned"
+            color="error"
+            variant="subtle"
+            size="xs"
+          >
+            gebannt
+          </UBadge>
+          <UBadge v-else color="success" variant="subtle" size="xs">
+            aktiv
+          </UBadge>
+        </template>
+
+        <template #createdAt-cell="{ row }">
+          <span class="text-xs text-gray-400">
+            {{ formatDate(row.original.createdAt) }}
+          </span>
+        </template>
+
+        <template #actions-cell="{ row }">
+          <UDropdownMenu :items="rowActions(row.original)">
+            <UButton
+              icon="heroicons:ellipsis-horizontal"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+            />
+          </UDropdownMenu>
+        </template>
+      </UTable>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="nextCursor" class="mt-4 flex justify-center">
+      <UButton
+        size="sm"
+        color="neutral"
+        variant="soft"
+        :loading="loadingMore"
+        @click="loadMore"
+      >
+        Weitere laden
+      </UButton>
+    </div>
+
+    <!-- Plan-ändern Modal -->
+    <UModal v-model:open="planModalOpen" title="Plan ändern">
+      <template #body>
+        <p class="text-sm text-gray-400 mb-4">
+          Aktiver User: <strong>{{ selectedUser?.nickname ?? selectedUser?.username ?? selectedUser?.id }}</strong>
+        </p>
+        <USelect v-model="newPlan" :items="planChangeOptions" placeholder="Neuer Plan" />
+      </template>
+      <template #footer>
+        <div class="flex gap-2 justify-end w-full">
+          <UButton color="neutral" variant="ghost" @click="planModalOpen = false">
+            Abbrechen
+          </UButton>
+          <UButton color="primary" :loading="acting" @click="confirmPlanChange">
+            Speichern
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Ban-Confirm Modal -->
+    <UModal v-model:open="banModalOpen" :title="banDialogTitle">
+      <template #body>
+        <p class="text-sm text-gray-300">
+          User <strong>{{ selectedUser?.nickname ?? selectedUser?.username }}</strong>
+          {{ selectedUser?.banned ? "wieder freischalten" : "wirklich bannen" }}?
+        </p>
+        <UInput
+          v-if="!selectedUser?.banned"
+          v-model="banReason"
+          placeholder="Grund (optional)"
+          class="mt-3"
+        />
+      </template>
+      <template #footer>
+        <div class="flex gap-2 justify-end w-full">
+          <UButton color="neutral" variant="ghost" @click="banModalOpen = false">
+            Abbrechen
+          </UButton>
+          <UButton :color="selectedUser?.banned ? 'success' : 'error'" :loading="acting" @click="confirmBan">
+            {{ selectedUser?.banned ? "Freischalten" : "Bannen" }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Soft-Delete-Confirm Modal -->
+    <UModal v-model:open="deleteModalOpen" title="Soft-Delete (DSGVO)">
+      <template #body>
+        <p class="text-sm text-gray-300">
+          User <strong>{{ selectedUser?.nickname ?? selectedUser?.username }}</strong> wird soft-gelöscht:
+        </p>
+        <ul class="text-xs text-gray-500 mt-2 space-y-1 list-disc pl-5">
+          <li>Nickname &rarr; null, Avatar &rarr; null, Demographie &rarr; null</li>
+          <li>Username &rarr; "deleted-{shortid}"</li>
+          <li>deletedAt &rarr; jetzt</li>
+          <li>Auth-Account bleibt zunächst (separate Operation)</li>
+        </ul>
+        <p class="text-xs text-error-400 mt-3">Diese Aktion ist nicht rückgängig zu machen.</p>
+      </template>
+      <template #footer>
+        <div class="flex gap-2 justify-end w-full">
+          <UButton color="neutral" variant="ghost" @click="deleteModalOpen = false">
+            Abbrechen
+          </UButton>
+          <UButton color="error" :loading="acting" @click="confirmDelete">
+            Soft-Delete bestätigen
+          </UButton>
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
 
 <script setup lang="ts">
 definePageMeta({ middleware: "admin-auth" })
+
+type AdminUserRow = {
+  id: string
+  nickname: string | null
+  username: string | null
+  avatar: string | null
+  plan: string
+  streak: number
+  banned: boolean
+  bannedAt: string | null
+  deletedAt: string | null
+  createdAt: string
+  lyraVoiceId: string | null
+}
+
+type ListResponse = {
+  items: AdminUserRow[]
+  nextCursor: string | null
+}
+
+// ─── State ──────────────────────────────────────────────────────────────────
+
+const rows = ref<AdminUserRow[]>([])
+const nextCursor = ref<string | null>(null)
+const loading = ref(false)
+const loadingMore = ref(false)
+const acting = ref(false)
+
+const searchInput = ref("")
+const planFilter = ref<string | undefined>(undefined)
+
+const planOptions = [
+  { label: "Alle Pläne", value: "" },
+  { label: "Free", value: "free" },
+  { label: "Pro", value: "pro" },
+  { label: "Legend", value: "legend" },
+]
+
+const planChangeOptions = [
+  { label: "Free", value: "free" },
+  { label: "Pro", value: "pro" },
+  { label: "Legend", value: "legend" },
+]
+
+// Modals
+const planModalOpen = ref(false)
+const banModalOpen = ref(false)
+const deleteModalOpen = ref(false)
+const selectedUser = ref<AdminUserRow | null>(null)
+const newPlan = ref<string>("free")
+const banReason = ref("")
+const banDialogTitle = computed(() =>
+  selectedUser.value?.banned ? "User freischalten" : "User bannen",
+)
+
+// ─── Columns ────────────────────────────────────────────────────────────────
+
+const columns = [
+  { accessorKey: "nickname", header: "User", id: "nickname" },
+  { accessorKey: "plan", header: "Plan", id: "plan" },
+  { accessorKey: "streak", header: "Streak", id: "streak" },
+  { accessorKey: "status", header: "Status", id: "status" },
+  { accessorKey: "createdAt", header: "Beigetreten", id: "createdAt" },
+  { accessorKey: "actions", header: "", id: "actions" },
+]
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function planBadgeColor(plan: string): "primary" | "success" | "warning" | "neutral" {
+  if (plan === "legend") return "warning"
+  if (plan === "pro") return "primary"
+  if (plan === "free") return "neutral"
+  return "neutral"
+}
+
+function formatDate(d: string): string {
+  if (!d) return "—"
+  try {
+    return new Date(d).toLocaleDateString("de-DE", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    })
+  } catch {
+    return "—"
+  }
+}
+
+function rowActions(user: AdminUserRow) {
+  const items: Array<Array<{ label: string; icon: string; onSelect: () => void }>> = [
+    [
+      {
+        label: "Plan ändern",
+        icon: "heroicons:star",
+        onSelect: () => openPlanModal(user),
+      },
+      {
+        label: user.banned ? "Bann aufheben" : "Bannen",
+        icon: user.banned ? "heroicons:lock-open" : "heroicons:lock-closed",
+        onSelect: () => openBanModal(user),
+      },
+    ],
+    [
+      {
+        label: "Soft-Delete",
+        icon: "heroicons:trash",
+        onSelect: () => openDeleteModal(user),
+      },
+    ],
+  ]
+  return items
+}
+
+// ─── Data ───────────────────────────────────────────────────────────────────
+
+async function fetchPage(opts: { append: boolean }): Promise<void> {
+  const params: Record<string, string> = {}
+  if (searchInput.value.trim()) params.q = searchInput.value.trim()
+  if (planFilter.value && planFilter.value !== "") params.plan = planFilter.value
+  if (opts.append && nextCursor.value) params.cursor = nextCursor.value
+
+  const res = await $fetch<ListResponse>("/api/users", { params })
+  if (opts.append) {
+    rows.value = [...rows.value, ...res.items]
+  } else {
+    rows.value = res.items
+  }
+  nextCursor.value = res.nextCursor
+}
+
+async function reload(): Promise<void> {
+  loading.value = true
+  try {
+    nextCursor.value = null
+    await fetchPage({ append: false })
+  } catch (err) {
+    console.error("[users] load failed:", err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadMore(): Promise<void> {
+  if (!nextCursor.value || loadingMore.value) return
+  loadingMore.value = true
+  try {
+    await fetchPage({ append: true })
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+// ─── Actions ────────────────────────────────────────────────────────────────
+
+function openPlanModal(user: AdminUserRow): void {
+  selectedUser.value = user
+  newPlan.value = user.plan
+  planModalOpen.value = true
+}
+
+function openBanModal(user: AdminUserRow): void {
+  selectedUser.value = user
+  banReason.value = ""
+  banModalOpen.value = true
+}
+
+function openDeleteModal(user: AdminUserRow): void {
+  selectedUser.value = user
+  deleteModalOpen.value = true
+}
+
+async function confirmPlanChange(): Promise<void> {
+  if (!selectedUser.value) return
+  acting.value = true
+  try {
+    const updated = await $fetch<AdminUserRow>(`/api/users/${selectedUser.value.id}`, {
+      method: "PATCH",
+      body: { plan: newPlan.value },
+    })
+    mergeRow(updated)
+    planModalOpen.value = false
+  } catch (err) {
+    console.error("[users] plan-change failed:", err)
+  } finally {
+    acting.value = false
+  }
+}
+
+async function confirmBan(): Promise<void> {
+  if (!selectedUser.value) return
+  acting.value = true
+  try {
+    const newBanned = !selectedUser.value.banned
+    const updated = await $fetch<AdminUserRow>(`/api/users/${selectedUser.value.id}`, {
+      method: "PATCH",
+      body: {
+        banned: newBanned,
+        bannedReason: newBanned && banReason.value ? banReason.value : null,
+      },
+    })
+    mergeRow(updated)
+    banModalOpen.value = false
+  } catch (err) {
+    console.error("[users] ban-toggle failed:", err)
+  } finally {
+    acting.value = false
+  }
+}
+
+async function confirmDelete(): Promise<void> {
+  if (!selectedUser.value) return
+  acting.value = true
+  try {
+    await $fetch(`/api/users/${selectedUser.value.id}`, { method: "DELETE" })
+    // Soft-deleted user fliegt aus der Liste (default: includeDeleted=false)
+    rows.value = rows.value.filter((r) => r.id !== selectedUser.value!.id)
+    deleteModalOpen.value = false
+  } catch (err) {
+    console.error("[users] soft-delete failed:", err)
+  } finally {
+    acting.value = false
+  }
+}
+
+function mergeRow(updated: AdminUserRow): void {
+  const idx = rows.value.findIndex((r) => r.id === updated.id)
+  if (idx >= 0) rows.value[idx] = updated
+}
+
+// ─── Init ───────────────────────────────────────────────────────────────────
+
+onMounted(() => {
+  reload()
+})
 </script>
diff --git a/apps/admin/server/api/domain-submissions.get.ts b/apps/admin/server/api/domain-submissions.get.ts
new file mode 100644
index 0000000..67e7403
--- /dev/null
+++ b/apps/admin/server/api/domain-submissions.get.ts
@@ -0,0 +1,34 @@
+// apps/admin/server/api/domain-submissions.get.ts
+//
+// Server-side proxy: holt Pending-Domain-Submissions vom Backend.
+// Admin-Secret bleibt server-only (NIE im Client-Bundle landen lassen).
+//
+// Auth-Modell: client ruft /api/domain-submissions auf (Nuxt-server-route),
+// hier wird x-admin-secret aus runtimeConfig.adminSecret an Backend weitergereicht.
+
+export default defineEventHandler(async (_event) => {
+  const config = useRuntimeConfig();
+  const apiBase = config.public.apiBase;
+  const adminSecret = config.adminSecret;
+
+  if (!adminSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "ADMIN_SECRET nicht konfiguriert (Infisical-Var fehlt)",
+    });
+  }
+
+  try {
+    const data = await $fetch(`${apiBase}/api/admin/domain-submissions`, {
+      method: "GET",
+      headers: { "x-admin-secret": adminSecret },
+    });
+    return data;
+  } catch (err: any) {
+    throw createError({
+      statusCode: err?.statusCode ?? 502,
+      statusMessage:
+        err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+    });
+  }
+});
diff --git a/apps/admin/server/api/domain-submissions/[id]/approve.post.ts b/apps/admin/server/api/domain-submissions/[id]/approve.post.ts
new file mode 100644
index 0000000..de90471
--- /dev/null
+++ b/apps/admin/server/api/domain-submissions/[id]/approve.post.ts
@@ -0,0 +1,41 @@
+// apps/admin/server/api/domain-submissions/[id]/approve.post.ts
+//
+// Proxy: leitet Approve-Request inkl. optionaler note ans Backend.
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const apiBase = config.public.apiBase;
+  const adminSecret = config.adminSecret;
+
+  if (!adminSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "ADMIN_SECRET nicht konfiguriert",
+    });
+  }
+
+  const id = getRouterParam(event, "id");
+  if (!id) {
+    throw createError({ statusCode: 400, statusMessage: "ID fehlt" });
+  }
+
+  const body = await readBody(event).catch(() => ({}));
+
+  try {
+    const data = await $fetch(
+      `${apiBase}/api/admin/domain-submissions/${encodeURIComponent(id)}/approve`,
+      {
+        method: "POST",
+        headers: { "x-admin-secret": adminSecret },
+        body: body ?? {},
+      },
+    );
+    return data;
+  } catch (err: any) {
+    throw createError({
+      statusCode: err?.statusCode ?? 502,
+      statusMessage:
+        err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+    });
+  }
+});
diff --git a/apps/admin/server/api/domain-submissions/[id]/reject.post.ts b/apps/admin/server/api/domain-submissions/[id]/reject.post.ts
new file mode 100644
index 0000000..c68ac53
--- /dev/null
+++ b/apps/admin/server/api/domain-submissions/[id]/reject.post.ts
@@ -0,0 +1,41 @@
+// apps/admin/server/api/domain-submissions/[id]/reject.post.ts
+//
+// Proxy: leitet Reject-Request inkl. optionaler note ans Backend.
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const apiBase = config.public.apiBase;
+  const adminSecret = config.adminSecret;
+
+  if (!adminSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "ADMIN_SECRET nicht konfiguriert",
+    });
+  }
+
+  const id = getRouterParam(event, "id");
+  if (!id) {
+    throw createError({ statusCode: 400, statusMessage: "ID fehlt" });
+  }
+
+  const body = await readBody(event).catch(() => ({}));
+
+  try {
+    const data = await $fetch(
+      `${apiBase}/api/admin/domain-submissions/${encodeURIComponent(id)}/reject`,
+      {
+        method: "POST",
+        headers: { "x-admin-secret": adminSecret },
+        body: body ?? {},
+      },
+    );
+    return data;
+  } catch (err: any) {
+    throw createError({
+      statusCode: err?.statusCode ?? 502,
+      statusMessage:
+        err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+    });
+  }
+});
diff --git a/apps/admin/server/api/moderation/[id]/ban-user.post.ts b/apps/admin/server/api/moderation/[id]/ban-user.post.ts
new file mode 100644
index 0000000..21720ee
--- /dev/null
+++ b/apps/admin/server/api/moderation/[id]/ban-user.post.ts
@@ -0,0 +1,39 @@
+// apps/admin/server/api/moderation/[id]/ban-user.post.ts
+//
+// Proxy: leitet Ban-User-Request ans Backend. Profile.banned wird gesetzt
+// (gleicher Patch-Pattern wie /api/admin/users/[id]).
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const apiBase = config.public.apiBase;
+  const adminSecret = config.adminSecret;
+
+  if (!adminSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "ADMIN_SECRET nicht konfiguriert",
+    });
+  }
+
+  const id = getRouterParam(event, "id");
+  if (!id) throw createError({ statusCode: 400, statusMessage: "ID fehlt" });
+
+  const body = await readBody(event).catch(() => ({}));
+
+  try {
+    return await $fetch(
+      `${apiBase}/api/admin/moderation/${encodeURIComponent(id)}/ban-user`,
+      {
+        method: "POST",
+        headers: { "x-admin-secret": adminSecret },
+        body: body ?? {},
+      },
+    );
+  } catch (err: any) {
+    throw createError({
+      statusCode: err?.statusCode ?? 502,
+      statusMessage:
+        err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+    });
+  }
+});
diff --git a/apps/admin/server/api/moderation/[id]/delete.post.ts b/apps/admin/server/api/moderation/[id]/delete.post.ts
new file mode 100644
index 0000000..995de37
--- /dev/null
+++ b/apps/admin/server/api/moderation/[id]/delete.post.ts
@@ -0,0 +1,39 @@
+// apps/admin/server/api/moderation/[id]/delete.post.ts
+//
+// Proxy: leitet Soft-Delete-Request ans Backend (content="", isDeleted=true).
+// Original-Content + reporter-info bleiben in moderation_actions (audit-log).
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const apiBase = config.public.apiBase;
+  const adminSecret = config.adminSecret;
+
+  if (!adminSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "ADMIN_SECRET nicht konfiguriert",
+    });
+  }
+
+  const id = getRouterParam(event, "id");
+  if (!id) throw createError({ statusCode: 400, statusMessage: "ID fehlt" });
+
+  const body = await readBody(event).catch(() => ({}));
+
+  try {
+    return await $fetch(
+      `${apiBase}/api/admin/moderation/${encodeURIComponent(id)}/delete`,
+      {
+        method: "POST",
+        headers: { "x-admin-secret": adminSecret },
+        body: body ?? {},
+      },
+    );
+  } catch (err: any) {
+    throw createError({
+      statusCode: err?.statusCode ?? 502,
+      statusMessage:
+        err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+    });
+  }
+});
diff --git a/apps/admin/server/api/moderation/[id]/dismiss.post.ts b/apps/admin/server/api/moderation/[id]/dismiss.post.ts
new file mode 100644
index 0000000..4466e92
--- /dev/null
+++ b/apps/admin/server/api/moderation/[id]/dismiss.post.ts
@@ -0,0 +1,38 @@
+// apps/admin/server/api/moderation/[id]/dismiss.post.ts
+//
+// Proxy: leitet Dismiss-Request (flag clear) ans Backend.
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const apiBase = config.public.apiBase;
+  const adminSecret = config.adminSecret;
+
+  if (!adminSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "ADMIN_SECRET nicht konfiguriert",
+    });
+  }
+
+  const id = getRouterParam(event, "id");
+  if (!id) throw createError({ statusCode: 400, statusMessage: "ID fehlt" });
+
+  const body = await readBody(event).catch(() => ({}));
+
+  try {
+    return await $fetch(
+      `${apiBase}/api/admin/moderation/${encodeURIComponent(id)}/dismiss`,
+      {
+        method: "POST",
+        headers: { "x-admin-secret": adminSecret },
+        body: body ?? {},
+      },
+    );
+  } catch (err: any) {
+    throw createError({
+      statusCode: err?.statusCode ?? 502,
+      statusMessage:
+        err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+    });
+  }
+});
diff --git a/apps/admin/server/api/moderation/queue.get.ts b/apps/admin/server/api/moderation/queue.get.ts
new file mode 100644
index 0000000..d7d6f15
--- /dev/null
+++ b/apps/admin/server/api/moderation/queue.get.ts
@@ -0,0 +1,62 @@
+// apps/admin/server/api/moderation/queue.get.ts
+//
+// Server-side proxy: holt die Moderation-Queue (gemeldete Posts + Comments)
+// vom Backend. Admin-Secret bleibt server-only.
+//
+// Query-Forwarding: cursor + limit werden an Backend durchgereicht.
+
+export interface ModerationItem {
+  id: string;
+  type: "post" | "comment";
+  content: string;
+  postId: string | null;
+  userId: string;
+  reportedAt: string | null;
+  createdAt: string;
+  isDeleted: boolean;
+  author: {
+    id: string;
+    nickname: string | null;
+    avatar: string | null;
+    plan: string;
+  } | null;
+}
+
+export interface ModerationQueueResponse {
+  items: ModerationItem[];
+  nextCursor: string | null;
+}
+
+export default defineEventHandler(
+  async (event): Promise<ModerationQueueResponse> => {
+    const config = useRuntimeConfig();
+    const apiBase = config.public.apiBase;
+    const adminSecret = config.adminSecret;
+
+    if (!adminSecret) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: "ADMIN_SECRET nicht konfiguriert (Infisical-Var fehlt)",
+      });
+    }
+
+    const query = getQuery(event);
+
+    try {
+      return await $fetch<ModerationQueueResponse>(
+        `${apiBase}/api/admin/moderation/queue`,
+        {
+          method: "GET",
+          headers: { "x-admin-secret": adminSecret },
+          query,
+        },
+      );
+    } catch (err: any) {
+      throw createError({
+        statusCode: err?.statusCode ?? 502,
+        statusMessage:
+          err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+      });
+    }
+  },
+);
diff --git a/apps/admin/server/api/stats.get.ts b/apps/admin/server/api/stats.get.ts
new file mode 100644
index 0000000..98537fc
--- /dev/null
+++ b/apps/admin/server/api/stats.get.ts
@@ -0,0 +1,42 @@
+// apps/admin/server/api/stats.get.ts
+//
+// Server-side proxy: holt aggregierte Admin-Stats vom Backend.
+// Admin-Secret bleibt server-only (NIE im Client-Bundle landen lassen).
+//
+// Auth-Modell: client ruft /api/stats auf (Nuxt-server-route),
+// hier wird x-admin-secret aus runtimeConfig.adminSecret an Backend weitergereicht.
+
+export interface AdminStats {
+  users: { total: number; newThisWeek: number };
+  posts: { total: number; newThisWeek: number };
+  domains: { pending: number; approved: number };
+  feedback: { pending: number; total: number };
+  lyra: { postsLast30d: number };
+}
+
+export default defineEventHandler(async (_event): Promise<AdminStats> => {
+  const config = useRuntimeConfig();
+  const apiBase = config.public.apiBase;
+  const adminSecret = config.adminSecret;
+
+  if (!adminSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "ADMIN_SECRET nicht konfiguriert (Infisical-Var fehlt)",
+    });
+  }
+
+  try {
+    const data = await $fetch<AdminStats>(`${apiBase}/api/admin/stats`, {
+      method: "GET",
+      headers: { "x-admin-secret": adminSecret },
+    });
+    return data;
+  } catch (err: any) {
+    throw createError({
+      statusCode: err?.statusCode ?? 502,
+      statusMessage:
+        err?.statusMessage ?? err?.message ?? "Backend-Request fehlgeschlagen",
+    });
+  }
+});
diff --git a/apps/admin/server/api/users.get.ts b/apps/admin/server/api/users.get.ts
new file mode 100644
index 0000000..a0717ad
--- /dev/null
+++ b/apps/admin/server/api/users.get.ts
@@ -0,0 +1,27 @@
+// Admin-App proxy: forwards to backend /api/admin/users mit x-admin-secret
+// (Pattern wie andere admin-pages — admin-secret bleibt server-side, nie im Browser).
+//
+// Query-Params werden 1:1 weitergereicht. Backend macht die Validierung.
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const query = getQuery(event);
+
+  const params = new URLSearchParams();
+  for (const [k, v] of Object.entries(query)) {
+    if (v !== undefined && v !== null && v !== "") {
+      params.set(k, String(v));
+    }
+  }
+
+  const url = `${config.public.apiBase}/api/admin/users${
+    params.toString() ? `?${params.toString()}` : ""
+  }`;
+
+  return $fetch(url, {
+    method: "GET",
+    headers: {
+      "x-admin-secret": config.adminSecret as string,
+    },
+  });
+});
diff --git a/apps/admin/server/api/users/[id].delete.ts b/apps/admin/server/api/users/[id].delete.ts
new file mode 100644
index 0000000..97f4a9e
--- /dev/null
+++ b/apps/admin/server/api/users/[id].delete.ts
@@ -0,0 +1,14 @@
+// Admin-App proxy: DELETE /api/admin/users/[id] — soft-delete (DSGVO).
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const id = getRouterParam(event, "id");
+  if (!id) throw createError({ statusCode: 400, message: "User-ID fehlt" });
+
+  return $fetch(`${config.public.apiBase}/api/admin/users/${id}`, {
+    method: "DELETE",
+    headers: {
+      "x-admin-secret": config.adminSecret as string,
+    },
+  });
+});
diff --git a/apps/admin/server/api/users/[id].patch.ts b/apps/admin/server/api/users/[id].patch.ts
new file mode 100644
index 0000000..0ecdfb3
--- /dev/null
+++ b/apps/admin/server/api/users/[id].patch.ts
@@ -0,0 +1,19 @@
+// Admin-App proxy: PATCH /api/admin/users/[id]
+// Forwards body 1:1 ans Backend mit x-admin-secret.
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const id = getRouterParam(event, "id");
+  if (!id) throw createError({ statusCode: 400, message: "User-ID fehlt" });
+
+  const body = await readBody(event).catch(() => ({}));
+
+  return $fetch(`${config.public.apiBase}/api/admin/users/${id}`, {
+    method: "PATCH",
+    headers: {
+      "x-admin-secret": config.adminSecret as string,
+      "content-type": "application/json",
+    },
+    body,
+  });
+});