263 lines
10 KiB
Vue
263 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)
|
|
)
|
|
|
|
// --- INIZIO LOGICA PAGINAZIONE ---
|
|
const currentPage = ref(1)
|
|
const itemsPerPage = ref(12)
|
|
|
|
// Reset alla pagina 1 quando cambiano i filtri
|
|
watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => {
|
|
currentPage.value = 1
|
|
})
|
|
|
|
const totalPages = computed(() => Math.ceil(filteredReports.value.length / itemsPerPage.value))
|
|
|
|
const paginatedReports = computed(() => {
|
|
const sorted = [...filteredReports.value].sort(
|
|
(a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime()
|
|
)
|
|
const start = (currentPage.value - 1) * itemsPerPage.value
|
|
const end = start + itemsPerPage.value
|
|
return sorted.slice(start, end)
|
|
})
|
|
|
|
const handlePageChange = (page: number) => {
|
|
currentPage.value = page
|
|
}
|
|
// --- FINE LOGICA PAGINAZIONE ---
|
|
|
|
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">
|
|
<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="card card-bg dashboard-stat h-100">
|
|
<div class="card-body py-3">
|
|
<div class="stat-value">{{ card.value }}</div>
|
|
<div class="small text-muted">{{ card.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-bg 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 card-bg 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 trovati</span>
|
|
</div>
|
|
<div class="table-responsive report-table-wrapper">
|
|
<table class="table table-hover report-table mb-0 align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Stato</th>
|
|
<th class="text-end">Totale</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in reportsByStatus" :key="item.status">
|
|
<td>
|
|
<span class="badge" :class="`bg-${item.tone}`">
|
|
{{ item.label }}
|
|
</span>
|
|
</td>
|
|
<td class="text-end">{{ item.total }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="filteredReports.length === 0" class="alert alert-info">
|
|
Nessuna segnalazione trovata con filtri correnti.
|
|
</div>
|
|
|
|
<div v-else class="card card-bg border-0 shadow-sm mb-5">
|
|
<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 paginatedReports" :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" :class="`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>
|
|
|
|
<!-- Paginazione Component -->
|
|
<div class="card-footer bg-transparent d-flex flex-wrap justify-content-between align-items-center py-3" v-if="totalPages > 1">
|
|
<span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span>
|
|
|
|
<Pagination
|
|
:current-page="currentPage"
|
|
:per-page="itemsPerPage"
|
|
:total-items="filteredReports.length"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|