Modif_GestionDoublonsGTARH_Fonctionnel_V1
This commit is contained in:
@@ -0,0 +1,172 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Shield, AlertCircle } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PublicClientApplication } from "@azure/msal-browser";
|
||||
import { toast } from "sonner";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import gtarhLogo from "@/assets/GTARH.png";
|
||||
|
||||
const msalConfig = {
|
||||
auth: {
|
||||
clientId: "4bb4cc24-bac3-427c-b02c-5d14fc67b561",
|
||||
authority: "https://login.microsoftonline.com/9840a2a0-6ae1-4688-b03d-d2ec291be0f9", // ⚠️ tenantId
|
||||
redirectUri: "https://mygta-rh.ensup-adm.net", // URL frontend
|
||||
},
|
||||
cache: {
|
||||
cacheLocation: "sessionStorage",
|
||||
storeAuthStateInCookie: false,
|
||||
},
|
||||
};
|
||||
|
||||
const msalInstance = new PublicClientApplication(msalConfig);
|
||||
|
||||
const AuthMicrosoft = () => {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
msalInstance.initialize().then(() => {
|
||||
handleRedirect();
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleRedirect = async () => {
|
||||
try {
|
||||
const response = await msalInstance.handleRedirectPromise();
|
||||
if (response && response.accessToken) {
|
||||
await authenticateWithBackend(response.accessToken);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
setError("Erreur lors de l'authentification Microsoft");
|
||||
}
|
||||
};
|
||||
|
||||
// 🔑 Envoie accessToken au backend
|
||||
const authenticateWithBackend = async (accessToken: string) => {
|
||||
try {
|
||||
const response = await fetch('/api/login-dev', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ accessToken: accessToken }) // ✅ Changer 'code' en 'accessToken'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || 'Authentification échouée');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
|
||||
toast.success(`Bienvenue ${data.user.prenom} ${data.user.nom}`);
|
||||
navigate("/dashboard");
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
toast.error(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const loginRequest = {
|
||||
scopes: ["User.Read", "email", "profile", "openid"],
|
||||
prompt: "select_account",
|
||||
};
|
||||
|
||||
await msalInstance.loginRedirect(loginRequest);
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
setError("Erreur lors de la connexion à Microsoft");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md space-y-6 animate-in fade-in duration-500">
|
||||
<div className="flex justify-center mb-8">
|
||||
<img
|
||||
src={gtarhLogo}
|
||||
alt="GTARH Logo"
|
||||
className="w- h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-elegant border-0" style={{ marginTop: '-147px' }}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-[#7e5aa2]" >
|
||||
<Shield className="w-5 h-5 text-[#7e5aa2]" />
|
||||
Connexion sécurisée
|
||||
</CardTitle>
|
||||
<CardDescription>Réservé aux collaborateurs RH</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4 text-[#7e5aa2]" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleLogin}
|
||||
disabled={loading}
|
||||
className="w-full h-12 bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
|
||||
Connexion en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
className="w-5 h-5 mr-2"
|
||||
viewBox="0 0 21 21"
|
||||
fill="none"
|
||||
>
|
||||
<rect x="1" y="1" width="9" height="9" fill="#f25022" />
|
||||
<rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
|
||||
<rect x="11" y="1" width="9" height="9" fill="#7fba00" />
|
||||
<rect x="11" y="11" width="9" height="9" fill="#ffb900" />
|
||||
</svg>
|
||||
Se connecter avec Microsoft
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<div className="pt-4 border-t text-center">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Accès restreint aux comptes autorisés uniquement
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
<p>En vous connectant, vous acceptez les conditions d'utilisation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthMicrosoft;
|
||||
@@ -0,0 +1,887 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Calendar, Lock, Unlock, Download, Menu, AlertCircle,
|
||||
ChevronLeft, ChevronRight, FileText, RefreshCw,
|
||||
Eye, Search, Users, CheckCircle, XCircle, Clock, LogOut, ArrowLeft, Filter
|
||||
} from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
|
||||
const CompteRenduRH = () => {
|
||||
const navigate = useNavigate();
|
||||
const [user, setUser] = useState<any>(null);
|
||||
const [token, setToken] = useState<string>('');
|
||||
|
||||
// États
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [viewMode, setViewMode] = useState('mois');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [collaborateurs, setCollaborateurs] = useState<any[]>([]);
|
||||
const [selectedCollab, setSelectedCollab] = useState<any>(null);
|
||||
const [compteRenduData, setCompteRenduData] = useState<any[]>([]);
|
||||
const [mensuelData, setMensuelData] = useState<any>(null);
|
||||
const [statsGlobales, setStatsGlobales] = useState<any>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
||||
const [selectedJour, setSelectedJour] = useState<any>(null);
|
||||
|
||||
// 🆕 NOUVEAUX ÉTATS POUR LE FILTRE
|
||||
const [services, setServices] = useState<any[]>([]);
|
||||
const [selectedService, setSelectedService] = useState<string>('all');
|
||||
|
||||
const annee = currentDate.getFullYear();
|
||||
const mois = currentDate.getMonth() + 1;
|
||||
|
||||
// ✅ ÉTAPE 1 : Charger l'utilisateur et vérifier l'accès
|
||||
useEffect(() => {
|
||||
const userData = localStorage.getItem('user');
|
||||
const userToken = localStorage.getItem('token');
|
||||
|
||||
if (!userData || !userToken) {
|
||||
toast.error("Session expirée, reconnexion nécessaire");
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
|
||||
const parsedUser = JSON.parse(userData);
|
||||
|
||||
if (!['RH', 'Admin'].includes(parsedUser?.role)) {
|
||||
toast.error("Accès réservé aux RH et Administrateurs");
|
||||
navigate('/dashboard');
|
||||
return;
|
||||
}
|
||||
|
||||
setUser(parsedUser);
|
||||
setToken(userToken);
|
||||
}, [navigate]);
|
||||
|
||||
// 🆕 ÉTAPE 1.5 : Charger la liste des services
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
|
||||
const loadServices = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/compte-rendu/services', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('📋 Services disponibles:', data);
|
||||
setServices(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur chargement services:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadServices();
|
||||
}, [token]);
|
||||
|
||||
// ✅ ÉTAPE 2 : Charger les collaborateurs (avec filtre service côté client)
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
|
||||
const loadCollaborateurs = async () => {
|
||||
console.log('📥 Chargement des collaborateurs...');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// ✅ Charger TOUS les employés
|
||||
const response = await fetch('/api/employes', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
console.log('📊 Réponse API employes:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('❌ Erreur API:', errorText);
|
||||
throw new Error(`Erreur ${response.status}: ${errorText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('📋 Collaborateurs reçus:', data.length);
|
||||
|
||||
// ✅ Filtrer les forfaits jour actifs
|
||||
let forfaitJour = data.filter((emp: any) => {
|
||||
const isForfaitJour = emp.TypeContrat === 'forfait_jour';
|
||||
const isActif = emp.Actif === 1 || emp.Actif === true || emp.Actif === null;
|
||||
return isForfaitJour && isActif;
|
||||
});
|
||||
|
||||
// 🆕 APPLIQUER LE FILTRE SERVICE CÔTÉ CLIENT
|
||||
if (selectedService && selectedService !== 'all') {
|
||||
forfaitJour = forfaitJour.filter((emp: any) =>
|
||||
emp.ServiceId?.toString() === selectedService.toString() ||
|
||||
emp.serviceId?.toString() === selectedService.toString()
|
||||
);
|
||||
console.log(`🔍 Filtré par service ${selectedService}: ${forfaitJour.length} collaborateurs`);
|
||||
}
|
||||
|
||||
console.log('✅ Forfaits jour actifs:', forfaitJour.length);
|
||||
setCollaborateurs(forfaitJour);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('❌ Erreur chargement collaborateurs:', error);
|
||||
toast.error('Erreur lors du chargement des collaborateurs: ' + error.message);
|
||||
setCollaborateurs([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadCollaborateurs();
|
||||
}, [token, selectedService]); // 🆕 Recharger quand le service change
|
||||
|
||||
// ✅ ÉTAPE 3 : Charger les stats globales
|
||||
useEffect(() => {
|
||||
if (!token || collaborateurs.length === 0) return;
|
||||
|
||||
const loadStatsGlobales = async () => {
|
||||
console.log('📊 Chargement stats globales...');
|
||||
|
||||
try {
|
||||
let url = `/api/compte-rendu/stats?annee=${annee}&mois=${mois}`;
|
||||
if (selectedService && selectedService !== 'all') {
|
||||
url += `&service_id=${selectedService}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('✅ Stats globales:', data);
|
||||
setStatsGlobales(data);
|
||||
} else {
|
||||
console.warn('⚠️ Stats non disponibles, utilisation valeurs par défaut');
|
||||
setStatsGlobales({
|
||||
totalCollaborateurs: collaborateurs.length,
|
||||
mensuelsValides: 0,
|
||||
mensuelsEnAttente: collaborateurs.length
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur stats globales:', error);
|
||||
setStatsGlobales({
|
||||
totalCollaborateurs: collaborateurs.length,
|
||||
mensuelsValides: 0,
|
||||
mensuelsEnAttente: collaborateurs.length
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
loadStatsGlobales();
|
||||
}, [token, collaborateurs.length, annee, mois, selectedService]);
|
||||
|
||||
// ✅ ÉTAPE 4 : Charger le compte-rendu quand on sélectionne un collaborateur
|
||||
useEffect(() => {
|
||||
if (!selectedCollab || !token) return;
|
||||
|
||||
const loadCompteRendu = async () => {
|
||||
setIsLoading(true);
|
||||
console.log(`📥 Chargement compte-rendu pour collaborateur ${selectedCollab.id}`);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/compte-rendu-activites?user_id=${selectedCollab.id}&annee=${annee}&mois=${mois}`,
|
||||
{
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erreur ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setCompteRenduData(data.jours || []);
|
||||
setMensuelData(data.mensuel);
|
||||
console.log('✅ Compte-rendu chargé:', data.jours?.length, 'jours');
|
||||
} else {
|
||||
toast.error(data.message || 'Erreur lors du chargement');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('❌ Erreur chargement compte-rendu:', error);
|
||||
toast.error('Erreur lors du chargement du compte-rendu');
|
||||
setCompteRenduData([]);
|
||||
setMensuelData(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadCompteRendu();
|
||||
}, [selectedCollab, annee, mois, token]);
|
||||
|
||||
// Verrouiller/Déverrouiller un mois
|
||||
const handleToggleLock = async (unlock = false) => {
|
||||
if (!selectedCollab || !token) return;
|
||||
|
||||
const action = unlock ? 'déverrouiller' : 'verrouiller';
|
||||
const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
|
||||
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
|
||||
|
||||
if (!confirm(`Confirmer ${action} le mois de ${monthNames[mois - 1]} ${annee} pour ${selectedCollab.nom} ?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const endpoint = unlock
|
||||
? '/api/compte-rendu/deverrouiller'
|
||||
: '/api/compte-rendu/verrouiller';
|
||||
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
collaborateur_id: selectedCollab.id,
|
||||
annee: annee,
|
||||
mois: mois
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
toast.success(`Mois ${action === 'verrouiller' ? 'verrouillé' : 'déverrouillé'} avec succès`);
|
||||
|
||||
// Recharger les données
|
||||
const reloadResponse = await fetch(
|
||||
`/api/compte-rendu-activites?user_id=${selectedCollab.id}&annee=${annee}&mois=${mois}`,
|
||||
{ headers: { 'Authorization': `Bearer ${token}` } }
|
||||
);
|
||||
const reloadData = await reloadResponse.json();
|
||||
if (reloadData.success) {
|
||||
setCompteRenduData(reloadData.jours || []);
|
||||
setMensuelData(reloadData.mensuel);
|
||||
}
|
||||
|
||||
// Recharger les stats
|
||||
let statsUrl = `/api/compte-rendu/stats?annee=${annee}&mois=${mois}`;
|
||||
if (selectedService && selectedService !== 'all') {
|
||||
statsUrl += `&service_id=${selectedService}`;
|
||||
}
|
||||
const statsResponse = await fetch(statsUrl, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
if (statsResponse.ok) {
|
||||
const statsData = await statsResponse.json();
|
||||
setStatsGlobales(statsData);
|
||||
}
|
||||
} else {
|
||||
toast.error(data.message || 'Erreur');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Erreur ${action}:`, error);
|
||||
toast.error('Erreur serveur');
|
||||
}
|
||||
};
|
||||
|
||||
// Export PDF
|
||||
const handleExportPDF = async () => {
|
||||
if (!selectedCollab || !token) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/export-compte-rendu-pdf?user_id=${selectedCollab.id}&annee=${annee}&mois=${mois}`,
|
||||
{
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur lors de l\'export PDF');
|
||||
}
|
||||
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
const data = await response.json();
|
||||
console.log('📄 Données PDF:', data);
|
||||
toast.info(data.message || 'Export PDF en cours de développement');
|
||||
|
||||
const dataWindow = window.open('', '_blank');
|
||||
if (dataWindow) {
|
||||
dataWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Compte-rendu - ${selectedCollab.prenom} ${selectedCollab.nom}</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; padding: 20px; }
|
||||
h1 { color: #0ea5e9; }
|
||||
.info { background: #f0f9ff; padding: 15px; border-radius: 8px; margin: 10px 0; }
|
||||
.label { font-weight: bold; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Compte-rendu d'activités</h1>
|
||||
<div class="info">
|
||||
<p><span class="label">Collaborateur:</span> ${data.data?.collaborateur?.prenom} ${data.data?.collaborateur?.nom}</p>
|
||||
<p><span class="label">Email:</span> ${data.data?.collaborateur?.email}</p>
|
||||
<p><span class="label">Service:</span> ${data.data?.collaborateur?.service || 'Non défini'}</p>
|
||||
<p><span class="label">Période:</span> ${data.data?.periode}</p>
|
||||
</div>
|
||||
<h2>Résumé</h2>
|
||||
<div class="info">
|
||||
<p><span class="label">Jours travaillés:</span> ${data.data?.mensuel?.NbJoursTravailles || 0}</p>
|
||||
<p><span class="label">Non-respect repos quotidien:</span> ${data.data?.mensuel?.NbJoursNonRespectsReposQuotidien || 0}</p>
|
||||
<p><span class="label">Non-respect repos hebdo:</span> ${data.data?.mensuel?.NbJoursNonRespectsReposHebdo || 0}</p>
|
||||
<p><span class="label">Statut:</span> ${data.data?.mensuel?.Verrouille ? '🔒 Verrouillé' : '🔓 Ouvert'}</p>
|
||||
</div>
|
||||
<p style="color: #6b7280; font-size: 12px; margin-top: 20px;">
|
||||
Export généré le ${data.data?.dateExport}<br>
|
||||
Note: La génération PDF sera implémentée prochainement
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
}
|
||||
} else {
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `compte-rendu-${selectedCollab.nom}-${annee}-${String(mois).padStart(2, '0')}.pdf`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
toast.success('PDF téléchargé avec succès');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('❌ Erreur export PDF:', error);
|
||||
toast.error('Erreur lors de l\'export PDF: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Navigation mois
|
||||
const navigateMonth = (direction: string) => {
|
||||
setCurrentDate(prev => {
|
||||
const newDate = new Date(prev);
|
||||
if (direction === 'prev') {
|
||||
newDate.setMonth(prev.getMonth() - 1);
|
||||
} else {
|
||||
newDate.setMonth(prev.getMonth() + 1);
|
||||
}
|
||||
return newDate;
|
||||
});
|
||||
};
|
||||
|
||||
// Ouvrir le détail d'un jour
|
||||
const handleViewDetail = (jourData: any) => {
|
||||
setSelectedJour(jourData);
|
||||
setShowDetailModal(true);
|
||||
};
|
||||
|
||||
// 🆕 Gérer le changement de service
|
||||
const handleServiceChange = (serviceId: string) => {
|
||||
setSelectedService(serviceId);
|
||||
setSelectedCollab(null); // Réinitialiser le collaborateur sélectionné
|
||||
};
|
||||
|
||||
// Filtrer les collaborateurs par recherche
|
||||
const filteredCollaborateurs = collaborateurs.filter(collab =>
|
||||
collab.nom?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
collab.prenom?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
collab.email?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
|
||||
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return '';
|
||||
return new Date(dateStr).toLocaleDateString('fr-FR');
|
||||
};
|
||||
|
||||
const isVerrouille = () => {
|
||||
return mensuelData?.Verrouille === true || mensuelData?.Verrouille === 1;
|
||||
};
|
||||
|
||||
// ✅ Affichage du loader pendant le chargement initial
|
||||
if (isLoading && collaborateurs.length === 0) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<RefreshCw className="w-12 h-12 animate-spin text-cyan-600 mx-auto mb-4" />
|
||||
<p className="text-gray-600">Chargement des collaborateurs...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
{/* Header */}
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate('/dashboard')}
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
Gestion des Comptes-Rendus d'Activités
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Suivi et validation des forfaits jour
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* 🆕 FILTRE PAR SERVICE */}
|
||||
<Card className="shadow-card mb-6">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Filter className="w-5 h-5 text-gray-600" />
|
||||
<div className="flex-1">
|
||||
<label className="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Filtrer par service
|
||||
</label>
|
||||
<select
|
||||
value={selectedService}
|
||||
onChange={(e) => handleServiceChange(e.target.value)}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="all">Tous les services</option>
|
||||
{services.map(service => (
|
||||
<option key={service.Id} value={service.Id.toString()}>
|
||||
{service.Nom} ({service.nombreForfaitJour} forfait{service.nombreForfaitJour > 1 ? 's' : ''} jour)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stats globales */}
|
||||
{statsGlobales && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
<Card className="shadow-card">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-blue-100 rounded-lg">
|
||||
<Users className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Forfaits jour
|
||||
{selectedService !== 'all' && (
|
||||
<span className="ml-1 text-xs text-blue-600">(filtré)</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-foreground">
|
||||
{statsGlobales.totalCollaborateurs}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-green-100 rounded-lg">
|
||||
<CheckCircle className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Mois validés</p>
|
||||
<p className="text-2xl font-bold text-foreground">
|
||||
{statsGlobales.mensuelsValides}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-orange-100 rounded-lg">
|
||||
<Clock className="w-6 h-6 text-orange-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">En attente</p>
|
||||
<p className="text-2xl font-bold text-foreground">
|
||||
{statsGlobales.mensuelsEnAttente}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Liste des collaborateurs */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="shadow-card">
|
||||
<CardHeader className="bg-gradient-to-r from-cyan-500 to-blue-500 text-white">
|
||||
<h2 className="text-lg font-bold flex items-center gap-2">
|
||||
<Users className="w-5 h-5" />
|
||||
Collaborateurs ({collaborateurs.length})
|
||||
{selectedService !== 'all' && (
|
||||
<span className="text-xs bg-white/20 px-2 py-1 rounded">
|
||||
Filtré
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
</CardHeader>
|
||||
|
||||
{/* Recherche */}
|
||||
<CardContent className="p-4 border-b">
|
||||
<div className="relative">
|
||||
<Search className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Liste */}
|
||||
<div className="overflow-y-auto max-h-[600px]">
|
||||
{filteredCollaborateurs.length === 0 ? (
|
||||
<div className="p-4 text-center text-muted-foreground">
|
||||
{searchTerm ? 'Aucun résultat' : 'Aucun collaborateur en forfait jour'}
|
||||
</div>
|
||||
) : (
|
||||
filteredCollaborateurs.map(collab => (
|
||||
<div
|
||||
key={collab.id}
|
||||
onClick={() => setSelectedCollab(collab)}
|
||||
className={`
|
||||
p-4 border-b cursor-pointer transition-all
|
||||
hover:bg-gray-50
|
||||
${selectedCollab?.id === collab.id ? 'bg-blue-50 border-l-4 border-blue-500' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-foreground">
|
||||
{collab.prenom} {collab.nom}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{collab.email}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{collab.service || 'Service non défini'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Détails du compte-rendu */}
|
||||
<div className="lg:col-span-2">
|
||||
{!selectedCollab ? (
|
||||
<Card className="shadow-card p-8 text-center">
|
||||
<Users className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">
|
||||
Sélectionnez un collaborateur pour voir ses comptes-rendus
|
||||
</p>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* En-tête collaborateur */}
|
||||
<Card className="shadow-card">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-foreground">
|
||||
{selectedCollab.prenom} {selectedCollab.nom}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{selectedCollab.email}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isVerrouille() ? (
|
||||
<span className="flex items-center gap-2 px-3 py-1.5 bg-red-100 text-red-700 rounded-lg text-sm font-medium">
|
||||
<Lock className="w-4 h-4" />
|
||||
Verrouillé
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2 px-3 py-1.5 bg-green-100 text-green-700 rounded-lg text-sm font-medium">
|
||||
<Unlock className="w-4 h-4" />
|
||||
Ouvert
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation mois */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
onClick={() => navigateMonth('prev')}
|
||||
className="p-2 hover:bg-gray-100 rounded"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5 text-blue-600" />
|
||||
</button>
|
||||
|
||||
<h3 className="text-lg font-semibold">
|
||||
{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
|
||||
</h3>
|
||||
|
||||
<button
|
||||
onClick={() => navigateMonth('next')}
|
||||
className="p-2 hover:bg-gray-100 rounded"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5 text-blue-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
{isVerrouille() ? (
|
||||
<Button
|
||||
onClick={() => handleToggleLock(true)}
|
||||
className="flex-1 bg-orange-600 hover:bg-orange-700"
|
||||
title="Permettre au collaborateur de modifier ses saisies"
|
||||
>
|
||||
<Unlock className="w-4 h-4 mr-2" />
|
||||
Déverrouiller pour modification
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => handleToggleLock(false)}
|
||||
className="flex-1 bg-green-600 hover:bg-green-700"
|
||||
title="Verrouiller le mois"
|
||||
>
|
||||
<Lock className="w-4 h-4 mr-2" />
|
||||
Verrouiller
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleExportPDF}
|
||||
className="flex-1 bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export PDF
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stats du mois */}
|
||||
{mensuelData && (
|
||||
<Card className="shadow-card">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-bold text-foreground mb-4">
|
||||
Statistiques du mois
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-blue-600">
|
||||
{mensuelData.NbJoursTravailles || 0}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">Jours travaillés</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-orange-600">
|
||||
{mensuelData.NbJoursNonRespectsReposQuotidien || 0}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">Non-respect repos quotidien</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-red-600">
|
||||
{mensuelData.NbJoursNonRespectsReposHebdo || 0}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">Non-respect repos hebdo</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Liste des jours */}
|
||||
<Card className="shadow-card">
|
||||
<CardHeader className="bg-gray-50 border-b">
|
||||
<h3 className="font-bold text-foreground">
|
||||
Jours saisis ({compteRenduData.length})
|
||||
</h3>
|
||||
</CardHeader>
|
||||
|
||||
<div className="divide-y max-h-[500px] overflow-y-auto">
|
||||
{compteRenduData.length === 0 ? (
|
||||
<div className="p-8 text-center text-muted-foreground">
|
||||
<FileText className="w-12 h-12 mx-auto mb-3 opacity-30" />
|
||||
<p>Aucune saisie pour ce mois</p>
|
||||
</div>
|
||||
) : (
|
||||
compteRenduData.map((jour, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 hover:bg-gray-50 transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<p className="font-semibold text-foreground">
|
||||
{formatDate(jour.JourDate)}
|
||||
</p>
|
||||
|
||||
{jour.JourTravaille ? (
|
||||
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
|
||||
Travaillé
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
|
||||
Non travaillé
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!jour.ReposQuotidienRespect && (
|
||||
<span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded">
|
||||
⚠️ Repos quotidien
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!jour.ReposHebdomadaireRespect && (
|
||||
<span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">
|
||||
⚠️ Repos hebdo
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{jour.CommentaireRepos && (
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
💬 {jour.CommentaireRepos}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleViewDetail(jour)}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Modal détail jour */}
|
||||
{showDetailModal && selectedJour && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="bg-gradient-to-r from-cyan-500 to-blue-500 text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-bold">
|
||||
Détail du {formatDate(selectedJour.JourDate)}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowDetailModal(false)}
|
||||
className="text-white hover:bg-white/20 p-1 rounded"
|
||||
>
|
||||
<XCircle className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Statut</p>
|
||||
<p className="font-semibold">
|
||||
{selectedJour.JourTravaille ? '✅ Jour travaillé' : '❌ Jour non travaillé'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Repos quotidien respecté</p>
|
||||
<p className="font-semibold">
|
||||
{selectedJour.ReposQuotidienRespect ? '✅ Oui' : '⚠️ Non'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Repos hebdomadaire respecté</p>
|
||||
<p className="font-semibold">
|
||||
{selectedJour.ReposHebdomadaireRespect ? '✅ Oui' : '⚠️ Non'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{selectedJour.CommentaireRepos && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Commentaire</p>
|
||||
<p className="text-sm bg-gray-50 p-3 rounded">
|
||||
{selectedJour.CommentaireRepos}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Date de saisie</p>
|
||||
<p className="text-sm">
|
||||
{selectedJour.DateSaisie ? formatDate(selectedJour.DateSaisie) : 'Non disponible'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{selectedJour.DateModification && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Dernière modification</p>
|
||||
<p className="text-sm">
|
||||
{formatDate(selectedJour.DateModification)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompteRenduRH;
|
||||
@@ -0,0 +1,563 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Calendar, Users, Clock, CheckCircle, XCircle, AlertCircle,
|
||||
Plus, LogOut, FileSpreadsheet, RefreshCw, Edit, ClipboardList, FileText
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { useSSE } from "@/hooks/useSSE";
|
||||
import { PublicClientApplication } from "@azure/msal-browser";
|
||||
|
||||
// Configuration MSAL
|
||||
const msalConfig = {
|
||||
auth: {
|
||||
clientId: "4bb4cc24-bac3-427c-b02c-5d14fc67b561",
|
||||
authority: "https://login.microsoftonline.com/9840a2a0-6ae1-4688-b03d-d2ec291be0f9",
|
||||
redirectUri: "https://mygta-rh.ensup-adm.net",
|
||||
},
|
||||
cache: {
|
||||
cacheLocation: "sessionStorage",
|
||||
storeAuthStateInCookie: false,
|
||||
},
|
||||
};
|
||||
|
||||
interface Stats {
|
||||
enAttente: number;
|
||||
valideeCeMois: number;
|
||||
nombreEquipes: number;
|
||||
}
|
||||
|
||||
interface Demande {
|
||||
Id: number;
|
||||
nomEmploye: string;
|
||||
typesConge: string;
|
||||
DateDebut: string;
|
||||
Statut: string;
|
||||
}
|
||||
|
||||
const Dashboard = () => {
|
||||
const navigate = useNavigate();
|
||||
const [stats, setStats] = useState<Stats>({ enAttente: 0, valideeCeMois: 0, nombreEquipes: 0 });
|
||||
const [recentRequests, setRecentRequests] = useState<Demande[]>([]);
|
||||
const [user, setUser] = useState<any>(null);
|
||||
const [token, setToken] = useState<string>('');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// ✅ Chargement initial de l'utilisateur
|
||||
useEffect(() => {
|
||||
const userData = localStorage.getItem('user');
|
||||
const userToken = localStorage.getItem('token');
|
||||
|
||||
if (!userData || !userToken) {
|
||||
toast.error("Session expirée, reconnexion nécessaire");
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const parsedUser = JSON.parse(userData);
|
||||
setUser(parsedUser);
|
||||
setToken(userToken);
|
||||
} catch (error) {
|
||||
console.error('Erreur parsing user:', error);
|
||||
toast.error("Erreur lors de la récupération des données utilisateur");
|
||||
navigate('/');
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
// ✅ Fonction de chargement des données
|
||||
const chargerDonnees = async () => {
|
||||
if (!token) {
|
||||
console.log('⏳ Pas de token, attente...');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('📥 Chargement des données du dashboard...');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Charger les stats
|
||||
const respStats = await fetch('/api/stats', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!respStats.ok) {
|
||||
throw new Error(`Erreur stats: ${respStats.status}`);
|
||||
}
|
||||
|
||||
const dataStats = await respStats.json();
|
||||
console.log('📊 Stats reçues:', dataStats);
|
||||
setStats(dataStats);
|
||||
|
||||
// Charger les demandes récentes
|
||||
const respDemandes = await fetch('/api/demandes?limit=5', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!respDemandes.ok) {
|
||||
throw new Error(`Erreur demandes: ${respDemandes.status}`);
|
||||
}
|
||||
|
||||
const dataDemandes = await respDemandes.json();
|
||||
console.log('📋 Demandes reçues:', dataDemandes.length);
|
||||
setRecentRequests(dataDemandes);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error("❌ Erreur chargement données:", error);
|
||||
toast.error("Erreur lors du chargement des données: " + error.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ Charger les données quand le token est disponible
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
chargerDonnees();
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
// 🔔 CONNEXION SSE
|
||||
useSSE((event) => {
|
||||
console.log('🔔 Événement SSE reçu dans Dashboard:', event.type);
|
||||
|
||||
switch (event.type) {
|
||||
case 'connected':
|
||||
console.log('✅ Dashboard connecté au serveur temps réel');
|
||||
toast.success("Connexion temps réel établie", { duration: 2000 });
|
||||
break;
|
||||
|
||||
case 'demande-created':
|
||||
console.log('🆕 Nouvelle demande créée');
|
||||
toast.info("Nouvelle demande de congé", { duration: 3000 });
|
||||
if (token) chargerDonnees();
|
||||
break;
|
||||
|
||||
case 'demande-updated':
|
||||
console.log('🔄 Demande mise à jour');
|
||||
if (token) chargerDonnees();
|
||||
break;
|
||||
|
||||
case 'demande-validated':
|
||||
console.log('✅ Demande validée/refusée');
|
||||
toast.info("Une demande a été traitée", { duration: 3000 });
|
||||
if (token) chargerDonnees();
|
||||
break;
|
||||
|
||||
// 🆕 GESTION DES ANNULATIONS
|
||||
case 'demande-cancelled':
|
||||
console.log('🚫 Demande annulée');
|
||||
toast.warning("Une demande a été annulée", {
|
||||
description: "La liste a été mise à jour",
|
||||
duration: 4000
|
||||
});
|
||||
if (token) chargerDonnees();
|
||||
break;
|
||||
|
||||
case 'demande-deleted':
|
||||
console.log('🗑️ Demande supprimée');
|
||||
if (token) chargerDonnees();
|
||||
break;
|
||||
|
||||
case 'demande-list-updated':
|
||||
console.log('📋 Liste des demandes mise à jour');
|
||||
if (token) chargerDonnees();
|
||||
break;
|
||||
|
||||
case 'heartbeat':
|
||||
// Heartbeat pour garder la connexion
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('❓ Type d\'événement inconnu:', event.type);
|
||||
}
|
||||
});
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const msalInstance = new PublicClientApplication(msalConfig);
|
||||
await msalInstance.initialize();
|
||||
|
||||
const accounts = msalInstance.getAllAccounts();
|
||||
|
||||
if (accounts.length > 0) {
|
||||
// Déconnexion popup au lieu de redirect
|
||||
await msalInstance.logoutPopup({
|
||||
account: accounts[0],
|
||||
mainWindowRedirectUri: "https://mygta-rh.ensup-adm.net"
|
||||
});
|
||||
}
|
||||
|
||||
// Nettoyer tout le stockage
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
sessionStorage.clear();
|
||||
|
||||
toast.success("Déconnexion réussie");
|
||||
navigate("/");
|
||||
} catch (error) {
|
||||
console.error("Erreur déconnexion:", error);
|
||||
// Forcer la déconnexion locale même en cas d'erreur
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
sessionStorage.clear();
|
||||
toast.success("Déconnexion réussie");
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ FONCTION MISE À JOUR AVEC LE STATUT "ANNULÉE"
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "En attente":
|
||||
return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
|
||||
<Clock className="w-3 h-3 mr-1" />
|
||||
En attente
|
||||
</Badge>;
|
||||
case "Validée":
|
||||
return <Badge variant="outline" className="bg-success/10 text-success border-success/20">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Validée
|
||||
</Badge>;
|
||||
case "Refusée":
|
||||
return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">
|
||||
<XCircle className="w-3 h-3 mr-1" />
|
||||
Refusée
|
||||
</Badge>;
|
||||
case "Annulée":
|
||||
return <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-800 dark:text-gray-300">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
Annulée
|
||||
</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline" className="bg-gray-100 text-gray-700">
|
||||
{status}
|
||||
</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return '';
|
||||
try {
|
||||
return new Date(dateString).toLocaleDateString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erreur formatage date:', error);
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
const statsCards = [
|
||||
{
|
||||
title: "Demandes en attente",
|
||||
value: stats.enAttente,
|
||||
icon: Clock,
|
||||
color: "text-warning",
|
||||
bg: "bg-warning/10",
|
||||
action: () => navigate("/validation")
|
||||
},
|
||||
{
|
||||
title: "Validées ce mois",
|
||||
value: stats.valideeCeMois,
|
||||
icon: CheckCircle,
|
||||
color: "text-success",
|
||||
bg: "bg-success/10",
|
||||
action: () => navigate("/validation")
|
||||
},
|
||||
{
|
||||
title: "Total équipes",
|
||||
value: stats.nombreEquipes,
|
||||
icon: Users,
|
||||
color: "text-primary",
|
||||
bg: "bg-primary/10",
|
||||
action: () => navigate("/teams")
|
||||
},
|
||||
];
|
||||
|
||||
const actionCards = [
|
||||
{
|
||||
title: "Saisie manuelle",
|
||||
description: "Enregistrer une demande",
|
||||
icon: Plus,
|
||||
color: "bg-[#7e5aa2]",
|
||||
action: () => navigate("/saisie-manuelle")
|
||||
},
|
||||
{
|
||||
title: "Validation",
|
||||
description: "Valider les demandes",
|
||||
icon: CheckCircle,
|
||||
color: "bg-[#7e5aa2]", // Mauve GTARH comme les autres
|
||||
action: () => navigate("/validation")
|
||||
},
|
||||
|
||||
{
|
||||
title: "Récupération",
|
||||
description: "Gérer les samedis travaillés",
|
||||
icon: Clock,
|
||||
color: "bg-purple-600",
|
||||
action: () => navigate("/gestion-recuperation")
|
||||
},
|
||||
{
|
||||
title: "Export paie",
|
||||
description: "Générer un rapport",
|
||||
icon: FileSpreadsheet,
|
||||
color: "bg-blue-600",
|
||||
action: () => navigate("/export-paie")
|
||||
},
|
||||
{
|
||||
title: "Compteurs",
|
||||
description: "Gérer les soldes",
|
||||
icon: RefreshCw,
|
||||
color: "bg-purple-600",
|
||||
action: () => navigate("/compteurs")
|
||||
},
|
||||
{
|
||||
title: "Équipes",
|
||||
description: "Voir toutes les équipes",
|
||||
icon: Users,
|
||||
color: "bg-indigo-600",
|
||||
action: () => navigate("/teams")
|
||||
},
|
||||
{
|
||||
title: "Historique",
|
||||
description: "Consulter l'historique",
|
||||
icon: ClipboardList,
|
||||
color: "bg-orange-600",
|
||||
action: () => navigate("/historique")
|
||||
},
|
||||
{
|
||||
title: "Comptes-Rendus RH",
|
||||
description: "Gérer les forfaits jour",
|
||||
icon: FileText,
|
||||
color: "bg-cyan-600",
|
||||
action: () => navigate("/compte-rendu-rh")
|
||||
}
|
||||
];
|
||||
|
||||
const handleDeleteRequest = async (id: number) => {
|
||||
if (!confirm("Voulez-vous vraiment supprimer cette demande ?")) return;
|
||||
|
||||
if (!token) {
|
||||
toast.error("Utilisateur non authentifié");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('🗑️ Suppression demande:', id);
|
||||
|
||||
const resp = await fetch(`/api/demandes/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (resp.ok) {
|
||||
toast.success("Demande supprimée avec succès");
|
||||
// Le SSE rechargera automatiquement, mais on peut forcer un rechargement immédiat
|
||||
await chargerDonnees();
|
||||
} else {
|
||||
toast.error(data.error || "Erreur lors de la suppression");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("❌ Erreur suppression:", error);
|
||||
toast.error("Erreur lors de la suppression: " + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ Affichage du loader pendant le chargement initial
|
||||
if (isLoading && !user) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<RefreshCw className="w-12 h-12 animate-spin text-[#7e5aa2] mx-auto mb-4" />
|
||||
<p className="text-gray-600">Chargement du tableau de bord...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<Calendar className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">GTARH</h1>
|
||||
{user && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{user.prenom} {user.nom} - {user.role}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
className="transition-smooth"
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
Déconnexion
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{statsCards.map((stat, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="shadow-card border-0 bg-gradient-card transition-smooth hover:shadow-elegant cursor-pointer"
|
||||
onClick={stat.action}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">{stat.title}</p>
|
||||
<p className="text-3xl font-bold text-foreground">{stat.value}</p>
|
||||
</div>
|
||||
<div className={`w-12 h-12 rounded-xl ${stat.bg} flex items-center justify-center`}>
|
||||
<stat.icon className={`w-6 h-6 ${stat.color}`} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
{actionCards.map((action, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="shadow-card border-0 hover:shadow-elegant transition-smooth cursor-pointer group"
|
||||
onClick={action.action}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl ${action.color} flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform`}>
|
||||
<action.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg mb-1">{action.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{action.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Recent Requests */}
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Demandes récentes</CardTitle>
|
||||
<CardDescription>Les dernières demandes soumises</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => chargerDonnees()}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
Actualiser
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigate("/validation")}
|
||||
>
|
||||
Voir tout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading && recentRequests.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<RefreshCw className="w-12 h-12 animate-spin text-[#7e5aa2] mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Chargement des demandes...</p>
|
||||
</div>
|
||||
) : recentRequests.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{recentRequests.map((request) => (
|
||||
<div
|
||||
key={request.Id}
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-border bg-gradient-card hover:shadow-card transition-smooth cursor-pointer group"
|
||||
onClick={() => navigate(`/modification-demande/${request.Id}`)}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<p className="font-medium text-foreground">{request.nomEmploye}</p>
|
||||
<Badge variant="secondary" className="text-xs">{request.typesConge}</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
À partir du {formatDate(request.DateDebut)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusBadge(request.Statut)}
|
||||
|
||||
{/* Bouton Edit */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/modification-demande/${request.Id}`);
|
||||
}}
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
{/* Bouton Supprimer */}
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteRequest(request.Id);
|
||||
}}
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<AlertCircle className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Aucune demande récente</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@@ -0,0 +1,564 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ArrowLeft, Download, FileSpreadsheet } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import ExcelJS from 'exceljs';
|
||||
|
||||
interface CongeDetail {
|
||||
nb: number;
|
||||
dates: string;
|
||||
}
|
||||
|
||||
interface AutreConge {
|
||||
type: string;
|
||||
nb: number;
|
||||
dates: string;
|
||||
}
|
||||
|
||||
interface DataPaie {
|
||||
employe: string;
|
||||
email: string;
|
||||
service: string;
|
||||
rtt: CongeDetail;
|
||||
cp: CongeDetail;
|
||||
aap: CongeDetail;
|
||||
am: CongeDetail;
|
||||
autres: AutreConge[];
|
||||
}
|
||||
|
||||
const ExportPaie = () => {
|
||||
const navigate = useNavigate();
|
||||
const [mois, setMois] = useState(new Date().getMonth() + 1);
|
||||
const [annee, setAnnee] = useState(new Date().getFullYear());
|
||||
const [dataPaie, setDataPaie] = useState<DataPaie[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const moisOptions = [
|
||||
{ value: 1, label: 'Janvier' }, { value: 2, label: 'Février' },
|
||||
{ value: 3, label: 'Mars' }, { value: 4, label: 'Avril' },
|
||||
{ value: 5, label: 'Mai' }, { value: 6, label: 'Juin' },
|
||||
{ value: 7, label: 'Juillet' }, { value: 8, label: 'Août' },
|
||||
{ value: 9, label: 'Septembre' }, { value: 10, label: 'Octobre' },
|
||||
{ value: 11, label: 'Novembre' }, { value: 12, label: 'Décembre' }
|
||||
];
|
||||
|
||||
const genererRapport = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(
|
||||
`/api/export/paie?mois=${mois}&annee=${annee}`,
|
||||
{ headers: { 'Authorization': `Bearer ${token}` } }
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
console.log('📊 Données reçues:', data);
|
||||
|
||||
setDataPaie(data);
|
||||
toast.success(`Rapport généré avec succès (${data.length} employé${data.length > 1 ? 's' : ''})`);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur:', error);
|
||||
toast.error("Erreur lors de la génération du rapport");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const exporterExcel = async () => {
|
||||
if (dataPaie.length === 0) return toast.error("Aucune donnée à exporter");
|
||||
|
||||
const moisLabel = moisOptions.find(m => m.value === mois)?.label || 'Inconnu';
|
||||
|
||||
try {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet(`Congés ${moisLabel}`);
|
||||
|
||||
// ✅ MODIFICATION : Colonnes sans Email
|
||||
worksheet.columns = [
|
||||
{ header: 'Collaborateur', key: 'collaborateur', width: 20 },
|
||||
{ header: 'Service', key: 'service', width: 20 },
|
||||
{ header: 'RTT Nb', key: 'rtt_nb', width: 10 },
|
||||
{ header: 'RTT Dates', key: 'rtt_dates', width: 25 },
|
||||
{ header: 'CP Nb', key: 'cp_nb', width: 10 },
|
||||
{ header: 'CP Dates', key: 'cp_dates', width: 25 },
|
||||
{ header: 'AAP Nb', key: 'aap_nb', width: 10 },
|
||||
{ header: 'AAP Dates', key: 'aap_dates', width: 25 },
|
||||
{ header: 'AM Nb', key: 'am_nb', width: 10 },
|
||||
{ header: 'AM Dates', key: 'am_dates', width: 25 },
|
||||
{ header: 'Autres Type', key: 'autres_type', width: 20 },
|
||||
{ header: 'Autres Nb', key: 'autres_nb', width: 10 },
|
||||
{ header: 'Autres Dates', key: 'autres_dates', width: 30 }
|
||||
];
|
||||
|
||||
// Style de l'en-tête
|
||||
worksheet.getRow(1).height = 35;
|
||||
worksheet.getRow(1).font = { bold: true, color: { argb: 'FFFFFFFF' }, size: 12 };
|
||||
worksheet.getRow(1).alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
|
||||
worksheet.getRow(1).fill = {
|
||||
type: 'pattern',
|
||||
pattern: 'solid',
|
||||
fgColor: { argb: 'FF7e5aa2' }
|
||||
};
|
||||
|
||||
// Bordures ÉPAISSES pour l'en-tête
|
||||
worksheet.getRow(1).eachCell((cell) => {
|
||||
cell.border = {
|
||||
top: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
left: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
bottom: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
right: { style: 'medium', color: { argb: 'FF000000' } }
|
||||
};
|
||||
});
|
||||
|
||||
let currentRow = 2;
|
||||
|
||||
// Ajouter les données avec fusion de cellules
|
||||
dataPaie.forEach((row, employeIndex) => {
|
||||
const startRow = currentRow;
|
||||
|
||||
// ✅ MODIFICATION : Extraire uniquement le nom (dernier mot)
|
||||
const nomComplet = row.employe.split(' ');
|
||||
const nomSeul = nomComplet[nomComplet.length - 1]; // Prend le dernier mot (le nom)
|
||||
|
||||
// Calculer le nombre maximum de lignes nécessaires pour cet employé
|
||||
const rttDatesArray = row.rtt?.dates ? row.rtt.dates.split(' ; ') : [];
|
||||
const cpDatesArray = row.cp?.dates ? row.cp.dates.split(' ; ') : [];
|
||||
const aapDatesArray = row.aap?.dates ? row.aap.dates.split(' ; ') : [];
|
||||
const amDatesArray = row.am?.dates ? row.am.dates.split(' ; ') : [];
|
||||
|
||||
// Gérer les "Autres"
|
||||
let autresDatesArray: string[][] = [];
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
autresDatesArray = row.autres.map(a => a.dates.split(' ; '));
|
||||
}
|
||||
const maxAutresDates = Math.max(...autresDatesArray.map(arr => arr.length), 1);
|
||||
|
||||
const maxRows = Math.max(
|
||||
rttDatesArray.length || 1,
|
||||
cpDatesArray.length || 1,
|
||||
aapDatesArray.length || 1,
|
||||
amDatesArray.length || 1,
|
||||
maxAutresDates
|
||||
);
|
||||
|
||||
// Ajouter les lignes nécessaires
|
||||
for (let i = 0; i < maxRows; i++) {
|
||||
const rowData: any = {};
|
||||
|
||||
// Première ligne : inclure nom et service (sans email)
|
||||
if (i === 0) {
|
||||
rowData.collaborateur = nomSeul; // ✅ Uniquement le nom
|
||||
rowData.service = row.service;
|
||||
rowData.rtt_nb = row.rtt?.nb || 0;
|
||||
rowData.cp_nb = row.cp?.nb || 0;
|
||||
rowData.aap_nb = row.aap?.nb || 0;
|
||||
rowData.am_nb = row.am?.nb || 0;
|
||||
|
||||
// Autres (première ligne)
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
rowData.autres_type = row.autres.map(a => a.type).join('\n');
|
||||
rowData.autres_nb = row.autres.map(a => a.nb).join('\n');
|
||||
}
|
||||
} else {
|
||||
rowData.collaborateur = '';
|
||||
rowData.service = '';
|
||||
rowData.rtt_nb = '';
|
||||
rowData.cp_nb = '';
|
||||
rowData.aap_nb = '';
|
||||
rowData.am_nb = '';
|
||||
rowData.autres_type = '';
|
||||
rowData.autres_nb = '';
|
||||
}
|
||||
|
||||
// Dates RTT
|
||||
rowData.rtt_dates = rttDatesArray[i] || '';
|
||||
|
||||
// Dates CP
|
||||
rowData.cp_dates = cpDatesArray[i] || '';
|
||||
|
||||
// Dates AAP
|
||||
rowData.aap_dates = aapDatesArray[i] || '';
|
||||
|
||||
// Dates AM
|
||||
rowData.am_dates = amDatesArray[i] || '';
|
||||
|
||||
// Dates Autres
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
const allAutresDates = row.autres.map(a => {
|
||||
const dates = a.dates.split(' ; ');
|
||||
return dates[i] || '';
|
||||
}).filter(d => d !== '').join(' | ');
|
||||
rowData.autres_dates = allAutresDates;
|
||||
} else {
|
||||
rowData.autres_dates = '';
|
||||
}
|
||||
|
||||
worksheet.addRow(rowData);
|
||||
currentRow++;
|
||||
}
|
||||
|
||||
const endRow = currentRow - 1;
|
||||
|
||||
// ✅ MODIFICATION : Fusionner les cellules (ajusté pour la nouvelle structure)
|
||||
if (maxRows > 1) {
|
||||
worksheet.mergeCells(`A${startRow}:A${endRow}`); // Collaborateur
|
||||
worksheet.mergeCells(`B${startRow}:B${endRow}`); // Service
|
||||
worksheet.mergeCells(`C${startRow}:C${endRow}`); // RTT Nb
|
||||
worksheet.mergeCells(`E${startRow}:E${endRow}`); // CP Nb
|
||||
worksheet.mergeCells(`G${startRow}:G${endRow}`); // AAP Nb
|
||||
worksheet.mergeCells(`I${startRow}:I${endRow}`); // AM Nb
|
||||
worksheet.mergeCells(`K${startRow}:K${endRow}`); // Autres Type
|
||||
worksheet.mergeCells(`L${startRow}:L${endRow}`); // Autres Nb
|
||||
}
|
||||
|
||||
// Appliquer les styles pour ce groupe de lignes
|
||||
for (let r = startRow; r <= endRow; r++) {
|
||||
const currentRowObj = worksheet.getRow(r);
|
||||
currentRowObj.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
|
||||
|
||||
// Hauteur de ligne
|
||||
currentRowObj.height = 25;
|
||||
|
||||
// ✅ MODIFICATION : Couleurs ajustées (colonnes décalées)
|
||||
currentRowObj.getCell(3).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE9D5FF' } }; // RTT Nb
|
||||
currentRowObj.getCell(4).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE9D5FF' } }; // RTT Dates
|
||||
|
||||
currentRowObj.getCell(5).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFDBEAFE' } }; // CP Nb
|
||||
currentRowObj.getCell(6).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFDBEAFE' } }; // CP Dates
|
||||
|
||||
currentRowObj.getCell(7).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD1FAE5' } }; // AAP Nb
|
||||
currentRowObj.getCell(8).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD1FAE5' } }; // AAP Dates
|
||||
|
||||
currentRowObj.getCell(9).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEE2E2' } }; // AM Nb
|
||||
currentRowObj.getCell(10).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEE2E2' } }; // AM Dates
|
||||
|
||||
currentRowObj.getCell(11).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Type
|
||||
currentRowObj.getCell(12).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Nb
|
||||
currentRowObj.getCell(13).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Dates
|
||||
|
||||
// Bordures ÉPAISSES pour toutes les cellules
|
||||
currentRowObj.eachCell((cell) => {
|
||||
cell.border = {
|
||||
top: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
left: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
bottom: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
right: { style: 'medium', color: { argb: 'FF000000' } }
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Générer le fichier Excel
|
||||
const buffer = await workbook.xlsx.writeBuffer();
|
||||
const blob = new Blob([buffer], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
});
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `conges_paie_${moisLabel}_${annee}.xlsx`;
|
||||
link.click();
|
||||
|
||||
toast.success("Export Excel réussi avec fusion de cellules !");
|
||||
} catch (error) {
|
||||
console.error('Erreur export Excel:', error);
|
||||
toast.error("Erreur lors de l'export Excel");
|
||||
}
|
||||
};
|
||||
const exporterCSV = () => {
|
||||
if (dataPaie.length === 0) return toast.error("Aucune donnée à exporter");
|
||||
|
||||
const headers = [
|
||||
'Employé', 'Email', 'Service',
|
||||
'RTT Nb', 'RTT Dates',
|
||||
'CP Nb', 'CP Dates',
|
||||
'AAP Nb', 'AAP Dates',
|
||||
'AM Nb', 'AM Dates',
|
||||
'Autres Type', 'Autres Nb', 'Autres Dates'
|
||||
];
|
||||
|
||||
const rows = dataPaie.map(row => {
|
||||
const baseData = [
|
||||
row.employe,
|
||||
row.email,
|
||||
row.service,
|
||||
row.rtt?.nb || 0,
|
||||
row.rtt?.dates || '',
|
||||
row.cp?.nb || 0,
|
||||
row.cp?.dates || '',
|
||||
row.aap?.nb || 0,
|
||||
row.aap?.dates || '',
|
||||
row.am?.nb || 0,
|
||||
row.am?.dates || ''
|
||||
];
|
||||
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
const autresTypes = row.autres.map(a => a.type).join(' | ');
|
||||
const autresNb = row.autres.map(a => a.nb).join(' | ');
|
||||
const autresDates = row.autres.map(a => a.dates).join(' | ');
|
||||
return [...baseData, autresTypes, autresNb, autresDates];
|
||||
} else {
|
||||
return [...baseData, '', '', ''];
|
||||
}
|
||||
});
|
||||
|
||||
const csvContent = [
|
||||
headers.join(';'),
|
||||
...rows.map(row => row.join(';'))
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `conges_paie_${moisOptions.find(m => m.value === mois)?.label}_${annee}.csv`;
|
||||
link.click();
|
||||
toast.success("Export CSV réussi");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<FileSpreadsheet className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Export pour fiche de paie</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-elegant border-0 mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Paramètres d'export</CardTitle>
|
||||
<CardDescription>Sélectionnez la période pour générer le rapport</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Mois</Label>
|
||||
<Select value={mois.toString()} onValueChange={(value) => setMois(parseInt(value))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{moisOptions.map(option => (
|
||||
<SelectItem key={option.value} value={option.value.toString()}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Année</Label>
|
||||
<Select value={annee.toString()} onValueChange={(value) => setAnnee(parseInt(value))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{[2023, 2024, 2025, 2026].map(year => (
|
||||
<SelectItem key={year} value={year.toString()}>{year}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{/* Bouton Générer le rapport toujours affiché avec fond mauve */}
|
||||
<div className="flex items-end">
|
||||
<Button
|
||||
onClick={genererRapport}
|
||||
disabled={loading}
|
||||
className="w-full bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
|
||||
>
|
||||
{loading ? 'Génération...' : 'Générer le rapport'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Bouton Export Excel toujours affiché, grisé s’il n’y a pas de données */}
|
||||
<div className="flex gap-4 mb-6">
|
||||
<Button
|
||||
onClick={exporterExcel}
|
||||
disabled={dataPaie.length === 0}
|
||||
variant="default"
|
||||
className="bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />Export Excel (avec couleurs)
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Tableau des données uniquement si data présente */}
|
||||
{dataPaie.length > 0 ? (
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Rapport des congés - {moisOptions.find(m => m.value === mois)?.label} {annee}</CardTitle>
|
||||
<CardDescription>
|
||||
AAP = Absence autorisée payée (ex : enfant malade, récup de JPOFS, etc) • AM = Arrêt maladie
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<div className="border-[2px] border-black rounded-lg overflow-hidden">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b-[2px] border-black bg-gray-100">
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-left">
|
||||
Collaborateur
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-left">
|
||||
Service
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
RTT<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
CP<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
AAP<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
AM<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black p-4 text-center">
|
||||
Autres<br />
|
||||
<span className="text-xs font-normal">(Type / Nb / Dates)</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataPaie.map((row, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="border-b-[2px] border-black last:border-b-0 hover:bg-gray-50"
|
||||
>
|
||||
<td className="font-medium border-r-[2px] border-black p-4 align-top bg-white">
|
||||
{row.employe}
|
||||
</td>
|
||||
<td className="border-r-[2px] border-black p-4 align-top bg-white">
|
||||
{row.service}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.rtt && row.rtt.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.rtt.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.rtt.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.cp && row.cp.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.cp.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.cp.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.aap && row.aap.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.aap.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.aap.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.am && row.am.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.am.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.am.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white p-4 align-top">
|
||||
{row.autres && row.autres.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{row.autres.map((autre, idx) => (
|
||||
<div key={idx} className="space-y-2 pb-3 border-b-[2px] border-gray-300 last:border-0 last:pb-0">
|
||||
<div className="text-xs font-medium text-gray-700">{autre.type}</div>
|
||||
<div className="font-semibold text-lg">{autre.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{autre.dates.split(' ; ').map((date, dateIdx) => (
|
||||
<div key={dateIdx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-12 text-center">
|
||||
<FileSpreadsheet className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Sélectionnez une période et cliquez sur "Générer le rapport"</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExportPaie;
|
||||
@@ -0,0 +1,609 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ArrowLeft, RefreshCw, Search, AlertTriangle, Settings, Edit } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
|
||||
interface Compteur {
|
||||
id: number;
|
||||
collaborateurId: number;
|
||||
typeCongeId: number;
|
||||
employe: string;
|
||||
email: string;
|
||||
service: string;
|
||||
campus?: string;
|
||||
typeConge: string;
|
||||
annee: number;
|
||||
total: number;
|
||||
solde: number;
|
||||
soldeReporte: number;
|
||||
consomme: number;
|
||||
typeContrat?: string;
|
||||
role?: string;
|
||||
estApprenti?: boolean;
|
||||
}
|
||||
|
||||
const GestionCompteurs = () => {
|
||||
const navigate = useNavigate();
|
||||
const [compteurs, setCompteurs] = useState<Compteur[]>([]);
|
||||
const [recherche, setRecherche] = useState("");
|
||||
const [filtreCampus, setFiltreCampus] = useState("all");
|
||||
const [filtreService, setFiltreService] = useState("all");
|
||||
const [filtreType, setFiltreType] = useState("all");
|
||||
const [filtreAnnee, setFiltreAnnee] = useState("all");
|
||||
const [selectedCompteur, setSelectedCompteur] = useState<Compteur | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showInitDialog, setShowInitDialog] = useState(false);
|
||||
const [showEditDialog, setShowEditDialog] = useState(false);
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const [initForm, setInitForm] = useState({
|
||||
anneeActuelle: currentYear,
|
||||
cpActuel: 25,
|
||||
rttActuel: 10,
|
||||
anneePrecedente: currentYear - 1,
|
||||
cpPrecedent: 25,
|
||||
rttPrecedent: 10
|
||||
});
|
||||
|
||||
const [editForm, setEditForm] = useState({
|
||||
total: 0,
|
||||
solde: 0
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
chargerCompteurs();
|
||||
}, []);
|
||||
|
||||
const getAuthHeaders = () => {
|
||||
const token = localStorage.getItem('token');
|
||||
return token ? { Authorization: `Bearer ${token}` } : {};
|
||||
};
|
||||
|
||||
const chargerCompteurs = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/getAllDetailedCounters?ts=${Date.now()}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur lors du chargement');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setCompteurs(data);
|
||||
} catch (error: any) {
|
||||
console.error('Erreur:', error);
|
||||
toast.error(error.message || "Erreur lors du chargement des compteurs");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const ouvrirEditionCompteur = (compteur: Compteur) => {
|
||||
setSelectedCompteur(compteur);
|
||||
setEditForm({
|
||||
total: compteur.total,
|
||||
solde: compteur.solde
|
||||
});
|
||||
setShowEditDialog(true);
|
||||
};
|
||||
|
||||
const determinerCodeType = (typeConge: string) => {
|
||||
if (!typeConge) return 'CP';
|
||||
const t = typeConge.toLowerCase();
|
||||
if (t.includes('rt') || t.includes('rtt')) return 'RTT';
|
||||
if (t.includes('cong') || t.includes('cp')) return 'CP';
|
||||
return 'CP';
|
||||
};
|
||||
|
||||
const modifierCompteur = async () => {
|
||||
if (!selectedCompteur) return;
|
||||
|
||||
if (editForm.solde > editForm.total) {
|
||||
toast.error("Le solde ne peut pas être supérieur au total");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
collaborateurId: selectedCompteur.collaborateurId,
|
||||
typeConge: determinerCodeType(selectedCompteur.typeConge),
|
||||
annee: selectedCompteur.annee,
|
||||
nouveauTotal: parseFloat((editForm.total || 0).toString()),
|
||||
nouveauSolde: parseFloat((editForm.solde || 0).toString()),
|
||||
source: 'RH_UI'
|
||||
};
|
||||
|
||||
console.log('✏️ Envoi modification compteur V2:', payload);
|
||||
|
||||
const response = await fetch('/api/v2/compteurs/update', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
...getAuthHeaders(),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Erreur lors de la mise à jour V2');
|
||||
}
|
||||
|
||||
toast.success("Compteur modifié (V2)");
|
||||
setShowEditDialog(false);
|
||||
setSelectedCompteur(null);
|
||||
await chargerCompteurs();
|
||||
} catch (error: any) {
|
||||
console.error('❌ Erreur modifierCompteur V2:', error);
|
||||
toast.error(error.message || "Erreur lors de la modification du compteur (V2)");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const initialiserTous = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('🔄 Initialisation manuelle V2 pour tous:', initForm);
|
||||
|
||||
const response = await fetch('/api/v2/compteurs/initialiser-tous-manuel', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
...getAuthHeaders(),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(initForm)
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Erreur initialisation V2');
|
||||
}
|
||||
|
||||
const apprentisMessage = data.apprentisTraites > 0
|
||||
? ` (${data.apprentisTraites} apprentis : CP uniquement)`
|
||||
: '';
|
||||
|
||||
toast.success(`Compteurs initialisés (V2) pour ${data.totalEmployes || 'tous'} employés${apprentisMessage}`, {
|
||||
description: `${data.compteursCrees || 0} créés, ${data.compteursMAJ || 0} mis à jour`,
|
||||
duration: 5000
|
||||
});
|
||||
|
||||
setShowInitDialog(false);
|
||||
await chargerCompteurs();
|
||||
} catch (error: any) {
|
||||
console.error('❌ Erreur initialisation V2:', error);
|
||||
toast.error(error.message || "Erreur lors de l'initialisation (V2)");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const compteursFiltres = compteurs.filter(c => {
|
||||
const matchRecherche = (c.employe?.toLowerCase() || '').includes(recherche.toLowerCase()) ||
|
||||
(c.email?.toLowerCase() || '').includes(recherche.toLowerCase());
|
||||
const matchCampus = filtreCampus === 'all' || (c.campus || 'Sans campus') === filtreCampus;
|
||||
const matchService = filtreService === 'all' || c.service === filtreService;
|
||||
const matchType = filtreType === 'all' || c.typeConge === filtreType;
|
||||
const matchAnnee = filtreAnnee === 'all' || c.annee?.toString() === filtreAnnee;
|
||||
return matchRecherche && matchCampus && matchService && matchType && matchAnnee;
|
||||
}).sort((a, b) => {
|
||||
if (a.annee !== b.annee) return b.annee - a.annee;
|
||||
if (a.employe !== b.employe) return (a.employe || '').localeCompare(b.employe || '');
|
||||
return (a.typeConge || '').localeCompare(b.typeConge || '');
|
||||
});
|
||||
|
||||
const getStatutBadge = (compteur: Compteur) => {
|
||||
const pourcentage = compteur.total > 0 ? (compteur.solde / compteur.total) * 100 : 0;
|
||||
|
||||
if (compteur.solde <= 0) {
|
||||
return <Badge variant="destructive">Épuisé</Badge>;
|
||||
} else if (pourcentage <= 20) {
|
||||
return <Badge variant="outline" className="bg-orange-100 text-orange-700 border-orange-300">
|
||||
Critique
|
||||
</Badge>;
|
||||
} else if (pourcentage <= 50) {
|
||||
return <Badge variant="outline" className="bg-yellow-100 text-yellow-700 border-yellow-300">
|
||||
Attention
|
||||
</Badge>;
|
||||
} else {
|
||||
return <Badge variant="outline" className="bg-green-100 text-green-700 border-green-300">
|
||||
Disponible
|
||||
</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const campus = [...new Set(compteurs.map(c => c.campus || 'Sans campus'))].sort();
|
||||
const services = [...new Set(compteurs.map(c => c.service))].sort();
|
||||
const typesConge = [...new Set(compteurs.map(c => c.typeConge))].sort();
|
||||
const annees = [...new Set(compteurs.map(c => c.annee))].sort((a, b) => b - a);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-purple-600 flex items-center justify-center">
|
||||
<RefreshCw className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Gestion des compteurs</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={showInitDialog} onOpenChange={setShowInitDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="bg-purple-600 text-white hover:bg-purple-700">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Initialiser tous les compteurs
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Initialisation manuelle des compteurs</DialogTitle>
|
||||
<DialogDescription>
|
||||
Définir les valeurs pour l'année en cours et l'année précédente (demi-journées acceptées : ex. 25.5)
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6 py-4">
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm">
|
||||
<p className="font-semibold text-blue-900 mb-1">Information</p>
|
||||
<p className="text-blue-700">
|
||||
Les <strong>apprentis</strong> recevront uniquement des <strong>Congés Payés</strong>.
|
||||
Les RTT ne seront pas créés pour eux.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4 bg-primary/5">
|
||||
<h3 className="font-semibold mb-4 text-lg">Année {initForm.anneeActuelle}</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cpActuel">Congés Payés (CP)</Label>
|
||||
<Input
|
||||
id="cpActuel"
|
||||
type="number"
|
||||
step="0.5"
|
||||
value={initForm.cpActuel}
|
||||
onChange={(e) => setInitForm({ ...initForm, cpActuel: parseFloat(e.target.value) || 0 })}
|
||||
min={0}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">Pour tous les collaborateurs</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rttActuel">RTT</Label>
|
||||
<Input
|
||||
id="rttActuel"
|
||||
type="number"
|
||||
step="0.5"
|
||||
value={initForm.rttActuel}
|
||||
onChange={(e) => setInitForm({ ...initForm, rttActuel: parseFloat(e.target.value) || 0 })}
|
||||
min={0}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">Sauf apprentis</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4 bg-muted/30">
|
||||
<h3 className="font-semibold mb-4 text-lg">Année {initForm.anneePrecedente} (N-1)</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cpPrecedent">Congés Payés (CP)</Label>
|
||||
<Input
|
||||
id="cpPrecedent"
|
||||
type="number"
|
||||
step="0.5"
|
||||
value={initForm.cpPrecedent}
|
||||
onChange={(e) => setInitForm({ ...initForm, cpPrecedent: parseFloat(e.target.value) || 0 })}
|
||||
min={0}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rttPrecedent">RTT</Label>
|
||||
<Input
|
||||
id="rttPrecedent"
|
||||
type="number"
|
||||
step="0.5"
|
||||
value={initForm.rttPrecedent}
|
||||
onChange={(e) => setInitForm({ ...initForm, rttPrecedent: parseFloat(e.target.value) || 0 })}
|
||||
min={0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-warning/10 border border-warning/20 rounded-lg p-4 flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm">
|
||||
<p className="font-semibold text-warning mb-1">Attention</p>
|
||||
<p className="text-muted-foreground">
|
||||
Cette opération va initialiser ou mettre à jour les compteurs pour <strong>TOUS les collaborateurs actifs</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowInitDialog(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
onClick={initialiserTous}
|
||||
disabled={loading}
|
||||
className="bg-purple-600 text-white hover:bg-purple-700 disabled:bg-purple-400 disabled:opacity-100"
|
||||
>
|
||||
{loading ? 'Initialisation...' : 'Confirmer l\'initialisation (V2)'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-card border-0 mb-8">
|
||||
<CardContent className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
{/* RECHERCHE */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher un employé..."
|
||||
value={recherche}
|
||||
onChange={(e) => setRecherche(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FILTRE CAMPUS */}
|
||||
<Select value={filtreCampus} onValueChange={setFiltreCampus}>
|
||||
<SelectTrigger><SelectValue placeholder="Campus" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Tous les campus</SelectItem>
|
||||
{campus.map(c => (
|
||||
<SelectItem key={c} value={c}>{c}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* FILTRE SERVICE */}
|
||||
<Select value={filtreService} onValueChange={setFiltreService}>
|
||||
<SelectTrigger><SelectValue placeholder="Service" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Tous les services</SelectItem>
|
||||
{services.map(service => (
|
||||
<SelectItem key={service} value={service}>{service}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* FILTRE TYPE */}
|
||||
<Select value={filtreType} onValueChange={setFiltreType}>
|
||||
<SelectTrigger><SelectValue placeholder="Type de congé" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Tous les types</SelectItem>
|
||||
{typesConge.map(type => (
|
||||
<SelectItem key={type} value={type}>{type}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* FILTRE ANNÉE */}
|
||||
<Select value={filtreAnnee} onValueChange={setFiltreAnnee}>
|
||||
<SelectTrigger><SelectValue placeholder="Année" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Toutes les années</SelectItem>
|
||||
{annees.map(annee => (
|
||||
<SelectItem key={annee} value={annee.toString()}>
|
||||
{annee} {annee === currentYear && '(en cours)'}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Compteurs de congés</CardTitle>
|
||||
<CardDescription>
|
||||
{compteursFiltres.length} compteur{compteursFiltres.length > 1 ? 's' : ''} affiché{compteursFiltres.length > 1 ? 's' : ''}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Collaborateur</TableHead>
|
||||
<TableHead>Campus</TableHead>
|
||||
<TableHead>Service</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead className="text-center">Année</TableHead>
|
||||
<TableHead className="text-right">Total</TableHead>
|
||||
<TableHead className="text-right">Consommé</TableHead>
|
||||
<TableHead className="text-right">Solde</TableHead>
|
||||
<TableHead className="text-center">Statut</TableHead>
|
||||
<TableHead className="text-center">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{compteursFiltres.map((compteur, index) => {
|
||||
const estApprenti = compteur.estApprenti ||
|
||||
compteur.typeContrat === 'Apprentissage' ||
|
||||
compteur.role === 'Apprenti' ||
|
||||
compteur.role?.toLowerCase().includes('apprenti');
|
||||
|
||||
const estRTTApprenti = estApprenti && (compteur.typeConge.toLowerCase().includes('rtt') || compteur.typeConge === 'RTT');
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={index}
|
||||
className={estRTTApprenti ? 'bg-orange-50/50' : ''}
|
||||
>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{compteur.employe}</p>
|
||||
{estApprenti && (
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
|
||||
Apprenti
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{compteur.email}</p>
|
||||
{estRTTApprenti && (
|
||||
<p className="text-xs text-orange-600 font-medium mt-1">
|
||||
⚠️ Apprenti - Pas de RTT normalement
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{compteur.campus || 'Sans campus'}</TableCell>
|
||||
<TableCell>{compteur.service}</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={estRTTApprenti ? 'border-orange-400 text-orange-700' : ''}
|
||||
>
|
||||
{compteur.typeConge}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span className="font-medium">{compteur.annee}</span>
|
||||
{compteur.annee === currentYear && (
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
|
||||
En cours
|
||||
</Badge>
|
||||
)}
|
||||
{compteur.annee === currentYear - 1 && (
|
||||
<Badge variant="outline" className="bg-gray-100 text-gray-600 border-gray-300 text-xs">
|
||||
N-1
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-medium">{compteur.total}</TableCell>
|
||||
<TableCell className="text-right text-muted-foreground">{compteur.consomme}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<span className={`font-bold text-lg ${compteur.solde <= 0 ? 'text-destructive' : compteur.total > 0 && compteur.solde / compteur.total <= 0.2 ? 'text-orange-600' : 'text-green-600'}`}>
|
||||
{compteur.solde}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{getStatutBadge(compteur)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => ouvrirEditionCompteur(compteur)}
|
||||
title="Modifier le compteur"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
|
||||
{/* Dialog Modification */}
|
||||
<Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Modifier le compteur (V2)</DialogTitle>
|
||||
<DialogDescription>
|
||||
{selectedCompteur && `${selectedCompteur.employe} - ${selectedCompteur.typeConge} ${selectedCompteur.annee}`}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editTotal">Total de jours</Label>
|
||||
<Input
|
||||
id="editTotal"
|
||||
type="number"
|
||||
step="0.5"
|
||||
value={editForm.total}
|
||||
onChange={(e) => setEditForm({ ...editForm, total: parseFloat(e.target.value) || 0 })}
|
||||
min={0}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">Accepte les demi-journées (ex: 25.5)</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editSolde">Solde disponible</Label>
|
||||
<Input
|
||||
id="editSolde"
|
||||
type="number"
|
||||
step="0.5"
|
||||
value={editForm.solde}
|
||||
onChange={(e) => setEditForm({ ...editForm, solde: parseFloat(e.target.value) || 0 })}
|
||||
min={0}
|
||||
max={editForm.total}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Le solde ne peut pas dépasser le total
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{selectedCompteur && (
|
||||
<div className="bg-muted/30 rounded-lg p-3 text-sm">
|
||||
<p className="font-semibold mb-2">Informations actuelles</p>
|
||||
<div className="space-y-1 text-muted-foreground">
|
||||
<p>Total actuel: <span className="font-medium text-foreground">{selectedCompteur.total} jours</span></p>
|
||||
<p>Solde actuel: <span className="font-medium text-foreground">{selectedCompteur.solde} jours</span></p>
|
||||
<p>Consommé: <span className="font-medium text-foreground">{selectedCompteur.consomme} jours</span></p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowEditDialog(false)} disabled={loading}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
onClick={modifierCompteur}
|
||||
disabled={loading}
|
||||
className="bg-purple-600 text-white disabled:bg-purple-400 disabled:text-white disabled:opacity-100"
|
||||
>
|
||||
{loading ? 'Enregistrement...' : 'Enregistrer (V2)'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GestionCompteurs;
|
||||
@@ -0,0 +1,784 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ArrowLeft, Plus, Minus, Search, Clock } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
|
||||
interface Employe {
|
||||
id: number;
|
||||
nomComplet: string;
|
||||
email: string;
|
||||
service: string;
|
||||
serviceId?: number;
|
||||
campus?: string;
|
||||
campusId?: number;
|
||||
role: string;
|
||||
Actif: number;
|
||||
}
|
||||
|
||||
interface CompteurRecup {
|
||||
id: number;
|
||||
collaborateurId: number;
|
||||
employe: string;
|
||||
email: string;
|
||||
service: string;
|
||||
annee: number;
|
||||
total: number;
|
||||
solde: number;
|
||||
consomme: number;
|
||||
}
|
||||
|
||||
const GestionRecuperation = () => {
|
||||
const navigate = useNavigate();
|
||||
const [employes, setEmployes] = useState<Employe[]>([]);
|
||||
const [compteursRecup, setCompteursRecup] = useState<CompteurRecup[]>([]);
|
||||
const [selectedEmployeId, setSelectedEmployeId] = useState<string>("");
|
||||
const [nombreJours, setNombreJours] = useState<string>("1");
|
||||
const [commentaire, setCommentaire] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [recherche, setRecherche] = useState("");
|
||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||
const [showRemoveDialog, setShowRemoveDialog] = useState(false);
|
||||
const [selectedCompteur, setSelectedCompteur] = useState<CompteurRecup | null>(null);
|
||||
const [selectedDate, setSelectedDate] = useState<string>("");
|
||||
const [periodeJournee, setPeriodeJournee] = useState<string>("");
|
||||
|
||||
// ⭐ FILTRES POUR LA POP-UP
|
||||
const [selectedCampus, setSelectedCampus] = useState<string>("");
|
||||
const [selectedService, setSelectedService] = useState<string>("");
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
// ⭐ FONCTION HELPER POUR FORMATER LES NOMBRES
|
||||
const formatNumber = (value: any): string => {
|
||||
const num = parseFloat(value?.toString() || '0');
|
||||
return isNaN(num) ? '0.0' : num.toFixed(1);
|
||||
};
|
||||
|
||||
// ⭐ FONCTION HELPER POUR PARSER LES NOMBRES
|
||||
const parseNumber = (value: any): number => {
|
||||
const num = parseFloat(value?.toString() || '0');
|
||||
return isNaN(num) ? 0 : num;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
chargerEmployes();
|
||||
chargerCompteursRecup();
|
||||
}, []);
|
||||
|
||||
const chargerEmployes = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/employes', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
const employesAvecCampus = await Promise.all(
|
||||
data
|
||||
.filter((e: any) => e.Actif === 1 || e.Actif === null)
|
||||
.map(async (e: any) => {
|
||||
if (!e.campus && e.serviceId) {
|
||||
try {
|
||||
const serviceResp = await fetch(
|
||||
`/api/services/${e.serviceId}`,
|
||||
{ headers: { 'Authorization': `Bearer ${token}` } }
|
||||
);
|
||||
const serviceData = await serviceResp.json();
|
||||
return {
|
||||
...e,
|
||||
campus: serviceData.campus || 'Sans campus'
|
||||
};
|
||||
} catch {
|
||||
return { ...e, campus: 'Sans campus' };
|
||||
}
|
||||
}
|
||||
return { ...e, campus: e.campus || 'Sans campus' };
|
||||
})
|
||||
);
|
||||
|
||||
setEmployes(employesAvecCampus);
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors du chargement des collaborateurs");
|
||||
}
|
||||
};
|
||||
|
||||
const chargerCompteursRecup = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/compteurs', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
const compteursRecupFiltres = data
|
||||
.filter((c: any) => c.typeConge === 'Récupération' && c.annee === currentYear)
|
||||
.map((c: any) => ({
|
||||
...c,
|
||||
total: parseNumber(c.total),
|
||||
solde: parseNumber(c.solde),
|
||||
consomme: parseNumber(c.consomme)
|
||||
}));
|
||||
|
||||
setCompteursRecup(compteursRecupFiltres);
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors du chargement des compteurs");
|
||||
}
|
||||
};
|
||||
|
||||
const ajouterRecuperation = async () => {
|
||||
if (!selectedEmployeId || !selectedDate || !periodeJournee) {
|
||||
toast.error("Veuillez remplir tous les champs obligatoires");
|
||||
return;
|
||||
}
|
||||
|
||||
const dateObj = new Date(selectedDate + 'T00:00:00');
|
||||
const dayOfWeek = dateObj.getDay();
|
||||
|
||||
if (dayOfWeek !== 6 && dayOfWeek !== 0) {
|
||||
const dayNames = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
|
||||
const confirmer = window.confirm(
|
||||
`⚠️ ATTENTION\n\n` +
|
||||
`Le jour sélectionné est un ${dayNames[dayOfWeek]}, pas un samedi/dimanche.\n\n` +
|
||||
`Les récupérations sont normalement réservées aux week-ends travaillés.\n\n` +
|
||||
`Êtes-vous sûr de vouloir continuer ?`
|
||||
);
|
||||
|
||||
if (!confirmer) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
console.log('📤 Envoi récupération:', {
|
||||
collaborateur_id: parseInt(selectedEmployeId),
|
||||
date: selectedDate,
|
||||
periode_journee: periodeJournee,
|
||||
commentaire: commentaire.trim() || undefined
|
||||
});
|
||||
|
||||
const response = await fetch('/api/compteurs/saisir-recup-collaborateur', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
collaborateur_id: parseInt(selectedEmployeId),
|
||||
date: selectedDate,
|
||||
periode_journee: periodeJournee,
|
||||
commentaire: commentaire.trim() || undefined
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 403) {
|
||||
toast.error("Accès non autorisé", {
|
||||
description: "Seuls les administrateurs et RH peuvent gérer les récupérations"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const errorData = await response.json().catch(() => ({ message: 'Erreur serveur' }));
|
||||
throw new Error(errorData.message || `Erreur HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
toast.success(`✅ Récupération enregistrée pour ${data.collaborateur}`, {
|
||||
description: `${data.date} (${data.periode}) : +${data.jours_ajoutes}j`
|
||||
});
|
||||
setShowAddDialog(false);
|
||||
resetForm();
|
||||
await chargerCompteursRecup();
|
||||
} else {
|
||||
toast.error(data.message || 'Erreur lors de l\'enregistrement', {
|
||||
description: data.details || "Vérifiez les données saisies",
|
||||
duration: 5000
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('❌ Erreur ajout récupération:', error);
|
||||
toast.error("Erreur lors de l'ajout", {
|
||||
description: error.message || "Une erreur est survenue"
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const retirerRecuperation = async () => {
|
||||
if (!selectedCompteur || !nombreJours || parseFloat(nombreJours) <= 0) {
|
||||
toast.error("Veuillez remplir tous les champs obligatoires");
|
||||
return;
|
||||
}
|
||||
|
||||
if (parseFloat(nombreJours) > selectedCompteur.solde) {
|
||||
toast.error("Le nombre de jours à retirer ne peut pas dépasser le solde disponible");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/compteurs/retirer-recup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
collaborateurId: selectedCompteur.collaborateurId,
|
||||
nombreJours: parseFloat(nombreJours),
|
||||
commentaire: commentaire.trim() || undefined
|
||||
})
|
||||
});
|
||||
|
||||
if (response.status === 403) {
|
||||
toast.error("Accès non autorisé", {
|
||||
description: "Seuls les administrateurs et RH peuvent gérer les récupérations"
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
toast.success(`${nombreJours}j de récupération retirés pour ${data.collaborateur}`, {
|
||||
description: commentaire ? `Motif: ${commentaire}` : undefined
|
||||
});
|
||||
setShowRemoveDialog(false);
|
||||
resetForm();
|
||||
chargerCompteursRecup();
|
||||
} else {
|
||||
throw new Error(data.message || 'Erreur serveur');
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || "Erreur lors du retrait");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setSelectedEmployeId("");
|
||||
setSelectedDate("");
|
||||
setPeriodeJournee("");
|
||||
setCommentaire("");
|
||||
setSelectedCompteur(null);
|
||||
setSelectedCampus("");
|
||||
setSelectedService("");
|
||||
setNombreJours("1");
|
||||
};
|
||||
|
||||
const ouvrirDialogAjout = () => {
|
||||
resetForm();
|
||||
setShowAddDialog(true);
|
||||
};
|
||||
|
||||
const ouvrirDialogRetrait = (compteur: CompteurRecup) => {
|
||||
resetForm();
|
||||
setSelectedCompteur(compteur);
|
||||
setShowRemoveDialog(true);
|
||||
};
|
||||
|
||||
const employesFiltres = employes.filter(e =>
|
||||
e.nomComplet.toLowerCase().includes(recherche.toLowerCase()) ||
|
||||
e.email.toLowerCase().includes(recherche.toLowerCase())
|
||||
);
|
||||
|
||||
const compteursFiltres = compteursRecup.filter(c =>
|
||||
c.employe.toLowerCase().includes(recherche.toLowerCase()) ||
|
||||
c.email.toLowerCase().includes(recherche.toLowerCase())
|
||||
);
|
||||
|
||||
const campusDisponibles = Array.from(new Set(employes.map(e => e.campus || 'Sans campus')))
|
||||
.sort();
|
||||
|
||||
const servicesDisponibles = selectedCampus
|
||||
? Array.from(new Set(
|
||||
employes
|
||||
.filter(e => (e.campus || 'Sans campus') === selectedCampus)
|
||||
.map(e => e.service || 'Sans service')
|
||||
)).sort()
|
||||
: Array.from(new Set(employes.map(e => e.service || 'Sans service'))).sort();
|
||||
|
||||
const employesFiltre = employes.filter(e => {
|
||||
if (selectedCampus && (e.campus || 'Sans campus') !== selectedCampus) return false;
|
||||
if (selectedService && (e.service || 'Sans service') !== selectedService) return false;
|
||||
return true;
|
||||
}).sort((a, b) => a.nomComplet.localeCompare(b.nomComplet));
|
||||
|
||||
const totalJoursDisponibles = compteursRecup.reduce((sum, c) => sum + parseNumber(c.solde), 0);
|
||||
const totalJoursConsommes = compteursRecup.reduce((sum, c) => sum + parseNumber(c.consomme), 0);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-purple-600 flex items-center justify-center">
|
||||
<Clock className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Gestion des récupérations</h1>
|
||||
<p className="text-sm text-muted-foreground">Samedis travaillés</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={ouvrirDialogAjout}
|
||||
>
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
Saisir une récupération
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Statistiques */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Compteurs actifs</p>
|
||||
<p className="text-3xl font-bold text-foreground">{compteursRecup.length}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center">
|
||||
<Clock className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Total jours disponibles</p>
|
||||
<p className="text-3xl font-bold text-foreground">
|
||||
{formatNumber(totalJoursDisponibles)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
|
||||
<Plus className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Total jours consommés</p>
|
||||
<p className="text-3xl font-bold text-foreground">
|
||||
{formatNumber(totalJoursConsommes)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center">
|
||||
<Minus className="w-6 h-6 text-orange-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recherche */}
|
||||
<Card className="shadow-card border-0 mb-8">
|
||||
<CardContent className="p-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher un collaborateur..."
|
||||
value={recherche}
|
||||
onChange={(e) => setRecherche(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Liste des compteurs */}
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Compteurs de récupération {currentYear}</CardTitle>
|
||||
<CardDescription>
|
||||
{compteursFiltres.length} compteur{compteursFiltres.length > 1 ? 's' : ''} affiché{compteursFiltres.length > 1 ? 's' : ''}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{compteursFiltres.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Collaborateur</TableHead>
|
||||
<TableHead>Service</TableHead>
|
||||
<TableHead className="text-right">Total accumulé</TableHead>
|
||||
<TableHead className="text-right">Consommé</TableHead>
|
||||
<TableHead className="text-right">Solde disponible</TableHead>
|
||||
<TableHead className="text-center">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{compteursFiltres.map((compteur) => (
|
||||
<TableRow key={compteur.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{compteur.employe}</p>
|
||||
<p className="text-sm text-muted-foreground">{compteur.email}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{compteur.service}</TableCell>
|
||||
<TableCell className="text-right font-medium">
|
||||
{formatNumber(compteur.total)}j
|
||||
</TableCell>
|
||||
<TableCell className="text-right text-muted-foreground">
|
||||
{formatNumber(compteur.consomme)}j
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<span className={`font-bold text-lg ${parseNumber(compteur.solde) <= 0 ? 'text-destructive' : 'text-green-600'}`}>
|
||||
{formatNumber(compteur.solde)}j
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex gap-2 justify-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedEmployeId(compteur.collaborateurId.toString());
|
||||
ouvrirDialogAjout();
|
||||
}}
|
||||
title="Ajouter des jours"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => ouvrirDialogRetrait(compteur)}
|
||||
disabled={parseNumber(compteur.solde) <= 0}
|
||||
title="Retirer des jours"
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<Clock className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Aucun compteur de récupération</p>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Ajoutez des jours de récupération pour créer un compteur
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
|
||||
{/* Dialog Ajout */}
|
||||
<Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Ajouter des jours de récupération</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enregistrer des samedis travaillés
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* FILTRE CAMPUS */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="campusFilter">Filtrer par campus</Label>
|
||||
<Select value={selectedCampus || "ALL_CAMPUS"} onValueChange={(val) => {
|
||||
setSelectedCampus(val === "ALL_CAMPUS" ? "" : val);
|
||||
setSelectedService("");
|
||||
setSelectedEmployeId("");
|
||||
}}>
|
||||
<SelectTrigger id="campusFilter">
|
||||
<SelectValue placeholder="Tous les campus" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ALL_CAMPUS">Tous les campus</SelectItem>
|
||||
{campusDisponibles.map(campus => (
|
||||
<SelectItem key={campus} value={campus}>
|
||||
{campus}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* FILTRE SERVICE */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="serviceFilter">Filtrer par service</Label>
|
||||
<Select
|
||||
value={selectedService || "ALL_SERVICES"}
|
||||
onValueChange={(val) => {
|
||||
setSelectedService(val === "ALL_SERVICES" ? "" : val);
|
||||
setSelectedEmployeId("");
|
||||
}}
|
||||
disabled={!selectedCampus && servicesDisponibles.length === 0}
|
||||
>
|
||||
<SelectTrigger id="serviceFilter">
|
||||
<SelectValue placeholder="Tous les services" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ALL_SERVICES">Tous les services</SelectItem>
|
||||
{servicesDisponibles.map(service => (
|
||||
<SelectItem key={service} value={service}>
|
||||
{service}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* SÉLECTION EMPLOYÉ */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="employe">Collaborateur *</Label>
|
||||
<Select value={selectedEmployeId} onValueChange={setSelectedEmployeId}>
|
||||
<SelectTrigger id="employe">
|
||||
<SelectValue placeholder="Sélectionner un collaborateur" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-[300px]">
|
||||
{employesFiltre.length === 0 ? (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
Aucun collaborateur trouvé
|
||||
</div>
|
||||
) : (
|
||||
employesFiltre.map(employe => (
|
||||
<SelectItem key={employe.id} value={employe.id.toString()}>
|
||||
{employe.nomComplet}
|
||||
<span className="text-xs text-muted-foreground ml-2">
|
||||
({employe.service})
|
||||
</span>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{employesFiltre.length} collaborateur{employesFiltre.length > 1 ? 's' : ''} disponible{employesFiltre.length > 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* DATE */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateSamedi">Date du Samedi/Dimanche travaillé *</Label>
|
||||
<Input
|
||||
id="dateSamedi"
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
ℹ️ Sélectionnez un samedi. La validation se fera lors de l'enregistrement.
|
||||
</p>
|
||||
{selectedDate && (() => {
|
||||
const date = new Date(selectedDate + 'T00:00:00');
|
||||
const dayOfWeek = date.getDay();
|
||||
const dayNames = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
|
||||
return (
|
||||
<p className={`text-xs font-medium ${dayOfWeek === 6 ? 'text-green-600' : 'text-orange-600'}`}>
|
||||
{dayOfWeek === 6 ? '✅' : '⚠️'} Jour sélectionné : {dayNames[dayOfWeek]}
|
||||
</p>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* PÉRIODE */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="periodeJournee">Période *</Label>
|
||||
<Select value={periodeJournee} onValueChange={setPeriodeJournee}>
|
||||
<SelectTrigger id="periodeJournee">
|
||||
<SelectValue placeholder="Sélectionner une période" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Matin">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>☀️ Matin</span>
|
||||
<span className="text-xs text-muted-foreground">(0.5j)</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="Après-midi">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>🌆 Après-midi</span>
|
||||
<span className="text-xs text-muted-foreground">(0.5j)</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="Journée entière">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>🌞 Journée entière</span>
|
||||
<span className="text-xs text-muted-foreground">(1j)</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{periodeJournee && (
|
||||
<p className="text-xs text-blue-600">
|
||||
{periodeJournee === 'Journée entière' ? '1 jour' : '0.5 jour'} sera ajouté
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="commentaire">Commentaire (optionnel)</Label>
|
||||
<Textarea
|
||||
id="commentaire"
|
||||
value={commentaire}
|
||||
onChange={(e) => setCommentaire(e.target.value)}
|
||||
placeholder="Ex: Portes ouvertes, événement spécial..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm">
|
||||
<p className="text-blue-900">
|
||||
💡 <strong>Information :</strong> Les jours ajoutés seront disponibles immédiatement dans le solde du collaborateur et apparaîtront dans son calendrier.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowAddDialog(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
onClick={ajouterRecuperation}
|
||||
disabled={loading}
|
||||
className="bg-purple-600 text-white disabled:bg-purple-400 disabled:text-white disabled:opacity-100"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
<span>Ajout...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Ajouter</span>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog Retrait */}
|
||||
<Dialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Retirer des jours de récupération</DialogTitle>
|
||||
<DialogDescription>
|
||||
{selectedCompteur && `${selectedCompteur.employe} - Solde: ${formatNumber(selectedCompteur.solde)}j`}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nombreJoursRetrait">Nombre de jours à retirer *</Label>
|
||||
<Input
|
||||
id="nombreJoursRetrait"
|
||||
type="number"
|
||||
step="0.5"
|
||||
min="0.5"
|
||||
max={selectedCompteur?.solde || 0}
|
||||
value={nombreJours}
|
||||
onChange={(e) => setNombreJours(e.target.value)}
|
||||
placeholder="Ex: 1 ou 0.5"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Maximum disponible: {selectedCompteur ? formatNumber(selectedCompteur.solde) : '0.0'} jour(s)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="commentaireRetrait">Motif du retrait (optionnel)</Label>
|
||||
<Textarea
|
||||
id="commentaireRetrait"
|
||||
value={commentaire}
|
||||
onChange={(e) => setCommentaire(e.target.value)}
|
||||
placeholder="Ex: Correction d'erreur"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 border border-orange-200 rounded-lg p-3 text-sm">
|
||||
<p className="text-orange-900">
|
||||
⚠️ <strong>Attention :</strong> Cette action ne peut pas être annulée.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowRemoveDialog(false)}
|
||||
disabled={loading}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
onClick={retirerRecuperation}
|
||||
disabled={loading || !nombreJours}
|
||||
className="bg-red-600 text-white disabled:bg-red-400 disabled:text-white disabled:opacity-100"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
<span>Retrait...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Minus className="w-4 h-4" />
|
||||
<span>Retirer</span>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GestionRecuperation;
|
||||
@@ -0,0 +1,341 @@
|
||||
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Calendar, ArrowLeft, Search, CheckCircle, XCircle, Edit,
|
||||
Trash2, ClipboardList
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
|
||||
interface HistoriqueAction {
|
||||
Id: number;
|
||||
collaborateur: string;
|
||||
Action: string;
|
||||
Details: string;
|
||||
DateAction: string;
|
||||
AdresseIP: string;
|
||||
DemandeCongeId: number;
|
||||
}
|
||||
|
||||
const Historique = () => {
|
||||
const navigate = useNavigate();
|
||||
const [historique, setHistorique] = useState<HistoriqueAction[]>([]);
|
||||
const [recherche, setRecherche] = useState("");
|
||||
const [filtreAction, setFiltreAction] = useState("all");
|
||||
const [dateDebut, setDateDebut] = useState("");
|
||||
const [dateFin, setDateFin] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
chargerHistorique();
|
||||
}, [filtreAction, dateDebut, dateFin]);
|
||||
|
||||
const chargerHistorique = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (dateDebut) params.append('dateDebut', dateDebut);
|
||||
if (dateFin) params.append('dateFin', dateFin);
|
||||
if (filtreAction !== 'all') params.append('action', filtreAction);
|
||||
|
||||
const response = await fetch(
|
||||
`/api/historique?${params.toString()}`,
|
||||
{ headers: { 'Authorization': `Bearer ${token}` } }
|
||||
);
|
||||
const data = await response.json();
|
||||
setHistorique(data);
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors du chargement de l'historique");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const historiqueFiltré = historique.filter(h => {
|
||||
const matchRecherche = h.collaborateur?.toLowerCase().includes(recherche.toLowerCase()) ||
|
||||
h.Details?.toLowerCase().includes(recherche.toLowerCase());
|
||||
return matchRecherche;
|
||||
});
|
||||
|
||||
const getActionIcon = (action: string) => {
|
||||
if (action.includes('Validation')) return <CheckCircle className="w-4 h-4 text-success" />;
|
||||
if (action.includes('Refus')) return <XCircle className="w-4 h-4 text-destructive" />;
|
||||
if (action.includes('Modification')) return <Edit className="w-4 h-4 text-warning" />;
|
||||
if (action.includes('Suppression')) return <Trash2 className="w-4 h-4 text-destructive" />;
|
||||
return <ClipboardList className="w-4 h-4 text-primary" />;
|
||||
};
|
||||
|
||||
const getActionBadge = (action: string) => {
|
||||
if (action.includes('Validation')) {
|
||||
return <Badge variant="outline" className="bg-success/10 text-success border-success/20">
|
||||
{action}
|
||||
</Badge>;
|
||||
}
|
||||
if (action.includes('Refus')) {
|
||||
return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">
|
||||
{action}
|
||||
</Badge>;
|
||||
}
|
||||
if (action.includes('Modification')) {
|
||||
return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
|
||||
{action}
|
||||
</Badge>;
|
||||
}
|
||||
return <Badge variant="secondary">{action}</Badge>;
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const exporterHistorique = () => {
|
||||
if (historiqueFiltré.length === 0) {
|
||||
toast.error("Aucune donnée à exporter");
|
||||
return;
|
||||
}
|
||||
|
||||
const headers = ['Date et heure', 'Collaborateur', 'Action', 'Détails', 'Demande ID'];
|
||||
const csvContent = [
|
||||
headers.join(';'),
|
||||
...historiqueFiltré.map(row => [
|
||||
formatDateTime(row.DateAction),
|
||||
row.collaborateur,
|
||||
row.Action,
|
||||
row.Details,
|
||||
row.DemandeCongeId || ''
|
||||
].join(';'))
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `historique_actions_${new Date().toISOString().split('T')[0]}.csv`;
|
||||
link.click();
|
||||
toast.success("Export réussi");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
className="transition-smooth"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<ClipboardList className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Historique des actions</h1>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={exporterHistorique}
|
||||
disabled={historiqueFiltré.length === 0}
|
||||
>
|
||||
Exporter CSV
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-card border-0 mb-8">
|
||||
<CardContent className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher..."
|
||||
value={recherche}
|
||||
onChange={(e) => setRecherche(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select value={filtreAction} onValueChange={setFiltreAction}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Type d'action" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Toutes les actions</SelectItem>
|
||||
<SelectItem value="Validation congé">Validations</SelectItem>
|
||||
<SelectItem value="Refus congé">Refus</SelectItem>
|
||||
<SelectItem value="Création demande">Créations</SelectItem>
|
||||
<SelectItem value="Modification demande">Modifications</SelectItem>
|
||||
<SelectItem value="Suppression demande">Suppressions</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
value={dateDebut}
|
||||
onChange={(e) => setDateDebut(e.target.value)}
|
||||
placeholder="Date début"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
value={dateFin}
|
||||
onChange={(e) => setDateFin(e.target.value)}
|
||||
placeholder="Date fin"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total actions</p>
|
||||
<p className="text-2xl font-bold">{historiqueFiltré.length}</p>
|
||||
</div>
|
||||
<ClipboardList className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Validations</p>
|
||||
<p className="text-2xl font-bold text-success">
|
||||
{historique.filter(h => h.Action.includes('Validation')).length}
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircle className="w-8 h-8 text-success" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Refus</p>
|
||||
<p className="text-2xl font-bold text-destructive">
|
||||
{historique.filter(h => h.Action.includes('Refus')).length}
|
||||
</p>
|
||||
</div>
|
||||
<XCircle className="w-8 h-8 text-destructive" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Modifications</p>
|
||||
<p className="text-2xl font-bold text-warning">
|
||||
{historique.filter(h => h.Action.includes('Modification')).length}
|
||||
</p>
|
||||
</div>
|
||||
<Edit className="w-8 h-8 text-warning" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Journal des actions</CardTitle>
|
||||
<CardDescription>
|
||||
Traçabilité complète de toutes les actions effectuées
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Chargement...</p>
|
||||
</div>
|
||||
) : historiqueFiltré.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Date et heure</TableHead>
|
||||
<TableHead>Collaborateur</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
<TableHead>Détails</TableHead>
|
||||
<TableHead className="text-center">Demande</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{historiqueFiltré.map((action) => (
|
||||
<TableRow key={action.Id}>
|
||||
<TableCell className="font-medium">
|
||||
{formatDateTime(action.DateAction)}
|
||||
</TableCell>
|
||||
<TableCell>{action.collaborateur}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{getActionIcon(action.Action)}
|
||||
{getActionBadge(action.Action)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="max-w-md">
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{action.Details}
|
||||
</p>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{action.DemandeCongeId ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/demandes/${action.DemandeCongeId}`)}
|
||||
>
|
||||
#{action.DemandeCongeId}
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<ClipboardList className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Aucune action trouvée</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Historique;
|
||||
@@ -0,0 +1,162 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Calendar, LogIn } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
email: string;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
role: string;
|
||||
service: string;
|
||||
}
|
||||
|
||||
const LoginDev = () => {
|
||||
const navigate = useNavigate();
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [selectedEmail, setSelectedEmail] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
chargerUtilisateurs();
|
||||
}, []);
|
||||
|
||||
const chargerUtilisateurs = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/users-dev');
|
||||
const data = await response.json();
|
||||
setUsers(data);
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors du chargement des utilisateurs");
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!selectedEmail) {
|
||||
toast.error("Veuillez sélectionner un utilisateur");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/login-dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: selectedEmail })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
toast.success(`Bienvenue ${data.user.prenom} ${data.user.nom} !`);
|
||||
navigate('/dashboard');
|
||||
} else {
|
||||
toast.error(data.error || "Erreur de connexion");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors de la connexion");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleBadge = (role: string) => {
|
||||
switch (role) {
|
||||
case 'Admin':
|
||||
return <Badge variant="destructive">{role}</Badge>;
|
||||
case 'RH':
|
||||
return <Badge variant="default">{role}</Badge>;
|
||||
case 'Validateur':
|
||||
return <Badge variant="secondary">{role}</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{role}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const selectedUser = users.find(u => u.email === selectedEmail);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-md shadow-elegant border-0">
|
||||
<CardHeader className="space-y-4">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-16 h-16 bg-gradient-primary rounded-2xl flex items-center justify-center">
|
||||
<Calendar className="w-8 h-8 text-primary-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<CardTitle className="text-2xl">RH Suivi - Mode Dev</CardTitle>
|
||||
<CardDescription>
|
||||
Sélectionnez un utilisateur pour vous connecter
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Utilisateur</label>
|
||||
<Select value={selectedEmail} onValueChange={setSelectedEmail}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choisir un utilisateur..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{users.map(user => (
|
||||
<SelectItem key={user.id} value={user.email}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{user.prenom} {user.nom}</span>
|
||||
<span className="text-xs text-muted-foreground">({user.role})</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{selectedUser && (
|
||||
<Card className="bg-muted/50 border-0">
|
||||
<CardContent className="p-4 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Nom</span>
|
||||
<span className="font-medium">{selectedUser.prenom} {selectedUser.nom}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Email</span>
|
||||
<span className="text-sm">{selectedUser.email}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Rôle</span>
|
||||
{getRoleBadge(selectedUser.role)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Service</span>
|
||||
<span className="text-sm">{selectedUser.service || 'Non assigné'}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleLogin}
|
||||
disabled={loading || !selectedEmail}
|
||||
className="w-full bg-gradient-primary hover:opacity-90 transition-smooth"
|
||||
>
|
||||
<LogIn className="w-4 h-4 mr-2" />
|
||||
{loading ? 'Connexion...' : 'Se connecter'}
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-center text-muted-foreground">
|
||||
⚠️ Mode développement uniquement
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginDev;
|
||||
@@ -0,0 +1,447 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Calendar, ArrowLeft, Save, Trash2, Info } from "lucide-react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { useSSE } from "@/hooks/useSSE";
|
||||
|
||||
interface Demande {
|
||||
Id: number;
|
||||
CollaborateurADId: number;
|
||||
nomEmploye: string;
|
||||
emailEmploye: string;
|
||||
service: string;
|
||||
DateDebut: string;
|
||||
DateFin: string;
|
||||
Statut: string;
|
||||
Commentaire: string;
|
||||
DateDemande: string;
|
||||
typesConge: Array<{
|
||||
typeId: number;
|
||||
nom: string;
|
||||
nombreJours: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
const ModificationDemande = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const [demande, setDemande] = useState<Demande | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
dateDebut: "",
|
||||
dateFin: "",
|
||||
commentaire: "",
|
||||
typesConge: [] as Array<{ typeId: number; nombreJours: number }>
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
chargerDemande(parseInt(id));
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useSSE((event) => {
|
||||
console.log('🔔 Événement SSE reçu dans ModificationDemande:', event);
|
||||
|
||||
switch (event.type) {
|
||||
case 'connected':
|
||||
console.log('✅ ModificationDemande connecté au serveur temps réel');
|
||||
break;
|
||||
|
||||
case 'demande-updated':
|
||||
case 'demande-validated':
|
||||
// Si c'est la demande actuelle qui a été modifiée, recharger
|
||||
if (event.demandeId === parseInt(id || '0')) {
|
||||
console.log('🔄 Demande actuelle mise à jour, rechargement...');
|
||||
if (id) {
|
||||
chargerDemande(parseInt(id));
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
// 🆕 GESTION DE L'ANNULATION
|
||||
case 'demande-cancelled':
|
||||
// Si la demande actuelle a été annulée, recharger pour afficher le nouveau statut
|
||||
if (event.demandeId === parseInt(id || '0')) {
|
||||
console.log('🚫 Demande actuelle annulée, rechargement...');
|
||||
toast.warning("Cette demande a été annulée", {
|
||||
description: "Le statut a été mis à jour",
|
||||
duration: 4000
|
||||
});
|
||||
if (id) {
|
||||
chargerDemande(parseInt(id));
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'demande-deleted':
|
||||
// Si la demande actuelle a été supprimée, retourner au dashboard
|
||||
if (event.demandeId === parseInt(id || '0')) {
|
||||
toast.info("Cette demande a été supprimée");
|
||||
navigate("/dashboard");
|
||||
}
|
||||
break;
|
||||
|
||||
case 'heartbeat':
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('❓ Type d\'événement inconnu:', event.type);
|
||||
}
|
||||
});
|
||||
|
||||
const chargerDemande = async (demandeId: number) => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/demandes/${demandeId}`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const data = await response.json();
|
||||
setDemande(data);
|
||||
setFormData({
|
||||
dateDebut: data.DateDebut,
|
||||
dateFin: data.DateFin,
|
||||
commentaire: data.Commentaire || '',
|
||||
typesConge: data.typesConge.map((t: any) => ({
|
||||
typeId: t.typeId,
|
||||
nombreJours: t.nombreJours
|
||||
}))
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors du chargement de la demande");
|
||||
navigate("/dashboard");
|
||||
}
|
||||
};
|
||||
|
||||
const modifierDemande = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (new Date(formData.dateDebut) > new Date(formData.dateFin)) {
|
||||
toast.error("La date de début doit être antérieure à la date de fin");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/demandes/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
dateDebut: formData.dateDebut,
|
||||
dateFin: formData.dateFin,
|
||||
typesConge: formData.typesConge,
|
||||
commentaire: formData.commentaire
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
if (data.ancienStatut === 'Validée' && data.nouveauStatut === 'En attente') {
|
||||
toast.success("Demande modifiée et remise en attente pour re-validation", {
|
||||
description: "Les compteurs de congé ont été restaurés"
|
||||
});
|
||||
} else if (data.ancienStatut === 'Refusée' && data.nouveauStatut === 'En attente') {
|
||||
toast.success("Demande modifiée et remise en attente");
|
||||
} else if (data.ancienStatut === 'Annulée' && data.nouveauStatut === 'En attente') {
|
||||
toast.success("Demande modifiée et remise en attente");
|
||||
} else {
|
||||
toast.success("Demande modifiée avec succès");
|
||||
}
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
throw new Error(data.error || 'Erreur lors de la modification');
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || "Erreur lors de la modification");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const supprimerDemande = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/demandes/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Demande supprimée avec succès");
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
throw new Error(data.error || 'Erreur lors de la suppression');
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || "Erreur lors de la suppression");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setShowDeleteDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ FONCTION MISE À JOUR AVEC LE STATUT "ANNULÉE"
|
||||
const getStatutBadge = (statut: string) => {
|
||||
switch (statut) {
|
||||
case "En attente":
|
||||
return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">En attente</Badge>;
|
||||
case "Validée":
|
||||
return <Badge variant="outline" className="bg-success/10 text-success border-success/20">Validée</Badge>;
|
||||
case "Refusée":
|
||||
return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">Refusée</Badge>;
|
||||
case "Annulée":
|
||||
return <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-800 dark:text-gray-300">Annulée</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline" className="bg-gray-100 text-gray-700">{statut}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
if (!demande) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Chargement...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
||||
const peutModifier = ['Admin', 'RH', 'Validateur'].includes(user.role) || demande.CollaborateurADId === user.id;
|
||||
// ✅ MISE À JOUR: Inclure "Annulée" dans les demandes traitées
|
||||
const demandeTraitee = ['Validée', 'Refusée', 'Annulée'].includes(demande.Statut);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gradient-primary rounded-xl flex items-center justify-center">
|
||||
<Calendar className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
Modifier la demande
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{peutModifier && demande.Statut === 'En attente' && (
|
||||
<Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="text-destructive hover:bg-destructive/10">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Supprimer
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmer la suppression</DialogTitle>
|
||||
<DialogDescription>
|
||||
Êtes-vous sûr de vouloir supprimer cette demande ? Cette action est irréversible.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowDeleteDialog(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={supprimerDemande} disabled={loading}>
|
||||
{loading ? 'Suppression...' : 'Supprimer'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* ✅ ALERTE MISE À JOUR POUR INCLURE LE STATUT "ANNULÉE" */}
|
||||
{peutModifier && demandeTraitee && (
|
||||
<Alert className="mb-6 border-blue-500/50 bg-blue-500/5">
|
||||
<Info className="h-4 w-4 text-blue-500" />
|
||||
<AlertDescription className="text-blue-700 dark:text-blue-400">
|
||||
{demande.Statut === 'Validée'
|
||||
? "⚠️ Cette demande a été validée. En la modifiant, elle sera automatiquement remise en attente et les compteurs seront restaurés."
|
||||
: demande.Statut === 'Refusée'
|
||||
? "ℹ️ Cette demande a été refusée. En la modifiant, elle sera automatiquement remise en attente pour re-validation."
|
||||
: demande.Statut === 'Annulée'
|
||||
? "ℹ️ Cette demande a été annulée. En la modifiant, elle sera automatiquement remise en attente pour re-validation."
|
||||
: ""
|
||||
}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Card className="shadow-elegant border-0 mb-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Informations de la demande</CardTitle>
|
||||
{getStatutBadge(demande.Statut)}
|
||||
</div>
|
||||
<CardDescription>
|
||||
Demande #{demande.Id} créée le {formatDate(demande.DateDemande)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Collaborateur</p>
|
||||
<p className="font-medium">{demande.nomEmploye}</p>
|
||||
<p className="text-sm text-muted-foreground">{demande.emailEmploye}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Service</p>
|
||||
<p className="font-medium">{demande.service}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Date de début</p>
|
||||
<p className="font-medium">{formatDate(demande.DateDebut)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Date de fin</p>
|
||||
<p className="font-medium">{formatDate(demande.DateFin)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-6">
|
||||
<p className="text-sm text-muted-foreground">Types de congé</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{demande.typesConge.map((type, index) => (
|
||||
<Badge key={index} variant="secondary">
|
||||
{type.nom}: {type.nombreJours} jour{type.nombreJours > 1 ? 's' : ''}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{demande.Commentaire && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">Commentaire initial</p>
|
||||
<p className="text-sm bg-muted/30 p-3 rounded-lg">{demande.Commentaire}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-elegant border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Modifier les dates</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={modifierDemande} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateDebut">Date de début</Label>
|
||||
<Input
|
||||
id="dateDebut"
|
||||
type="date"
|
||||
value={formData.dateDebut}
|
||||
onChange={(e) => setFormData({ ...formData, dateDebut: e.target.value })}
|
||||
disabled={!peutModifier}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateFin">Date de fin</Label>
|
||||
<Input
|
||||
id="dateFin"
|
||||
type="date"
|
||||
value={formData.dateFin}
|
||||
onChange={(e) => setFormData({ ...formData, dateFin: e.target.value })}
|
||||
disabled={!peutModifier}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="commentaire">Commentaire</Label>
|
||||
<Textarea
|
||||
id="commentaire"
|
||||
placeholder="Préciser le motif..."
|
||||
value={formData.commentaire}
|
||||
onChange={(e) => setFormData({ ...formData, commentaire: e.target.value })}
|
||||
disabled={!peutModifier}
|
||||
rows={4}
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{peutModifier && (
|
||||
<div className="flex gap-4 pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-1 bg-gradient-primary hover:opacity-90 transition-smooth shadow-elegant"
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{loading ? 'Enregistrement...' : 'Enregistrer les modifications'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
disabled={loading}
|
||||
className="transition-smooth"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!peutModifier && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
className="w-full"
|
||||
>
|
||||
Retour au tableau de bord
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModificationDemande;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const NotFound = () => {
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
console.error("404 Error: User attempted to access non-existent route:", location.pathname);
|
||||
}, [location.pathname]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gray-100">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">404</h1>
|
||||
<p className="mb-4 text-xl text-gray-600">Oops! Page not found</p>
|
||||
<a href="/" className="text-blue-500 underline hover:text-blue-700">
|
||||
Return to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
@@ -0,0 +1,638 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Calendar, ArrowLeft, Save, Plus, Trash2, AlertCircle } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
interface TypeConge {
|
||||
id: number;
|
||||
nom: string;
|
||||
couleur: string;
|
||||
}
|
||||
|
||||
interface LigneConge {
|
||||
typeId: number;
|
||||
nombreJours: number;
|
||||
}
|
||||
|
||||
interface Employe {
|
||||
id: number;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
email: string;
|
||||
service: string;
|
||||
soldeCP?: number;
|
||||
soldeRTT?: number;
|
||||
}
|
||||
|
||||
const SaisieManuelle = () => {
|
||||
const navigate = useNavigate();
|
||||
const [employes, setEmployes] = useState<Employe[]>([]);
|
||||
const [typesConge, setTypesConge] = useState<TypeConge[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [employeSelectionne, setEmployeSelectionne] = useState<Employe | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
employeId: "",
|
||||
dateDebut: "",
|
||||
dateFin: "",
|
||||
commentaire: ""
|
||||
});
|
||||
|
||||
const [lignesConge, setLignesConge] = useState<LigneConge[]>([
|
||||
{ typeId: 0, nombreJours: 0 }
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
chargerDonnees();
|
||||
}, []);
|
||||
|
||||
const chargerDonnees = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
// ✅ Charger les employés
|
||||
const respEmployes = await fetch('/api/employes', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!respEmployes.ok) {
|
||||
throw new Error(`Erreur HTTP ${respEmployes.status}`);
|
||||
}
|
||||
|
||||
const dataEmployes = await respEmployes.json();
|
||||
|
||||
// ✅ LOG DÉBOGAGE
|
||||
console.log('📊 Employés reçus:', dataEmployes);
|
||||
console.log(' Type:', Array.isArray(dataEmployes) ? 'Array' : typeof dataEmployes);
|
||||
console.log(' Longueur:', dataEmployes?.length);
|
||||
|
||||
// ✅ VÉRIFICATION : S'assurer que c'est un tableau
|
||||
if (Array.isArray(dataEmployes)) {
|
||||
// ✅ Filtrer les entrées invalides
|
||||
const employesValides = dataEmployes.filter(emp =>
|
||||
emp &&
|
||||
emp.id !== undefined &&
|
||||
emp.nom &&
|
||||
emp.prenom
|
||||
);
|
||||
console.log(' Employés valides:', employesValides.length);
|
||||
setEmployes(employesValides);
|
||||
} else {
|
||||
console.error('❌ dataEmployes n\'est pas un tableau:', dataEmployes);
|
||||
toast.error("Format de données invalide");
|
||||
setEmployes([]);
|
||||
}
|
||||
|
||||
// ✅ Charger les types de congé
|
||||
const respTypes = await fetch('/api/types-conge', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!respTypes.ok) {
|
||||
throw new Error(`Erreur HTTP ${respTypes.status}`);
|
||||
}
|
||||
|
||||
const dataTypes = await respTypes.json();
|
||||
|
||||
if (Array.isArray(dataTypes)) {
|
||||
setTypesConge(dataTypes);
|
||||
} else {
|
||||
console.error('❌ dataTypes n\'est pas un tableau:', dataTypes);
|
||||
setTypesConge([]);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur chargement données:', error);
|
||||
toast.error("Erreur lors du chargement des données");
|
||||
setEmployes([]);
|
||||
setTypesConge([]);
|
||||
}
|
||||
};
|
||||
|
||||
const ajouterLigne = () => {
|
||||
const joursOuvres = calculerJoursOuvres(formData.dateDebut, formData.dateFin);
|
||||
setLignesConge([...lignesConge, { typeId: 0, nombreJours: joursOuvres }]);
|
||||
};
|
||||
|
||||
const supprimerLigne = (index: number) => {
|
||||
if (lignesConge.length > 1) {
|
||||
setLignesConge(lignesConge.filter((_, i) => i !== index));
|
||||
}
|
||||
};
|
||||
|
||||
const modifierLigne = (index: number, field: keyof LigneConge, value: any) => {
|
||||
const nouvelles = [...lignesConge];
|
||||
nouvelles[index] = { ...nouvelles[index], [field]: value };
|
||||
setLignesConge(nouvelles);
|
||||
};
|
||||
|
||||
// Mettre à jour automatiquement tous les nombres de jours quand les dates changent
|
||||
const handleDateChange = (field: 'dateDebut' | 'dateFin', value: string) => {
|
||||
const nouvellesData = { ...formData, [field]: value };
|
||||
setFormData(nouvellesData);
|
||||
|
||||
// Recalculer les jours pour toutes les lignes
|
||||
if (nouvellesData.dateDebut && nouvellesData.dateFin) {
|
||||
const joursOuvres = calculerJoursOuvres(nouvellesData.dateDebut, nouvellesData.dateFin);
|
||||
const nouvellesLignes = lignesConge.map(ligne => ({
|
||||
...ligne,
|
||||
nombreJours: ligne.nombreJours === 0 ? joursOuvres : ligne.nombreJours
|
||||
}));
|
||||
setLignesConge(nouvellesLignes);
|
||||
}
|
||||
};
|
||||
|
||||
const calculerTotalJours = () => {
|
||||
return lignesConge.reduce((total, ligne) => total + (ligne.nombreJours || 0), 0);
|
||||
};
|
||||
|
||||
const calculerJoursOuvres = (debut: string, fin: string) => {
|
||||
if (!debut || !fin) return 0;
|
||||
|
||||
const dateDebut = new Date(debut);
|
||||
const dateFin = new Date(fin);
|
||||
let jours = 0;
|
||||
|
||||
for (let d = new Date(dateDebut); d <= dateFin; d.setDate(d.getDate() + 1)) {
|
||||
const jour = d.getDay();
|
||||
if (jour !== 0 && jour !== 6) {
|
||||
jours++;
|
||||
}
|
||||
}
|
||||
return jours;
|
||||
};
|
||||
|
||||
const handleEmployeChange = (employeId: string) => {
|
||||
setFormData({ ...formData, employeId });
|
||||
const employe = employes.find(e => e.id.toString() === employeId);
|
||||
setEmployeSelectionne(employe || null);
|
||||
};
|
||||
|
||||
const calculerJoursParType = (typeId: number) => {
|
||||
return lignesConge
|
||||
.filter(ligne => ligne.typeId === typeId)
|
||||
.reduce((total, ligne) => total + (ligne.nombreJours || 0), 0);
|
||||
};
|
||||
|
||||
const obtenirSoldeParType = (typeId: number): number => {
|
||||
if (!employeSelectionne) return 0;
|
||||
if (typeId === 1) return employeSelectionne.soldeCP ?? 0;
|
||||
if (typeId === 2) return employeSelectionne.soldeRTT ?? 0;
|
||||
return 0;
|
||||
};
|
||||
|
||||
const obtenirNomType = (typeId: number): string => {
|
||||
const type = typesConge.find(t => t.id === typeId);
|
||||
return type?.nom || '';
|
||||
};
|
||||
|
||||
const calculerRestantParType = (typeId: number): number => {
|
||||
const solde = obtenirSoldeParType(typeId);
|
||||
const saisis = calculerJoursParType(typeId);
|
||||
return solde - saisis;
|
||||
};
|
||||
|
||||
const verifierDepassement = () => {
|
||||
if (!employeSelectionne) return false;
|
||||
|
||||
const joursCP = calculerJoursParType(1);
|
||||
const joursRTT = calculerJoursParType(2);
|
||||
|
||||
return (joursCP > (employeSelectionne.soldeCP ?? 0)) ||
|
||||
(joursRTT > (employeSelectionne.soldeRTT ?? 0));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.employeId || !formData.dateDebut || !formData.dateFin) {
|
||||
toast.error("Veuillez remplir tous les champs obligatoires");
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier que au moins une ligne a des données valides
|
||||
const lignesValides = lignesConge.filter(l => l.typeId > 0 && l.nombreJours > 0);
|
||||
|
||||
if (lignesValides.length === 0) {
|
||||
toast.error("Veuillez remplir au moins une ligne avec un type de congé et un nombre de jours");
|
||||
return;
|
||||
}
|
||||
|
||||
if (verifierDepassement()) {
|
||||
toast.warning("⚠️ Attention: dépassement des compteurs disponibles");
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/demandes', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
collaborateurId: formData.employeId,
|
||||
dateDebut: formData.dateDebut,
|
||||
dateFin: formData.dateFin,
|
||||
typesConge: lignesValides.map(l => ({
|
||||
typeId: l.typeId,
|
||||
nombreJours: l.nombreJours
|
||||
})),
|
||||
commentaire: formData.commentaire
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Demande enregistrée avec succès");
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
throw new Error('Erreur lors de l\'enregistrement');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors de l'enregistrement");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const joursOuvres = calculerJoursOuvres(formData.dateDebut, formData.dateFin);
|
||||
const totalJours = calculerTotalJours();
|
||||
const aDepassement = verifierDepassement();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
className="transition-smooth"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gradient-primary rounded-xl flex items-center justify-center">
|
||||
<Calendar className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Saisie manuelle</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-elegant border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Nouvelle demande de congé</CardTitle>
|
||||
<CardDescription>
|
||||
Enregistrer manuellement une demande d'absence ou de récupération
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Informations générales</h3>
|
||||
|
||||
{/* ✅ SECTION EMPLOYÉ CORRIGÉE */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="employe">
|
||||
Collaborateur <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.employeId}
|
||||
onValueChange={handleEmployeChange}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un collaborateur" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{employes && employes.length > 0 ? (
|
||||
employes
|
||||
.filter(emp => emp && emp.id && emp.prenom && emp.nom)
|
||||
.map(emp => (
|
||||
<SelectItem
|
||||
key={emp.id}
|
||||
value={emp.id.toString()}
|
||||
>
|
||||
{emp.prenom} {emp.nom} - {emp.service || 'Sans service'}
|
||||
</SelectItem>
|
||||
))
|
||||
) : (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
{employes.length === 0
|
||||
? "Chargement des collaborateurs..."
|
||||
: "Aucun collaborateur disponible"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* ✅ Indicateur de chargement */}
|
||||
{employes.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Chargement des collaborateurs...
|
||||
</p>
|
||||
)}
|
||||
{employes.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{employes.length} collaborateur{employes.length > 1 ? 's' : ''} disponible{employes.length > 1 ? 's' : ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{employeSelectionne && (
|
||||
<div className="p-4 bg-primary/5 rounded-lg border border-primary/10">
|
||||
<p className="text-sm font-medium mb-3">Compteurs disponibles</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Congés Payés (CP)</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p className="text-2xl font-bold text-primary">
|
||||
{employeSelectionne.soldeCP ?? 0}
|
||||
</p>
|
||||
<span className="text-sm text-muted-foreground">jours</span>
|
||||
</div>
|
||||
{calculerJoursParType(1) > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Saisie en cours: <span className="font-semibold text-warning">{calculerJoursParType(1)}j</span>
|
||||
{calculerJoursParType(1) > (employeSelectionne.soldeCP ?? 0) && (
|
||||
<span className="text-destructive ml-1">⚠️ Dépassement!</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">RTT</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p className="text-2xl font-bold text-primary">
|
||||
{employeSelectionne.soldeRTT ?? 0}
|
||||
</p>
|
||||
<span className="text-sm text-muted-foreground">jours</span>
|
||||
</div>
|
||||
{calculerJoursParType(2) > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Saisie en cours: <span className="font-semibold text-warning">{calculerJoursParType(2)}j</span>
|
||||
{calculerJoursParType(2) > (employeSelectionne.soldeRTT ?? 0) && (
|
||||
<span className="text-destructive ml-1">⚠️ Dépassement!</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateDebut">Date de début <span className="text-destructive">*</span></Label>
|
||||
<Input
|
||||
id="dateDebut"
|
||||
type="date"
|
||||
value={formData.dateDebut}
|
||||
onChange={(e) => handleDateChange('dateDebut', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateFin">Date de fin <span className="text-destructive">*</span></Label>
|
||||
<Input
|
||||
id="dateFin"
|
||||
type="date"
|
||||
value={formData.dateFin}
|
||||
onChange={(e) => handleDateChange('dateFin', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.dateDebut && formData.dateFin && joursOuvres > 0 && (
|
||||
<div className="p-4 bg-primary/5 rounded-lg space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Jours ouvrés de la période</p>
|
||||
<p className="text-2xl font-bold">{joursOuvres}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">Total saisi</p>
|
||||
<p className="text-2xl font-bold">{totalJours}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{employeSelectionne && totalJours > 0 && (
|
||||
<div className="pt-3 border-t space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Répartition par type</p>
|
||||
|
||||
{calculerJoursParType(1) > 0 && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">CP:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="bg-blue-50 text-blue-700">
|
||||
{calculerJoursParType(1)}j
|
||||
</Badge>
|
||||
<span className="text-xs">
|
||||
Restants: <span className={calculerRestantParType(1) < 0 ? "font-bold text-destructive" : "font-bold text-success"}>
|
||||
{calculerRestantParType(1)}j
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{calculerJoursParType(2) > 0 && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">RTT:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="bg-purple-50 text-purple-700">
|
||||
{calculerJoursParType(2)}j
|
||||
</Badge>
|
||||
<span className="text-xs">
|
||||
Restants: <span className={calculerRestantParType(2) < 0 ? "font-bold text-destructive" : "font-bold text-success"}>
|
||||
{calculerRestantParType(2)}j
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lignesConge.filter(l => l.typeId > 2 && l.nombreJours > 0).map((ligne, idx) => {
|
||||
const typeNom = obtenirNomType(ligne.typeId);
|
||||
return typeNom ? (
|
||||
<div key={idx} className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">{typeNom}:</span>
|
||||
<Badge variant="outline" className="bg-green-50 text-green-700">
|
||||
{calculerJoursParType(ligne.typeId)}j
|
||||
</Badge>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Types de congé</h3>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={ajouterLigne}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
Ajouter un type
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{lignesConge.map((ligne, index) => {
|
||||
const soldeDisponible = obtenirSoldeParType(ligne.typeId);
|
||||
const dejaSaisi = calculerJoursParType(ligne.typeId);
|
||||
const restant = soldeDisponible - dejaSaisi;
|
||||
const enDepassement = restant < 0;
|
||||
|
||||
return (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex gap-3 items-end">
|
||||
<div className="flex-1 space-y-2">
|
||||
<Label>Type de congé</Label>
|
||||
<Select
|
||||
value={ligne.typeId.toString()}
|
||||
onValueChange={(value) => modifierLigne(index, 'typeId', parseInt(value))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{typesConge.map(type => (
|
||||
<SelectItem key={type.id} value={type.id.toString()}>
|
||||
{type.nom}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="w-40 space-y-2">
|
||||
<Label>
|
||||
Nombre de jours
|
||||
{joursOuvres > 0 && (
|
||||
<span className="text-xs text-muted-foreground ml-1">
|
||||
(max: {joursOuvres})
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.5"
|
||||
min="0"
|
||||
max={joursOuvres}
|
||||
value={ligne.nombreJours || ''}
|
||||
onChange={(e) => modifierLigne(index, 'nombreJours', parseFloat(e.target.value) || 0)}
|
||||
placeholder={joursOuvres > 0 ? joursOuvres.toString() : "0"}
|
||||
className={enDepassement && ligne.nombreJours > 0 ? "border-destructive" : ""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => supprimerLigne(index)}
|
||||
disabled={lignesConge.length === 1}
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Indicateur de solde pour cette ligne */}
|
||||
{employeSelectionne && ligne.typeId > 0 && ligne.nombreJours > 0 && (
|
||||
<div className={`text-xs px-3 py-1.5 rounded-md ${enDepassement ? 'bg-destructive/10 text-destructive' : 'bg-success/10 text-success'}`}>
|
||||
{obtenirNomType(ligne.typeId)}:
|
||||
<span className="font-semibold ml-1">
|
||||
{soldeDisponible}j disponibles
|
||||
</span>
|
||||
{dejaSaisi > 0 && (
|
||||
<>
|
||||
{' '}→ {dejaSaisi}j saisis =
|
||||
<span className="font-bold ml-1">
|
||||
{restant}j restants
|
||||
{enDepassement && ' ⚠️'}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{aDepassement && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>Attention:</strong> La saisie dépasse les compteurs disponibles du collaborateur.
|
||||
La demande sera tout de même enregistrée mais nécessitera une validation.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="commentaire">Commentaire (optionnel)</Label>
|
||||
<Textarea
|
||||
id="commentaire"
|
||||
placeholder="Préciser le motif, les circonstances..."
|
||||
value={formData.commentaire}
|
||||
onChange={(e) => setFormData({ ...formData, commentaire: e.target.value })}
|
||||
rows={4}
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-1 bg-gradient-primary hover:opacity-90 transition-smooth shadow-elegant"
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{loading ? 'Enregistrement...' : 'Enregistrer la demande'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
disabled={loading}
|
||||
className="transition-smooth"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SaisieManuelle;
|
||||
@@ -0,0 +1,298 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Calendar, ArrowLeft, Users } from "lucide-react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
|
||||
interface Membre {
|
||||
id: number;
|
||||
nom: string;
|
||||
email: string;
|
||||
role: string;
|
||||
soldeCP: number;
|
||||
soldeRTT: number;
|
||||
typeContrat?: string;
|
||||
Actif?: number;
|
||||
}
|
||||
|
||||
interface Equipe {
|
||||
Id: number;
|
||||
nomService: string;
|
||||
nombreMembres: number;
|
||||
demandesEnAttente: number;
|
||||
campus: string;
|
||||
}
|
||||
|
||||
const TeamDetail = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [equipe, setEquipe] = useState<Equipe | null>(null);
|
||||
const [membres, setMembres] = useState<Membre[]>([]);
|
||||
const [loadingEquipe, setLoadingEquipe] = useState(true);
|
||||
const [loadingMembres, setLoadingMembres] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
chargerEquipe(parseInt(id));
|
||||
chargerMembres(parseInt(id));
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const chargerEquipe = async (equipeId: number) => {
|
||||
setLoadingEquipe(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/equipes/${equipeId}`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Équipe non trouvée');
|
||||
|
||||
const data = await response.json();
|
||||
setEquipe(data);
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors du chargement de l'équipe");
|
||||
setEquipe(null);
|
||||
} finally {
|
||||
setLoadingEquipe(false);
|
||||
}
|
||||
};
|
||||
|
||||
const chargerMembres = async (equipeId: number) => {
|
||||
setLoadingMembres(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/equipes/${equipeId}/membres`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
if (!response.ok) throw new Error('Impossible de récupérer les membres');
|
||||
const data = await response.json();
|
||||
|
||||
console.log('📊 Données membres reçues en frontend:', data);
|
||||
data.forEach((m: Membre) => {
|
||||
console.log(` - ${m.nom}: CP=${m.soldeCP} (type: ${typeof m.soldeCP}), RTT=${m.soldeRTT} (type: ${typeof m.soldeRTT})`);
|
||||
});
|
||||
|
||||
setMembres(data);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur chargement membres:', error);
|
||||
toast.error("Erreur lors du chargement des membres");
|
||||
setMembres([]);
|
||||
} finally {
|
||||
setLoadingMembres(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleBadge = (role: string) => {
|
||||
switch (role) {
|
||||
case 'Admin':
|
||||
return <Badge variant="destructive">{role}</Badge>;
|
||||
case 'RH':
|
||||
return <Badge variant="default">{role}</Badge>;
|
||||
case 'Validateur':
|
||||
return <Badge variant="secondary">{role}</Badge>;
|
||||
case 'Directeur de campus':
|
||||
return <Badge className="bg-purple-600">{role}</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{role}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ Fonction pour détecter si un membre est apprenti
|
||||
const estApprenti = (membre: Membre): boolean => {
|
||||
return membre.typeContrat === 'Apprentissage' ||
|
||||
membre.role === 'Apprenti' ||
|
||||
membre.role?.toLowerCase().includes('apprenti');
|
||||
};
|
||||
|
||||
// ✅ CORRECTION: Utiliser useMemo pour recalculer les totaux à chaque changement de membres
|
||||
const totaux = useMemo(() => {
|
||||
if (!membres || membres.length === 0) {
|
||||
console.log('⚠️ Aucun membre pour calculer les totaux');
|
||||
return { totalCP: 0, totalRTT: 0 };
|
||||
}
|
||||
|
||||
console.log('🧮 Calcul des totaux pour', membres.length, 'membres');
|
||||
|
||||
const totalCP = membres.reduce((sum, m) => {
|
||||
const solde = parseFloat(String(m.soldeCP)) || 0;
|
||||
console.log(` - ${m.nom}: CP=${m.soldeCP} (${typeof m.soldeCP}) → ajout de ${solde}`);
|
||||
return sum + solde;
|
||||
}, 0);
|
||||
|
||||
// ✅ Exclure les apprentis du calcul des RTT
|
||||
const totalRTT = membres.reduce((sum, m) => {
|
||||
if (estApprenti(m)) {
|
||||
console.log(` - ${m.nom}: RTT=0 (Apprenti - pas de RTT)`);
|
||||
return sum;
|
||||
}
|
||||
const solde = parseFloat(String(m.soldeRTT)) || 0;
|
||||
console.log(` - ${m.nom}: RTT=${m.soldeRTT} (${typeof m.soldeRTT}) → ajout de ${solde}`);
|
||||
return sum + solde;
|
||||
}, 0);
|
||||
|
||||
console.log('✅ Totaux calculés: CP=', totalCP, 'RTT=', totalRTT);
|
||||
return { totalCP, totalRTT };
|
||||
}, [membres]); // ✅ Recalculer quand membres change
|
||||
|
||||
if (loadingEquipe) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Chargement de l'équipe...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!equipe) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<p className="text-red-500 text-lg">Équipe introuvable</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/teams")}
|
||||
className="transition-smooth"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<Users className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">{equipe.nomService}</h1>
|
||||
<p className="text-sm text-muted-foreground">{equipe.campus}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Membres</p>
|
||||
<p className="text-2xl font-bold">{equipe.nombreMembres}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-primary" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Demandes en attente</p>
|
||||
<p className="text-2xl font-bold text-warning">{equipe.demandesEnAttente}</p>
|
||||
</div>
|
||||
<Calendar className="w-8 h-8 text-warning" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground mb-1">Total CP</p>
|
||||
<p className="text-2xl font-bold">{totaux.totalCP.toFixed(1)}j</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground mb-1">Total RTT</p>
|
||||
<p className="text-2xl font-bold">{totaux.totalRTT.toFixed(1)}j</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Membres de l'équipe</CardTitle>
|
||||
<CardDescription>
|
||||
{membres.length} membre{membres.length > 1 ? 's' : ''}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loadingMembres ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Chargement des membres...</p>
|
||||
</div>
|
||||
) : membres.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nom</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Rôle</TableHead>
|
||||
<TableHead className="text-right">CP restants</TableHead>
|
||||
<TableHead className="text-right">RTT restants</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{membres.map((membre) => {
|
||||
const isApprenti = estApprenti(membre);
|
||||
|
||||
return (
|
||||
<TableRow key={membre.id}>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
{membre.nom}
|
||||
{isApprenti && (
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
|
||||
Apprenti
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{membre.email}</TableCell>
|
||||
<TableCell>{getRoleBadge(membre.role)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<span className="font-semibold">
|
||||
{parseFloat(String(membre.soldeCP || 0)).toFixed(1)}j
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{isApprenti ? (
|
||||
<span className="text-muted-foreground italic">N/A</span>
|
||||
) : (
|
||||
<span className="font-semibold">
|
||||
{parseFloat(String(membre.soldeRTT || 0)).toFixed(1)}j
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<Users className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Aucun membre dans cette équipe</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamDetail;
|
||||
@@ -0,0 +1,245 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Calendar, Search, ArrowLeft, Users } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Team {
|
||||
Id: number;
|
||||
service: string;
|
||||
nombreMembres: number;
|
||||
demandesEnAttente: number;
|
||||
campus: string;
|
||||
}
|
||||
|
||||
const Teams = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filterDepartment, setFilterDepartment] = useState("all");
|
||||
const [filterCampus, setFilterCampus] = useState("all");
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Mapping des campus
|
||||
const getCampusFullName = (code: string): string => {
|
||||
const mapping: Record<string, string> = {
|
||||
'CGY': 'Cergy',
|
||||
'Marseille': 'Marseille',
|
||||
'Nantes': 'Nantes',
|
||||
'SQY': 'Saint-Quentin-en-Yvelines',
|
||||
'Non assigné': 'Non assigné'
|
||||
};
|
||||
return mapping[code] || code;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
chargerEquipes();
|
||||
}, []);
|
||||
|
||||
const chargerEquipes = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/equipes', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const data = await response.json();
|
||||
setTeams(data || []);
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
toast.error("Erreur lors du chargement des équipes");
|
||||
setTeams([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Obtenir la liste des campus d'une équipe
|
||||
const getCampusList = (campus: string): string[] => {
|
||||
if (!campus) return ['Non assigné'];
|
||||
return campus.split(',').map(c => c.trim());
|
||||
};
|
||||
|
||||
// Filtrage des équipes
|
||||
const filteredTeams = teams.filter(team => {
|
||||
const campusList = getCampusList(team.campus);
|
||||
|
||||
// Recherche
|
||||
const matchesSearch = !searchQuery ||
|
||||
team.service?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
campusList.some(c =>
|
||||
c.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
getCampusFullName(c).toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
// Filtre département
|
||||
const matchesDepartment = filterDepartment === "all" || team.service === filterDepartment;
|
||||
|
||||
// Filtre campus
|
||||
const matchesCampus = filterCampus === "all" || campusList.includes(filterCampus);
|
||||
|
||||
return matchesSearch && matchesDepartment && matchesCampus;
|
||||
});
|
||||
|
||||
// Tri par service
|
||||
const sortedTeams = [...filteredTeams].sort((a, b) =>
|
||||
(a.service || '').localeCompare(b.service || '')
|
||||
);
|
||||
|
||||
// Liste unique des campus
|
||||
const allCampus = new Set<string>();
|
||||
teams.forEach(team => {
|
||||
getCampusList(team.campus).forEach(c => allCampus.add(c));
|
||||
});
|
||||
const campusList = Array.from(allCampus).sort();
|
||||
|
||||
// Liste unique des services
|
||||
const departments = Array.from(new Set(teams.map(t => t.service))).filter(Boolean).sort();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
className="transition-smooth"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<Calendar className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Gestion des équipes</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-card border-0 mb-8">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
{/* Recherche */}
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher une équipe ou un campus..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 transition-smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filtre Campus */}
|
||||
<Select value={filterCampus} onValueChange={setFilterCampus}>
|
||||
<SelectTrigger className="w-full md:w-[250px]">
|
||||
<SelectValue placeholder="Tous les campus" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Tous les campus</SelectItem>
|
||||
{campusList.map((campus) => (
|
||||
<SelectItem key={campus} value={campus}>
|
||||
{getCampusFullName(campus)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Filtre Service */}
|
||||
<Select value={filterDepartment} onValueChange={setFilterDepartment}>
|
||||
<SelectTrigger className="w-full md:w-[200px]">
|
||||
<SelectValue placeholder="Tous les services" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Tous les services</SelectItem>
|
||||
{departments.map((dept) => (
|
||||
<SelectItem key={dept} value={dept}>
|
||||
{dept}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contenu */}
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Chargement des équipes...</p>
|
||||
</div>
|
||||
) : sortedTeams.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Users className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Aucune équipe trouvée</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{sortedTeams.map((team) => {
|
||||
const campusArray = getCampusList(team.campus);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={team.Id}
|
||||
className="shadow-card border-0 bg-gradient-card hover:shadow-elegant transition-smooth cursor-pointer"
|
||||
onClick={() => navigate(`/teams/${team.Id}`)}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg mb-2">{team.service}</CardTitle>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{campusArray.map((campus, idx) => (
|
||||
<Badge key={`${team.Id}-${idx}`} variant="outline" className="text-xs">
|
||||
{getCampusFullName(campus)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Membres</span>
|
||||
<span className="font-medium text-foreground">{team.nombreMembres}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Demandes en attente</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={team.demandesEnAttente > 0
|
||||
? "bg-warning/10 text-warning border-warning/20"
|
||||
: "bg-success/10 text-success border-success/20"}
|
||||
>
|
||||
{team.demandesEnAttente}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Teams;
|
||||
@@ -0,0 +1,360 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Calendar, ArrowLeft, CheckCircle, XCircle, Clock, Filter, AlertCircle } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { useSSE } from "@/hooks/useSSE";
|
||||
|
||||
interface Demande {
|
||||
Id: number;
|
||||
nomEmploye: string;
|
||||
emailEmploye: string;
|
||||
service: string;
|
||||
typesConge: string;
|
||||
DateDebut: string;
|
||||
DateFin: string;
|
||||
NombreJours: number;
|
||||
Statut: string;
|
||||
Commentaire: string;
|
||||
DateDemande: string;
|
||||
}
|
||||
|
||||
const ValidationDemandes = () => {
|
||||
const navigate = useNavigate();
|
||||
const [demandes, setDemandes] = useState<Demande[]>([]);
|
||||
const [filtreStatut, setFiltreStatut] = useState("En attente");
|
||||
const [selectedDemande, setSelectedDemande] = useState<Demande | null>(null);
|
||||
const [commentaireValidation, setCommentaireValidation] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
chargerDemandes();
|
||||
}, [filtreStatut]);
|
||||
|
||||
const chargerDemandes = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const statutFiltre = filtreStatut === "Toutes" ? "" : filtreStatut;
|
||||
|
||||
const response = await fetch(`/api/demandes?statut=${statutFiltre}`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
setDemandes(data);
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors du chargement des demandes");
|
||||
}
|
||||
};
|
||||
|
||||
// 🔔 CONNEXION SSE
|
||||
useSSE((event) => {
|
||||
console.log('🔔 Événement SSE reçu dans ValidationDemandes:', event);
|
||||
|
||||
switch (event.type) {
|
||||
case 'connected':
|
||||
console.log('✅ ValidationDemandes connecté au serveur temps réel');
|
||||
break;
|
||||
|
||||
case 'demande-created':
|
||||
case 'demande-updated':
|
||||
case 'demande-validated':
|
||||
case 'demande-deleted':
|
||||
case 'demande-list-updated':
|
||||
console.log('🔄 Rechargement des demandes...');
|
||||
chargerDemandes();
|
||||
break;
|
||||
|
||||
// 🆕 AJOUTER LA GESTION DES ANNULATIONS
|
||||
case 'demande-cancelled':
|
||||
console.log('🚫 Demande annulée - rechargement...');
|
||||
toast.warning("Une demande a été annulée", {
|
||||
description: "La liste a été mise à jour",
|
||||
duration: 4000
|
||||
});
|
||||
chargerDemandes();
|
||||
break;
|
||||
|
||||
case 'heartbeat':
|
||||
// Heartbeat pour garder la connexion
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('❓ Type d\'événement inconnu:', event.type);
|
||||
}
|
||||
});
|
||||
|
||||
const validerDemande = async (id: number, statut: 'Validée' | 'Refusée') => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/demandes/${id}/valider`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ statut, commentaire: commentaireValidation })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Demande ${statut.toLowerCase()} avec succès`);
|
||||
setCommentaireValidation("");
|
||||
setSelectedDemande(null);
|
||||
// Pas besoin d'appeler chargerDemandes() car le SSE va le faire automatiquement
|
||||
} else {
|
||||
throw new Error('Erreur lors de la validation');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors de la validation");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ FONCTION MISE À JOUR AVEC LE STATUT "ANNULÉE"
|
||||
const getStatutBadge = (statut: string) => {
|
||||
switch (statut) {
|
||||
case "En attente":
|
||||
return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
|
||||
<Clock className="w-3 h-3 mr-1" />
|
||||
En attente
|
||||
</Badge>;
|
||||
case "Validée":
|
||||
return <Badge variant="outline" className="bg-success/10 text-success border-success/20">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Validée
|
||||
</Badge>;
|
||||
case "Refusée":
|
||||
return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">
|
||||
<XCircle className="w-3 h-3 mr-1" />
|
||||
Refusée
|
||||
</Badge>;
|
||||
case "Annulée":
|
||||
return <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-800 dark:text-gray-300">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
Annulée
|
||||
</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline" className="bg-gray-100 text-gray-700">
|
||||
{statut}
|
||||
</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
className="transition-smooth"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<Calendar className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Validation des demandes</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* ✅ FILTRE AVEC L'OPTION "ANNULÉE" */}
|
||||
<Card className="shadow-card border-0 mb-8">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Filter className="w-5 h-5 text-muted-foreground" />
|
||||
<Select value={filtreStatut} onValueChange={setFiltreStatut}>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Statut" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="En attente">En attente</SelectItem>
|
||||
<SelectItem value="Validée">Validées</SelectItem>
|
||||
<SelectItem value="Refusée">Refusées</SelectItem>
|
||||
<SelectItem value="Annulée">Annulées</SelectItem>
|
||||
<SelectItem value="Toutes">Toutes</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Badge variant="secondary" className="ml-auto">
|
||||
{demandes.length} demande{demandes.length > 1 ? 's' : ''}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-4">
|
||||
{demandes.map((demande) => (
|
||||
<Card key={demande.Id} className="shadow-card border-0 bg-gradient-card hover:shadow-elegant transition-smooth">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-lg font-semibold">{demande.nomEmploye}</h3>
|
||||
{getStatutBadge(demande.Statut)}
|
||||
<Badge variant="outline">{demande.service}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-muted-foreground">Type</p>
|
||||
<p className="font-medium">{demande.typesConge}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Période</p>
|
||||
<p className="font-medium">
|
||||
{formatDate(demande.DateDebut)} - {formatDate(demande.DateFin)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Durée</p>
|
||||
<p className="font-medium">{demande.NombreJours} jour{demande.NombreJours > 1 ? 's' : ''}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Demandé le</p>
|
||||
<p className="font-medium">{formatDate(demande.DateDemande)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{demande.Commentaire && (
|
||||
<div className="bg-muted/50 p-3 rounded-lg">
|
||||
<p className="text-sm text-muted-foreground mb-1">Commentaire :</p>
|
||||
<p className="text-sm">{demande.Commentaire}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ✅ AFFICHER LES BOUTONS UNIQUEMENT POUR LES DEMANDES "EN ATTENTE" */}
|
||||
{demande.Statut === 'En attente' && (
|
||||
<div className="flex gap-2 ml-4">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="bg-success/10 hover:bg-success/20 border-success/20 text-success"
|
||||
onClick={() => setSelectedDemande(demande)}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-1" />
|
||||
Valider
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Valider la demande</DialogTitle>
|
||||
<DialogDescription>
|
||||
Demande de {demande.nomEmploye} pour {demande.typesConge}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Commentaire (optionnel)</Label>
|
||||
<Textarea
|
||||
placeholder="Ajouter un commentaire..."
|
||||
value={commentaireValidation}
|
||||
onChange={(e) => setCommentaireValidation(e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-success hover:bg-success/90"
|
||||
onClick={() => validerDemande(demande.Id, 'Validée')}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Validation...' : 'Confirmer la validation'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="bg-destructive/10 hover:bg-destructive/20 border-destructive/20 text-destructive"
|
||||
onClick={() => setSelectedDemande(demande)}
|
||||
>
|
||||
<XCircle className="w-4 h-4 mr-1" />
|
||||
Refuser
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Refuser la demande</DialogTitle>
|
||||
<DialogDescription>
|
||||
Demande de {demande.nomEmploye} pour {demande.typesConge}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Motif du refus <span className="text-destructive">*</span></Label>
|
||||
<Textarea
|
||||
placeholder="Expliquer le motif du refus..."
|
||||
value={commentaireValidation}
|
||||
onChange={(e) => setCommentaireValidation(e.target.value)}
|
||||
rows={3}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-destructive hover:bg-destructive/90"
|
||||
onClick={() => validerDemande(demande.Id, 'Refusée')}
|
||||
disabled={loading || !commentaireValidation}
|
||||
>
|
||||
{loading ? 'Refus...' : 'Confirmer le refus'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{demandes.length === 0 && (
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-12 text-center">
|
||||
<AlertCircle className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">
|
||||
{filtreStatut === "Toutes"
|
||||
? "Aucune demande à afficher"
|
||||
: `Aucune demande ${filtreStatut.toLowerCase()}`
|
||||
}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ValidationDemandes;
|
||||
Reference in New Issue
Block a user