291 lines
10 KiB
Vue
291 lines
10 KiB
Vue
<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>
|