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

feat: add unread notifications feature and enhance notification display

Browse Source
This commit is contained in:
gabdevele
2026-06-18 13:51:54 +02:00 Unverified
parent 6b74578a60
commit 2a8cbf4299
5 changed files with 196 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/dashboard/AdminDashboard.vue
+42 -86
View File
@@ -4,36 +4,11 @@ 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'
}
{ 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>
@@ -46,78 +21,59 @@ const adminActions = [
</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 class="row g-3 mb-4" v-if="!pending && statsRes?.ok">
<div class="col-6 col-lg-3">
<div class="card card-bg dashboard-stat h-100">
<div class="card-body py-3">
<div class="stat-value">{{ statsRes.total_users || 0 }}</div>
<div class="small text-muted">Utenti registrati</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 class="col-6 col-lg-3">
<div class="card card-bg dashboard-stat h-100">
<div class="card-body py-3">
<div class="stat-value">
{{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
</div>
<div class="small text-muted">Segnalazioni aperte</div>
</div>
</div>
</div>
</div>
<h3 class="mb-3">Gestione Sistema</h3>
<div class="card card-bg">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2 class="h5 card-title mb-0">Gestione sistema</h2>
<span class="small text-muted">{{ adminActions.length }} sezioni</span>
</div>
<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 class="row g-2">
<div
v-for="action in adminActions"
:key="action.to"
class="col-12 col-md-6 col-xl-4"
>
<NuxtLink
:to="action.to"
class="btn btn-sm w-100 d-flex align-items-center justify-content-start gap-2 admin-action"
:class="action.tone === 'danger' ? 'btn-outline-danger' : 'btn-outline-primary'"
>
<BIIcon :name="action.icon" size="sm" :color="action.tone === 'danger' ? 'danger' : 'primary'" />
<span>{{ action.label }}</span>
</NuxtLink>
</div>
</div>
</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;
.admin-action {
min-height: 44px;
text-align: left;
}
</style>