feat: refactor admin dashboard layout and improve action links
This commit is contained in:
gabdevele
@@ -3,242 +3,121 @@ const { getOverviewStats } = useAdmin()
|
|||||||
|
|
||||||
const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
|
const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
|
||||||
|
|
||||||
const totalReports = computed(() =>
|
const adminActions = [
|
||||||
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',
|
to: '/admin/reports',
|
||||||
icon: 'it-files',
|
icon: 'it-files',
|
||||||
title: 'Overview segnalazioni',
|
label: 'Report',
|
||||||
text: 'Vista completa, sola lettura, con stato e distribuzione.',
|
|
||||||
tone: 'primary'
|
tone: 'primary'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
to: '/admin/catalog',
|
to: '/admin/catalog',
|
||||||
icon: 'it-list',
|
icon: 'it-list',
|
||||||
title: 'Categorie e team',
|
label: 'Categorie e Team',
|
||||||
text: 'Gestione riferimento operativo e gruppi esterni.',
|
|
||||||
tone: 'primary'
|
tone: 'primary'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
to: '/admin/areas',
|
to: '/admin/areas',
|
||||||
icon: 'it-map-marker',
|
icon: 'it-map-marker',
|
||||||
title: 'Aree',
|
label: 'Aree',
|
||||||
text: 'Confini e copertura territoriale.',
|
|
||||||
tone: 'primary'
|
tone: 'primary'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
to: '/admin/users',
|
to: '/admin/users',
|
||||||
icon: 'it-user',
|
icon: 'it-user',
|
||||||
title: 'Utenti',
|
label: 'Gestione Utenti',
|
||||||
text: 'Ruoli, stato account, ban.',
|
|
||||||
tone: 'primary'
|
tone: 'primary'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
to: '/admin/moderation',
|
to: '/admin/moderation',
|
||||||
icon: 'it-warning',
|
icon: 'it-warning',
|
||||||
title: 'Moderazione abusi',
|
label: 'Moderazione Abusi',
|
||||||
text: 'Gestione flag e contenuti segnalati.',
|
|
||||||
tone: 'danger'
|
tone: 'danger'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="admin-dashboard">
|
|
||||||
<div class="admin-intro mb-4">
|
|
||||||
<div>
|
<div>
|
||||||
<span class="admin-eyebrow">Controllo centrale</span>
|
<div class="callout callout-highlight callout-danger mb-4">
|
||||||
<h2 class="h4 mb-2">Pannello amministrazione</h2>
|
<div class="callout-title">Pannello Admin</div>
|
||||||
<p class="mb-0 text-muted">Overview rapida su segnalazioni, moderazione e configurazioni di sistema.</p>
|
<p class="mb-0">
|
||||||
</div>
|
Accesso di livello 1. Da qui puoi gestire configurazioni di sistema, segnalazioni, categorie e moderazione.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row g-3 mb-4" v-if="!pending && statsRes?.ok">
|
<div class="row mb-5" v-if="!pending && statsRes?.ok">
|
||||||
<div class="col-6 col-xl-3">
|
<div class="col-6 col-md-3 mb-3">
|
||||||
<div class="admin-stat-card tone-primary">
|
<div class="card-wrapper card-space h-100">
|
||||||
<span class="admin-stat-label">Totale segnalazioni</span>
|
<div class="card card-bg text-center h-100">
|
||||||
<strong class="admin-stat-value">{{ totalReports }}</strong>
|
<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-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-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-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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
<div class="col-6 col-md-3 mb-3">
|
||||||
<h3 class="h5 mb-0">Strumenti</h3>
|
<div class="card-wrapper card-space h-100">
|
||||||
<span class="text-muted small">{{ quickLinks.length }} sezioni</span>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="admin-tools-grid">
|
<h3 class="mb-3">Gestione Sistema</h3>
|
||||||
<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">
|
<div class="row">
|
||||||
<BIIcon :name="link.icon" size="sm" :color="link.tone === 'danger' ? 'danger' : 'primary'" />
|
<div
|
||||||
</div>
|
v-for="action in adminActions"
|
||||||
<div>
|
:key="action.to"
|
||||||
<h4 class="admin-tool-title">{{ link.title }}</h4>
|
class="col-12 col-md-6 col-xl-4 mb-3"
|
||||||
<p class="admin-tool-text">{{ link.text }}</p>
|
>
|
||||||
</div>
|
<NuxtLink
|
||||||
<span class="admin-tool-cta">Apri</span>
|
: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>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.admin-dashboard {
|
.dashboard-action {
|
||||||
--admin-border: rgba(23, 50, 77, 0.12);
|
min-height: 72px;
|
||||||
--admin-shadow: 0 18px 40px rgba(23, 50, 77, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-intro {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
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 {
|
.dashboard-action-inner {
|
||||||
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;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #eef4ff;
|
gap: 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-tool-card.tone-danger .admin-tool-icon {
|
.dashboard-action-icon {
|
||||||
background: #fff1f3;
|
flex: 0 0 auto;
|
||||||
}
|
|
||||||
|
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user