creazione frontend
This commit is contained in:
AV77web
parent
5c151a08c8
commit
1d7dc4700f
20 changed files with 1395 additions and 145 deletions
60
package-lock.json
generated
60
package-lock.json
generated
|
|
@ -9,7 +9,8 @@
|
|||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6"
|
||||
"react-dom": "^19.2.6",
|
||||
"react-router-dom": "^7.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
|
|
@ -1306,6 +1307,19 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
|
|
@ -2367,6 +2381,44 @@
|
|||
"react": "^19.2.7"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.17.0.tgz",
|
||||
"integrity": "sha512-FDELK7rTMlCHO5+reyXsPlmfr7N1F91lPHsWYfMEGQm/KQ+F4JFM8jGoeQDmDvdTs93Fw9aSilH+uKRb4/jXvQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.17.0.tgz",
|
||||
"integrity": "sha512-fyU2yjGups/hE6Xz0I5ZYbVL8Gx29eCjgpHaRaTaVU+OOAdfRX05KsvyRm0GO8YQwOkhpU3MurW1jyMUJn+zSw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.17.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/rolldown": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
|
||||
|
|
@ -2417,6 +2469,12 @@
|
|||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6"
|
||||
"react-dom": "^19.2.6",
|
||||
"react-router-dom": "^7.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
|
|
|
|||
324
src/App.css
324
src/App.css
|
|
@ -1,26 +1,326 @@
|
|||
.app {
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #1e3a5f;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0.75rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header nav a {
|
||||
color: #cbd5e1;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.header nav a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.user-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.user-bar button {
|
||||
background: transparent;
|
||||
border: 1px solid #94a3b8;
|
||||
color: #fff;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-bar button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 1100px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.page h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
margin: 0;
|
||||
color: #1e3a5f;
|
||||
}
|
||||
|
||||
.auth-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
max-width: 560px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
margin-top: 1rem;
|
||||
padding: 1.5rem 2rem;
|
||||
border: 1px solid #646cff;
|
||||
border-radius: 12px;
|
||||
min-width: 280px;
|
||||
.btn-primary {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: #2e7d32;
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c62828;
|
||||
.btn-secondary {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
border: 1px solid #cbd5e1;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.table th, .table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table a {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.filters label {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-in_attesa { background: #fef3c7; color: #92400e; }
|
||||
.badge-approvata { background: #d1fae5; color: #065f46; }
|
||||
.badge-rifiutata { background: #fee2e2; color: #991b1b; }
|
||||
.badge-liquidata { background: #dbeafe; color: #1e40af; }
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
color: #1e3a5f;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
gap: 0.75rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-grid dt {
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.detail-grid dd {
|
||||
margin: 0;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reject-box {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.reject-box input {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.error { color: #dc2626; margin: 0; }
|
||||
.success { color: #059669; margin: 0; }
|
||||
.muted { color: #64748b; }
|
||||
.loading { color: #64748b; font-style: italic; }
|
||||
|
|
|
|||
63
src/App.tsx
63
src/App.tsx
|
|
@ -1,31 +1,42 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { fetchHealth } from "./api/client";
|
||||
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||
import Layout from "./components/Layout";
|
||||
import ProtectedRoute from "./components/ProtectedRoute";
|
||||
import { AuthProvider } from "./context/AuthContext";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
import Home from "./pages/Home";
|
||||
import Login from "./pages/Login";
|
||||
import Register from "./pages/Register";
|
||||
import RimborsoDetail from "./pages/RimborsoDetail";
|
||||
import RimborsoForm from "./pages/RimborsoForm";
|
||||
import RimborsiList from "./pages/RimborsiList";
|
||||
import Statistiche from "./pages/Statistiche";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [health, setHealth] = useState<string>("in attesa...");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHealth()
|
||||
.then((data) => setHealth(data.status))
|
||||
.catch((err: Error) => setError(err.message));
|
||||
}, []);
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<main className="app">
|
||||
<h1>Prova Pratica</h1>
|
||||
<p>Frontend React / Vite / TypeScript</p>
|
||||
<section className="status-card">
|
||||
<h2>Backend health</h2>
|
||||
{error ? (
|
||||
<p className="error">{error}</p>
|
||||
) : (
|
||||
<p className="ok">status: {health}</p>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
<AuthProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/register" element={<Register />} />
|
||||
<Route element={<ProtectedRoute><Layout /></ProtectedRoute>}>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/rimborsi" element={<RimborsiList />} />
|
||||
<Route path="/rimborsi/nuova" element={
|
||||
<ProtectedRoute roles={["DIPENDENTE"]}><RimborsoForm /></ProtectedRoute>
|
||||
} />
|
||||
<Route path="/rimborsi/:id/modifica" element={
|
||||
<ProtectedRoute roles={["DIPENDENTE"]}><RimborsoForm /></ProtectedRoute>
|
||||
} />
|
||||
<Route path="/rimborsi/:id" element={<RimborsoDetail />} />
|
||||
<Route path="/statistiche" element={
|
||||
<ProtectedRoute roles={["RESPONSABILE_AMMINISTRATIVO"]}><Statistiche /></ProtectedRoute>
|
||||
} />
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,172 @@
|
|||
import type {
|
||||
CategoriaSpesa,
|
||||
RichiestaRimborso,
|
||||
Ruolo,
|
||||
StatisticaRimborso,
|
||||
StatoRichiesta,
|
||||
Utente,
|
||||
} from "../types";
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? "";
|
||||
|
||||
export async function fetchHealth(): Promise<{ status: string }> {
|
||||
const response = await fetch(`${API_URL}/api/health`, {
|
||||
async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const response = await fetch(`${API_URL}${path}`, {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(options.headers ?? {}),
|
||||
},
|
||||
...options,
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Health check failed: ${response.status}`);
|
||||
throw new Error(data.error ?? `Errore ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
return data as T;
|
||||
}
|
||||
|
||||
export async function fetchHealth(): Promise<{ status: string }> {
|
||||
return request("/api/health");
|
||||
}
|
||||
|
||||
export async function getCsrfToken(): Promise<string> {
|
||||
const data = await request<{ csrfToken: string }>("/api/auth/csrf");
|
||||
return data.csrfToken;
|
||||
}
|
||||
|
||||
export async function login(email: string, password: string): Promise<void> {
|
||||
const csrfToken = await getCsrfToken();
|
||||
const body = new URLSearchParams({
|
||||
csrfToken,
|
||||
email,
|
||||
password,
|
||||
redirect: "false",
|
||||
json: "true",
|
||||
});
|
||||
|
||||
const response = await fetch(`${API_URL}/api/auth/callback/credentials`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body,
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok || data.error) {
|
||||
throw new Error("Credenziali non valide");
|
||||
}
|
||||
}
|
||||
|
||||
export async function logout(): Promise<void> {
|
||||
const csrfToken = await getCsrfToken();
|
||||
const body = new URLSearchParams({ csrfToken, json: "true" });
|
||||
await fetch(`${API_URL}/api/auth/signout`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body,
|
||||
});
|
||||
}
|
||||
|
||||
export async function getMe(): Promise<Utente> {
|
||||
return request("/api/utenti/me");
|
||||
}
|
||||
|
||||
export async function register(data: {
|
||||
nome: string;
|
||||
cognome: string;
|
||||
email: string;
|
||||
password: string;
|
||||
confermaPassword: string;
|
||||
ruolo: Ruolo;
|
||||
}): Promise<void> {
|
||||
await request("/api/utenti/register", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function getCategorie(): Promise<CategoriaSpesa[]> {
|
||||
return request("/api/categorie-spesa");
|
||||
}
|
||||
|
||||
export async function getDipendenti(): Promise<Pick<Utente, "id" | "nome" | "cognome">[]> {
|
||||
return request("/api/utenti/dipendenti");
|
||||
}
|
||||
|
||||
export async function getRimborsi(filters: {
|
||||
stato?: StatoRichiesta;
|
||||
categoriaId?: number;
|
||||
mese?: string;
|
||||
dipendenteId?: number;
|
||||
}): Promise<RichiestaRimborso[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (filters.stato) params.set("stato", filters.stato);
|
||||
if (filters.categoriaId) params.set("categoriaId", String(filters.categoriaId));
|
||||
if (filters.mese) params.set("mese", filters.mese);
|
||||
if (filters.dipendenteId) params.set("dipendenteId", String(filters.dipendenteId));
|
||||
const qs = params.toString();
|
||||
return request(`/api/rimborsi${qs ? `?${qs}` : ""}`);
|
||||
}
|
||||
|
||||
export async function getRimborso(id: number): Promise<RichiestaRimborso> {
|
||||
return request(`/api/rimborsi/${id}`);
|
||||
}
|
||||
|
||||
export async function createRimborso(data: {
|
||||
dataSpesa: string;
|
||||
categoriaId: number;
|
||||
importo: number;
|
||||
descrizione: string;
|
||||
riferimentoGiustificativo?: string;
|
||||
}): Promise<RichiestaRimborso> {
|
||||
return request("/api/rimborsi", { method: "POST", body: JSON.stringify(data) });
|
||||
}
|
||||
|
||||
export async function updateRimborso(
|
||||
id: number,
|
||||
data: {
|
||||
dataSpesa: string;
|
||||
categoriaId: number;
|
||||
importo: number;
|
||||
descrizione: string;
|
||||
riferimentoGiustificativo?: string;
|
||||
}
|
||||
): Promise<RichiestaRimborso> {
|
||||
return request(`/api/rimborsi/${id}`, { method: "PUT", body: JSON.stringify(data) });
|
||||
}
|
||||
|
||||
export async function deleteRimborso(id: number): Promise<void> {
|
||||
await request(`/api/rimborsi/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
export async function approvaRimborso(id: number): Promise<RichiestaRimborso> {
|
||||
return request(`/api/rimborsi/${id}/approva`, { method: "PUT", body: "{}" });
|
||||
}
|
||||
|
||||
export async function rifiutaRimborso(id: number, motivazione?: string): Promise<RichiestaRimborso> {
|
||||
return request(`/api/rimborsi/${id}/rifiuta`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({ motivazione }),
|
||||
});
|
||||
}
|
||||
|
||||
export async function liquidaRimborso(id: number): Promise<RichiestaRimborso> {
|
||||
return request(`/api/rimborsi/${id}/liquida`, { method: "PUT", body: "{}" });
|
||||
}
|
||||
|
||||
export async function getStatistiche(filters: {
|
||||
mese?: string;
|
||||
categoriaId?: number;
|
||||
dipendenteId?: number;
|
||||
}): Promise<StatisticaRimborso[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (filters.mese) params.set("mese", filters.mese);
|
||||
if (filters.categoriaId) params.set("categoriaId", String(filters.categoriaId));
|
||||
if (filters.dipendenteId) params.set("dipendenteId", String(filters.dipendenteId));
|
||||
const qs = params.toString();
|
||||
return request(`/api/statistiche/rimborsi${qs ? `?${qs}` : ""}`);
|
||||
}
|
||||
|
|
|
|||
50
src/components/FiltriRimborsi.tsx
Normal file
50
src/components/FiltriRimborsi.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import type { CategoriaSpesa, StatoRichiesta, Utente } from "../types";
|
||||
import { STATO_LABELS } from "../types";
|
||||
|
||||
interface Props {
|
||||
filtri: { stato: string; categoriaId: string; mese: string; dipendenteId: string };
|
||||
onChange: (filtri: Props["filtri"]) => void;
|
||||
categorie: CategoriaSpesa[];
|
||||
dipendenti?: Pick<Utente, "id" | "nome" | "cognome">[];
|
||||
showDipendente?: boolean;
|
||||
}
|
||||
|
||||
export default function FiltriRimborsi({ filtri, onChange, categorie, dipendenti, showDipendente }: Props) {
|
||||
return (
|
||||
<div className="filters">
|
||||
<label>
|
||||
Stato
|
||||
<select value={filtri.stato} onChange={(e) => onChange({ ...filtri, stato: e.target.value })}>
|
||||
<option value="">Tutti</option>
|
||||
{(Object.keys(STATO_LABELS) as StatoRichiesta[]).map((s) => (
|
||||
<option key={s} value={s}>{STATO_LABELS[s]}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Categoria
|
||||
<select value={filtri.categoriaId} onChange={(e) => onChange({ ...filtri, categoriaId: e.target.value })}>
|
||||
<option value="">Tutte</option>
|
||||
{categorie.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.descrizione}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Mese
|
||||
<input type="month" value={filtri.mese} onChange={(e) => onChange({ ...filtri, mese: e.target.value })} />
|
||||
</label>
|
||||
{showDipendente && dipendenti && (
|
||||
<label>
|
||||
Dipendente
|
||||
<select value={filtri.dipendenteId} onChange={(e) => onChange({ ...filtri, dipendenteId: e.target.value })}>
|
||||
<option value="">Tutti</option>
|
||||
{dipendenti.map((d) => (
|
||||
<option key={d.id} value={d.id}>{d.cognome} {d.nome}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/components/Layout.tsx
Normal file
38
src/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { Link, Outlet, useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export default function Layout() {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const isAdmin = user?.ruolo === "RESPONSABILE_AMMINISTRATIVO";
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<header className="header">
|
||||
<div className="header-inner">
|
||||
<Link to="/dashboard" className="logo">
|
||||
Rimborsi Spese
|
||||
</Link>
|
||||
<nav>
|
||||
<Link to="/dashboard">Dashboard</Link>
|
||||
<Link to="/rimborsi">Richieste</Link>
|
||||
{user?.ruolo === "DIPENDENTE" && <Link to="/rimborsi/nuova">Nuova richiesta</Link>}
|
||||
{isAdmin && <Link to="/statistiche">Statistiche</Link>}
|
||||
</nav>
|
||||
<div className="user-bar">
|
||||
<span>{user?.nome} {user?.cognome}</span>
|
||||
<button type="button" onClick={handleLogout}>Esci</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="main">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
src/components/ProtectedRoute.tsx
Normal file
19
src/components/ProtectedRoute.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { Navigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import type { Ruolo } from "../types";
|
||||
|
||||
export default function ProtectedRoute({
|
||||
children,
|
||||
roles,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
roles?: Ruolo[];
|
||||
}) {
|
||||
const { user, loading } = useAuth();
|
||||
|
||||
if (loading) return <p className="loading">Caricamento...</p>;
|
||||
if (!user) return <Navigate to="/login" replace />;
|
||||
if (roles && !roles.includes(user.ruolo)) return <Navigate to="/dashboard" replace />;
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
5
src/components/StatoBadge.tsx
Normal file
5
src/components/StatoBadge.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { STATO_LABELS, type StatoRichiesta } from "../types";
|
||||
|
||||
export default function StatoBadge({ stato }: { stato: StatoRichiesta }) {
|
||||
return <span className={`badge badge-${stato.toLowerCase()}`}>{STATO_LABELS[stato]}</span>;
|
||||
}
|
||||
53
src/context/AuthContext.tsx
Normal file
53
src/context/AuthContext.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
|
||||
import { getMe, login as apiLogin, logout as apiLogout } from "../api/client";
|
||||
import type { Utente } from "../types";
|
||||
|
||||
interface AuthContextValue {
|
||||
user: Utente | null;
|
||||
loading: boolean;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
refresh: () => Promise<void>;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<Utente | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const me = await getMe();
|
||||
setUser(me);
|
||||
} catch {
|
||||
setUser(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
refresh().finally(() => setLoading(false));
|
||||
}, [refresh]);
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
await apiLogin(email, password);
|
||||
await refresh();
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
await apiLogout();
|
||||
setUser(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, loading, login, logout, refresh }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuth deve essere usato dentro AuthProvider");
|
||||
return ctx;
|
||||
}
|
||||
112
src/index.css
112
src/index.css
|
|
@ -1,111 +1,21 @@
|
|||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
background: #f1f5f9;
|
||||
color: #1e293b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
a {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
|
|
|||
34
src/pages/Dashboard.tsx
Normal file
34
src/pages/Dashboard.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export default function Dashboard() {
|
||||
const { user } = useAuth();
|
||||
const isAdmin = user?.ruolo === "RESPONSABILE_AMMINISTRATIVO";
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>Dashboard</h1>
|
||||
<p>Benvenuto, <strong>{user?.nome} {user?.cognome}</strong></p>
|
||||
<p className="muted">Ruolo: {isAdmin ? "Responsabile amministrativo" : "Dipendente"}</p>
|
||||
|
||||
<div className="card-grid">
|
||||
<Link to="/rimborsi" className="card">
|
||||
<h3>Richieste di rimborso</h3>
|
||||
<p>{isAdmin ? "Visualizza e gestisci tutte le richieste" : "Visualizza le tue richieste"}</p>
|
||||
</Link>
|
||||
{!isAdmin && (
|
||||
<Link to="/rimborsi/nuova" className="card">
|
||||
<h3>Nuova richiesta</h3>
|
||||
<p>Inserisci una nuova spesa da rimborsare</p>
|
||||
</Link>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<Link to="/statistiche" className="card">
|
||||
<h3>Statistiche</h3>
|
||||
<p>Riepilogo per mese e categoria</p>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
src/pages/Home.tsx
Normal file
16
src/pages/Home.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="auth-card">
|
||||
<h1>Gestione Rimborsi Spese</h1>
|
||||
<p>Sistema aziendale per la gestione delle richieste di rimborso spese.</p>
|
||||
<div className="auth-actions">
|
||||
<Link to="/login" className="btn btn-primary">Accedi</Link>
|
||||
<Link to="/register" className="btn btn-secondary">Registrati</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/pages/Login.tsx
Normal file
49
src/pages/Login.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { useState, type FormEvent } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export default function Login() {
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email, password);
|
||||
navigate("/dashboard");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Errore di accesso");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<form className="auth-card" onSubmit={handleSubmit}>
|
||||
<h1>Accedi</h1>
|
||||
{error && <p className="error">{error}</p>}
|
||||
<label>
|
||||
Email
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||||
</label>
|
||||
<button type="submit" className="btn btn-primary" disabled={loading}>
|
||||
{loading ? "Accesso..." : "Accedi"}
|
||||
</button>
|
||||
<p className="auth-link">
|
||||
Non hai un account? <Link to="/register">Registrati</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
src/pages/Register.tsx
Normal file
78
src/pages/Register.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { useState, type FormEvent } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { register } from "../api/client";
|
||||
import type { Ruolo } from "../types";
|
||||
|
||||
export default function Register() {
|
||||
const navigate = useNavigate();
|
||||
const [form, setForm] = useState({
|
||||
nome: "",
|
||||
cognome: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confermaPassword: "",
|
||||
ruolo: "DIPENDENTE" as Ruolo,
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
await register(form);
|
||||
setSuccess("Registrazione completata. Ora puoi accedere.");
|
||||
setTimeout(() => navigate("/login"), 1500);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Errore di registrazione");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<form className="auth-card" onSubmit={handleSubmit}>
|
||||
<h1>Registrati</h1>
|
||||
{error && <p className="error">{error}</p>}
|
||||
{success && <p className="success">{success}</p>}
|
||||
<label>
|
||||
Nome
|
||||
<input value={form.nome} onChange={(e) => setForm({ ...form, nome: e.target.value })} required />
|
||||
</label>
|
||||
<label>
|
||||
Cognome
|
||||
<input value={form.cognome} onChange={(e) => setForm({ ...form, cognome: e.target.value })} required />
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
<input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required />
|
||||
</label>
|
||||
<label>
|
||||
Conferma password
|
||||
<input type="password" value={form.confermaPassword} onChange={(e) => setForm({ ...form, confermaPassword: e.target.value })} required />
|
||||
</label>
|
||||
<label>
|
||||
Ruolo
|
||||
<select value={form.ruolo} onChange={(e) => setForm({ ...form, ruolo: e.target.value as Ruolo })}>
|
||||
<option value="DIPENDENTE">Dipendente</option>
|
||||
<option value="RESPONSABILE_AMMINISTRATIVO">Responsabile amministrativo</option>
|
||||
</select>
|
||||
</label>
|
||||
<button type="submit" className="btn btn-primary" disabled={loading}>
|
||||
{loading ? "Registrazione..." : "Registrati"}
|
||||
</button>
|
||||
<p className="auth-link">
|
||||
Hai già un account? <Link to="/login">Accedi</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
src/pages/RimborsiList.tsx
Normal file
99
src/pages/RimborsiList.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { getCategorie, getDipendenti, getRimborsi } from "../api/client";
|
||||
import FiltriRimborsi from "../components/FiltriRimborsi";
|
||||
import StatoBadge from "../components/StatoBadge";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import type { CategoriaSpesa, RichiestaRimborso, StatoRichiesta, Utente } from "../types";
|
||||
|
||||
function formatDate(d: string) {
|
||||
return new Date(d).toLocaleDateString("it-IT");
|
||||
}
|
||||
|
||||
function formatEuro(n: number) {
|
||||
return n.toLocaleString("it-IT", { style: "currency", currency: "EUR" });
|
||||
}
|
||||
|
||||
export default function RimborsiList() {
|
||||
const { user } = useAuth();
|
||||
const isAdmin = user?.ruolo === "RESPONSABILE_AMMINISTRATIVO";
|
||||
const [rimborsi, setRimborsi] = useState<RichiestaRimborso[]>([]);
|
||||
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(),
|
||||
isAdmin ? getDipendenti() : Promise.resolve([]),
|
||||
]).then(([cats, dips]) => {
|
||||
setCategorie(cats);
|
||||
setDipendenti(dips);
|
||||
});
|
||||
}, [isAdmin]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
getRimborsi({
|
||||
stato: (filtri.stato as StatoRichiesta) || undefined,
|
||||
categoriaId: filtri.categoriaId ? Number(filtri.categoriaId) : undefined,
|
||||
mese: filtri.mese || undefined,
|
||||
dipendenteId: filtri.dipendenteId ? Number(filtri.dipendenteId) : undefined,
|
||||
})
|
||||
.then(setRimborsi)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [filtri]);
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<h1>Richieste di rimborso</h1>
|
||||
{!isAdmin && <Link to="/rimborsi/nuova" className="btn btn-primary">Nuova richiesta</Link>}
|
||||
</div>
|
||||
|
||||
<FiltriRimborsi
|
||||
filtri={filtri}
|
||||
onChange={setFiltri}
|
||||
categorie={categorie}
|
||||
dipendenti={dipendenti}
|
||||
showDipendente={isAdmin}
|
||||
/>
|
||||
|
||||
{error && <p className="error">{error}</p>}
|
||||
{loading ? (
|
||||
<p className="loading">Caricamento...</p>
|
||||
) : rimborsi.length === 0 ? (
|
||||
<p className="muted">Nessuna richiesta trovata.</p>
|
||||
) : (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Data spesa</th>
|
||||
<th>Categoria</th>
|
||||
{isAdmin && <th>Dipendente</th>}
|
||||
<th>Importo</th>
|
||||
<th>Stato</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rimborsi.map((r) => (
|
||||
<tr key={r.id}>
|
||||
<td>{formatDate(r.dataSpesa)}</td>
|
||||
<td>{r.categoria}</td>
|
||||
{isAdmin && <td>{r.dipendenteNome}</td>}
|
||||
<td>{formatEuro(r.importo)}</td>
|
||||
<td><StatoBadge stato={r.stato} /></td>
|
||||
<td><Link to={`/rimborsi/${r.id}`}>Dettaglio</Link></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
135
src/pages/RimborsoDetail.tsx
Normal file
135
src/pages/RimborsoDetail.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
approvaRimborso,
|
||||
deleteRimborso,
|
||||
getRimborso,
|
||||
liquidaRimborso,
|
||||
rifiutaRimborso,
|
||||
} from "../api/client";
|
||||
import StatoBadge from "../components/StatoBadge";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import type { RichiestaRimborso } from "../types";
|
||||
|
||||
function formatDateTime(d: string | null) {
|
||||
return d ? new Date(d).toLocaleString("it-IT") : "—";
|
||||
}
|
||||
|
||||
function formatDate(d: string) {
|
||||
return new Date(d).toLocaleDateString("it-IT");
|
||||
}
|
||||
|
||||
function formatEuro(n: number) {
|
||||
return n.toLocaleString("it-IT", { style: "currency", currency: "EUR" });
|
||||
}
|
||||
|
||||
export default function RimborsoDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const isAdmin = user?.ruolo === "RESPONSABILE_AMMINISTRATIVO";
|
||||
const [rimborso, setRimborso] = useState<RichiestaRimborso | null>(null);
|
||||
const [motivazione, setMotivazione] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const load = () => {
|
||||
getRimborso(Number(id))
|
||||
.then(setRimborso)
|
||||
.catch((err) => setError(err.message));
|
||||
};
|
||||
|
||||
useEffect(() => { load(); }, [id]);
|
||||
|
||||
const runAction = async (action: () => Promise<RichiestaRimborso>, successMsg: string) => {
|
||||
setError(null);
|
||||
setMessage(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const updated = await action();
|
||||
setRimborso(updated);
|
||||
setMessage(successMsg);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Operazione fallita");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("Eliminare questa richiesta?")) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await deleteRimborso(Number(id));
|
||||
navigate("/rimborsi");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Eliminazione fallita");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!rimborso) return <p className="loading">Caricamento...</p>;
|
||||
|
||||
const canEdit = !isAdmin && rimborso.stato === "IN_ATTESA" && rimborso.dipendenteId === user?.id;
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<h1>Dettaglio richiesta #{rimborso.id}</h1>
|
||||
<Link to="/rimborsi" className="btn btn-secondary">Torna all'elenco</Link>
|
||||
</div>
|
||||
|
||||
{error && <p className="error">{error}</p>}
|
||||
{message && <p className="success">{message}</p>}
|
||||
|
||||
<div className="detail-card">
|
||||
<dl className="detail-grid">
|
||||
<dt>Stato</dt><dd><StatoBadge stato={rimborso.stato} /></dd>
|
||||
<dt>Data spesa</dt><dd>{formatDate(rimborso.dataSpesa)}</dd>
|
||||
<dt>Categoria</dt><dd>{rimborso.categoria}</dd>
|
||||
<dt>Importo</dt><dd>{formatEuro(rimborso.importo)}</dd>
|
||||
<dt>Descrizione</dt><dd>{rimborso.descrizione}</dd>
|
||||
<dt>Giustificativo</dt><dd>{rimborso.riferimentoGiustificativo ?? "—"}</dd>
|
||||
<dt>Dipendente</dt><dd>{rimborso.dipendenteNome}</dd>
|
||||
<dt>Data inserimento</dt><dd>{formatDateTime(rimborso.dataInserimento)}</dd>
|
||||
<dt>Data valutazione</dt><dd>{formatDateTime(rimborso.dataValutazione)}</dd>
|
||||
<dt>Responsabile</dt><dd>{rimborso.responsabileNome ?? "—"}</dd>
|
||||
<dt>Motivazione rifiuto</dt><dd>{rimborso.motivazioneRifiuto ?? "—"}</dd>
|
||||
<dt>Data liquidazione</dt><dd>{formatDateTime(rimborso.dataLiquidazione)}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
{canEdit && (
|
||||
<>
|
||||
<Link to={`/rimborsi/${rimborso.id}/modifica`} className="btn btn-primary">Modifica</Link>
|
||||
<button type="button" className="btn btn-danger" onClick={handleDelete} disabled={loading}>Elimina</button>
|
||||
</>
|
||||
)}
|
||||
{isAdmin && rimborso.stato === "IN_ATTESA" && (
|
||||
<>
|
||||
<button type="button" className="btn btn-primary" disabled={loading}
|
||||
onClick={() => runAction(() => approvaRimborso(rimborso.id), "Richiesta approvata")}>
|
||||
Approva
|
||||
</button>
|
||||
<div className="reject-box">
|
||||
<input placeholder="Motivazione rifiuto (opzionale)" value={motivazione}
|
||||
onChange={(e) => setMotivazione(e.target.value)} />
|
||||
<button type="button" className="btn btn-danger" disabled={loading}
|
||||
onClick={() => runAction(() => rifiutaRimborso(rimborso.id, motivazione), "Richiesta rifiutata")}>
|
||||
Rifiuta
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{isAdmin && rimborso.stato === "APPROVATA" && (
|
||||
<button type="button" className="btn btn-primary" disabled={loading}
|
||||
onClick={() => runAction(() => liquidaRimborso(rimborso.id), "Rimborso liquidato")}>
|
||||
Registra liquidazione
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
src/pages/RimborsoForm.tsx
Normal file
103
src/pages/RimborsoForm.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { useEffect, useState, type FormEvent } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { createRimborso, getCategorie, getRimborso, updateRimborso } from "../api/client";
|
||||
|
||||
export default function RimborsoForm() {
|
||||
const { id } = useParams();
|
||||
const isEdit = Boolean(id);
|
||||
const navigate = useNavigate();
|
||||
const [categorie, setCategorie] = useState<{ id: number; descrizione: string }[]>([]);
|
||||
const [form, setForm] = useState({
|
||||
dataSpesa: "",
|
||||
categoriaId: "",
|
||||
importo: "",
|
||||
descrizione: "",
|
||||
riferimentoGiustificativo: "",
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
getCategorie().then((cats) => {
|
||||
setCategorie(cats);
|
||||
if (!isEdit && cats.length) setForm((f) => ({ ...f, categoriaId: String(cats[0].id) }));
|
||||
});
|
||||
}, [isEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
getRimborso(Number(id)).then((r) => {
|
||||
setForm({
|
||||
dataSpesa: r.dataSpesa.slice(0, 10),
|
||||
categoriaId: String(r.categoriaId),
|
||||
importo: String(r.importo),
|
||||
descrizione: r.descrizione,
|
||||
riferimentoGiustificativo: r.riferimentoGiustificativo ?? "",
|
||||
});
|
||||
}).catch((err) => setError(err.message));
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
const payload = {
|
||||
dataSpesa: form.dataSpesa,
|
||||
categoriaId: Number(form.categoriaId),
|
||||
importo: Number(form.importo),
|
||||
descrizione: form.descrizione,
|
||||
riferimentoGiustificativo: form.riferimentoGiustificativo || undefined,
|
||||
};
|
||||
try {
|
||||
if (isEdit) {
|
||||
await updateRimborso(Number(id), payload);
|
||||
} else {
|
||||
await createRimborso(payload);
|
||||
}
|
||||
navigate("/rimborsi");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Errore nel salvataggio");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>{isEdit ? "Modifica richiesta" : "Nuova richiesta di rimborso"}</h1>
|
||||
<form className="form-card" onSubmit={handleSubmit}>
|
||||
{error && <p className="error">{error}</p>}
|
||||
<label>
|
||||
Data spesa
|
||||
<input type="date" value={form.dataSpesa} onChange={(e) => setForm({ ...form, dataSpesa: e.target.value })} required />
|
||||
</label>
|
||||
<label>
|
||||
Categoria
|
||||
<select value={form.categoriaId} onChange={(e) => setForm({ ...form, categoriaId: e.target.value })} required>
|
||||
{categorie.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.descrizione}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Importo (€)
|
||||
<input type="number" step="0.01" min="0.01" value={form.importo} onChange={(e) => setForm({ ...form, importo: e.target.value })} required />
|
||||
</label>
|
||||
<label>
|
||||
Descrizione
|
||||
<textarea value={form.descrizione} onChange={(e) => setForm({ ...form, descrizione: e.target.value })} required rows={3} />
|
||||
</label>
|
||||
<label>
|
||||
Riferimento giustificativo
|
||||
<input value={form.riferimentoGiustificativo} onChange={(e) => setForm({ ...form, riferimentoGiustificativo: e.target.value })} />
|
||||
</label>
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn btn-primary" disabled={loading}>
|
||||
{loading ? "Salvataggio..." : "Salva"}
|
||||
</button>
|
||||
<Link to="/rimborsi" className="btn btn-secondary">Annulla</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
src/pages/Statistiche.tsx
Normal file
82
src/pages/Statistiche.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
50
src/types/index.ts
Normal file
50
src/types/index.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
export type Ruolo = "DIPENDENTE" | "RESPONSABILE_AMMINISTRATIVO";
|
||||
export type StatoRichiesta = "IN_ATTESA" | "APPROVATA" | "RIFIUTATA" | "LIQUIDATA";
|
||||
|
||||
export interface Utente {
|
||||
id: number;
|
||||
nome: string;
|
||||
cognome: string;
|
||||
email: string;
|
||||
ruolo: Ruolo;
|
||||
}
|
||||
|
||||
export interface CategoriaSpesa {
|
||||
id: number;
|
||||
descrizione: string;
|
||||
}
|
||||
|
||||
export interface RichiestaRimborso {
|
||||
id: number;
|
||||
dataInserimento: string;
|
||||
dataSpesa: string;
|
||||
categoriaId: number;
|
||||
categoria: string;
|
||||
importo: number;
|
||||
descrizione: string;
|
||||
riferimentoGiustificativo: string | null;
|
||||
stato: StatoRichiesta;
|
||||
dipendenteId: number;
|
||||
dipendenteNome: string;
|
||||
dataValutazione: string | null;
|
||||
responsabileValutazioneId: number | null;
|
||||
responsabileNome: string | null;
|
||||
motivazioneRifiuto: string | null;
|
||||
dataLiquidazione: string | null;
|
||||
}
|
||||
|
||||
export interface StatisticaRimborso {
|
||||
mese: string;
|
||||
categoria: string;
|
||||
numeroRichieste: number;
|
||||
totaleRichiesto: number;
|
||||
totaleApprovato: number;
|
||||
totaleLiquidato: number;
|
||||
}
|
||||
|
||||
export const STATO_LABELS: Record<StatoRichiesta, string> = {
|
||||
IN_ATTESA: "In attesa",
|
||||
APPROVATA: "Approvata",
|
||||
RIFIUTATA: "Rifiutata",
|
||||
LIQUIDATA: "Liquidata",
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue