AzuTear
107 lines
4.1 KiB
Vue
107 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { RefreshCw, Search } from '@lucide/vue'
|
|
|
|
import Button from '../ui/Button.vue'
|
|
|
|
defineProps<{
|
|
riskFilter: string
|
|
severityFilter: 'all' | 'high' | 'medium' | 'low'
|
|
filteredCount: number
|
|
totalOpen: number
|
|
loadedLabel: string
|
|
loading: boolean
|
|
message: string
|
|
error: string
|
|
stats: Array<{ label: string; value: number; tone: string }>
|
|
severityFilters: Array<{ key: 'all' | 'high' | 'medium' | 'low'; label: string; count: number }>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:riskFilter': [value: string]
|
|
'update:severityFilter': [value: 'all' | 'high' | 'medium' | 'low']
|
|
refresh: []
|
|
}>()
|
|
|
|
function statToneClass(tone: string) {
|
|
if (tone === 'danger') return 'border-rose-100 bg-rose-50 text-rose-800'
|
|
if (tone === 'warning') return 'border-amber-100 bg-amber-50 text-amber-800'
|
|
if (tone === 'ok') return 'border-emerald-100 bg-emerald-50 text-emerald-800'
|
|
return 'border-violet-100 bg-violet-50 text-violet-800'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="border-b border-violet-100 bg-white/70 p-6">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-900">Risiko-Zentrale</h2>
|
|
<p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
|
|
Offene Hinweise priorisieren, Entscheidungsnotizen setzen und geprüfte Fälle nachvollziehbar protokollieren.
|
|
</p>
|
|
<p class="mt-1 text-xs font-semibold text-slate-400">
|
|
Geladen: {{ loadedLabel }} · Quelle: /api/admin/risk-flags
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<span class="rounded-2xl border border-violet-100 bg-violet-50 px-4 py-2 text-sm font-semibold text-violet-800">
|
|
{{ filteredCount }} / {{ totalOpen }} sichtbar
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="gap-2 rounded-2xl border border-violet-200 bg-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100"
|
|
:disabled="loading"
|
|
@click="emit('refresh')"
|
|
>
|
|
<RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
|
|
{{ loading ? 'Lädt ...' : 'Aktualisieren' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
|
<div
|
|
v-for="stat in stats"
|
|
:key="stat.label"
|
|
class="rounded-2xl border px-4 py-3"
|
|
:class="statToneClass(stat.tone)"
|
|
>
|
|
<p class="text-xs font-semibold text-slate-500">{{ stat.label }}</p>
|
|
<strong class="mt-1 block text-2xl">{{ stat.value }}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
|
|
<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
|
|
:value="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, User, IP, Summary oder Metadaten filtern"
|
|
@input="emit('update:riskFilter', ($event.target as HTMLInputElement).value)"
|
|
/>
|
|
</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<button
|
|
v-for="filter in severityFilters"
|
|
:key="filter.key"
|
|
type="button"
|
|
class="rounded-full border px-3 py-2 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="emit('update:severityFilter', filter.key)"
|
|
>
|
|
{{ filter.label }} · {{ filter.count }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-if="message" class="mt-5 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
|
|
{{ message }}
|
|
</p>
|
|
<p v-if="error" class="mt-5 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
|
{{ error }}
|
|
</p>
|
|
</section>
|
|
</template>
|