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

feat: review admin teams views for importance inclusion

Browse Source
This commit is contained in:
Julien Froidefond
2025-08-27 13:43:47 +02:00
parent e9aecca2a5
commit a5bcdd34fb
10 changed files with 1041 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/admin/team-detail/team-detail-client-wrapper.tsx
View File

@@ -15,6 +15,7 @@ interface TeamDetailClientWrapperProps {
interface SkillAnalysis {
skillName: string;
category: string;
importance: "incontournable" | "majeure" | "standard";
experts: Array<{
name: string;
level: number;
@@ -29,14 +30,27 @@ interface SkillAnalysis {
expertCount: number;
learnerCount: number;
proficiencyRate: number;
coverage: number;
}
interface TeamInsights {
averageTeamLevel: number;
totalExperts: number;
totalLearners: number;
skillGaps: number;
strongSkills: number;
skillGaps: {
incontournable: number;
majeure: number;
standard: number;
};
strongSkills: {
incontournable: number;
majeure: number;
standard: number;
};
criticalSkillsCoverage: {
incontournable: number;
majeure: number;
};
}
export function TeamDetailClientWrapper({
@@ -51,16 +65,24 @@ export function TeamDetailClientWrapper({
// Analyser les compétences avec les vraies données
const skillMap = new Map<string, any>();
// Créer un Map pour stocker les infos d'importance des skills
const skillImportanceMap = new Map<string, string>();
team.topSkills.forEach((skill) => {
skillImportanceMap.set(skill.skillName, skill.importance);
});
team.members.forEach((member) => {
member.skills.forEach((skill) => {
if (!skillMap.has(skill.skillName)) {
skillMap.set(skill.skillName, {
skillName: skill.skillName,
category: skill.category,
importance: skillImportanceMap.get(skill.skillName) || "standard",
experts: [],
learners: [],
averageLevel: 0,
totalEvaluations: 0,
coverage: 0,
});
}
@@ -94,9 +116,19 @@ export function TeamDetailClientWrapper({
learnerCount: skill.learners.length,
proficiencyRate:
(skill.experts.length / skill.totalEvaluations) * 100,
coverage: (skill.experts.length / team.totalMembers) * 100,
})
)
.sort((a, b) => b.averageLevel - a.averageLevel);
.sort((a, b) => {
// D'abord par importance
const importanceOrder = { incontournable: 2, majeure: 1, standard: 0 };
const importanceDiff =
importanceOrder[b.importance] - importanceOrder[a.importance];
if (importanceDiff !== 0) return importanceDiff;
// Ensuite par niveau moyen
return b.averageLevel - a.averageLevel;
});
setSkillAnalysis(skills);
}, [team]);
@@ -151,8 +183,29 @@ export function TeamDetailClientWrapper({
(sum, member) => sum + member.skills.filter((s) => s.wantsToLearn).length,
0
),
skillGaps: skillAnalysis.filter((s) => s.averageLevel < 1.5).length,
strongSkills: skillAnalysis.filter((s) => s.averageLevel >= 2.5).length,
skillGaps: {
incontournable: skillAnalysis.filter(
(s) => s.importance === "incontournable" && s.coverage < 75
).length,
majeure: skillAnalysis.filter(
(s) => s.importance === "majeure" && s.coverage < 60
).length,
standard: skillAnalysis.filter(
(s) => s.importance === "standard" && s.averageLevel < 1.5
).length,
},
strongSkills: {
incontournable: skillAnalysis.filter(
(s) => s.importance === "incontournable" && s.coverage >= 75
).length,
majeure: skillAnalysis.filter(
(s) => s.importance === "majeure" && s.coverage >= 60
).length,
standard: skillAnalysis.filter(
(s) => s.importance === "standard" && s.averageLevel >= 2.5
).length,
},
criticalSkillsCoverage: team.criticalSkillsCoverage,
};
return (

18
components/admin/team-detail/team-detail-tabs.tsx
View File

@@ -10,6 +10,7 @@ import { TeamStats, TeamMember } from "@/lib/admin-types";
interface SkillAnalysis {
skillName: string;
category: string;
importance: "incontournable" | "majeure" | "standard";
experts: Array<{
name: string;
level: number;
@@ -24,14 +25,27 @@ interface SkillAnalysis {
expertCount: number;
learnerCount: number;
proficiencyRate: number;
coverage: number;
}
interface TeamInsights {
averageTeamLevel: number;
totalExperts: number;
totalLearners: number;
skillGaps: number;
strongSkills: number;
skillGaps: {
incontournable: number;
majeure: number;
standard: number;
};
strongSkills: {
incontournable: number;
majeure: number;
standard: number;
};
criticalSkillsCoverage: {
incontournable: number;
majeure: number;
};
}
interface TeamDetailTabsProps {

247
components/admin/team-detail/team-insights-tab.tsx
View File

@@ -5,6 +5,7 @@ import { TrendingUp, MessageSquare, Lightbulb } from "lucide-react";
interface SkillAnalysis {
skillName: string;
category: string;
importance: "incontournable" | "majeure" | "standard";
experts: Array<{
name: string;
level: number;
@@ -19,14 +20,27 @@ interface SkillAnalysis {
expertCount: number;
learnerCount: number;
proficiencyRate: number;
coverage: number;
}
interface TeamInsights {
averageTeamLevel: number;
totalExperts: number;
totalLearners: number;
skillGaps: number;
strongSkills: number;
skillGaps: {
incontournable: number;
majeure: number;
standard: number;
};
strongSkills: {
incontournable: number;
majeure: number;
standard: number;
};
criticalSkillsCoverage: {
incontournable: number;
majeure: number;
};
}
interface TeamInsightsTabProps {
@@ -41,35 +55,68 @@ export function TeamInsightsTab({
return (
<>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Compétences à développer */}
{/* Compétences critiques à développer */}
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
<h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
<TrendingUp className="h-5 w-5 text-red-400" />
Compétences à développer
Compétences critiques à développer
</h3>
<div className="space-y-3">
<div className="space-y-1">
{/* Incontournables */}
{skillAnalysis
.filter((s) => s.averageLevel < 1.5)
.slice(0, 5)
.filter(
(s) => s.importance === "incontournable" && s.coverage < 75
)
.map((skill, idx) => (
<div
key={idx}
className="flex items-center justify-between p-3 bg-white/5 rounded-lg"
className="flex items-center gap-2 py-1.5 px-2 bg-red-500/5 hover:bg-red-500/10 border-l-2 border-red-500 rounded-sm group"
>
<div>
<div className="text-white font-medium">
<div className="flex-1 flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="text-sm text-slate-200">
{skill.skillName}
</div>
<div className="text-xs text-slate-400">
<div className="text-[10px] text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
{skill.category}
</div>
</div>
<div className="text-right">
<div className="text-red-300 font-semibold">
{skill.averageLevel.toFixed(1)}
<div className="flex items-center gap-2">
<div className="text-[10px] text-red-300 opacity-0 group-hover:opacity-100 transition-opacity">
Objectif: 75%
</div>
<div className="text-xs text-red-400 font-medium">
{skill.coverage.toFixed(0)}%
</div>
</div>
</div>
</div>
))}
{/* Majeures */}
{skillAnalysis
.filter((s) => s.importance === "majeure" && s.coverage < 60)
.map((skill, idx) => (
<div
key={idx}
className="flex items-center gap-2 py-1.5 px-2 bg-blue-500/5 hover:bg-blue-500/10 border-l-2 border-blue-500 rounded-sm group"
>
<div className="flex-1 flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="text-sm text-slate-200">
{skill.skillName}
</div>
<div className="text-[10px] text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
{skill.category}
</div>
</div>
<div className="flex items-center gap-2">
<div className="text-[10px] text-blue-300 opacity-0 group-hover:opacity-100 transition-opacity">
Objectif: 60%
</div>
<div className="text-xs text-blue-400 font-medium">
{skill.coverage.toFixed(0)}%
</div>
<div className="text-xs text-slate-400">
{skill.learnerCount} intéressés
</div>
</div>
</div>
@@ -83,25 +130,56 @@ export function TeamInsightsTab({
<MessageSquare className="h-5 w-5 text-green-400" />
Opportunités de mentorat
</h3>
<div className="space-y-3">
<div className="space-y-1">
{skillAnalysis
.filter(
(s) =>
s.experts.filter((e) => e.canMentor).length > 0 &&
s.learnerCount > 0
s.learnerCount > 0 &&
(s.importance === "incontournable" ||
s.importance === "majeure")
)
.slice(0, 5)
.sort((a, b) => {
// D'abord par importance
const importanceOrder = {
incontournable: 2,
majeure: 1,
standard: 0,
};
const importanceDiff =
importanceOrder[b.importance] - importanceOrder[a.importance];
if (importanceDiff !== 0) return importanceDiff;
// Ensuite par nombre d'apprenants
return b.learnerCount - a.learnerCount;
})
.map((skill, idx) => (
<div key={idx} className="p-3 bg-white/5 rounded-lg">
<div className="flex items-center justify-between mb-2">
<div className="text-white font-medium">
<div
key={idx}
className={`flex items-center gap-2 py-1.5 px-2 rounded-sm group ${
skill.importance === "incontournable"
? "bg-red-500/5 hover:bg-red-500/10 border-l-2 border-red-500"
: "bg-blue-500/5 hover:bg-blue-500/10 border-l-2 border-blue-500"
}`}
>
<div className="flex-1 flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="text-sm text-slate-200">
{skill.skillName}
</div>
<div className="text-xs text-slate-400">
{skill.category}
<div
className={`text-[10px] ${
skill.importance === "incontournable"
? "text-red-400"
: "text-blue-400"
} opacity-0 group-hover:opacity-100 transition-opacity`}
>
{skill.importance === "incontournable"
? "Incontournable"
: "Majeure"}
</div>
</div>
<div className="flex items-center justify-between text-xs">
<div className="flex items-center gap-3 text-xs">
<div className="text-green-300">
{skill.experts.filter((e) => e.canMentor).length} mentor
{skill.experts.filter((e) => e.canMentor).length > 1
@@ -114,6 +192,7 @@ export function TeamInsightsTab({
</div>
</div>
</div>
</div>
))}
</div>
</div>
@@ -126,58 +205,104 @@ export function TeamInsightsTab({
Recommandations pour l'équipe
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-4 bg-blue-500/10 border border-blue-500/20 rounded-xl">
<h4 className="font-medium text-blue-300 mb-2">
🎯 Formations prioritaires
<div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
<h4 className="font-medium text-red-300 mb-2">
🎯 Compétences incontournables
</h4>
<p className="text-sm text-slate-300">
Organiser des formations sur{" "}
{skillAnalysis
.filter((s) => s.averageLevel < 1.5)
.slice(0, 2)
.map((s) => s.skillName)
.join(" et ")}
pour combler les lacunes identifiées.
{teamInsights.skillGaps.incontournable > 0 ? (
<>
Priorité: combler les lacunes sur{" "}
{teamInsights.skillGaps.incontournable} compétence
{teamInsights.skillGaps.incontournable > 1 ? "s" : ""}{" "}
incontournable
{teamInsights.skillGaps.incontournable > 1 ? "s" : ""} sous
l'objectif de 75%.
</>
) : (
<>
Excellent ! Toutes les compétences incontournables atteignent
leur objectif de couverture.
</>
)}
</p>
</div>
<div className="p-4 bg-blue-500/10 border border-blue-500/20 rounded-xl">
<h4 className="font-medium text-blue-300 mb-2">
🎓 Compétences majeures
</h4>
<p className="text-sm text-slate-300">
{teamInsights.skillGaps.majeure > 0 ? (
<>
Attention: {teamInsights.skillGaps.majeure} compétence
{teamInsights.skillGaps.majeure > 1 ? "s" : ""} majeure
{teamInsights.skillGaps.majeure > 1 ? "s" : ""} n'atteigne
{teamInsights.skillGaps.majeure > 1 ? "nt" : ""} pas
l'objectif de 60%.
</>
) : (
<>
Bravo ! Toutes les compétences majeures atteignent leur
objectif de couverture.
</>
)}
</p>
</div>
<div className="p-4 bg-green-500/10 border border-green-500/20 rounded-xl">
<h4 className="font-medium text-green-300 mb-2">
🤝 Programme de mentorat
🤝 Opportunités de mentorat
</h4>
<p className="text-sm text-slate-300">
Mettre en place un système de mentorat avec{" "}
{skillAnalysis.reduce(
(sum, skill) =>
sum + skill.experts.filter((e) => e.canMentor).length,
0
)}{" "}
mentors disponibles.
</p>
</div>
<div className="p-4 bg-purple-500/10 border border-purple-500/20 rounded-xl">
<h4 className="font-medium text-purple-300 mb-2">
📈 Capitaliser sur les forces
</h4>
<p className="text-sm text-slate-300">
Exploiter l'expertise en{" "}
{skillAnalysis
.filter((s) => s.averageLevel >= 2.5)
.slice(0, 2)
.map((s) => s.skillName)
.join(" et ")}
pour des projets ambitieux.
{skillAnalysis.filter(
(s) =>
s.experts.filter((e) => e.canMentor).length > 0 &&
s.learnerCount > 0 &&
(s.importance === "incontournable" ||
s.importance === "majeure")
).length > 0 ? (
<>
{
skillAnalysis.filter(
(s) =>
s.experts.filter((e) => e.canMentor).length > 0 &&
s.learnerCount > 0 &&
(s.importance === "incontournable" ||
s.importance === "majeure")
).length
}{" "}
opportunité
{skillAnalysis.filter(
(s) =>
s.experts.filter((e) => e.canMentor).length > 0 &&
s.learnerCount > 0 &&
(s.importance === "incontournable" ||
s.importance === "majeure")
).length > 1
? "s"
: ""}{" "}
de mentorat sur des compétences critiques.
</>
) : (
<>
Aucune opportunité de mentorat identifiée sur les compétences
critiques.
</>
)}
</p>
</div>
<div className="p-4 bg-orange-500/10 border border-orange-500/20 rounded-xl">
<h4 className="font-medium text-orange-300 mb-2">
🔄 Plan de développement
📊 Couverture globale
</h4>
<p className="text-sm text-slate-300">
Créer des parcours de montée en compétences personnalisés pour{" "}
{teamInsights.totalLearners} objectifs d'apprentissage.
Incontournables:{" "}
{teamInsights.criticalSkillsCoverage.incontournable.toFixed(0)}%
{" • "}
Majeures: {teamInsights.criticalSkillsCoverage.majeure.toFixed(0)}
%
</p>
</div>
</div>

182
components/admin/team-detail/team-member-modal.tsx
View File

@@ -48,7 +48,7 @@ export function TeamMemberModal({
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-4xl bg-slate-900/95 border-white/20 text-white max-h-[80vh] overflow-y-auto">
<DialogContent className="max-w-6xl bg-slate-900/95 border-white/20 text-white max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="flex items-center justify-between">
<div className="flex items-center gap-3">
@@ -78,98 +78,198 @@ export function TeamMemberModal({
<div className="space-y-6">
{/* Stats du membre */}
<div className="grid grid-cols-3 gap-4">
<div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
<div className="text-2xl font-bold text-white">
<div className="flex items-center gap-4 bg-white/5 border border-white/10 rounded-xl p-3">
<div className="flex items-center gap-2">
<div className="text-lg font-bold text-white">
{member.skills.length}
</div>
<div className="text-sm text-slate-400">Compétences évaluées</div>
<div className="text-xs text-slate-400">compétences</div>
</div>
<div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
<div className="text-2xl font-bold text-green-300">
<div className="h-8 w-px bg-white/10" />
<div className="flex items-center gap-2">
<Award className="h-4 w-4 text-green-400" />
<div className="text-lg font-bold text-green-400">
{
member.skills.filter((s) => s.level >= 2 && s.canMentor)
.length
}
</div>
<div className="text-sm text-slate-400">Peut mentorer</div>
<div className="text-xs text-slate-400">mentorables</div>
</div>
<div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
<div className="text-2xl font-bold text-blue-300">
<div className="h-8 w-px bg-white/10" />
<div className="flex items-center gap-2">
<BookOpen className="h-4 w-4 text-blue-400" />
<div className="text-lg font-bold text-blue-400">
{member.skills.filter((s) => s.wantsToLearn).length}
</div>
<div className="text-sm text-slate-400">Souhaite apprendre</div>
<div className="text-xs text-slate-400">à apprendre</div>
</div>
</div>
{/* Compétences détaillées */}
<div>
<h4 className="font-medium mb-4 text-lg">
<div className="bg-white/5 border border-white/10 rounded-xl overflow-hidden">
<div className="p-3 border-b border-white/10 flex items-center justify-between">
<h4 className="font-medium text-sm text-slate-200">
Portfolio de compétences
</h4>
<div className="space-y-2 max-h-96 overflow-y-auto">
<div className="flex items-center gap-2 text-xs text-slate-400">
<div className="flex items-center gap-2 text-[10px]">
<div className="flex items-center gap-1">
<div className="w-1 h-4 rounded-sm bg-red-500" />
Inc.
</div>
<div className="flex items-center gap-1">
<div className="w-1 h-4 rounded-sm bg-blue-500" />
Maj.
</div>
<div className="h-4 w-px bg-white/10" />
<div className="flex items-center gap-1">
<div className="w-2 h-2 rounded-full bg-green-500" />
Exp.
</div>
<div className="flex items-center gap-1">
<div className="w-2 h-2 rounded-full bg-blue-500" />
Auto.
</div>
<div className="flex items-center gap-1">
<div className="w-2 h-2 rounded-full bg-orange-500" />
Prog.
</div>
<div className="flex items-center gap-1">
<div className="w-2 h-2 rounded-full bg-red-500" />
Déb.
</div>
</div>
</div>
</div>
<div className="max-h-[60vh] overflow-y-auto">
<table className="w-full">
<colgroup>
<col className="w-[50%]" />
<col className="w-[25%]" />
<col className="w-[25%]" />
</colgroup>
<thead>
<tr className="border-b border-white/10">
<th className="text-left py-2 px-3 text-xs font-medium text-slate-400">
Compétence
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Niveau
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Statut
</th>
</tr>
</thead>
<tbody>
{member.skills
.sort((a, b) => b.level - a.level)
.sort((a, b) => {
// D'abord par importance
const importanceOrder = {
incontournable: 2,
majeure: 1,
standard: 0,
};
const importanceDiff =
importanceOrder[b.importance] -
importanceOrder[a.importance];
if (importanceDiff !== 0) return importanceDiff;
// Ensuite par niveau de maîtrise
return b.level - a.level;
})
.map((skill, idx) => (
<div
<tr
key={idx}
className="flex items-center justify-between p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
className="border-b border-white/5 hover:bg-white/5"
>
<div className="flex-1">
<div className="flex items-center justify-between mb-2">
<td className="py-2 px-3">
<div className="flex items-center gap-2">
<div
className={`w-1 h-6 rounded-sm ${
skill.importance === "incontournable"
? "bg-red-500"
: skill.importance === "majeure"
? "bg-blue-500"
: "bg-slate-500"
}`}
/>
<div>
<div className="font-medium text-white">
<div className="text-sm text-slate-200">
{skill.skillName}
</div>
<div className="text-sm text-slate-400">
<div className="flex items-center gap-1">
<div className="text-xs text-slate-400">
{skill.category}
</div>
</div>
<span className="text-xs text-slate-400">
•
</span>
<div
className={`px-2 py-1 border rounded-lg text-center ${getSkillLevelBadgeClasses(
className={`text-[10px] ${
skill.importance === "incontournable"
? "text-red-400"
: skill.importance === "majeure"
? "text-blue-400"
: "text-slate-400"
}`}
>
{skill.importance === "incontournable"
? "Inc."
: skill.importance === "majeure"
? "Maj."
: "Std."}
</div>
</div>
</div>
</div>
</td>
<td className="py-2 px-2">
<div className="flex items-center justify-center gap-2">
<div
className={`text-sm font-medium ${getSkillLevelBadgeClasses(
skill.level
)}`}
>
<span className="text-xs font-medium">
{getSkillLevelLabel(skill.level)}
</span>
{skill.level.toFixed(1)}
</div>
</div>
<div className="w-full bg-white/10 rounded-full h-2 mb-2">
<div className="w-12 bg-white/10 rounded-full h-1">
<div
className={`h-2 rounded-full transition-all ${getSkillLevelColor(
className={`h-1 rounded-full ${getSkillLevelColor(
skill.level
)
.replace("bg-", "bg-gradient-to-r from-")
.replace("-500", "-400")}`}
)}`}
style={{ width: `${(skill.level / 3) * 100}%` }}
/>
</div>
<div className="flex items-center gap-2">
</div>
</td>
<td className="py-2 px-2">
<div className="flex items-center justify-center gap-1">
{skill.canMentor && (
<Badge
variant="outline"
className="text-xs text-green-300 border-green-500/30"
className="text-[10px] text-green-300 border-green-500/30 px-1"
>
<Award className="h-3 w-3 mr-1" />
<Award className="h-2.5 w-2.5 mr-0.5" />
Mentor
</Badge>
)}
{skill.wantsToLearn && (
<Badge
variant="outline"
className="text-xs text-blue-300 border-blue-500/30"
className="text-[10px] text-blue-300 border-blue-500/30 px-1"
>
<BookOpen className="h-3 w-3 mr-1" />
<BookOpen className="h-2.5 w-2.5 mr-0.5" />
Apprenant
</Badge>
)}
</div>
</div>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>

123
components/admin/team-detail/team-members-tab.tsx
View File

@@ -35,7 +35,29 @@ export function TeamMembersTab({
onMemberClick,
}: TeamMembersTabProps) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl">
<div className="overflow-hidden">
<table className="w-full">
<thead>
<tr className="border-b border-white/10">
<th className="text-left py-2 px-4 text-xs font-medium text-slate-400">
Membre
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Niveau
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Compétences
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Expertises
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Objectifs
</th>
</tr>
</thead>
<tbody>
{members.map((member) => {
const memberAvg =
member.skills.reduce((sum, skill) => sum + skill.level, 0) /
@@ -48,99 +70,72 @@ export function TeamMembersTab({
).length;
return (
<div
<tr
key={member.uuid}
className="bg-white/5 border border-white/10 rounded-xl p-4 hover:bg-white/10 transition-colors cursor-pointer group"
className="border-b border-white/5 hover:bg-white/5 cursor-pointer"
onClick={() => onMemberClick(member)}
>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
<User className="h-4 w-4 text-blue-400" />
<td className="py-2 px-4">
<div className="flex items-center gap-2">
<div className="p-1.5 bg-blue-500/20 border border-blue-500/30 rounded-lg">
<User className="h-3 w-3 text-blue-400" />
</div>
<div>
<div className="font-medium text-white group-hover:text-blue-300 transition-colors">
<div className="text-sm text-slate-200">
{member.firstName} {member.lastName}
</div>
<div className="text-sm text-slate-400">
<div className="text-xs text-slate-400">
{new Date(member.joinDate).toLocaleDateString()}
</div>
</div>
</div>
</td>
<td className="py-2 px-2">
<div className="flex items-center justify-center gap-2">
<div
className={`px-2 py-1 border rounded-lg ${getSkillLevelBadgeClasses(
className={`text-sm font-medium ${getSkillLevelBadgeClasses(
memberAvg
)}`}
>
<span className="text-xs font-medium">
{getSkillLevelLabel(memberAvg)}
</span>
{memberAvg.toFixed(1)}
</div>
</div>
<div className="space-y-3">
<div className="flex items-center justify-between text-sm">
<span className="text-slate-300">Niveau moyen:</span>
<span className="text-white font-semibold">
{memberAvg.toFixed(1)}/3
</span>
</div>
<div className="w-full bg-white/10 rounded-full h-2">
<div className="w-12 bg-white/10 rounded-full h-1">
<div
className={`h-2 rounded-full transition-all ${getSkillLevelColor(
className={`h-1 rounded-full ${getSkillLevelColor(
memberAvg
)
.replace("bg-", "bg-gradient-to-r from-")
.replace("-500", "-400")}`}
)}`}
style={{ width: `${(memberAvg / 3) * 100}%` }}
/>
</div>
<div className="grid grid-cols-3 gap-2 text-xs">
<div className="text-center">
<div className="text-white font-semibold">
</div>
</td>
<td className="py-2 px-2 text-center">
<span className="text-sm text-slate-300 font-medium">
{member.skills.length}
</div>
<div className="text-slate-400">Compétences</div>
</div>
<div className="text-center">
<div className="text-green-300 font-semibold">
{expertSkills}
</div>
<div className="text-slate-400">Expertises</div>
</div>
<div className="text-center">
<div className="text-blue-300 font-semibold">
{learningGoals}
</div>
<div className="text-slate-400">Objectifs</div>
</div>
</div>
{expertSkills > 0 && (
<div className="flex items-center gap-2 text-xs">
</span>
</td>
<td className="py-2 px-2">
<div className="flex items-center justify-center gap-2">
<Award className="h-3 w-3 text-green-400" />
<span className="text-green-300">
Peut mentorer {expertSkills} compétence
{expertSkills > 1 ? "s" : ""}
<span className="text-sm text-green-400 font-medium">
{expertSkills}
</span>
</div>
)}
{learningGoals > 0 && (
<div className="flex items-center gap-2 text-xs">
</td>
<td className="py-2 px-2">
<div className="flex items-center justify-center gap-2">
<BookOpen className="h-3 w-3 text-blue-400" />
<span className="text-blue-300">
Souhaite apprendre {learningGoals} compétence
{learningGoals > 1 ? "s" : ""}
<span className="text-sm text-blue-400 font-medium">
{learningGoals}
</span>
</div>
)}
</div>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
}

94
components/admin/team-detail/team-metrics-cards.tsx
View File

@@ -6,8 +6,20 @@ interface TeamInsights {
averageTeamLevel: number;
totalExperts: number;
totalLearners: number;
skillGaps: number;
strongSkills: number;
skillGaps: {
incontournable: number;
majeure: number;
standard: number;
};
strongSkills: {
incontournable: number;
majeure: number;
standard: number;
};
criticalSkillsCoverage: {
incontournable: number;
majeure: number;
};
}
interface TeamMetricsCardsProps {
@@ -58,6 +70,50 @@ export function TeamMetricsCards({
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-red-500/20 border border-red-500/30 rounded-xl">
<Target className="h-4 w-4 text-red-400" />
</div>
<span className="text-slate-300 font-medium text-sm">
Incontournables
</span>
</div>
<div
className={`text-2xl font-bold ${
teamInsights.criticalSkillsCoverage.incontournable < 75
? "text-red-400"
: "text-green-400"
}`}
>
{teamInsights.criticalSkillsCoverage.incontournable.toFixed(0)}%
</div>
<div className="text-xs text-slate-400 mt-1">
{teamInsights.skillGaps.incontournable} à renforcer
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
<Target className="h-4 w-4 text-blue-400" />
</div>
<span className="text-slate-300 font-medium text-sm">Majeures</span>
</div>
<div
className={`text-2xl font-bold ${
teamInsights.criticalSkillsCoverage.majeure < 60
? "text-red-400"
: "text-green-400"
}`}
>
{teamInsights.criticalSkillsCoverage.majeure.toFixed(0)}%
</div>
<div className="text-xs text-slate-400 mt-1">
{teamInsights.skillGaps.majeure} à renforcer
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
@@ -68,38 +124,10 @@ export function TeamMetricsCards({
<div className="text-2xl font-bold text-white">
{teamInsights.totalExperts}
</div>
<div className="text-xs text-slate-400 mt-1">compétences expertes</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
<BookOpen className="h-4 w-4 text-purple-400" />
</div>
<span className="text-slate-300 font-medium text-sm">
Apprentissages
</span>
</div>
<div className="text-2xl font-bold text-white">
{teamInsights.totalLearners}
</div>
<div className="text-xs text-slate-400 mt-1">
objectifs d'apprentissage
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-red-500/20 border border-red-500/30 rounded-xl">
<Target className="h-4 w-4 text-red-400" />
</div>
<span className="text-slate-300 font-medium text-sm">Lacunes</span>
</div>
<div className="text-2xl font-bold text-white">
{teamInsights.skillGaps}
</div>
<div className="text-xs text-slate-400 mt-1">
compétences à renforcer
{teamInsights.strongSkills.incontournable +
teamInsights.strongSkills.majeure}{" "}
critiques maîtrisées
</div>
</div>
</div>

278
components/admin/team-detail/team-overview-tab.tsx
View File

@@ -7,6 +7,7 @@ import { TechIcon } from "@/components/icons/tech-icon";
interface SkillAnalysis {
skillName: string;
category: string;
importance: "incontournable" | "majeure" | "standard";
experts: Array<{
name: string;
level: number;
@@ -21,14 +22,27 @@ interface SkillAnalysis {
expertCount: number;
learnerCount: number;
proficiencyRate: number;
coverage: number;
}
interface TeamInsights {
averageTeamLevel: number;
totalExperts: number;
totalLearners: number;
skillGaps: number;
strongSkills: number;
skillGaps: {
incontournable: number;
majeure: number;
standard: number;
};
strongSkills: {
incontournable: number;
majeure: number;
standard: number;
};
criticalSkillsCoverage: {
incontournable: number;
majeure: number;
};
}
interface TeamOverviewTabProps {
@@ -66,16 +80,63 @@ export function TeamOverviewTab({
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
{skill.icon && (
<div className="p-1.5 bg-white/10 border border-white/20 rounded-md">
<div
className={`p-1.5 border rounded-md ${
skill.importance === "incontournable"
? "bg-red-500/20 border-red-500/30"
: skill.importance === "majeure"
? "bg-blue-500/20 border-blue-500/30"
: "bg-slate-500/20 border-slate-500/30"
}`}
>
<TechIcon
iconName={skill.icon}
className="w-3 h-3 text-white"
className={`w-3 h-3 ${
skill.importance === "incontournable"
? "text-red-400"
: skill.importance === "majeure"
? "text-blue-400"
: "text-slate-400"
}`}
/>
</div>
)}
<div>
<span className="text-white font-medium text-sm group-hover:text-white transition-colors">
{skill.skillName}
</span>
<div
className={`text-[10px] ${
skill.importance === "incontournable"
? "text-red-400"
: skill.importance === "majeure"
? "text-blue-400"
: "text-slate-400"
}`}
>
{skill.importance === "incontournable"
? "Incontournable"
: skill.importance === "majeure"
? "Majeure"
: "Standard"}
</div>
</div>
</div>
<div className="flex items-center gap-2">
<div
className={`text-xs ${
skill.importance === "incontournable"
? skill.coverage < 75
? "text-red-400"
: "text-green-400"
: skill.importance === "majeure"
? skill.coverage < 60
? "text-red-400"
: "text-green-400"
: "text-slate-400"
}`}
>
{skill.coverage.toFixed(0)}%
</div>
<div
className={`w-3 h-3 rounded-full ${getSkillLevelColor(
@@ -83,6 +144,7 @@ export function TeamOverviewTab({
)}`}
/>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-2xl font-bold text-white">
@@ -120,6 +182,139 @@ export function TeamOverviewTab({
</div>
</div>
{/* Compétences critiques */}
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
<h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
<Target className="h-5 w-5 text-red-400" />
Compétences critiques
</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Incontournables */}
<div>
<div className="flex items-center justify-between mb-4">
<h4 className="text-sm font-medium text-red-400">
Incontournables
</h4>
<div className="text-sm">
<span className="text-green-400">
{teamInsights.strongSkills.incontournable}
</span>
<span className="text-slate-400"> / </span>
<span className="text-slate-300">
{teamInsights.strongSkills.incontournable +
teamInsights.skillGaps.incontournable}
</span>
</div>
</div>
<div className="space-y-2">
{skillAnalysis
.filter((s) => s.importance === "incontournable")
.sort((a, b) => b.coverage - a.coverage)
.map((skill, idx) => (
<div
key={idx}
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
>
<div className="flex items-center gap-2">
{skill.icon && (
<div className="p-1.5 bg-red-500/20 border border-red-500/30 rounded-md">
<TechIcon
iconName={skill.icon}
className="w-3 h-3 text-red-400"
/>
</div>
)}
<span className="text-sm text-slate-300">
{skill.skillName}
</span>
</div>
<div className="flex items-center gap-3">
<span
className={`text-sm font-medium ${
skill.coverage < 75
? "text-red-400"
: "text-green-400"
}`}
>
{skill.coverage.toFixed(0)}%
</span>
<div className="w-16 bg-white/10 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full ${
skill.coverage < 75 ? "bg-red-500" : "bg-green-500"
}`}
style={{ width: `${skill.coverage}%` }}
/>
</div>
</div>
</div>
))}
</div>
</div>
{/* Majeures */}
<div>
<div className="flex items-center justify-between mb-4">
<h4 className="text-sm font-medium text-blue-400">Majeures</h4>
<div className="text-sm">
<span className="text-green-400">
{teamInsights.strongSkills.majeure}
</span>
<span className="text-slate-400"> / </span>
<span className="text-slate-300">
{teamInsights.strongSkills.majeure +
teamInsights.skillGaps.majeure}
</span>
</div>
</div>
<div className="space-y-2">
{skillAnalysis
.filter((s) => s.importance === "majeure")
.sort((a, b) => b.coverage - a.coverage)
.map((skill, idx) => (
<div
key={idx}
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
>
<div className="flex items-center gap-2">
{skill.icon && (
<div className="p-1.5 bg-blue-500/20 border border-blue-500/30 rounded-md">
<TechIcon
iconName={skill.icon}
className="w-3 h-3 text-blue-400"
/>
</div>
)}
<span className="text-sm text-slate-300">
{skill.skillName}
</span>
</div>
<div className="flex items-center gap-3">
<span
className={`text-sm font-medium ${
skill.coverage < 60
? "text-red-400"
: "text-green-400"
}`}
>
{skill.coverage.toFixed(0)}%
</span>
<div className="w-16 bg-white/10 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full ${
skill.coverage < 60 ? "bg-red-500" : "bg-green-500"
}`}
style={{ width: `${skill.coverage}%` }}
/>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
{/* Distribution des niveaux */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
@@ -203,17 +398,80 @@ export function TeamOverviewTab({
</h3>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<span className="text-slate-300">Couverture des compétences</span>
<span className="text-white font-bold">
{team.skillCoverage.toFixed(1)}%
<span className="text-slate-300">
Compétences incontournables
</span>
<div className="flex items-center gap-3">
<span
className={`text-sm font-bold ${
teamInsights.criticalSkillsCoverage.incontournable < 75
? "text-red-400"
: "text-green-400"
}`}
>
{teamInsights.criticalSkillsCoverage.incontournable.toFixed(
0
)}
%
</span>
<div className="w-16 bg-white/10 rounded-full h-2">
<div
className={`h-2 rounded-full ${
teamInsights.criticalSkillsCoverage.incontournable < 75
? "bg-red-500"
: "bg-green-500"
}`}
style={{
width: `${teamInsights.criticalSkillsCoverage.incontournable}%`,
}}
/>
</div>
<span className="text-xs text-slate-400">
{teamInsights.skillGaps.incontournable} à renforcer
</span>
</div>
</div>
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<span className="text-slate-300">Compétences fortes</span>
<span className="text-white font-bold">
{teamInsights.strongSkills}
<span className="text-slate-300">Compétences majeures</span>
<div className="flex items-center gap-3">
<span
className={`text-sm font-bold ${
teamInsights.criticalSkillsCoverage.majeure < 60
? "text-red-400"
: "text-green-400"
}`}
>
{teamInsights.criticalSkillsCoverage.majeure.toFixed(0)}%
</span>
<div className="w-16 bg-white/10 rounded-full h-2">
<div
className={`h-2 rounded-full ${
teamInsights.criticalSkillsCoverage.majeure < 60
? "bg-red-500"
: "bg-green-500"
}`}
style={{
width: `${teamInsights.criticalSkillsCoverage.majeure}%`,
}}
/>
</div>
<span className="text-xs text-slate-400">
{teamInsights.skillGaps.majeure} à renforcer
</span>
</div>
</div>
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<span className="text-slate-300">Compétences standards</span>
<div className="flex items-center gap-3">
<span className="text-sm font-bold text-white">
{teamInsights.skillGaps.standard}
</span>
<span className="text-xs text-slate-400">à renforcer</span>
</div>
</div>
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<span className="text-slate-300">Objectifs d'apprentissage</span>
<span className="text-white font-bold">

177
components/admin/team-detail/team-skills-tab.tsx
View File

@@ -7,6 +7,7 @@ import { Badge } from "@/components/ui/badge";
interface SkillAnalysis {
skillName: string;
category: string;
importance: "incontournable" | "majeure" | "standard";
experts: Array<{
name: string;
level: number;
@@ -21,6 +22,7 @@ interface SkillAnalysis {
expertCount: number;
learnerCount: number;
proficiencyRate: number;
coverage: number;
}
interface TeamSkillsTabProps {
@@ -95,75 +97,125 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
</div>
{/* Liste des compétences détaillée */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
{filteredSkills.map((skill, idx) => (
<div
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl">
<div className="overflow-hidden">
<table className="w-full">
<thead>
<tr className="border-b border-white/10">
<th className="text-left py-2 px-4 text-xs font-medium text-slate-400">
Compétence
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Niveau
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Experts
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Appren.
</th>
<th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
Couv.
</th>
<th className="text-center py-2 px-4 text-xs font-medium text-slate-400">
Mentors
</th>
</tr>
</thead>
<tbody>
{filteredSkills.map((skill, idx) => {
const target =
skill.importance === "incontournable"
? 75
: skill.importance === "majeure"
? 60
: 0;
const isUnderTarget = target > 0 && skill.coverage < target;
return (
<tr
key={idx}
className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
className={`border-b border-white/5 hover:bg-white/5 ${
skill.importance === "incontournable"
? "bg-red-500/5"
: skill.importance === "majeure"
? "bg-blue-500/5"
: ""
}`}
>
<div className="flex items-center justify-between mb-2">
<div className="min-w-0 flex-1">
<h4 className="font-medium text-white text-sm truncate">
{skill.skillName}
</h4>
<p className="text-xs text-slate-400">{skill.category}</p>
</div>
<td className="py-2 px-4">
<div className="flex items-center gap-2">
<div
className={`px-2 py-1 border rounded text-center ml-2 flex-shrink-0 ${getSkillLevelBadgeClasses(
className={`w-1 h-6 rounded-sm ${
skill.importance === "incontournable"
? "bg-red-500"
: skill.importance === "majeure"
? "bg-blue-500"
: "bg-slate-500"
}`}
/>
<div>
<div className="text-sm text-slate-200">
{skill.skillName}
</div>
<div className="text-xs text-slate-400">
{skill.category}
</div>
</div>
</div>
</td>
<td className="py-2 px-2">
<div className="flex items-center justify-center gap-2">
<div
className={`text-sm font-medium ${getSkillLevelBadgeClasses(
skill.averageLevel
)}`}
>
<span className="text-xs font-medium">
{getSkillLevelLabel(skill.averageLevel)}
</span>
{skill.averageLevel.toFixed(1)}
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-slate-300">Niveau:</span>
<span className="text-white font-semibold text-sm">
{skill.averageLevel.toFixed(1)}/3
</span>
</div>
<div className="w-full bg-white/10 rounded-full h-1.5">
<div className="w-12 bg-white/10 rounded-full h-1">
<div
className={`h-1.5 rounded-full transition-all ${getSkillLevelColor(
className={`h-1 rounded-full ${getSkillLevelColor(
skill.averageLevel
)
.replace("bg-", "bg-gradient-to-r from-")
.replace("-500", "-500 to-")
.replace("500 to-", "400")}`}
style={{ width: `${(skill.averageLevel / 3) * 100}%` }}
)}`}
style={{
width: `${(skill.averageLevel / 3) * 100}%`,
}}
/>
</div>
<div className="grid grid-cols-3 gap-1 text-xs">
<div className="text-center">
<div className="text-white font-semibold">
{skill.totalEvaluations}
</div>
<div className="text-slate-400 text-xs">Éval.</div>
</div>
<div className="text-center">
<div className="text-green-300 font-semibold">
</td>
<td className="py-2 px-2 text-center">
<span className="text-sm text-green-400 font-medium">
{skill.expertCount}
</div>
<div className="text-slate-400 text-xs">Experts</div>
</div>
<div className="text-center">
<div className="text-blue-300 font-semibold">
</span>
</td>
<td className="py-2 px-2 text-center">
<span className="text-sm text-blue-400 font-medium">
{skill.learnerCount}
</span>
</td>
<td className="py-2 px-2">
<div className="flex items-center justify-center gap-2">
<div
className={`text-sm font-medium ${
isUnderTarget ? "text-red-400" : "text-green-400"
}`}
>
{skill.coverage.toFixed(0)}%
</div>
<div className="text-slate-400 text-xs">Appren.</div>
<div className="w-12 bg-white/10 rounded-full h-1">
<div
className={`h-1 rounded-full ${
isUnderTarget ? "bg-red-500" : "bg-green-500"
}`}
style={{ width: `${skill.coverage}%` }}
/>
</div>
</div>
{skill.experts.filter((e) => e.canMentor).length > 0 && (
<div className="pt-2 border-t border-white/10">
<div className="text-xs text-slate-400 mb-1">Mentors:</div>
<div className="flex flex-wrap gap-1">
</td>
<td className="py-2 px-4">
<div className="flex items-center justify-center gap-1">
{skill.experts
.filter((e) => e.canMentor)
.slice(0, 2)
@@ -171,25 +223,30 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
<Badge
key={i}
variant="outline"
className="text-xs text-green-300 border-green-500/30 px-1 py-0.5"
className="text-[10px] text-green-300 border-green-500/30 px-1"
>
{expert.name.split(" ")[0]}
</Badge>
))}
{skill.experts.filter((e) => e.canMentor).length > 2 && (
{skill.experts.filter((e) => e.canMentor).length >
2 && (
<Badge
variant="outline"
className="text-xs text-slate-400 border-slate-500/30 px-1 py-0.5"
className="text-[10px] text-slate-400 border-slate-500/30 px-1"
>
+{skill.experts.filter((e) => e.canMentor).length - 2}
+
{skill.experts.filter((e) => e.canMentor).length -
2}
</Badge>
)}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
</div>
))}
</div>
</>
);

1
lib/admin-types.ts
View File

@@ -8,6 +8,7 @@ export interface TeamMember {
skillId: string;
skillName: string;
category: string;
importance: "incontournable" | "majeure" | "standard";
level: number;
canMentor: boolean;
wantsToLearn: boolean;

1
services/admin-service.ts
View File

@@ -99,6 +99,7 @@ export class AdminService {
'skillId', ss.skill_id,
'skillName', ss.skill_name,
'category', ss.category_name,
'importance', ss.importance,
'level', ss.level_numeric,
'canMentor', ss.can_mentor,
'wantsToLearn', ss.wants_to_learn