566 lines
18 KiB
TypeScript
566 lines
18 KiB
TypeScript
"use client";
|
||
|
||
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 { Label } from "@/components/ui/label";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
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";
|
||
import {
|
||
AdminManagementService,
|
||
Team,
|
||
} from "@/services/admin-management-service";
|
||
import {
|
||
TreeCategoryHeader,
|
||
TreeItemRow,
|
||
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[];
|
||
teamStats: TeamStats[];
|
||
skillCategories: SkillCategory[];
|
||
}
|
||
|
||
interface TeamFormData {
|
||
name: string;
|
||
direction: string;
|
||
}
|
||
|
||
export function TeamsManagement({
|
||
teams,
|
||
teamStats,
|
||
skillCategories,
|
||
}: TeamsManagementProps) {
|
||
const [searchTerm, setSearchTerm] = useState("");
|
||
const [isMembersModalOpen, setIsMembersModalOpen] = useState(false);
|
||
const [selectedTeam, setSelectedTeam] = useState<any>(null);
|
||
const [editingTeam, setEditingTeam] = useState<any>(null);
|
||
const [teamFormData, setTeamFormData] = useState<TeamFormData>({
|
||
name: "",
|
||
direction: "",
|
||
});
|
||
const { toast } = useToast();
|
||
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);
|
||
|
||
// 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);
|
||
};
|
||
|
||
// Fonction pour obtenir une équipe depuis la liste locale
|
||
const getLocalTeam = (teamId: string): TeamType | undefined => {
|
||
return localTeams.find((team) => team.id === teamId);
|
||
};
|
||
|
||
// Charger les teams depuis l'API
|
||
const fetchTeams = async () => {
|
||
try {
|
||
const teamsData = await AdminManagementService.getTeams();
|
||
// Note: on garde les teams existantes pour la compatibilité
|
||
// Les nouvelles teams créées via l'API seront visibles après rafraîchissement
|
||
} catch (error) {
|
||
console.error("Error fetching teams:", error);
|
||
toast({
|
||
title: "Erreur",
|
||
description: "Impossible de charger les teams",
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
};
|
||
|
||
// Charger les teams au montage du composant
|
||
useEffect(() => {
|
||
fetchTeams();
|
||
}, []);
|
||
|
||
const handleCreateTeam = async () => {
|
||
if (!teamFormData.name || !teamFormData.direction) {
|
||
toast({
|
||
title: "Erreur",
|
||
description: "Veuillez remplir tous les champs obligatoires",
|
||
variant: "destructive",
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const newTeam = await AdminManagementService.createTeam(teamFormData);
|
||
toast({
|
||
title: "Succès",
|
||
description: "Équipe créée avec succès",
|
||
});
|
||
|
||
setTeamFormData({ name: "", direction: "" });
|
||
closeCreateDialog();
|
||
|
||
// Mettre à jour l'état local avec la nouvelle équipe
|
||
const newLocalTeam: TeamType = {
|
||
id: newTeam.id,
|
||
name: newTeam.name,
|
||
direction: newTeam.direction,
|
||
};
|
||
setLocalTeams((prev) => [...prev, newLocalTeam]);
|
||
|
||
// Ajouter les stats de la nouvelle équipe (avec les propriétés minimales)
|
||
const newTeamStats = {
|
||
teamId: newTeam.id,
|
||
teamName: newTeam.name,
|
||
direction: newTeam.direction,
|
||
totalMembers: 0,
|
||
averageSkillLevel: 0,
|
||
skillCoverage: 0,
|
||
topSkills: [],
|
||
members: [],
|
||
} as TeamStats;
|
||
setLocalTeamStats((prev) => [...prev, newTeamStats]);
|
||
} catch (error: any) {
|
||
toast({
|
||
title: "Erreur",
|
||
description: error.message || "Erreur lors de la création de l'équipe",
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleEditTeam = (team: any) => {
|
||
setEditingTeam(team);
|
||
setTeamFormData({
|
||
name: team.name,
|
||
direction: team.direction,
|
||
});
|
||
openEditDialog();
|
||
};
|
||
|
||
const handleViewMembers = (team: any) => {
|
||
setSelectedTeam(team);
|
||
setIsMembersModalOpen(true);
|
||
};
|
||
|
||
// Fonction pour mettre à jour les stats d'une équipe après suppression d'un membre
|
||
const updateTeamStatsAfterMemberRemoval = (teamId: string) => {
|
||
setLocalTeamStats((prev) => {
|
||
const updated = prev.map((stats) =>
|
||
stats.teamId === teamId
|
||
? { ...stats, totalMembers: Math.max(0, stats.totalMembers - 1) }
|
||
: stats
|
||
);
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
const handleUpdateTeam = async () => {
|
||
if (!editingTeam || !teamFormData.name || !teamFormData.direction) {
|
||
toast({
|
||
title: "Erreur",
|
||
description: "Veuillez remplir tous les champs obligatoires",
|
||
variant: "destructive",
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await AdminManagementService.updateTeam({
|
||
id: editingTeam.id,
|
||
...teamFormData,
|
||
memberCount: editingTeam.memberCount || 0,
|
||
});
|
||
|
||
toast({
|
||
title: "Succès",
|
||
description: "Équipe mise à jour avec succès",
|
||
});
|
||
|
||
closeEditDialog();
|
||
setEditingTeam(null);
|
||
setTeamFormData({ name: "", direction: "" });
|
||
|
||
// Mettre à jour l'état local au lieu de recharger la page
|
||
// On pourrait mettre à jour les données locales ici si nécessaire
|
||
// Pour l'instant, on laisse l'utilisateur voir le changement
|
||
} catch (error: any) {
|
||
toast({
|
||
title: "Erreur",
|
||
description:
|
||
error.message || "Erreur lors de la mise à jour de l'équipe",
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleDeleteTeam = async (teamId: string) => {
|
||
const team = getLocalTeam(teamId);
|
||
const stats = getTeamStats(teamId);
|
||
|
||
if (stats && stats.totalMembers > 0) {
|
||
toast({
|
||
title: "Erreur",
|
||
description:
|
||
"Impossible de supprimer une équipe qui contient des membres",
|
||
variant: "destructive",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (
|
||
confirm(
|
||
`Êtes-vous sûr de vouloir supprimer l'équipe "${team?.name}" ? Cette action est irréversible.`
|
||
)
|
||
) {
|
||
try {
|
||
await AdminManagementService.deleteTeam(teamId);
|
||
toast({
|
||
title: "Succès",
|
||
description: "Équipe supprimée avec succès",
|
||
});
|
||
|
||
// Mettre à jour l'état local au lieu de recharger la page
|
||
// Supprimer l'équipe de la liste locale
|
||
setLocalTeams((prev) => prev.filter((t) => t.id !== teamId));
|
||
// Mettre à jour les stats locales
|
||
setLocalTeamStats((prev) =>
|
||
prev.filter((stats) => stats.teamId !== teamId)
|
||
);
|
||
} catch (error: any) {
|
||
toast({
|
||
title: "Erreur",
|
||
description:
|
||
error.message || "Erreur lors de la suppression de l'équipe",
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleDeleteDirection = async (direction: string) => {
|
||
// Vérifier si des équipes de cette direction ont des membres
|
||
const teamsInDirection = teams.filter(
|
||
(team) => team.direction === direction
|
||
);
|
||
const hasMembers = teamsInDirection.some((team) => {
|
||
const stats = getTeamStats(team.id);
|
||
return stats && stats.totalMembers > 0;
|
||
});
|
||
|
||
if (hasMembers) {
|
||
toast({
|
||
title: "Erreur",
|
||
description: `Impossible de supprimer la direction "${direction}" car certaines équipes ont des membres`,
|
||
variant: "destructive",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (
|
||
confirm(
|
||
`Êtes-vous sûr de vouloir supprimer la direction "${direction}" et TOUTES ses équipes ?\n\n⚠️ Cette action est irréversible !\n\nÉquipes qui seront supprimées :\n${teamsInDirection
|
||
.map((t) => `• ${t.name}`)
|
||
.join("\n")}`
|
||
)
|
||
) {
|
||
try {
|
||
await AdminManagementService.deleteDirection(direction);
|
||
toast({
|
||
title: "Succès",
|
||
description: `Direction "${direction}" et toutes ses équipes supprimées avec succès`,
|
||
variant: "default",
|
||
});
|
||
// Mettre à jour l'état local au lieu de recharger la page
|
||
// Supprimer les équipes de la direction de la liste locale
|
||
setLocalTeams((prev) =>
|
||
prev.filter((team) => team.direction !== direction)
|
||
);
|
||
// Supprimer les équipes de la direction des stats locales
|
||
setLocalTeamStats((prev) =>
|
||
prev.filter((stats) => stats.direction !== direction)
|
||
);
|
||
} catch (error: any) {
|
||
toast({
|
||
title: "Erreur",
|
||
description:
|
||
error.message || "Erreur lors de la suppression de la direction",
|
||
variant: "destructive",
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
const resetForm = () => {
|
||
setTeamFormData({ name: "", direction: "" });
|
||
};
|
||
|
||
// Extraire les directions uniques pour les formulaires
|
||
const directions = Array.from(
|
||
new Set(localTeams.map((team) => team.direction))
|
||
);
|
||
|
||
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>
|
||
<Button onClick={handleCreateTeam}>Créer</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
|
||
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}
|
||
>
|
||
{Object.entries(filteredTeamsByDirection).map(
|
||
([direction, directionTeams], index) => (
|
||
<div key={direction}>
|
||
<TreeCategoryHeader
|
||
category={direction}
|
||
isExpanded={expandedDirections.has(direction)}
|
||
onToggle={() => toggleDirection(direction)}
|
||
icon={<Building2 className="w-5 h-5 text-blue-400" />}
|
||
itemCount={directionTeams.length}
|
||
itemLabel="équipe"
|
||
showSeparator={index > 0}
|
||
onDelete={() => handleDeleteDirection(direction)}
|
||
canDelete={true}
|
||
isDirection={true}
|
||
/>
|
||
|
||
{/* Liste des teams de la direction */}
|
||
{expandedDirections.has(direction) && (
|
||
<div className="bg-slate-950/30">
|
||
{directionTeams.map((team, teamIndex) => {
|
||
const stats = getTeamStats(team.id);
|
||
return (
|
||
<TreeItemRow
|
||
key={team.id}
|
||
icon={<Users className="w-5 h-5 text-green-400" />}
|
||
title={team.name}
|
||
badges={
|
||
stats
|
||
? [
|
||
{
|
||
text: `${stats.totalMembers} membres`,
|
||
variant: "outline",
|
||
},
|
||
]
|
||
: []
|
||
}
|
||
onEdit={() => handleEditTeam(team)}
|
||
onDelete={() => handleDeleteTeam(team.id)}
|
||
onViewMembers={() => handleViewMembers(team)}
|
||
canDelete={!stats || stats.totalMembers === 0}
|
||
showSeparator={teamIndex > 0}
|
||
hasMembers={stats ? stats.totalMembers > 0 : false}
|
||
additionalInfo={
|
||
stats ? (
|
||
<TeamMetrics
|
||
averageSkillLevel={stats.averageSkillLevel}
|
||
skillCoverage={stats.skillCoverage}
|
||
topSkillsCount={stats.topSkills.length}
|
||
totalMembers={stats.totalMembers}
|
||
/>
|
||
) : (
|
||
<p className="text-slate-500 text-xs">
|
||
Aucune donnée disponible
|
||
</p>
|
||
)
|
||
}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
)}
|
||
</TreeViewPage>
|
||
|
||
{/* Dialog d'édition */}
|
||
<Dialog open={isEditDialogOpen} onOpenChange={closeEditDialog}>
|
||
<DialogContent className="sm:max-w-[500px]">
|
||
<DialogHeader>
|
||
<DialogTitle>Modifier l'équipe</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label htmlFor="edit-team-name">Nom de l'équipe *</Label>
|
||
<Input
|
||
id="edit-team-name"
|
||
value={teamFormData.name}
|
||
onChange={(e) =>
|
||
setTeamFormData({ ...teamFormData, name: e.target.value })
|
||
}
|
||
placeholder="Ex: Équipe Frontend, Équipe Backend"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="edit-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={closeEditDialog}>
|
||
Annuler
|
||
</Button>
|
||
<Button onClick={handleUpdateTeam}>Mettre à jour</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Modal des membres d'équipe */}
|
||
{selectedTeam && (
|
||
<TeamMembersModal
|
||
teamId={selectedTeam.id}
|
||
teamName={selectedTeam.name}
|
||
isOpen={isMembersModalOpen}
|
||
onClose={() => {
|
||
setIsMembersModalOpen(false);
|
||
setSelectedTeam(null);
|
||
// Pas besoin de rafraîchir ici, les stats locales sont déjà à jour
|
||
}}
|
||
onMemberRemoved={() => {
|
||
// Mettre à jour les stats localement
|
||
if (selectedTeam) {
|
||
updateTeamStatsAfterMemberRemoval(selectedTeam.id);
|
||
}
|
||
}}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
}
|