AzuTear
62 lines
2.2 KiB
Vue
62 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import Column from 'primevue/column'
|
|
import DataTable from 'primevue/datatable'
|
|
|
|
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)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<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>
|