GTARH_Fonctionnel_V1
This commit is contained in:
298
src/pages/TeamDetail.tsx
Normal file
298
src/pages/TeamDetail.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user