Expand admin navigation and pages

2026-06-18 00:21:40 +02:00
parent 178f014a4a
commit 0fa763667d
9 changed files with 1097 additions and 35 deletions
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Search, ShieldAlert, UserCog } from '@lucide/vue'
+
+import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
+import Card from '../../components/ui/Card.vue'
+import { useAwardsStore } from '../../stores/awards'
+
+const store = useAwardsStore()
+const query = ref('')
+const auditEntries = computed(() => store.admin.auditEntries)
+const riskFlags = computed(() => store.admin.riskFlags)
+const filteredAuditEntries = computed(() => {
+  const search = query.value.trim().toLowerCase()
+  if (!search) return auditEntries.value
+  return auditEntries.value.filter((entry) =>
+    [entry.adminTwitchUserId, entry.actionType, entry.entityType, entry.entityId, entry.summary]
+      .join(' ')
+      .toLowerCase()
+      .includes(search),
+  )
+})
+const filteredRiskUsers = computed(() => {
+  const search = query.value.trim().toLowerCase()
+  const users = riskFlags.value.map((flag) => ({
+    id: flag.id,
+    twitchUserId: flag.twitchUserId ?? 'unbekannt',
+    source: flag.source,
+    type: flag.type,
+    severity: flag.severity,
+    ip: flag.createdFromIp,
+    createdAt: flag.createdAt,
+  }))
+  if (!search) return users
+  return users.filter((user) => [user.twitchUserId, user.source, user.type, user.ip].join(' ').toLowerCase().includes(search))
+})
+const adminCounts = computed(() => {
+  const counts = new Map<string, number>()
+  for (const entry of auditEntries.value) counts.set(entry.adminTwitchUserId, (counts.get(entry.adminTwitchUserId) ?? 0) + 1)
+  return [...counts.entries()].map(([admin, count]) => ({ admin, count }))
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <AdminPageHeader
+      eyebrow="User & Logs"
+      title="User-Spuren und Admin-Aktionen"
+      description="Eine kompakte Kontrollansicht fuer Audit-Eintraege, auffaellige User und Admin-Aktivitaet. Fuer Detailentscheidungen bleibt Risiko & Audit der Hauptbereich."
+      :icon="UserCog"
+    />
+
+    <Card class="p-5">
+      <label class="relative block">
+        <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
+        <input v-model="query" class="h-12 w-full rounded-2xl border border-violet-200 bg-white pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Nach Admin, Aktion, User, IP oder Objekt suchen" />
+      </label>
+    </Card>
+
+    <section class="grid gap-6 xl:grid-cols-[0.86fr_1.14fr]">
+      <Card class="p-6">
+        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Admins</p>
+        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Aktivitaet</h2>
+        <div class="mt-5 space-y-3">
+          <div v-for="item in adminCounts" :key="item.admin" class="flex items-center justify-between rounded-2xl border border-violet-100 bg-white/90 px-4 py-3">
+            <span class="font-semibold text-slate-900">{{ item.admin }}</span>
+            <span class="rounded-full bg-violet-50 px-3 py-1 text-sm font-semibold text-violet-700">{{ item.count }}</span>
+          </div>
+          <p v-if="adminCounts.length === 0" class="rounded-2xl border border-dashed border-violet-100 px-4 py-8 text-center text-sm text-slate-500">
+            Noch keine Admin-Aktivitaet vorhanden.
+          </p>
+        </div>
+      </Card>
+
+      <Card class="overflow-hidden">
+        <div class="border-b border-violet-100 p-5">
+          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Audit Log</p>
+          <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Letzte Aktionen</h2>
+        </div>
+        <div class="max-h-[520px] divide-y divide-violet-50 overflow-y-auto">
+          <div v-for="entry in filteredAuditEntries" :key="entry.id" class="px-5 py-4">
+            <div class="flex flex-wrap items-start justify-between gap-3">
+              <div>
+                <p class="font-semibold text-slate-900">{{ entry.summary }}</p>
+                <p class="mt-1 text-sm text-slate-500">{{ entry.adminTwitchUserId }} · {{ entry.actionType }} · {{ entry.entityType }} {{ entry.entityId }}</p>
+              </div>
+              <span class="text-sm text-slate-500">{{ new Date(entry.createdAt).toLocaleString('de-DE') }}</span>
+            </div>
+          </div>
+          <p v-if="filteredAuditEntries.length === 0" class="px-5 py-10 text-center text-sm text-slate-500">Keine Log-Eintraege gefunden.</p>
+        </div>
+      </Card>
+    </section>
+
+    <Card class="overflow-hidden">
+      <div class="border-b border-violet-100 p-5">
+        <div class="flex items-center gap-3">
+          <div class="grid h-10 w-10 place-items-center rounded-2xl bg-rose-50 text-rose-600">
+            <ShieldAlert class="h-5 w-5" />
+          </div>
+          <div>
+            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Auffaellige User</p>
+            <h2 class="font-[Cormorant_Garamond] text-3xl text-violet-800">Aus Risk-Flags abgeleitet</h2>
+          </div>
+        </div>
+      </div>
+      <div class="divide-y divide-violet-50">
+        <div v-for="user in filteredRiskUsers" :key="user.id" class="grid gap-3 px-5 py-4 lg:grid-cols-[minmax(0,1fr)_180px_140px] lg:items-center">
+          <div>
+            <p class="font-semibold text-slate-900">{{ user.twitchUserId }}</p>
+            <p class="mt-1 text-sm text-slate-500">{{ user.type }} · {{ user.ip }}</p>
+          </div>
+          <span class="text-sm text-slate-500">{{ new Date(user.createdAt).toLocaleString('de-DE') }}</span>
+          <span class="rounded-full border border-rose-100 bg-rose-50 px-3 py-1 text-center text-xs font-semibold uppercase tracking-[0.14em] text-rose-700">{{ user.severity }}</span>
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>