feat: enhance admin dashboard with report statistics and quick links
This commit is contained in:
gabdevele
@@ -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>
|
||||
|
||||
@@ -9,7 +9,7 @@ import type {
|
||||
} from "~/types/api";
|
||||
|
||||
export const useReports = () => {
|
||||
const getReports = (query?: { area_id?: number; category_id?: number; status?: string }) =>
|
||||
const getReports = (query?: { area_id?: number; category_id?: number; status?: string; page?: number; per_page?: number }) =>
|
||||
useApiFetch<ReportListResponse>('/api/v1/reports', { method: 'GET', query })
|
||||
|
||||
const getCategories = () =>
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
<script setup lang="ts">
|
||||
import type { Report, ReportStatus } from '~/types/api'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
auth: { role: 'ADMIN' }
|
||||
})
|
||||
|
||||
useHead({ title: 'Overview Segnalazioni - Admin' })
|
||||
|
||||
const { getReports, getCategories } = useReports()
|
||||
const { getAreas } = useAdmin()
|
||||
|
||||
const search = ref('')
|
||||
const selectedStatus = ref<'ALL' | ReportStatus>('ALL')
|
||||
const selectedCategoryId = ref<number | 'ALL'>('ALL')
|
||||
const selectedAreaId = ref<number | 'ALL'>('ALL')
|
||||
|
||||
const { data: reportsRes, pending } = await useAsyncData('admin-report-overview', () => getReports())
|
||||
const { data: categoriesRes } = await useAsyncData('admin-report-overview-categories', () => getCategories())
|
||||
const { data: areasRes } = await useAsyncData('admin-report-overview-areas', () => getAreas())
|
||||
|
||||
const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
|
||||
const categories = computed(() => categoriesRes.value?.categories || [])
|
||||
const areas = computed(() => areasRes.value?.areas || [])
|
||||
|
||||
const statusMeta: Record<ReportStatus, { label: string; tone: string }> = {
|
||||
OPEN: { label: 'Aperta', tone: 'danger' },
|
||||
UNDER_REVIEW: { label: 'In revisione', tone: 'warning' },
|
||||
ASSIGNED: { label: 'Assegnata', tone: 'info' },
|
||||
IN_PROGRESS: { label: 'In corso', tone: 'primary' },
|
||||
RESOLVED: { label: 'Risolta', tone: 'success' },
|
||||
REJECTED: { label: 'Rigettata', tone: 'secondary' },
|
||||
CLOSED: { label: 'Chiusa', tone: 'dark' }
|
||||
}
|
||||
|
||||
const filteredReports = computed(() => {
|
||||
const term = search.value.trim().toLowerCase()
|
||||
|
||||
return reports.value.filter((report) => {
|
||||
const matchesStatus = selectedStatus.value === 'ALL' || report.status === selectedStatus.value
|
||||
const matchesCategory = selectedCategoryId.value === 'ALL' || report.category_id === selectedCategoryId.value
|
||||
const matchesArea = selectedAreaId.value === 'ALL' || (report.area_id ?? null) === selectedAreaId.value
|
||||
const matchesSearch = !term || [
|
||||
report.id,
|
||||
report.address,
|
||||
report.description,
|
||||
report.category_name,
|
||||
report.area_name,
|
||||
report.assigned_operator_id ? `#${report.assigned_operator_id}` : ''
|
||||
].some((value) => String(value || '').toLowerCase().includes(term))
|
||||
|
||||
return matchesStatus && matchesCategory && matchesArea && matchesSearch
|
||||
})
|
||||
})
|
||||
|
||||
const totalReports = computed(() => reports.value.length)
|
||||
const openReports = computed(() => reports.value.filter((report) => report.status === 'OPEN').length)
|
||||
const activeReports = computed(() => reports.value.filter((report) => ['UNDER_REVIEW', 'ASSIGNED', 'IN_PROGRESS'].includes(report.status)).length)
|
||||
const closedReports = computed(() => reports.value.filter((report) => ['RESOLVED', 'CLOSED'].includes(report.status)).length)
|
||||
|
||||
const reportsByStatus = computed(() =>
|
||||
Object.entries(statusMeta)
|
||||
.map(([status, meta]) => ({
|
||||
status: status as ReportStatus,
|
||||
label: meta.label,
|
||||
tone: meta.tone,
|
||||
total: reports.value.filter((report) => report.status === status).length
|
||||
}))
|
||||
.filter((item) => item.total > 0)
|
||||
)
|
||||
|
||||
const recentReports = computed(() =>
|
||||
[...filteredReports.value]
|
||||
.sort((a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime())
|
||||
.slice(0, 12)
|
||||
)
|
||||
|
||||
const formatDate = (value?: string) => {
|
||||
if (!value) return '-'
|
||||
return new Date(value).toLocaleString('it-IT', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const truncate = (value?: string, max = 120) => {
|
||||
if (!value) return '-'
|
||||
return value.length > max ? `${value.slice(0, max).trim()}...` : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container my-5 admin-report-overview">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
||||
<div>
|
||||
<h1 class="h3 font-weight-bold mb-1">Overview Segnalazioni</h1>
|
||||
<p class="text-muted mb-0">Vista completa in sola lettura per monitorare carico, stato e distribuzione.</p>
|
||||
</div>
|
||||
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-xl-3" v-for="card in [
|
||||
{ label: 'Totali', value: totalReports, tone: 'primary' },
|
||||
{ label: 'Aperte', value: openReports, tone: 'danger' },
|
||||
{ label: 'In lavorazione', value: activeReports, tone: 'warning' },
|
||||
{ label: 'Chiuse/Risolte', value: closedReports, tone: 'success' }
|
||||
]" :key="card.label">
|
||||
<div class="overview-stat-card" :class="`tone-${card.tone}`">
|
||||
<span class="overview-stat-label">{{ card.label }}</span>
|
||||
<strong class="overview-stat-value">{{ card.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-12 col-lg-4">
|
||||
<label class="form-label">Cerca</label>
|
||||
<input v-model="search" type="text" class="form-control" placeholder="ID, indirizzo, descrizione, area..." />
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-lg-3">
|
||||
<label class="form-label">Stato</label>
|
||||
<select v-model="selectedStatus" class="form-select">
|
||||
<option value="ALL">Tutti</option>
|
||||
<option v-for="item in reportsByStatus" :key="item.status" :value="item.status">{{ item.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-lg-2">
|
||||
<label class="form-label">Categoria</label>
|
||||
<select v-model="selectedCategoryId" class="form-select">
|
||||
<option value="ALL">Tutte</option>
|
||||
<option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-lg-3">
|
||||
<label class="form-label">Area</label>
|
||||
<select v-model="selectedAreaId" class="form-select">
|
||||
<option value="ALL">Tutte</option>
|
||||
<option v-for="area in areas" :key="area.id" :value="area.id">{{ area.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="pending" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status"></div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||
<h2 class="h5 mb-0">Distribuzione stati</h2>
|
||||
<span class="text-muted small">{{ filteredReports.length }} elementi visibili</span>
|
||||
</div>
|
||||
<div class="status-chip-grid">
|
||||
<div v-for="item in reportsByStatus" :key="item.status" class="status-chip" :class="`tone-${item.tone}`">
|
||||
<span>{{ item.label }}</span>
|
||||
<strong>{{ item.total }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="recentReports.length === 0" class="alert alert-info">
|
||||
Nessuna segnalazione trovata con filtri correnti.
|
||||
</div>
|
||||
|
||||
<div v-else class="card border-0 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive report-table-wrapper">
|
||||
<table class="table table-hover report-table mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Categoria</th>
|
||||
<th>Indirizzo</th>
|
||||
<th>Area</th>
|
||||
<th>Stato</th>
|
||||
<th>Operatore</th>
|
||||
<th>Aggiornata</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="report in recentReports" :key="report.id">
|
||||
<td class="report-table-id">#{{ report.id }}</td>
|
||||
<td>
|
||||
<div class="fw-semibold">{{ report.category_name || '-' }}</div>
|
||||
<small class="text-muted">{{ truncate(report.description, 72) }}</small>
|
||||
</td>
|
||||
<td>{{ report.address || '-' }}</td>
|
||||
<td>{{ report.area_name || 'Non assegnata' }}</td>
|
||||
<td>
|
||||
<span class="badge rounded-pill" :class="`text-bg-${statusMeta[report.status].tone}`">
|
||||
{{ statusMeta[report.status].label }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}</td>
|
||||
<td class="text-muted text-nowrap">{{ formatDate(report.updated_at || report.created_at) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-report-overview {
|
||||
--admin-surface: #ffffff;
|
||||
--admin-border: rgba(31, 48, 78, 0.12);
|
||||
--admin-text-soft: #5b6577;
|
||||
}
|
||||
|
||||
.overview-stat-card {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 252, 0.9)),
|
||||
var(--admin-surface);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem 1.1rem;
|
||||
min-height: 118px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 14px 34px rgba(31, 48, 78, 0.08);
|
||||
}
|
||||
|
||||
.overview-stat-card::before {
|
||||
content: '';
|
||||
width: 2.5rem;
|
||||
height: 0.35rem;
|
||||
border-radius: 999px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.overview-stat-card.tone-primary::before { background: #0d6efd; }
|
||||
.overview-stat-card.tone-danger::before { background: #d9364f; }
|
||||
.overview-stat-card.tone-warning::before { background: #c58100; }
|
||||
.overview-stat-card.tone-success::before { background: #198754; }
|
||||
|
||||
.overview-stat-label {
|
||||
color: var(--admin-text-soft);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.overview-stat-value {
|
||||
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||
line-height: 1;
|
||||
color: #17324d;
|
||||
}
|
||||
|
||||
.status-chip-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
border-radius: 0.9rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1px solid var(--admin-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.status-chip strong {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.status-chip.tone-danger { background: rgba(217, 54, 79, 0.08); }
|
||||
.status-chip.tone-warning { background: rgba(197, 129, 0, 0.08); }
|
||||
.status-chip.tone-info { background: rgba(13, 202, 240, 0.08); }
|
||||
.status-chip.tone-primary { background: rgba(13, 110, 253, 0.08); }
|
||||
.status-chip.tone-success { background: rgba(25, 135, 84, 0.08); }
|
||||
.status-chip.tone-secondary,
|
||||
.status-chip.tone-dark { background: rgba(108, 117, 125, 0.08); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user