82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { getCategorie, getDipendenti, getStatistiche } from "../api/client";
|
|
import FiltriRimborsi from "../components/FiltriRimborsi";
|
|
import type { CategoriaSpesa, StatisticaRimborso, Utente } from "../types";
|
|
|
|
function formatEuro(n: number) {
|
|
return n.toLocaleString("it-IT", { style: "currency", currency: "EUR" });
|
|
}
|
|
|
|
export default function Statistiche() {
|
|
const [stats, setStats] = useState<StatisticaRimborso[]>([]);
|
|
const [categorie, setCategorie] = useState<CategoriaSpesa[]>([]);
|
|
const [dipendenti, setDipendenti] = useState<Pick<Utente, "id" | "nome" | "cognome">[]>([]);
|
|
const [filtri, setFiltri] = useState({ stato: "", categoriaId: "", mese: "", dipendenteId: "" });
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
Promise.all([getCategorie(), getDipendenti()])
|
|
.then(([cats, dips]) => { setCategorie(cats); setDipendenti(dips); });
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
setError(null);
|
|
getStatistiche({
|
|
mese: filtri.mese || undefined,
|
|
categoriaId: filtri.categoriaId ? Number(filtri.categoriaId) : undefined,
|
|
dipendenteId: filtri.dipendenteId ? Number(filtri.dipendenteId) : undefined,
|
|
})
|
|
.then(setStats)
|
|
.catch((err) => setError(err.message))
|
|
.finally(() => setLoading(false));
|
|
}, [filtri.categoriaId, filtri.mese, filtri.dipendenteId]);
|
|
|
|
return (
|
|
<div className="page">
|
|
<h1>Statistiche rimborsi</h1>
|
|
<p className="muted">Dati aggregati per mese e categoria</p>
|
|
|
|
<FiltriRimborsi
|
|
filtri={filtri}
|
|
onChange={setFiltri}
|
|
categorie={categorie}
|
|
dipendenti={dipendenti}
|
|
showDipendente
|
|
/>
|
|
|
|
{error && <p className="error">{error}</p>}
|
|
{loading ? (
|
|
<p className="loading">Caricamento...</p>
|
|
) : stats.length === 0 ? (
|
|
<p className="muted">Nessun dato disponibile.</p>
|
|
) : (
|
|
<table className="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Mese</th>
|
|
<th>Categoria</th>
|
|
<th>N. richieste</th>
|
|
<th>Totale richiesto</th>
|
|
<th>Totale approvato</th>
|
|
<th>Totale liquidato</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{stats.map((s) => (
|
|
<tr key={`${s.mese}-${s.categoria}`}>
|
|
<td>{s.mese}</td>
|
|
<td>{s.categoria}</td>
|
|
<td>{s.numeroRichieste}</td>
|
|
<td>{formatEuro(s.totaleRichiesto)}</td>
|
|
<td>{formatEuro(s.totaleApprovato)}</td>
|
|
<td>{formatEuro(s.totaleLiquidato)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|