SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: enhance admin dashboard with report statistics and quick links

Browse Source
This commit is contained in:
gabdevele
2026-06-18 12:48:26 +02:00 Unverified
parent 25e9252283
commit 028762063c
4 changed files with 513 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/dashboard/AdminDashboard.vue
+222 -76
View File
@@ -2,97 +2,243 @@
const { getOverviewStats } = useAdmin()
const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
const totalReports = computed(() =>
statsRes.value?.reports_by_status?.reduce((sum, item) => sum + Number(item.total), 0) || 0
)
const reportCountByStatus = (status: string) =>
statsRes.value?.reports_by_status?.find(item => item.status === status)?.total ?? 0
const quickLinks = [
{
to: '/admin/reports',
icon: 'it-files',
title: 'Overview segnalazioni',
text: 'Vista completa, sola lettura, con stato e distribuzione.',
tone: 'primary'
},
{
to: '/admin/catalog',
icon: 'it-list',
title: 'Categorie e team',
text: 'Gestione riferimento operativo e gruppi esterni.',
tone: 'primary'
},
{
to: '/admin/areas',
icon: 'it-map-marker',
title: 'Aree',
text: 'Confini e copertura territoriale.',
tone: 'primary'
},
{
to: '/admin/users',
icon: 'it-user',
title: 'Utenti',
text: 'Ruoli, stato account, ban.',
tone: 'primary'
},
{
to: '/admin/moderation',
icon: 'it-warning',
title: 'Moderazione abusi',
text: 'Gestione flag e contenuti segnalati.',
tone: 'danger'
}
]
</script>
<template>
<div>
<div class="callout callout-highlight callout-danger mb-4">
<div class="callout-title">Pannello Admin</div>
<p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
<div class="admin-dashboard">
<div class="admin-intro mb-4">
<div>
<span class="admin-eyebrow">Controllo centrale</span>
<h2 class="h4 mb-2">Pannello amministrazione</h2>
<p class="mb-0 text-muted">Overview rapida su segnalazioni, moderazione e configurazioni di sistema.</p>
</div>
</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">
<div class="card card-bg text-center">
<div class="card-body">
<h2 class="text-primary">
{{ statsRes.reports_by_status?.reduce((sum, item) => sum + Number(item.total), 0) || 0 }}
</h2>
<p class="card-text">Totale Segnalazioni</p>
</div>
</div>
<div class="row g-3 mb-4" v-if="!pending && statsRes?.ok">
<div class="col-6 col-xl-3">
<div class="admin-stat-card tone-primary">
<span class="admin-stat-label">Totale segnalazioni</span>
<strong class="admin-stat-value">{{ totalReports }}</strong>
</div>
</div>
<div class="col-6 col-md-3 mb-3">
<div class="card-wrapper card-space">
<div class="card card-bg text-center">
<div class="card-body">
<h2 class="text-danger">
{{ statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
</h2>
<p class="card-text">Aperte (Da Gestire)</p>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="admin-stat-card tone-danger">
<span class="admin-stat-label">Aperte</span>
<strong class="admin-stat-value">{{ reportCountByStatus('OPEN') }}</strong>
</div>
</div>
<div class="col-6 col-md-3 mb-3">
<div class="card-wrapper card-space">
<div class="card card-bg text-center">
<div class="card-body">
<h2 class="text-warning">
{{ statsRes.reports_by_status?.find(s => s.status === 'ASSIGNED')?.total ?? 0 }}
</h2>
<p class="card-text">In Carico (Assegnate)</p>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="admin-stat-card tone-warning">
<span class="admin-stat-label">Assegnate</span>
<strong class="admin-stat-value">{{ reportCountByStatus('ASSIGNED') }}</strong>
</div>
</div>
<div class="col-6 col-md-3 mb-3">
<div class="card-wrapper card-space">
<div class="card card-bg text-center">
<div class="card-body">
<h2 class="text-success">
{{ statsRes.reports_by_status?.find(s => s.status === 'CLOSED')?.total ?? 0 }}
</h2>
<p class="card-text">Risolte (Chiuse)</p>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="admin-stat-card tone-success">
<span class="admin-stat-label">Chiuse</span>
<strong class="admin-stat-value">{{ reportCountByStatus('CLOSED') }}</strong>
</div>
</div>
</div>
<h3 class="mb-3">Gestione Sistema</h3>
<div class="row">
<div class="col-12 col-md-4 mb-3">
<NuxtLink to="/admin/catalog" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-list" size="sm" color="primary" class="mb-2" />
Categorie e Team
</NuxtLink>
</div>
<div class="col-12 col-md-4 mb-3">
<NuxtLink to="/admin/areas" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-map-marker" size="sm" color="primary" class="mb-2" />
Aree
</NuxtLink>
</div>
<div class="col-12 col-md-4 mb-3">
<NuxtLink to="/admin/users" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-user" size="sm" color="primary" class="mb-2" />
Gestione Utenti
</NuxtLink>
</div>
<div class="col-12 col-md-6 mb-3">
<NuxtLink to="/admin/moderation" class="btn btn-outline-danger w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-warning" size="sm" color="danger" class="mb-2" />
Moderazione Abusi
</NuxtLink>
</div>
<div class="d-flex align-items-center justify-content-between mb-3">
<h3 class="h5 mb-0">Strumenti</h3>
<span class="text-muted small">{{ quickLinks.length }} sezioni</span>
</div>
<div class="admin-tools-grid">
<NuxtLink v-for="link in quickLinks" :key="link.to" :to="link.to" class="admin-tool-card" :class="`tone-${link.tone}`">
<div class="admin-tool-icon">
<BIIcon :name="link.icon" size="sm" :color="link.tone === 'danger' ? 'danger' : 'primary'" />
</div>
<div>
<h4 class="admin-tool-title">{{ link.title }}</h4>
<p class="admin-tool-text">{{ link.text }}</p>
</div>
<span class="admin-tool-cta">Apri</span>
</NuxtLink>
</div>
</div>
</template>
<style scoped>
.admin-dashboard {
--admin-border: rgba(23, 50, 77, 0.12);
--admin-shadow: 0 18px 40px rgba(23, 50, 77, 0.08);
}
.admin-intro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.35rem;
border: 1px solid var(--admin-border);
border-radius: 1.25rem;
background: linear-gradient(135deg, #ffffff 0%, #f3f7fb 100%);
}
.admin-eyebrow {
display: inline-block;
margin-bottom: 0.35rem;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5b6577;
}
.admin-stat-card {
border: 1px solid var(--admin-border);
border-radius: 1rem;
padding: 1rem 1.1rem;
min-height: 120px;
background: #fff;
box-shadow: var(--admin-shadow);
}
.admin-stat-card::before {
content: '';
width: 2.6rem;
height: 0.35rem;
display: block;
border-radius: 999px;
margin-bottom: 1rem;
}
.admin-stat-card.tone-primary::before { background: #0d6efd; }
.admin-stat-card.tone-danger::before { background: #d9364f; }
.admin-stat-card.tone-warning::before { background: #c58100; }
.admin-stat-card.tone-success::before { background: #198754; }
.admin-stat-label {
display: block;
color: #5b6577;
font-size: 0.92rem;
margin-bottom: 0.45rem;
}
.admin-stat-value {
font-size: clamp(1.9rem, 4vw, 2.6rem);
line-height: 1;
color: #17324d;
}
.admin-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.admin-tool-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 0.9rem;
text-decoration: none;
color: inherit;
padding: 1rem 1.1rem;
border-radius: 1rem;
border: 1px solid var(--admin-border);
background: #fff;
box-shadow: var(--admin-shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.admin-tool-card:hover {
transform: translateY(-2px);
box-shadow: 0 22px 40px rgba(23, 50, 77, 0.12);
}
.admin-tool-card.tone-danger {
border-color: rgba(217, 54, 79, 0.28);
}
.admin-tool-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eef4ff;
}
.admin-tool-card.tone-danger .admin-tool-icon {
background: #fff1f3;
}
.admin-tool-title {
font-size: 1rem;
margin: 0 0 0.25rem;
color: #17324d;
}
.admin-tool-text {
margin: 0;
color: #5b6577;
font-size: 0.92rem;
}
.admin-tool-cta {
align-self: center;
font-size: 0.84rem;
color: #17324d;
font-weight: 600;
}
@media (max-width: 767.98px) {
.admin-tool-card {
grid-template-columns: auto 1fr;
}
.admin-tool-cta {
grid-column: 2;
justify-self: start;
}
}
</style>