124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const { getOverviewStats } = useAdmin()
|
|
|
|
const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
|
|
|
|
const adminActions = [
|
|
{
|
|
to: '/admin/reports',
|
|
icon: 'it-files',
|
|
label: 'Report',
|
|
tone: 'primary'
|
|
},
|
|
{
|
|
to: '/admin/catalog',
|
|
icon: 'it-list',
|
|
label: 'Categorie e Team',
|
|
tone: 'primary'
|
|
},
|
|
{
|
|
to: '/admin/areas',
|
|
icon: 'it-map-marker',
|
|
label: 'Aree',
|
|
tone: 'primary'
|
|
},
|
|
{
|
|
to: '/admin/users',
|
|
icon: 'it-user',
|
|
label: 'Gestione Utenti',
|
|
tone: 'primary'
|
|
},
|
|
{
|
|
to: '/admin/moderation',
|
|
icon: 'it-warning',
|
|
label: 'Moderazione Abusi',
|
|
tone: 'danger'
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="callout callout-highlight callout-danger mb-4">
|
|
<div class="callout-title">Pannello Admin</div>
|
|
<p class="mb-0">
|
|
Accesso di livello 1. Da qui puoi gestire configurazioni di sistema, segnalazioni, categorie e moderazione.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row mb-5" v-if="!pending && statsRes?.ok">
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<div class="card-wrapper card-space h-100">
|
|
<div class="card card-bg text-center h-100">
|
|
<div class="card-body">
|
|
<h2 class="text-primary">{{ statsRes.total_users || 0 }}</h2>
|
|
<p class="card-text mb-0">Utenti Registrati</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<div class="card-wrapper card-space h-100">
|
|
<div class="card card-bg text-center h-100">
|
|
<div class="card-body">
|
|
<h2 class="text-warning">
|
|
{{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
|
|
</h2>
|
|
<p class="card-text mb-0">Segn. Aperte</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="mb-3">Gestione Sistema</h3>
|
|
|
|
<div class="row">
|
|
<div
|
|
v-for="action in adminActions"
|
|
:key="action.to"
|
|
class="col-12 col-md-6 col-xl-4 mb-3"
|
|
>
|
|
<NuxtLink
|
|
:to="action.to"
|
|
class="btn w-100 py-3 px-4 dashboard-action"
|
|
:class="action.tone === 'danger' ? 'btn-outline-danger' : 'btn-outline-primary'"
|
|
>
|
|
<span class="dashboard-action-inner">
|
|
<BIIcon
|
|
:name="action.icon"
|
|
size="sm"
|
|
:color="action.tone === 'danger' ? 'danger' : 'primary'"
|
|
class="dashboard-action-icon"
|
|
/>
|
|
<span>{{ action.label }}</span>
|
|
</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dashboard-action {
|
|
min-height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-action-inner {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
text-align: center;
|
|
white-space: normal;
|
|
}
|
|
|
|
.dashboard-action-icon {
|
|
flex: 0 0 auto;
|
|
}
|
|
</style>
|