julienfroidefond/peakskills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: managements pages simplification

Browse Source
This commit is contained in:
Julien Froidefond
2025-08-23 07:50:25 +02:00
parent 5848f1331c
commit 2877e3b58f
7 changed files with 607 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/admin/management/index.ts
View File

@@ -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";

188
components/admin/management/pages/skills-management.tsx
View File

@@ -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
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;
// Utilisation du hook factorisé
const {
filteredDataByCategory: filteredSkillsByCategory,
expandedCategories,
toggleCategory,
expandAll,
collapseAll,
} = useTreeView({
data: skills,
searchFields: ['name', 'description'],
groupBy: (skill) => skill.category,
searchTerm,
onSearchChange: setSearchTerm,
});
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 (
<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}>
const headerActions = (
<Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
<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 */}
<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={
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">
@@ -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>
</>
);
}

189
components/admin/management/pages/teams-management.tsx
View File

@@ -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,76 +61,27 @@ 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;
// 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,
});
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 (
<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}>
const headerActions = (
<Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
<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 */}
<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={
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">
@@ -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>
</>
);
}

161
components/admin/management/pages/users-management.tsx
View File

@@ -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,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
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;
// 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,
});
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 (
<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}>
const headerActions = (
<Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
<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 */}
<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={
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">
@@ -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>
</div>
</TreeViewPage>
);
}

68
components/admin/management/tree-view-page.tsx Normal file
View File

@@ -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>
);
}

20
hooks/use-form-dialog.ts Normal file
View File

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

89
hooks/use-tree-view.ts Normal file
View File

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