reafctor: pages for management and split components

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

@@ -0,0 +1,189 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SkillCategory, Team as TeamType } from "@/lib/types";
+import { TeamStats } from "@/services/admin-service";
+import { TreeViewPage } from "../management/tree-view-page";
+import { useTreeView } from "@/hooks/use-tree-view";
+import { useFormDialog } from "@/hooks/use-form-dialog";
+import { useTeamsManagement } from "@/hooks/use-teams-management";
+import { TeamFormDialog } from "./team-form-dialog";
+import { TeamsList } from "./teams-list";
+import { TeamMembersModal } from "../management/team-members-modal";
+
+interface TeamsManagementPageProps {
+  teams: TeamType[];
+  teamStats: TeamStats[];
+  skillCategories: SkillCategory[];
+}
+
+export function TeamsManagementPage({
+  teams,
+  teamStats,
+  skillCategories,
+}: TeamsManagementPageProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isMembersModalOpen, setIsMembersModalOpen] = useState(false);
+  const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null);
+  
+  const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();
+  
+  const {
+    teams: localTeams,
+    teamStats: localTeamStats,
+    editingTeam,
+    teamFormData,
+    isSubmitting,
+    directions,
+    setTeamFormData,
+    resetForm,
+    getTeamStats,
+    handleCreateTeam,
+    handleEditTeam,
+    handleUpdateTeam,
+    handleDeleteTeam,
+    handleDeleteDirection,
+  } = useTeamsManagement(teams, teamStats);
+
+  // Utilisation du hook factorisé pour la vue arborescente
+  const {
+    filteredDataByCategory: filteredTeamsByDirection,
+    expandedCategories: expandedDirections,
+    toggleCategory: toggleDirection,
+    expandAll,
+    collapseAll,
+  } = useTreeView({
+    data: localTeams,
+    searchFields: ["name"],
+    groupBy: (team) => team.direction,
+    searchTerm,
+    onSearchChange: setSearchTerm,
+  });
+
+  const handleCreateSubmit = async () => {
+    const success = await handleCreateTeam();
+    if (success) {
+      closeCreateDialog();
+    }
+  };
+
+  const handleEditSubmit = async () => {
+    const success = await handleUpdateTeam();
+    if (success) {
+      closeEditDialog();
+    }
+  };
+
+  const handleOpenCreateDialog = () => {
+    resetForm();
+    openCreateDialog();
+  };
+
+  const handleOpenEditDialog = (team: TeamType) => {
+    handleEditTeam(team);
+    openEditDialog();
+  };
+
+  const handleViewMembers = (team: TeamType) => {
+    setSelectedTeam(team);
+    setIsMembersModalOpen(true);
+  };
+
+  // Fonction pour mettre à jour les stats d'une équipe après suppression d'un membre
+  const updateTeamStatsAfterMemberRemoval = (teamId: string) => {
+    // Cette logique sera gérée par le hook useTeamsManagement
+  };
+
+  const headerActions = (
+    <Button onClick={handleOpenCreateDialog}>
+      <Plus className="w-4 h-4 mr-2" />
+      Nouvelle Équipe
+    </Button>
+  );
+
+  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}
+        searchPlaceholder="Rechercher une équipe..."
+        hasContent={Object.keys(filteredTeamsByDirection).length > 0}
+        emptyState={emptyState}
+        headerActions={headerActions}
+      >
+        <TeamsList
+          filteredTeamsByDirection={filteredTeamsByDirection}
+          expandedDirections={expandedDirections}
+          onToggleDirection={toggleDirection}
+          onEditTeam={handleOpenEditDialog}
+          onDeleteTeam={handleDeleteTeam}
+          onDeleteDirection={handleDeleteDirection}
+          onViewMembers={handleViewMembers}
+          getTeamStats={getTeamStats}
+        />
+      </TreeViewPage>
+
+      {/* Dialog de création */}
+      <TeamFormDialog
+        isOpen={isCreateDialogOpen}
+        onClose={closeCreateDialog}
+        onSubmit={handleCreateSubmit}
+        title="Créer une nouvelle équipe"
+        formData={teamFormData}
+        onFormDataChange={setTeamFormData}
+        directions={directions}
+        isSubmitting={isSubmitting}
+      />
+
+      {/* Dialog d'édition */}
+      <TeamFormDialog
+        isOpen={isEditDialogOpen}
+        onClose={closeEditDialog}
+        onSubmit={handleEditSubmit}
+        title="Modifier l'équipe"
+        formData={teamFormData}
+        onFormDataChange={setTeamFormData}
+        directions={directions}
+        isSubmitting={isSubmitting}
+      />
+
+      {/* Modal des membres d'équipe */}
+      {selectedTeam && (
+        <TeamMembersModal
+          teamId={selectedTeam.id}
+          teamName={selectedTeam.name}
+          isOpen={isMembersModalOpen}
+          onClose={() => {
+            setIsMembersModalOpen(false);
+            setSelectedTeam(null);
+          }}
+          onMemberRemoved={() => {
+            if (selectedTeam) {
+              updateTeamStatsAfterMemberRemoval(selectedTeam.id);
+            }
+          }}
+        />
+      )}
+    </>
+  );
+}