feat: enhance admin dashboard with report statistics and quick links
This commit is contained in:
gabdevele
@@ -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