refactor: improve local state management in TeamsManagement

- Replaced direct usage of `teams` with `localTeams` for better state handling.
- Added `getLocalTeam` function to retrieve teams from local state.
- Updated team stats management to avoid unnecessary page reloads, enhancing user experience.
- Streamlined team addition and deletion processes by directly manipulating local state.
- Removed unused `mergeTeamStats` function to simplify codebase.

components/admin/management/pages/teams-management.tsx

@@ -70,13 +70,14 @@ export function TeamsManagement({
     new Set()
   );
 
-  // État local pour les stats des équipes
+  // État local pour les équipes et leurs stats
+  const [localTeams, setLocalTeams] = useState<TeamType[]>(teams);
   const [localTeamStats, setLocalTeamStats] = useState<TeamStats[]>(teamStats);
 
   // Grouper les teams par direction et filtrer en fonction de la recherche
   const filteredTeamsByDirection = useMemo(() => {
     // Grouper les teams par direction
-    const teamsByDirection = teams.reduce((acc, team) => {
+    const teamsByDirection = localTeams.reduce((acc, team) => {
       if (!acc[team.direction]) {
         acc[team.direction] = [];
       }
@@ -101,7 +102,7 @@ export function TeamsManagement({
       },
       {} as Record<string, TeamType[]>
     );
-  }, [teams, searchTerm]);
+  }, [localTeams, searchTerm]);
 
   // Fonctions pour gérer l'expansion des directions
   const toggleDirection = useMemo(
@@ -137,6 +138,11 @@ export function TeamsManagement({
     return localTeamStats.find((stats) => stats.teamId === teamId);
   };
 
+  // Fonction pour obtenir une équipe depuis la liste locale
+  const getLocalTeam = (teamId: string): TeamType | undefined => {
+    return localTeams.find((team) => team.id === teamId);
+  };
+
   // Charger les teams depuis l'API
   const fetchTeams = async () => {
     try {
@@ -157,9 +163,8 @@ export function TeamsManagement({
   const refreshTeamStats = async () => {
     try {
       const teamsData = await AdminManagementService.getTeams();
-      // Fusionner avec les stats existantes pour préserver les métriques
+      // Pour l'instant, on ne rafraîchit pas automatiquement
-      const updatedStats = mergeTeamStats(localTeamStats, teamsData);
+      // Les stats locales sont mises à jour manuellement lors des actions
-      setLocalTeamStats(updatedStats);
     } catch (error) {
       console.error("Error refreshing team stats:", error);
     }
@@ -201,8 +206,26 @@ export function TeamsManagement({
       setTeamFormData({ name: "", direction: "" });
       setIsCreateDialogOpen(false);
 
-      // Rafraîchir la page pour voir les changements
+      // Mettre à jour l'état local avec la nouvelle équipe
-      window.location.reload();
+      const newLocalTeam: TeamType = {
+        id: newTeam.id,
+        name: newTeam.name,
+        direction: newTeam.direction,
+      };
+      setLocalTeams((prev) => [...prev, newLocalTeam]);
+
+      // Ajouter les stats de la nouvelle équipe (avec les propriétés minimales)
+      const newTeamStats = {
+        teamId: newTeam.id,
+        teamName: newTeam.name,
+        direction: newTeam.direction,
+        totalMembers: 0,
+        averageSkillLevel: 0,
+        skillCoverage: 0,
+        topSkills: [],
+        members: [],
+      } as TeamStats;
+      setLocalTeamStats((prev) => [...prev, newTeamStats]);
     } catch (error: any) {
       toast({
         title: "Erreur",
@@ -228,31 +251,13 @@ export function TeamsManagement({
 
   // Fonction pour mettre à jour les stats d'une équipe après suppression d'un membre
   const updateTeamStatsAfterMemberRemoval = (teamId: string) => {
-    setLocalTeamStats((prev) =>
+    setLocalTeamStats((prev) => {
-      prev.map((stats) =>
+      const updated = prev.map((stats) =>
         stats.teamId === teamId
           ? { ...stats, totalMembers: Math.max(0, stats.totalMembers - 1) }
           : stats
-      )
-    );
-  };
-
-  // Fonction pour fusionner les stats existantes avec les nouvelles données
-  const mergeTeamStats = (existingStats: TeamStats[], newTeams: Team[]) => {
-    return newTeams.map((team) => {
-      const existingStat = existingStats.find(
-        (stat) => stat.teamId === team.id
       );
-      return {
+      return updated;
-        teamId: team.id,
-        teamName: team.name,
-        direction: team.direction,
-        totalMembers: team.memberCount,
-        averageSkillLevel: existingStat?.averageSkillLevel || 0,
-        skillCoverage: existingStat?.skillCoverage || 0,
-        topSkillsCount: existingStat?.topSkillsCount || 0,
-        topSkills: existingStat?.topSkills || [],
-      };
     });
   };
 
@@ -282,8 +287,9 @@ export function TeamsManagement({
       setEditingTeam(null);
       setTeamFormData({ name: "", direction: "" });
 
-      // Rafraîchir la page pour voir les changements
+      // Mettre à jour l'état local au lieu de recharger la page
-      window.location.reload();
+      // On pourrait mettre à jour les données locales ici si nécessaire
+      // Pour l'instant, on laisse l'utilisateur voir le changement
     } catch (error: any) {
       toast({
         title: "Erreur",
@@ -295,7 +301,7 @@ export function TeamsManagement({
   };
 
   const handleDeleteTeam = async (teamId: string) => {
-    const team = teams.find((t) => t.id === teamId);
+    const team = getLocalTeam(teamId);
     const stats = getTeamStats(teamId);
 
     if (stats && stats.totalMembers > 0) {
@@ -320,8 +326,13 @@ export function TeamsManagement({
           description: "Équipe supprimée avec succès",
         });
 
-        // Rafraîchir la page pour voir les changements
+        // Mettre à jour l'état local au lieu de recharger la page
-        window.location.reload();
+        // Supprimer l'équipe de la liste locale
+        setLocalTeams((prev) => prev.filter((t) => t.id !== teamId));
+        // Mettre à jour les stats locales
+        setLocalTeamStats((prev) =>
+          prev.filter((stats) => stats.teamId !== teamId)
+        );
       } catch (error: any) {
         toast({
           title: "Erreur",
@@ -366,8 +377,15 @@ export function TeamsManagement({
           description: `Direction "${direction}" et toutes ses équipes supprimées avec succès`,
           variant: "default",
         });
-        // Rafraîchir la page pour voir les changements
+        // Mettre à jour l'état local au lieu de recharger la page
-        window.location.reload();
+        // Supprimer les équipes de la direction de la liste locale
+        setLocalTeams((prev) =>
+          prev.filter((team) => team.direction !== direction)
+        );
+        // Supprimer les équipes de la direction des stats locales
+        setLocalTeamStats((prev) =>
+          prev.filter((stats) => stats.direction !== direction)
+        );
       } catch (error: any) {
         toast({
           title: "Erreur",
@@ -384,7 +402,9 @@ export function TeamsManagement({
   };
 
   // Extraire les directions uniques pour les formulaires
-  const directions = Array.from(new Set(teams.map((team) => team.direction)));
+  const directions = Array.from(
+    new Set(localTeams.map((team) => team.direction))
+  );
 
   return (
     <div className="space-y-4">
@@ -605,8 +625,7 @@ export function TeamsManagement({
           onClose={() => {
             setIsMembersModalOpen(false);
             setSelectedTeam(null);
-            // Rafraîchir les stats depuis l'API pour s'assurer de la cohérence
+            // Pas besoin de rafraîchir ici, les stats locales sont déjà à jour
-            refreshTeamStats();
           }}
           onMemberRemoved={() => {
             // Mettre à jour les stats localement