refactor: managements pages simplification

components/admin/management/index.ts

@@ -4,3 +4,6 @@ export { TreeCategoryHeader } from "./tree-category-header";
 export { TreeItemRow } from "./tree-item-row";
 export { TreeSearchControls } from "./tree-search-controls";
 export { TeamMetrics } from "./team-metrics";
+
+// Composant de base pour les pages de gestion
+export { TreeViewPage } from "./tree-view-page";

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

@@ -1,16 +1,11 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import {
   Plus,
   Edit,
   Trash2,
   Code2,
-  Search,
-  Folder,
-  FolderOpen,
-  ChevronRight,
-  ChevronDown,
   Palette,
   Database,
   Cloud,
@@ -20,15 +15,6 @@ import {
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } 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,
@@ -38,6 +24,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { SkillCategory, Team } from "@/lib/types";
 import {
@@ -46,11 +39,12 @@ import {
 } from "@/services/admin-management-service";
 import { TechIcon } from "@/components/icons/tech-icon";
 import {
-  TreeViewContainer,
   TreeCategoryHeader,
   TreeItemRow,
-  TreeSearchControls,
 } from "@/components/admin";
+import { TreeViewPage } from "../tree-view-page";
+import { useTreeView } from "@/hooks/use-tree-view";
+import { useFormDialog } from "@/hooks/use-form-dialog";
 
 interface SkillsManagementProps {
   skillCategories: SkillCategory[];
@@ -69,8 +63,6 @@ export function SkillsManagement({
   teams,
 }: SkillsManagementProps) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [editingSkill, setEditingSkill] = useState<any>(null);
   const [skillFormData, setSkillFormData] = useState<SkillFormData>({
     name: "",
@@ -79,78 +71,26 @@ export function SkillsManagement({
     icon: "",
   });
   const { toast } = useToast();
+  const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();
 
   // État des skills
   const [skills, setSkills] = useState<Skill[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  // État pour les catégories ouvertes/fermées
-  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
-    new Set()
-  );
-
-  // Grouper les skills par catégorie et filtrer en fonction de la recherche
-  const filteredSkillsByCategory = useMemo(() => {
-    // Grouper les skills par catégorie
-    const skillsByCategory = skills.reduce((acc, skill) => {
-      if (!acc[skill.category]) {
-        acc[skill.category] = [];
-      }
-      acc[skill.category].push(skill);
-      return acc;
-    }, {} as Record<string, Skill[]>);
-
-    // Filtrer les skills en fonction de la recherche
-    return Object.entries(skillsByCategory).reduce(
-      (acc, [category, categorySkills]) => {
-        const filteredSkills = categorySkills.filter((skill) => {
-          const matchesSearch =
-            skill.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            (skill.description &&
-              skill.description
-                .toLowerCase()
-                .includes(searchTerm.toLowerCase()));
-          return matchesSearch;
-        });
-
-        if (filteredSkills.length > 0) {
-          acc[category] = filteredSkills;
-        }
-        return acc;
-      },
-      {} as Record<string, Skill[]>
-    );
-  }, [skills, searchTerm]);
-
-  // Fonctions pour gérer l'expansion des catégories
-  const toggleCategory = useMemo(
-    () => (category: string) => {
-      setExpandedCategories((prev) => {
-        const newExpanded = new Set(prev);
-        if (newExpanded.has(category)) {
-          newExpanded.delete(category);
-        } else {
-          newExpanded.add(category);
-        }
-        return newExpanded;
-      });
-    },
-    []
-  );
-
-  const expandAll = useMemo(
-    () => () => {
-      setExpandedCategories(new Set(Object.keys(filteredSkillsByCategory)));
-    },
-    [filteredSkillsByCategory]
-  );
-
-  const collapseAll = useMemo(
-    () => () => {
-      setExpandedCategories(new Set());
-    },
-    []
-  );
+  // Utilisation du hook factorisé
+  const {
+    filteredDataByCategory: filteredSkillsByCategory,
+    expandedCategories,
+    toggleCategory,
+    expandAll,
+    collapseAll,
+  } = useTreeView({
+    data: skills,
+    searchFields: ['name', 'description'],
+    groupBy: (skill) => skill.category,
+    searchTerm,
+    onSearchChange: setSearchTerm,
+  });
 
   // Charger les skills depuis l'API
   const fetchSkills = async () => {
@@ -175,17 +115,6 @@ export function SkillsManagement({
     fetchSkills();
   }, []);
 
-  // Ouvrir automatiquement les catégories qui contiennent des résultats lors de la recherche
-  useEffect(() => {
-    if (searchTerm.trim()) {
-      const categoriesWithResults = Object.keys(filteredSkillsByCategory);
-      setExpandedCategories(new Set(categoriesWithResults));
-    } else {
-      // Si pas de recherche, fermer toutes les catégories
-      setExpandedCategories(new Set());
-    }
-  }, [searchTerm, filteredSkillsByCategory]);
-
   const handleCreateSkill = async () => {
     if (!skillFormData.name || !skillFormData.categoryId) {
       toast({
@@ -208,7 +137,7 @@ export function SkillsManagement({
       const newSkill = await AdminManagementService.createSkill(skillData);
       setSkills([...skills, newSkill]);
       setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
-      setIsCreateDialogOpen(false);
+      closeCreateDialog();
 
       toast({
         title: "Succès",
@@ -234,7 +163,7 @@ export function SkillsManagement({
       description: skill.description,
       icon: skill.icon,
     });
-    setIsEditDialogOpen(true);
+    openEditDialog();
   };
 
   const handleUpdateSkill = async () => {
@@ -265,7 +194,7 @@ export function SkillsManagement({
       );
 
       setSkills(updatedSkills);
-      setIsEditDialogOpen(false);
+      closeEditDialog();
       setEditingSkill(null);
       setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
 
@@ -339,126 +268,119 @@ export function SkillsManagement({
     return Code2; // Par défaut
   };
 
-  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 Skills</h2>
-          <p className="text-slate-400">
-            Créez, modifiez et supprimez les skills de votre organisation
-          </p>
-        </div>
-        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-          <DialogTrigger asChild>
-            <Button onClick={resetForm}>
-              <Plus className="w-4 h-4 mr-2" />
-              Nouvelle Skill
+  const headerActions = (
+          <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
+      <DialogTrigger asChild>
+        <Button onClick={() => { resetForm(); openCreateDialog(); }}>
+          <Plus className="w-4 h-4 mr-2" />
+          Nouvelle Skill
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Créer une nouvelle skill</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="skill-name">Nom de la skill *</Label>
+            <Input
+              id="skill-name"
+              value={skillFormData.name}
+              onChange={(e) =>
+                setSkillFormData({ ...skillFormData, name: e.target.value })
+              }
+              placeholder="Ex: React, Node.js, PostgreSQL"
+            />
+          </div>
+          <div>
+            <Label htmlFor="skill-category">Catégorie *</Label>
+            <Select
+              value={skillFormData.categoryId}
+              onValueChange={(value) =>
+                setSkillFormData({ ...skillFormData, categoryId: value })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionner une catégorie" />
+              </SelectTrigger>
+              <SelectContent>
+                {skillCategories.map((category, index) => (
+                  <SelectItem key={index} value={index.toString()}>
+                    {category.category}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="skill-description">Description</Label>
+            <Textarea
+              id="skill-description"
+              value={skillFormData.description}
+              onChange={(e) =>
+                setSkillFormData({
+                  ...skillFormData,
+                  description: e.target.value,
+                })
+              }
+              placeholder="Description de la skill..."
+              rows={3}
+            />
+          </div>
+          <div>
+            <Label htmlFor="skill-icon">Icône</Label>
+            <Input
+              id="skill-icon"
+              value={skillFormData.icon}
+              onChange={(e) =>
+                setSkillFormData({ ...skillFormData, icon: e.target.value })
+              }
+              placeholder="Ex: react, nodejs, postgresql"
+            />
+          </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 skill</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4">
-              <div>
-                <Label htmlFor="skill-name">Nom de la skill *</Label>
-                <Input
-                  id="skill-name"
-                  value={skillFormData.name}
-                  onChange={(e) =>
-                    setSkillFormData({ ...skillFormData, name: e.target.value })
-                  }
-                  placeholder="Ex: React, Node.js, PostgreSQL"
-                />
-              </div>
-              <div>
-                <Label htmlFor="skill-category">Catégorie *</Label>
-                <Select
-                  value={skillFormData.categoryId}
-                  onValueChange={(value) =>
-                    setSkillFormData({ ...skillFormData, categoryId: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Sélectionner une catégorie" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {skillCategories.map((category, index) => (
-                      <SelectItem key={index} value={index.toString()}>
-                        {category.category}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <Label htmlFor="skill-description">Description</Label>
-                <Textarea
-                  id="skill-description"
-                  value={skillFormData.description}
-                  onChange={(e) =>
-                    setSkillFormData({
-                      ...skillFormData,
-                      description: e.target.value,
-                    })
-                  }
-                  placeholder="Description de la skill..."
-                  rows={3}
-                />
-              </div>
-              <div>
-                <Label htmlFor="skill-icon">Icône</Label>
-                <Input
-                  id="skill-icon"
-                  value={skillFormData.icon}
-                  onChange={(e) =>
-                    setSkillFormData({ ...skillFormData, icon: e.target.value })
-                  }
-                  placeholder="Ex: react, nodejs, postgresql"
-                />
-              </div>
-              <div className="flex justify-end gap-2 pt-4">
-                <Button
-                  variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
-                >
-                  Annuler
-                </Button>
-                <Button onClick={handleCreateSkill}>Créer</Button>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
+            <Button onClick={handleCreateSkill}>Créer</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
 
-      {/* Filtres et contrôles */}
-      <TreeSearchControls
+  const emptyState = (
+    <div className="text-center py-8">
+      <Code2 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 skill trouvée" : "Aucune skill"}
+      </h3>
+      <p className="text-slate-500 text-sm">
+        {searchTerm
+          ? "Essayez de modifier vos critères de recherche"
+          : "Commencez par créer votre première skill"}
+      </p>
+    </div>
+  );
+
+  return (
+    <>
+      <TreeViewPage
+        title="Gestion des Skills"
+        description="Créez, modifiez et supprimez les skills de votre organisation"
         searchTerm={searchTerm}
         onSearchChange={setSearchTerm}
         onExpandAll={expandAll}
         onCollapseAll={collapseAll}
-        placeholder="Rechercher une skill..."
-      />
-
-      {/* Vue arborescente des Skills */}
-      <TreeViewContainer
+        searchPlaceholder="Rechercher une skill..."
+        hasContent={Object.keys(filteredSkillsByCategory).length > 0}
         isLoading={isLoading}
         loadingMessage="Chargement des skills..."
-        hasContent={Object.keys(filteredSkillsByCategory).length > 0}
-        emptyState={
-          <div className="text-center py-8">
-            <Code2 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 skill trouvée" : "Aucune skill"}
-            </h3>
-            <p className="text-slate-500 text-sm">
-              {searchTerm
-                ? "Essayez de modifier vos critères de recherche"
-                : "Commencez par créer votre première skill"}
-            </p>
-          </div>
-        }
+        emptyState={emptyState}
+        headerActions={headerActions}
       >
         {Object.entries(filteredSkillsByCategory).map(
           ([category, categorySkills], index) => (
@@ -513,10 +435,10 @@ export function SkillsManagement({
             </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 la skill</DialogTitle>
@@ -582,7 +504,7 @@ export function SkillsManagement({
             <div className="flex justify-end gap-2 pt-4">
               <Button
                 variant="outline"
-                onClick={() => setIsEditDialogOpen(false)}
+                onClick={closeEditDialog}
               >
                 Annuler
               </Button>
@@ -591,6 +513,6 @@ export function SkillsManagement({
           </div>
         </DialogContent>
       </Dialog>
-    </div>
+    </>
   );
 }

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>
+    </>
   );
 }

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

@@ -1,18 +1,9 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
-import { Users, User, Trash2, Search, Building2 } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Users, User, Trash2, 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,17 +12,25 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import {
   AdminManagementService,
   Team,
 } from "@/services/admin-management-service";
 import {
-  TreeViewContainer,
   TreeCategoryHeader,
   TreeItemRow,
-  TreeSearchControls,
 } from "@/components/admin";
+import { TreeViewPage } from "../tree-view-page";
+import { useTreeView } from "@/hooks/use-tree-view";
+import { useFormDialog } from "@/hooks/use-form-dialog";
 
 interface User {
   uuid: string;
@@ -54,46 +53,28 @@ export function UsersManagement() {
   const [error, setError] = useState<string | null>(null);
   const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState("");
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [userFormData, setUserFormData] = useState<UserFormData>({
     firstName: "",
     lastName: "",
     teamId: "",
   });
   const { toast } = useToast();
+  const { isCreateDialogOpen, openCreateDialog, closeCreateDialog } = useFormDialog();
 
-  // État pour les équipes ouvertes/fermées
-  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
-
-  // Grouper les utilisateurs par équipe et filtrer en fonction de la recherche
-  const filteredUsersByTeam = useMemo(() => {
-    // Grouper les utilisateurs par équipe
-    const usersByTeam = users.reduce((acc, user) => {
-      const teamKey = user.teamName || "Sans équipe";
-      if (!acc[teamKey]) {
-        acc[teamKey] = [];
-      }
-      acc[teamKey].push(user);
-      return acc;
-    }, {} as Record<string, User[]>);
-
-    // Filtrer les utilisateurs en fonction de la recherche
-    return Object.entries(usersByTeam).reduce((acc, [teamName, teamUsers]) => {
-      const filteredUsers = teamUsers.filter((user) => {
-        const matchesSearch =
-          user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          (user.teamName &&
-            user.teamName.toLowerCase().includes(searchTerm.toLowerCase()));
-        return matchesSearch;
-      });
-
-      if (filteredUsers.length > 0) {
-        acc[teamName] = filteredUsers;
-      }
-      return acc;
-    }, {} as Record<string, User[]>);
-  }, [users, searchTerm]);
+  // Utilisation du hook factorisé
+  const {
+    filteredDataByCategory: filteredUsersByTeam,
+    expandedCategories: expandedTeams,
+    toggleCategory: toggleTeam,
+    expandAll,
+    collapseAll,
+  } = useTreeView({
+    data: users,
+    searchFields: ['firstName', 'lastName'],
+    groupBy: (user) => user.teamName || "Sans équipe",
+    searchTerm,
+    onSearchChange: setSearchTerm,
+  });
 
   useEffect(() => {
     fetchUsers();
@@ -126,46 +107,6 @@ export function UsersManagement() {
     }
   };
 
-  // Fonctions pour gérer l'expansion des équipes
-  const toggleTeam = useMemo(
-    () => (teamName: string) => {
-      setExpandedTeams((prev) => {
-        const newExpanded = new Set(prev);
-        if (newExpanded.has(teamName)) {
-          newExpanded.delete(teamName);
-        } else {
-          newExpanded.add(teamName);
-        }
-        return newExpanded;
-      });
-    },
-    []
-  );
-
-  const expandAll = useMemo(
-    () => () => {
-      setExpandedTeams(new Set(Object.keys(filteredUsersByTeam)));
-    },
-    [filteredUsersByTeam]
-  );
-
-  const collapseAll = useMemo(
-    () => () => {
-      setExpandedTeams(new Set());
-    },
-    []
-  );
-
-  // Ouvrir automatiquement les équipes qui contiennent des résultats lors de la recherche
-  useEffect(() => {
-    if (searchTerm.trim()) {
-      const teamsWithResults = Object.keys(filteredUsersByTeam);
-      setExpandedTeams(new Set(teamsWithResults));
-    }
-    // Ne pas fermer automatiquement les équipes si pas de recherche
-    // Cela évite que les équipes se ferment lors de la suppression d'utilisateurs
-  }, [searchTerm]); // Retiré filteredUsersByTeam de la dépendance
-
   const handleCreateUser = async () => {
     if (!userFormData.firstName || !userFormData.lastName) {
       toast({
@@ -184,7 +125,7 @@ export function UsersManagement() {
       });
 
       setUserFormData({ firstName: "", lastName: "", teamId: "" });
-      setIsCreateDialogOpen(false);
+      closeCreateDialog();
 
       // Rafraîchir la liste
       fetchUsers();
@@ -289,163 +230,157 @@ export function UsersManagement() {
     );
   }
 
-  return (
-    <div className="space-y-6">
-      {/* En-tête avec bouton de création */}
-      <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-white">
-          Gestion des utilisateurs
-        </h2>
-        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-          <DialogTrigger asChild>
-            <Button>
-              <Users className="w-4 h-4 mr-2" />
-              Créer un utilisateur
-            </Button>
-          </DialogTrigger>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>Créer un nouvel utilisateur</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4">
-              <div>
-                <Label htmlFor="user-first-name">Prénom *</Label>
-                <Input
-                  id="user-first-name"
-                  value={userFormData.firstName}
-                  onChange={(e) =>
-                    setUserFormData({
-                      ...userFormData,
-                      firstName: e.target.value,
-                    })
-                  }
-                  placeholder="Prénom de l'utilisateur"
-                />
-              </div>
-              <div>
-                <Label htmlFor="user-last-name">Nom *</Label>
-                <Input
-                  id="user-last-name"
-                  value={userFormData.lastName}
-                  onChange={(e) =>
-                    setUserFormData({
-                      ...userFormData,
-                      lastName: e.target.value,
-                    })
-                  }
-                  placeholder="Nom de l'utilisateur"
-                />
-              </div>
-              <div>
-                <Label htmlFor="user-team">Équipe</Label>
-                <Select
-                  value={userFormData.teamId}
-                  onValueChange={(value) =>
-                    setUserFormData({ ...userFormData, teamId: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Sélectionner une équipe (optionnel)" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="">Aucune équipe</SelectItem>
-                    {teams.map((team) => (
-                      <SelectItem key={team.id} value={team.id}>
-                        {team.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex justify-end gap-2 pt-4">
-                <Button
-                  variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
-                >
-                  Annuler
-                </Button>
-                <Button onClick={handleCreateUser}>Créer</Button>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
-
-      {/* Filtres et contrôles */}
-      <TreeSearchControls
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-        onExpandAll={expandAll}
-        onCollapseAll={collapseAll}
-        placeholder="Rechercher un utilisateur..."
-      />
-
-      {/* Vue arborescente des utilisateurs */}
-      <TreeViewContainer
-        hasContent={Object.keys(filteredUsersByTeam).length > 0}
-        emptyState={
-          <div className="text-center py-8">
-            <Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
-            <h3 className="text-base font-medium text-slate-400 mb-1">
-              {searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
-            </h3>
-            <p className="text-sm text-slate-500">
-              {searchTerm
-                ? "Essayez de modifier vos critères de recherche"
-                : "Commencez par créer votre premier utilisateur"}
-            </p>
+  const headerActions = (
+    <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
+      <DialogTrigger asChild>
+        <Button onClick={openCreateDialog}>
+          <Users className="w-4 h-4 mr-2" />
+          Créer un utilisateur
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Créer un nouvel utilisateur</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="user-first-name">Prénom *</Label>
+            <Input
+              id="user-first-name"
+              value={userFormData.firstName}
+              onChange={(e) =>
+                setUserFormData({
+                  ...userFormData,
+                  firstName: e.target.value,
+                })
+              }
+              placeholder="Prénom de l'utilisateur"
+            />
           </div>
-        }
-      >
-        {Object.entries(filteredUsersByTeam).map(
-          ([teamName, teamUsers], index) => (
-            <div key={teamName}>
-              <TreeCategoryHeader
-                category={teamName}
-                isExpanded={expandedTeams.has(teamName)}
-                onToggle={() => toggleTeam(teamName)}
-                icon={<Building2 className="w-5 h-5 text-blue-400" />}
-                itemCount={teamUsers.length}
-                itemLabel="utilisateur"
-                showSeparator={index > 0}
-                canDelete={false}
-                isDirection={false}
-              />
+          <div>
+            <Label htmlFor="user-last-name">Nom *</Label>
+            <Input
+              id="user-last-name"
+              value={userFormData.lastName}
+              onChange={(e) =>
+                setUserFormData({
+                  ...userFormData,
+                  lastName: e.target.value,
+                })
+              }
+              placeholder="Nom de l'utilisateur"
+            />
+          </div>
+          <div>
+            <Label htmlFor="user-team">Équipe</Label>
+            <Select
+              value={userFormData.teamId}
+              onValueChange={(value) =>
+                setUserFormData({ ...userFormData, teamId: value })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionner une équipe (optionnel)" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">Aucune équipe</SelectItem>
+                {teams.map((team) => (
+                  <SelectItem key={team.id} value={team.id}>
+                    {team.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button
+              variant="outline"
+              onClick={closeCreateDialog}
+            >
+              Annuler
+            </Button>
+            <Button onClick={handleCreateUser}>Créer</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
 
-              {/* Liste des utilisateurs de l'équipe */}
-              {expandedTeams.has(teamName) && (
-                <div className="bg-slate-950/30">
-                  {teamUsers.map((user, userIndex) => (
-                    <TreeItemRow
-                      key={user.uuid}
-                      icon={<User className="w-5 h-5 text-green-400" />}
-                      title={`${user.firstName} ${user.lastName}`}
-                      badges={[
-                        {
-                          text: user.hasEvaluations
-                            ? "A des évaluations"
-                            : "Aucune évaluation",
-                          variant: user.hasEvaluations ? "default" : "outline",
-                        },
-                      ]}
-                      onDelete={() => handleDeleteUser(user)}
-                      canDelete={!user.teamName}
-                      showSeparator={userIndex > 0}
-                      additionalInfo={
-                        <p className="text-slate-500 text-xs">
-                          {user.teamName
-                            ? `Équipe: ${user.teamName}`
-                            : "Aucune équipe"}
-                        </p>
-                      }
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          )
-        )}
-      </TreeViewContainer>
+  const emptyState = (
+    <div className="text-center py-8">
+      <Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
+      <h3 className="text-base font-medium text-slate-400 mb-1">
+        {searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
+      </h3>
+      <p className="text-sm text-slate-500">
+        {searchTerm
+          ? "Essayez de modifier vos critères de recherche"
+          : "Commencez par créer votre premier utilisateur"}
+      </p>
     </div>
   );
+
+  return (
+    <TreeViewPage
+      title="Gestion des utilisateurs"
+      description="Gérez les utilisateurs de votre organisation"
+      searchTerm={searchTerm}
+      onSearchChange={setSearchTerm}
+      onExpandAll={expandAll}
+      onCollapseAll={collapseAll}
+      searchPlaceholder="Rechercher un utilisateur..."
+      hasContent={Object.keys(filteredUsersByTeam).length > 0}
+      emptyState={emptyState}
+      headerActions={headerActions}
+    >
+      {Object.entries(filteredUsersByTeam).map(
+        ([teamName, teamUsers], index) => (
+          <div key={teamName}>
+            <TreeCategoryHeader
+              category={teamName}
+              isExpanded={expandedTeams.has(teamName)}
+              onToggle={() => toggleTeam(teamName)}
+              icon={<Building2 className="w-5 h-5 text-blue-400" />}
+              itemCount={teamUsers.length}
+              itemLabel="utilisateur"
+              showSeparator={index > 0}
+              canDelete={false}
+              isDirection={false}
+            />
+
+            {/* Liste des utilisateurs de l'équipe */}
+            {expandedTeams.has(teamName) && (
+              <div className="bg-slate-950/30">
+                {teamUsers.map((user, userIndex) => (
+                  <TreeItemRow
+                    key={user.uuid}
+                    icon={<User className="w-5 h-5 text-green-400" />}
+                    title={`${user.firstName} ${user.lastName}`}
+                    badges={[
+                      {
+                        text: user.hasEvaluations
+                          ? "A des évaluations"
+                          : "Aucune évaluation",
+                        variant: user.hasEvaluations ? "default" : "outline",
+                      },
+                    ]}
+                    onDelete={() => handleDeleteUser(user)}
+                    canDelete={!user.teamName}
+                    showSeparator={userIndex > 0}
+                    additionalInfo={
+                      <p className="text-slate-500 text-xs">
+                        {user.teamName
+                          ? `Équipe: ${user.teamName}`
+                          : "Aucune équipe"}
+                      </p>
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )
+      )}
+    </TreeViewPage>
+  );
 }

components/admin/management/tree-view-page.tsx

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { TreeSearchControls } from "@/components/admin";
+import { TreeViewContainer } from "@/components/admin";
+
+interface TreeViewPageProps {
+  title: string;
+  description: string;
+  searchTerm: string;
+  onSearchChange: (term: string) => void;
+  onExpandAll: () => void;
+  onCollapseAll: () => void;
+  searchPlaceholder: string;
+  hasContent: boolean;
+  isLoading?: boolean;
+  loadingMessage?: string;
+  emptyState: ReactNode;
+  headerActions?: ReactNode;
+  children: ReactNode;
+}
+
+export function TreeViewPage({
+  title,
+  description,
+  searchTerm,
+  onSearchChange,
+  onExpandAll,
+  onCollapseAll,
+  searchPlaceholder,
+  hasContent,
+  isLoading = false,
+  loadingMessage = "Chargement...",
+  emptyState,
+  headerActions,
+  children,
+}: TreeViewPageProps) {
+  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">{title}</h2>
+          <p className="text-slate-400">{description}</p>
+        </div>
+        {headerActions}
+      </div>
+
+      {/* Filtres et contrôles */}
+      <TreeSearchControls
+        searchTerm={searchTerm}
+        onSearchChange={onSearchChange}
+        onExpandAll={onExpandAll}
+        onCollapseAll={onCollapseAll}
+        placeholder={searchPlaceholder}
+      />
+
+      {/* Vue arborescente */}
+      <TreeViewContainer
+        isLoading={isLoading}
+        loadingMessage={loadingMessage}
+        hasContent={hasContent}
+        emptyState={emptyState}
+      >
+        {children}
+      </TreeViewContainer>
+    </div>
+  );
+}

hooks/use-form-dialog.ts

@@ -0,0 +1,20 @@
+import { useState, useCallback } from "react";
+
+export function useFormDialog() {
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+
+  const openCreateDialog = useCallback(() => setIsCreateDialogOpen(true), []);
+  const closeCreateDialog = useCallback(() => setIsCreateDialogOpen(false), []);
+  const openEditDialog = useCallback(() => setIsEditDialogOpen(true), []);
+  const closeEditDialog = useCallback(() => setIsEditDialogOpen(false), []);
+
+  return {
+    isCreateDialogOpen,
+    isEditDialogOpen,
+    openCreateDialog,
+    closeCreateDialog,
+    openEditDialog,
+    closeEditDialog,
+  };
+}

hooks/use-tree-view.ts

@@ -0,0 +1,89 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+
+interface UseTreeViewOptions<T> {
+  data: T[];
+  searchFields: (keyof T)[];
+  groupBy: (item: T) => string;
+  searchTerm: string;
+  onSearchChange: (term: string) => void;
+}
+
+export function useTreeView<T>({
+  data,
+  searchFields,
+  groupBy,
+  searchTerm,
+  onSearchChange,
+}: UseTreeViewOptions<T>) {
+  // État pour les catégories ouvertes/fermées
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
+
+  // Grouper les données par catégorie et filtrer en fonction de la recherche
+  const filteredDataByCategory = useMemo(() => {
+    // Grouper les données par catégorie
+    const dataByCategory = data.reduce((acc, item) => {
+      const categoryKey = groupBy(item);
+      if (!acc[categoryKey]) {
+        acc[categoryKey] = [];
+      }
+      acc[categoryKey].push(item);
+      return acc;
+    }, {} as Record<string, T[]>);
+
+    // Filtrer les données en fonction de la recherche
+    return Object.entries(dataByCategory).reduce((acc, [category, categoryItems]) => {
+      const filteredItems = categoryItems.filter((item) => {
+        const matchesSearch = searchFields.some((field) => {
+          const value = item[field];
+          if (typeof value === 'string') {
+            return value.toLowerCase().includes(searchTerm.toLowerCase());
+          }
+          return false;
+        });
+        return matchesSearch;
+      });
+
+      if (filteredItems.length > 0) {
+        acc[category] = filteredItems;
+      }
+      return acc;
+    }, {} as Record<string, T[]>);
+  }, [data, searchFields, groupBy, searchTerm]);
+
+  // Fonctions pour gérer l'expansion des catégories
+  const toggleCategory = useCallback((category: string) => {
+    setExpandedCategories((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(category)) {
+        newExpanded.delete(category);
+      } else {
+        newExpanded.add(category);
+      }
+      return newExpanded;
+    });
+  }, []);
+
+  const expandAll = useCallback(() => {
+    setExpandedCategories(new Set(Object.keys(filteredDataByCategory)));
+  }, [filteredDataByCategory]);
+
+  const collapseAll = useCallback(() => {
+    setExpandedCategories(new Set());
+  }, []);
+
+  // Ouvrir automatiquement les catégories qui contiennent des résultats lors de la recherche
+  useEffect(() => {
+    if (searchTerm.trim()) {
+      const categoriesWithResults = Object.keys(filteredDataByCategory);
+      setExpandedCategories(new Set(categoriesWithResults));
+    }
+  }, [searchTerm, filteredDataByCategory]);
+
+  return {
+    filteredDataByCategory,
+    expandedCategories,
+    toggleCategory,
+    expandAll,
+    collapseAll,
+  };
+}