Iterate admin pages with smarter workflows

frontend/src/views/admin/AdminRiskView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { Search, ShieldAlert } from '@lucide/vue'
 
 import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
 import Button from '../../components/ui/Button.vue'
@@ -12,17 +13,18 @@ const adminMessage = ref('')
 const adminError = ref('')
 const riskFilter = ref('')
 const auditFilter = ref('')
+const severityFilter = ref<'all' | 'high' | 'medium' | 'low'>('all')
 
 const riskFlags = computed(() => store.admin.riskFlags)
 const auditEntries = computed(() => store.admin.auditEntries)
 const filteredRiskFlags = computed(() => {
   const query = riskFilter.value.trim().toLowerCase()
-  if (!query) return riskFlags.value
   return riskFlags.value.filter((flag) =>
-    [flag.source, flag.type, flag.summary, flag.twitchUserId ?? '', flag.createdFromIp]
+    (severityFilter.value === 'all' || flag.severity.toLowerCase() === severityFilter.value) &&
+    (!query || [flag.source, flag.type, flag.summary, flag.twitchUserId ?? '', flag.createdFromIp]
       .join(' ')
       .toLowerCase()
-      .includes(query),
+      .includes(query)),
   )
 })
 const filteredAuditEntries = computed(() => {
@@ -35,6 +37,17 @@ const filteredAuditEntries = computed(() => {
       .includes(query),
   )
 })
+const riskStats = computed(() => [
+  { label: 'Offen', value: riskFlags.value.length },
+  { label: 'High', value: riskFlags.value.filter((flag) => flag.severity.toLowerCase() === 'high').length },
+  { label: 'User betroffen', value: new Set(riskFlags.value.map((flag) => flag.twitchUserId).filter(Boolean)).size },
+])
+const severityFilters = computed(() => [
+  { key: 'all' as const, label: 'Alle', count: riskFlags.value.length },
+  { key: 'high' as const, label: 'High', count: riskFlags.value.filter((flag) => flag.severity.toLowerCase() === 'high').length },
+  { key: 'medium' as const, label: 'Medium', count: riskFlags.value.filter((flag) => flag.severity.toLowerCase() === 'medium').length },
+  { key: 'low' as const, label: 'Low', count: riskFlags.value.filter((flag) => flag.severity.toLowerCase() === 'low').length },
+])
 
 async function resolveRiskFlag(riskFlagId: number, status = 'resolved') {
   riskSaving.value = riskFlagId
@@ -58,6 +71,7 @@ async function resolveRiskFlag(riskFlagId: number, status = 'resolved') {
       eyebrow="Risiko & Audit"
       title="Auffaellige Muster und Admin-Aktionen verfolgen"
       description="Dieser Bereich trennt operative Risiko-Sichtung von der Nachvollziehbarkeit. So findest du sowohl offene Flags als auch bereits ausgefuehrte Eingriffe deutlich schneller."
+      :icon="ShieldAlert"
     />
 
     <div class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
@@ -71,6 +85,12 @@ async function resolveRiskFlag(riskFlagId: number, status = 'resolved') {
             {{ filteredRiskFlags.length }} / {{ riskFlags.length }} offen
           </span>
         </div>
+        <div class="mt-5 grid gap-2 sm:grid-cols-3">
+          <div v-for="stat in riskStats" :key="stat.label" class="rounded-2xl border border-violet-50 bg-violet-50/50 px-3 py-2">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">{{ stat.label }}</p>
+            <strong class="mt-1 block text-lg text-violet-800">{{ stat.value }}</strong>
+          </div>
+        </div>
 
         <p v-if="adminMessage" class="mt-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
           {{ adminMessage }}
@@ -80,16 +100,31 @@ async function resolveRiskFlag(riskFlagId: number, status = 'resolved') {
         </p>
 
         <div class="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
-          <input
-            v-model="riskFilter"
-            type="text"
-            class="rounded-2xl border border-violet-200 px-4 py-3"
-            placeholder="Risikohinweise nach Typ, Nutzer oder IP filtern"
-          />
+          <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="riskFilter"
+              type="text"
+              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="Typ, Nutzer oder IP filtern"
+            />
+          </label>
           <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
             Tipp: Filtere erst auf den Problemtyp und markiere dann nur den geprueften Fall.
           </div>
         </div>
+        <div class="mt-3 flex flex-wrap gap-2">
+          <button
+            v-for="filter in severityFilters"
+            :key="filter.key"
+            type="button"
+            class="rounded-full border px-3 py-1.5 text-xs font-semibold transition"
+            :class="severityFilter === filter.key ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-600 hover:bg-violet-50'"
+            @click="severityFilter = filter.key"
+          >
+            {{ filter.label }} · {{ filter.count }}
+          </button>
+        </div>
 
         <div class="mt-6 space-y-4">
           <div