feat: implement dynamic dashboard routing with role-specific views
- Create unified dashboard page that renders dashboard view based on user role - Implement CitizenDashboard with local filtering, pagination, and user rewards points visualization - Implement OperatorDashboard with list of open/assigned reports and assignment actions - Implement AdminDashboard with admin statistics overview card components and management links
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import type { Report } from '~/types/api'
|
||||
|
||||
const { user } = useAuth()
|
||||
const { getReports } = useReports()
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
const filterStatus = ref<string>('') // Stringa vuota = "Tutte"
|
||||
|
||||
// Carichiamo TUTTE le segnalazioni per avere statistiche globali e filtri veloci
|
||||
const { data: reportsRes, pending } = useAsyncData('citizen-reports-all', () =>
|
||||
getReports({}) // Non passiamo filtri alla chiamata API
|
||||
)
|
||||
|
||||
// Dati grezzi dal server
|
||||
const rawReports = computed<Report[]>(() => reportsRes.value?.reports || [])
|
||||
|
||||
// 1. STATISTICHE GLOBALI (Sempre basate su tutti i dati, ignorano i filtri)
|
||||
const statsGlobal = computed(() => {
|
||||
const stats = { total: 0, OPEN: 0, IN_PROGRESS: 0, RESOLVED: 0 }
|
||||
rawReports.value.forEach((report: Report) => {
|
||||
stats.total++
|
||||
if (report.status === 'OPEN') stats.OPEN++
|
||||
if (report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED') stats.IN_PROGRESS++
|
||||
if (report.status === 'RESOLVED') stats.RESOLVED++
|
||||
})
|
||||
return stats
|
||||
})
|
||||
|
||||
// 2. FILTRO LATO CLIENT (Rende il cambio filtro istantaneo)
|
||||
const filteredReports = computed(() => {
|
||||
if (!filterStatus.value) return rawReports.value
|
||||
|
||||
return rawReports.value.filter((report: Report) => {
|
||||
// Raggruppiamo IN_PROGRESS e ASSIGNED sotto la stessa voce per l'utente
|
||||
if (filterStatus.value === 'IN_PROGRESS') {
|
||||
return report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED'
|
||||
}
|
||||
return report.status === filterStatus.value
|
||||
})
|
||||
})
|
||||
|
||||
// 3. PAGINAZIONE LATO CLIENT
|
||||
const paginatedReports = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
const end = start + perPage.value
|
||||
return filteredReports.value.slice(start, end)
|
||||
})
|
||||
|
||||
const totalFiltered = computed(() => filteredReports.value.length)
|
||||
|
||||
// GESTIONE FILTRI (Evita reload se clicchi il filtro attivo)
|
||||
const handleStatusFilter = (status: string) => {
|
||||
const targetStatus = status === 'all' ? '' : status
|
||||
|
||||
// Se clicco sullo stesso filtro, non fare nulla
|
||||
if (filterStatus.value === targetStatus) return
|
||||
|
||||
filterStatus.value = targetStatus
|
||||
page.value = 1 // Reset alla prima pagina
|
||||
}
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
page.value = newPage
|
||||
}
|
||||
|
||||
// Helpers grafici
|
||||
const getStatusColor = (status: string): string => {
|
||||
const colors: Record<string, string> = {
|
||||
OPEN: 'primary', UNDER_REVIEW: 'info', ASSIGNED: 'warning',
|
||||
IN_PROGRESS: 'warning', RESOLVED: 'success', REJECTED: 'danger', CLOSED: 'secondary',
|
||||
}
|
||||
return colors[status] || 'secondary'
|
||||
}
|
||||
|
||||
const getStatusLabel = (status: string): string => {
|
||||
const labels: Record<string, string> = {
|
||||
OPEN: 'Aperta', UNDER_REVIEW: 'In revisione', ASSIGNED: 'Assegnata',
|
||||
IN_PROGRESS: 'In corso', RESOLVED: 'Risolta', REJECTED: 'Rifiutata', CLOSED: 'Chiusa',
|
||||
}
|
||||
return labels[status] || status
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
return new Date(dateString).toLocaleDateString('it-IT', {
|
||||
day: '2-digit', month: '2-digit', year: '2-digit',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Callout Gamification -->
|
||||
<div class="callout callout-highlight callout-success mb-4">
|
||||
<div class="callout-title d-flex align-items-center">
|
||||
<BIIcon name="it-star-full" size="sm" color="success" class="me-2" />
|
||||
I tuoi Punti Cittadino
|
||||
</div>
|
||||
<p>
|
||||
Hai accumulato <strong>{{ user?.points || 0 }} punti</strong>! Continua ad aiutare la comunità segnalando i problemi urbani.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- STATISTICHE RAPIDE (Basate su statsGlobal, non cambiano filtrando) -->
|
||||
<div class="row mb-5">
|
||||
<div class="col-6 col-md-3 mb-3">
|
||||
<div class="card card-bg text-center">
|
||||
<div class="card-body">
|
||||
<div class="display-6 text-primary font-weight-bold">{{ statsGlobal.total }}</div>
|
||||
<small class="text-muted">Totali</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3 mb-3">
|
||||
<div class="card card-bg text-center">
|
||||
<div class="card-body">
|
||||
<div class="display-6 text-warning font-weight-bold">{{ statsGlobal.OPEN }}</div>
|
||||
<small class="text-muted">Aperte</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3 mb-3">
|
||||
<div class="card card-bg text-center">
|
||||
<div class="card-body">
|
||||
<div class="display-6 text-info font-weight-bold">{{ statsGlobal.IN_PROGRESS }}</div>
|
||||
<small class="text-muted">In corso</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3 mb-3">
|
||||
<div class="card card-bg text-center">
|
||||
<div class="card-body">
|
||||
<div class="display-6 text-success font-weight-bold">{{ statsGlobal.RESOLVED }}</div>
|
||||
<small class="text-muted">Risolte</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AZIONI RAPIDE E FILTRI -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="d-flex gap-2 flex-wrap align-items-center">
|
||||
<NuxtLink to="/reports/create" class="btn btn-primary me-md-3">
|
||||
<BIIcon name="it-plus-circle" size="sm" color="white" class="me-2" />
|
||||
Nuova segnalazione
|
||||
</NuxtLink>
|
||||
|
||||
<div class="btn-group" role="group" aria-label="Filtri segnalazioni">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === '' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('all')"
|
||||
>
|
||||
Tutte
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === 'OPEN' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('OPEN')"
|
||||
>
|
||||
Aperte
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === 'IN_PROGRESS' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('IN_PROGRESS')"
|
||||
>
|
||||
In corso
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === 'RESOLVED' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('RESOLVED')"
|
||||
>
|
||||
Risolte
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="pending" class="progress-spinner progress-spinner-active my-5 mx-auto">
|
||||
<span class="visually-hidden">Caricamento...</span>
|
||||
</div>
|
||||
|
||||
<!-- TABELLA SEGNALAZIONI -->
|
||||
<div class="row" v-else>
|
||||
<div class="col-12">
|
||||
<div v-if="filteredReports.length === 0" class="alert alert-info text-center" role="alert">
|
||||
<h6>Nessuna segnalazione trovata</h6>
|
||||
<p class="small text-muted mb-0">Non ci sono segnalazioni con lo stato "{{ filterStatus || 'Tutte' }}".</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="table-responsive">
|
||||
<table class="table table-hover border-bottom">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" class="small">#ID</th>
|
||||
<th scope="col" class="small">Categoria</th>
|
||||
<th scope="col" class="small">Indirizzo</th>
|
||||
<th scope="col" class="small">Stato</th>
|
||||
<th scope="col" class="small">Creazione</th>
|
||||
<th scope="col" class="text-center small">Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="report in paginatedReports" :key="report.id" class="align-middle">
|
||||
<td class="small font-weight-semibold">#{{ report.id }}</td>
|
||||
<td class="small">{{ report.category_name }}</td>
|
||||
<td class="small">
|
||||
<span class="text-muted text-truncate" style="max-width: 200px; display: inline-block;">
|
||||
{{ report.address }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="small">
|
||||
<span class="badge" :class="`bg-${getStatusColor(report.status)}`">
|
||||
{{ getStatusLabel(report.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="small text-muted">{{ formatDate(report.created_at) }}</td>
|
||||
<td class="text-center">
|
||||
<NuxtLink :to="`/reports/${report.id}`" class="btn btn-sm btn-outline-primary p-1">
|
||||
<BIIcon name="it-arrow-right" size="xs" />
|
||||
</NuxtLink>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Paginazione Client-Side (Opzionale: implementare se hai molti dati) -->
|
||||
<div v-if="totalFiltered > perPage" class="d-flex justify-content-center mt-4">
|
||||
<!-- Qui potresti inserire un componente Pagination se ne hai uno -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.display-6 { font-size: 2.2rem; line-height: 1; }
|
||||
.table-hover tbody tr:hover { background-color: rgba(0, 111, 157, 0.03); }
|
||||
.btn-group .btn { min-width: 80px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user