AzuTear
109 lines
3.9 KiB
Vue
109 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import Column from 'primevue/column'
|
|
import DataTable from 'primevue/datatable'
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
|
|
import Card from '../../components/ui/Card.vue'
|
|
import { useAwardsStore } from '../../stores/awards'
|
|
|
|
const store = useAwardsStore()
|
|
|
|
const metrics = computed(() => store.admin.metrics)
|
|
const activities = computed(() => store.admin.activities)
|
|
const topCategories = computed(() => store.admin.topCategories)
|
|
const quickActions = computed(() => [
|
|
{
|
|
label: 'Offene Reviews',
|
|
value: store.adminSeasonDetail.pendingNominations.length,
|
|
to: '/admin/reviews',
|
|
hint: 'Freitext-Nominierungen bearbeiten',
|
|
},
|
|
{
|
|
label: 'Offene Risk Flags',
|
|
value: store.admin.riskFlags.length,
|
|
to: '/admin/risk',
|
|
hint: 'auffaellige Muster pruefen',
|
|
},
|
|
{
|
|
label: 'Kategorien pflegen',
|
|
value: store.adminSeasonDetail.categories.length,
|
|
to: '/admin/years',
|
|
hint: 'Texte, Limits und Sortierung',
|
|
},
|
|
{
|
|
label: 'Kandidatenbasis',
|
|
value: store.adminSeasonDetail.candidates.length,
|
|
to: '/admin/candidates',
|
|
hint: 'Kandidaten schnell aktualisieren',
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<AdminPageHeader
|
|
eyebrow="Dashboard"
|
|
title="Was braucht gerade Aufmerksamkeit?"
|
|
description="Das Dashboard zeigt dir zuerst die offenen Arbeitsstapel und fuehrt dich mit Quick Actions direkt in den passenden Bereich."
|
|
/>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<RouterLink
|
|
v-for="item in quickActions"
|
|
:key="item.label"
|
|
:to="item.to"
|
|
class="block rounded-[28px] border border-violet-100 bg-white/80 p-6 text-slate-800 shadow-[0_18px_50px_rgba(168,145,214,0.1)] transition hover:-translate-y-0.5 hover:border-violet-200 hover:bg-violet-50/50"
|
|
>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">{{ item.label }}</p>
|
|
<strong class="mt-4 block text-4xl text-violet-800">{{ item.value }}</strong>
|
|
<p class="mt-2 text-sm leading-6 text-slate-500">{{ item.hint }}</p>
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<div class="grid gap-5 lg:grid-cols-4">
|
|
<Card
|
|
v-for="metric in metrics"
|
|
:key="metric.label"
|
|
class="p-7"
|
|
>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">{{ metric.label }}</p>
|
|
<strong class="mt-4 block text-4xl text-violet-800">{{ metric.value.toLocaleString('de-DE') }}</strong>
|
|
<p class="mt-2 text-sm text-slate-500">{{ metric.note }}</p>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
|
|
<Card class="p-7">
|
|
<h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Top Kategorien nach Votes</h2>
|
|
<DataTable :value="topCategories" class="mt-6" striped-rows>
|
|
<Column field="category" header="Kategorie" />
|
|
<Column field="votes" header="Votes">
|
|
<template #body="{ data }">
|
|
{{ Number(data.votes).toLocaleString('de-DE') }}
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</Card>
|
|
|
|
<Card class="p-7">
|
|
<h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Letzte Aktivitaeten</h2>
|
|
<div class="mt-6 space-y-4">
|
|
<div
|
|
v-for="activity in activities"
|
|
:key="activity.label"
|
|
class="rounded-[26px] border border-violet-100 bg-violet-50/60 px-5 py-5"
|
|
>
|
|
<p class="font-semibold text-slate-800">{{ activity.label }}</p>
|
|
<p class="mt-1 text-sm text-slate-500">{{ activity.age }}</p>
|
|
</div>
|
|
<p v-if="activities.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
|
|
Noch keine aktuellen Audit-Aktivitaeten vorhanden.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</template>
|