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,79 +71,27 @@ 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
+  // Utilisation du hook factorisé
-  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+  const {
-    new Set()
+    filteredDataByCategory: filteredSkillsByCategory,
-  );
+    expandedCategories,
-
+    toggleCategory,
-  // Grouper les skills par catégorie et filtrer en fonction de la recherche
+    expandAll,
-  const filteredSkillsByCategory = useMemo(() => {
+    collapseAll,
-    // Grouper les skills par catégorie
+  } = useTreeView({
-    const skillsByCategory = skills.reduce((acc, skill) => {
+    data: skills,
-      if (!acc[skill.category]) {
+    searchFields: ['name', 'description'],
-        acc[skill.category] = [];
+    groupBy: (skill) => skill.category,
-      }
+    searchTerm,
-      acc[skill.category].push(skill);
+    onSearchChange: setSearchTerm,
-      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());
-    },
-    []
-  );
-
   // Charger les skills depuis l'API
   const fetchSkills = async () => {
     try {
@@ -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,19 +268,10 @@ export function SkillsManagement({
     return Code2; // Par défaut
   };
 
-  return (
+  const headerActions = (
-    <div className="space-y-4">
+          <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
-      {/* 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}>
+        <Button onClick={() => { resetForm(); openCreateDialog(); }}>
           <Plus className="w-4 h-4 mr-2" />
           Nouvelle Skill
         </Button>
@@ -421,7 +341,7 @@ export function SkillsManagement({
           <div className="flex justify-end gap-2 pt-4">
             <Button
               variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
+              onClick={closeCreateDialog}
             >
               Annuler
             </Button>
@@ -430,23 +350,9 @@ export function SkillsManagement({
         </div>
       </DialogContent>
     </Dialog>
-      </div>
+  );
 
-      {/* Filtres et contrôles */}
+  const emptyState = (
-      <TreeSearchControls
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-        onExpandAll={expandAll}
-        onCollapseAll={collapseAll}
-        placeholder="Rechercher une skill..."
-      />
-
-      {/* Vue arborescente des Skills */}
-      <TreeViewContainer
-        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">
@@ -458,7 +364,23 @@ export function SkillsManagement({
           : "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}
+        searchPlaceholder="Rechercher une skill..."
+        hasContent={Object.keys(filteredSkillsByCategory).length > 0}
+        isLoading={isLoading}
+        loadingMessage="Chargement des skills..."
+        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 { useState, useEffect } from "react";
-import { Plus, Edit, Trash2, Users, Search, Building2 } from "lucide-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,76 +61,27 @@ export function TeamsManagement({
     direction: "",
   });
   const { toast } = useToast();
-
+  const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();
-  // État pour les directions ouvertes/fermées
-  const [expandedDirections, setExpandedDirections] = useState<Set<string>>(
-    new Set()
-  );
 
   // É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
+  // Utilisation du hook factorisé
-  const filteredTeamsByDirection = useMemo(() => {
+  const {
-    // Grouper les teams par direction
+    filteredDataByCategory: filteredTeamsByDirection,
-    const teamsByDirection = localTeams.reduce((acc, team) => {
+    expandedCategories: expandedDirections,
-      if (!acc[team.direction]) {
+    toggleCategory: toggleDirection,
-        acc[team.direction] = [];
+    expandAll,
-      }
+    collapseAll,
-      acc[team.direction].push(team);
+  } = useTreeView({
-      return acc;
+    data: localTeams,
-    }, {} as Record<string, TeamType[]>);
+    searchFields: ['name'],
-
+    groupBy: (team) => team.direction,
-    // Filtrer les teams en fonction de la recherche
+    searchTerm,
-    return Object.entries(teamsByDirection).reduce(
+    onSearchChange: setSearchTerm,
-      (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());
-    },
-    []
-  );
-
   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,19 +332,10 @@ export function TeamsManagement({
     new Set(localTeams.map((team) => team.direction))
   );
 
-  return (
+  const headerActions = (
-    <div className="space-y-4">
+    <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
-      {/* 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}>
+        <Button onClick={() => { resetForm(); openCreateDialog(); }}>
           <Plus className="w-4 h-4 mr-2" />
           Nouvelle Équipe
         </Button>
@@ -462,7 +379,7 @@ export function TeamsManagement({
           <div className="flex justify-end gap-2 pt-4">
             <Button
               variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
+              onClick={closeCreateDialog}
             >
               Annuler
             </Button>
@@ -471,21 +388,9 @@ export function TeamsManagement({
         </div>
       </DialogContent>
     </Dialog>
-      </div>
+  );
 
-      {/* Filtres et contrôles */}
+  const emptyState = (
-      <TreeSearchControls
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-        onExpandAll={expandAll}
-        onCollapseAll={collapseAll}
-        placeholder="Rechercher une équipe..."
-      />
-
-      {/* Vue arborescente des Teams */}
-      <TreeViewContainer
-        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">
@@ -497,7 +402,21 @@ export function TeamsManagement({
           : "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}
+        searchPlaceholder="Rechercher une équipe..."
+        hasContent={Object.keys(filteredTeamsByDirection).length > 0}
+        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 { useState, useEffect } from "react";
-import { Users, User, Trash2, Search, Building2 } from "lucide-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,47 +53,29 @@ 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
+  // Utilisation du hook factorisé
-  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
+  const {
-
+    filteredDataByCategory: filteredUsersByTeam,
-  // Grouper les utilisateurs par équipe et filtrer en fonction de la recherche
+    expandedCategories: expandedTeams,
-  const filteredUsersByTeam = useMemo(() => {
+    toggleCategory: toggleTeam,
-    // Grouper les utilisateurs par équipe
+    expandAll,
-    const usersByTeam = users.reduce((acc, user) => {
+    collapseAll,
-      const teamKey = user.teamName || "Sans équipe";
+  } = useTreeView({
-      if (!acc[teamKey]) {
+    data: users,
-        acc[teamKey] = [];
+    searchFields: ['firstName', 'lastName'],
-      }
+    groupBy: (user) => user.teamName || "Sans équipe",
-      acc[teamKey].push(user);
+    searchTerm,
-      return acc;
+    onSearchChange: setSearchTerm,
-    }, {} 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]);
-
   useEffect(() => {
     fetchUsers();
     fetchTeams();
@@ -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,16 +230,10 @@ export function UsersManagement() {
     );
   }
 
-  return (
+  const headerActions = (
-    <div className="space-y-6">
+    <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
-      {/* 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>
+        <Button onClick={openCreateDialog}>
           <Users className="w-4 h-4 mr-2" />
           Créer un utilisateur
         </Button>
@@ -360,7 +295,7 @@ export function UsersManagement() {
           <div className="flex justify-end gap-2 pt-4">
             <Button
               variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
+              onClick={closeCreateDialog}
             >
               Annuler
             </Button>
@@ -369,21 +304,9 @@ export function UsersManagement() {
         </div>
       </DialogContent>
     </Dialog>
-      </div>
+  );
 
-      {/* Filtres et contrôles */}
+  const emptyState = (
-      <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">
@@ -395,7 +318,20 @@ export function UsersManagement() {
           : "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) => (
@@ -445,7 +381,6 @@ export function UsersManagement() {
           </div>
         )
       )}
-      </TreeViewContainer>
+    </TreeViewPage>
-    </div>
   );
 }

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,
+  };
+}