94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Report } from '~/types/api'
|
|
|
|
const { user } = useAuth()
|
|
const { getReports } = useReports()
|
|
|
|
const { data: reportsRes, pending } = useAsyncData('citizen-dashboard-reports', () => getReports({}))
|
|
|
|
const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
|
|
const recentReports = computed(() => reports.value.slice(0, 4))
|
|
|
|
const stats = computed(() => {
|
|
return reports.value.reduce(
|
|
(acc, report) => {
|
|
acc.total++
|
|
if (report.status === 'OPEN') acc.open++
|
|
if (report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED') acc.inProgress++
|
|
if (report.status === 'RESOLVED' || report.status === 'CLOSED') acc.resolved++
|
|
return acc
|
|
},
|
|
{ total: 0, open: 0, inProgress: 0, resolved: 0 }
|
|
)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-6 col-lg-3">
|
|
<div class="card card-bg dashboard-stat h-100">
|
|
<div class="card-body py-3">
|
|
<div class="stat-value">{{ stats.total }}</div>
|
|
<div class="small text-muted">Segnalazioni</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="card card-bg dashboard-stat h-100">
|
|
<div class="card-body py-3">
|
|
<div class="stat-value">{{ stats.open }}</div>
|
|
<div class="small text-muted">Aperte</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="card card-bg dashboard-stat h-100">
|
|
<div class="card-body py-3">
|
|
<div class="stat-value">{{ stats.inProgress }}</div>
|
|
<div class="small text-muted">In corso</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="card card-bg dashboard-stat h-100">
|
|
<div class="card-body py-3">
|
|
<div class="stat-value">{{ user?.points || 0 }}</div>
|
|
<div class="small text-muted">Punti cittadino</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap gap-2 mb-4">
|
|
<NuxtLink to="/reports/new" class="btn btn-primary">
|
|
<BIIcon name="it-plus-circle" size="sm" color="white" class="me-2" />
|
|
Nuova segnalazione
|
|
</NuxtLink>
|
|
<NuxtLink to="/reports" class="btn btn-outline-primary">
|
|
<BIIcon name="it-list" size="sm" class="me-2" />
|
|
Le mie segnalazioni
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="card card-bg">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h2 class="h5 card-title mb-0">Aggiornamenti recenti</h2>
|
|
<NuxtLink to="/reports" class="btn btn-link btn-sm pe-0">Vedi tutte</NuxtLink>
|
|
</div>
|
|
|
|
<div v-if="pending" class="text-center py-4">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Caricamento...</span>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="recentReports.length === 0" class="alert alert-info mb-0" role="alert">
|
|
Non hai ancora creato segnalazioni.
|
|
</div>
|
|
<ReportTable v-else :reports="recentReports" action-label="Apri segnalazione" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|