refactor: managements pages simplification

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

@@ -1,18 +1,9 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
-import { Plus, Edit, Trash2, Users, Search, Building2 } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Plus, Edit, Trash2, Users, Building2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -21,6 +12,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { SkillCategory, Team as TeamType } from "@/lib/types";
 import { TeamStats } from "@/services/admin-service";
@@ -29,13 +27,14 @@ import {
   Team,
 } from "@/services/admin-management-service";
 import {
-  TreeViewContainer,
   TreeCategoryHeader,
   TreeItemRow,
-  TreeSearchControls,
   TeamMetrics,
 } from "@/components/admin";
 import { TeamMembersModal } from "@/components/admin/management/team-members-modal";
+import { TreeViewPage } from "../tree-view-page";
+import { useTreeView } from "@/hooks/use-tree-view";
+import { useFormDialog } from "@/hooks/use-form-dialog";
 
 interface TeamsManagementProps {
   teams: TeamType[];
@@ -54,8 +53,6 @@ export function TeamsManagement({
   skillCategories,
 }: TeamsManagementProps) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [isMembersModalOpen, setIsMembersModalOpen] = useState(false);
   const [selectedTeam, setSelectedTeam] = useState<any>(null);
   const [editingTeam, setEditingTeam] = useState<any>(null);
@@ -64,75 +61,26 @@ export function TeamsManagement({
     direction: "",
   });
   const { toast } = useToast();
-
-  // État pour les directions ouvertes/fermées
-  const [expandedDirections, setExpandedDirections] = useState<Set<string>>(
-    new Set()
-  );
+  const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();
 
   // É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 = localTeams.reduce((acc, team) => {
-      if (!acc[team.direction]) {
-        acc[team.direction] = [];
-      }
-      acc[team.direction].push(team);
-      return acc;
-    }, {} as Record<string, TeamType[]>);
-
-    // Filtrer les teams en fonction de la recherche
-    return Object.entries(teamsByDirection).reduce(
-      (acc, [direction, directionTeams]) => {
-        const filteredTeams = directionTeams.filter((team) => {
-          const matchesSearch = team.name
-            .toLowerCase()
-            .includes(searchTerm.toLowerCase());
-          return matchesSearch;
-        });
-
-        if (filteredTeams.length > 0) {
-          acc[direction] = filteredTeams;
-        }
-        return acc;
-      },
-      {} as Record<string, TeamType[]>
-    );
-  }, [localTeams, searchTerm]);
-
-  // Fonctions pour gérer l'expansion des directions
-  const toggleDirection = useMemo(
-    () => (direction: string) => {
-      setExpandedDirections((prev) => {
-        const newExpanded = new Set(prev);
-        if (newExpanded.has(direction)) {
-          newExpanded.delete(direction);
-        } else {
-          newExpanded.add(direction);
-        }
-        return newExpanded;
-      });
-    },
-    []
-  );
-
-  const expandAll = useMemo(
-    () => () => {
-      setExpandedDirections(new Set(Object.keys(filteredTeamsByDirection)));
-    },
-    [filteredTeamsByDirection]
-  );
-
-  const collapseAll = useMemo(
-    () => () => {
-      setExpandedDirections(new Set());
-    },
-    []
-  );
+  // Utilisation du hook factorisé
+  const {
+    filteredDataByCategory: filteredTeamsByDirection,
+    expandedCategories: expandedDirections,
+    toggleCategory: toggleDirection,
+    expandAll,
+    collapseAll,
+  } = useTreeView({
+    data: localTeams,
+    searchFields: ['name'],
+    groupBy: (team) => team.direction,
+    searchTerm,
+    onSearchChange: setSearchTerm,
+  });
 
   const getTeamStats = (teamId: string): TeamStats | undefined => {
     return localTeamStats.find((stats) => stats.teamId === teamId);
@@ -159,33 +107,11 @@ export function TeamsManagement({
     }
   };
 
-  // Rafraîchir les stats des équipes depuis l'API des équipes
-  const refreshTeamStats = async () => {
-    try {
-      const teamsData = await AdminManagementService.getTeams();
-      // Pour l'instant, on ne rafraîchit pas automatiquement
-      // Les stats locales sont mises à jour manuellement lors des actions
-    } catch (error) {
-      console.error("Error refreshing team stats:", error);
-    }
-  };
-
   // Charger les teams au montage du composant
   useEffect(() => {
     fetchTeams();
   }, []);
 
-  // Ouvrir automatiquement les directions qui contiennent des résultats lors de la recherche
-  useEffect(() => {
-    if (searchTerm.trim()) {
-      const directionsWithResults = Object.keys(filteredTeamsByDirection);
-      setExpandedDirections(new Set(directionsWithResults));
-    } else {
-      // Si pas de recherche, fermer toutes les directions
-      setExpandedDirections(new Set());
-    }
-  }, [searchTerm, filteredTeamsByDirection]);
-
   const handleCreateTeam = async () => {
     if (!teamFormData.name || !teamFormData.direction) {
       toast({
@@ -204,7 +130,7 @@ export function TeamsManagement({
       });
 
       setTeamFormData({ name: "", direction: "" });
-      setIsCreateDialogOpen(false);
+      closeCreateDialog();
 
       // Mettre à jour l'état local avec la nouvelle équipe
       const newLocalTeam: TeamType = {
@@ -241,7 +167,7 @@ export function TeamsManagement({
       name: team.name,
       direction: team.direction,
     });
-    setIsEditDialogOpen(true);
+    openEditDialog();
   };
 
   const handleViewMembers = (team: any) => {
@@ -283,7 +209,7 @@ export function TeamsManagement({
         description: "Équipe mise à jour avec succès",
       });
 
-      setIsEditDialogOpen(false);
+      closeEditDialog();
       setEditingTeam(null);
       setTeamFormData({ name: "", direction: "" });
 
@@ -406,98 +332,91 @@ export function TeamsManagement({
     new Set(localTeams.map((team) => team.direction))
   );
 
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
-        <div>
-          <h2 className="text-2xl font-bold text-white">Gestion des Teams</h2>
-          <p className="text-slate-400">
-            Créez, modifiez et supprimez les équipes de votre organisation
-          </p>
-        </div>
-        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-          <DialogTrigger asChild>
-            <Button onClick={resetForm}>
-              <Plus className="w-4 h-4 mr-2" />
-              Nouvelle Équipe
+  const headerActions = (
+    <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
+      <DialogTrigger asChild>
+        <Button onClick={() => { resetForm(); openCreateDialog(); }}>
+          <Plus className="w-4 h-4 mr-2" />
+          Nouvelle Équipe
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Créer une nouvelle équipe</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="team-name">Nom de l'équipe *</Label>
+            <Input
+              id="team-name"
+              value={teamFormData.name}
+              onChange={(e) =>
+                setTeamFormData({ ...teamFormData, name: e.target.value })
+              }
+              placeholder="Ex: Équipe Frontend, Équipe Backend"
+            />
+          </div>
+          <div>
+            <Label htmlFor="team-direction">Direction *</Label>
+            <Select
+              value={teamFormData.direction}
+              onValueChange={(value) =>
+                setTeamFormData({ ...teamFormData, direction: value })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionner une direction" />
+              </SelectTrigger>
+              <SelectContent>
+                {directions.map((direction) => (
+                  <SelectItem key={direction} value={direction}>
+                    {direction}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button
+              variant="outline"
+              onClick={closeCreateDialog}
+            >
+              Annuler
             </Button>
-          </DialogTrigger>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>Créer une nouvelle équipe</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4">
-              <div>
-                <Label htmlFor="team-name">Nom de l'équipe *</Label>
-                <Input
-                  id="team-name"
-                  value={teamFormData.name}
-                  onChange={(e) =>
-                    setTeamFormData({ ...teamFormData, name: e.target.value })
-                  }
-                  placeholder="Ex: Équipe Frontend, Équipe Backend"
-                />
-              </div>
-              <div>
-                <Label htmlFor="team-direction">Direction *</Label>
-                <Select
-                  value={teamFormData.direction}
-                  onValueChange={(value) =>
-                    setTeamFormData({ ...teamFormData, direction: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Sélectionner une direction" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {directions.map((direction) => (
-                      <SelectItem key={direction} value={direction}>
-                        {direction}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex justify-end gap-2 pt-4">
-                <Button
-                  variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
-                >
-                  Annuler
-                </Button>
-                <Button onClick={handleCreateTeam}>Créer</Button>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
+            <Button onClick={handleCreateTeam}>Créer</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
 
-      {/* Filtres et contrôles */}
-      <TreeSearchControls
+  const emptyState = (
+    <div className="text-center py-8">
+      <Building2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
+      <h3 className="text-base font-medium text-slate-400 mb-1">
+        {searchTerm ? "Aucune équipe trouvée" : "Aucune équipe"}
+      </h3>
+      <p className="text-sm text-slate-500">
+        {searchTerm
+          ? "Essayez de modifier vos critères de recherche"
+          : "Commencez par créer votre première équipe"}
+      </p>
+    </div>
+  );
+
+  return (
+    <>
+      <TreeViewPage
+        title="Gestion des Teams"
+        description="Créez, modifiez et supprimez les équipes de votre organisation"
         searchTerm={searchTerm}
         onSearchChange={setSearchTerm}
         onExpandAll={expandAll}
         onCollapseAll={collapseAll}
-        placeholder="Rechercher une équipe..."
-      />
-
-      {/* Vue arborescente des Teams */}
-      <TreeViewContainer
+        searchPlaceholder="Rechercher une équipe..."
         hasContent={Object.keys(filteredTeamsByDirection).length > 0}
-        emptyState={
-          <div className="text-center py-8">
-            <Building2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
-            <h3 className="text-base font-medium text-slate-400 mb-1">
-              {searchTerm ? "Aucune équipe trouvée" : "Aucune équipe"}
-            </h3>
-            <p className="text-sm text-slate-500">
-              {searchTerm
-                ? "Essayez de modifier vos critères de recherche"
-                : "Commencez par créer votre première équipe"}
-            </p>
-          </div>
-        }
+        emptyState={emptyState}
+        headerActions={headerActions}
       >
         {Object.entries(filteredTeamsByDirection).map(
           ([direction, directionTeams], index) => (
@@ -563,10 +482,10 @@ export function TeamsManagement({
             </div>
           )
         )}
-      </TreeViewContainer>
+      </TreeViewPage>
 
       {/* Dialog d'édition */}
-      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+      <Dialog open={isEditDialogOpen} onOpenChange={closeEditDialog}>
         <DialogContent className="sm:max-w-[500px]">
           <DialogHeader>
             <DialogTitle>Modifier l'équipe</DialogTitle>
@@ -606,7 +525,7 @@ export function TeamsManagement({
             <div className="flex justify-end gap-2 pt-4">
               <Button
                 variant="outline"
-                onClick={() => setIsEditDialogOpen(false)}
+                onClick={closeEditDialog}
               >
                 Annuler
               </Button>
@@ -635,6 +554,6 @@ export function TeamsManagement({
           }}
         />
       )}
-    </div>
+    </>
   );
 }