frontend/app/components/dashboard/AdminDashboard.vue

<script setup lang="ts">
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 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 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-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 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>