feat: review admin teams views for importance inclusion
This commit is contained in:
Julien Froidefond
@@ -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,22 +80,70 @@ 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>
|
||||
)}
|
||||
<span className="text-white font-medium text-sm group-hover:text-white transition-colors">
|
||||
{skill.skillName}
|
||||
</span>
|
||||
<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(
|
||||
skill.averageLevel
|
||||
)}`}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${getSkillLevelColor(
|
||||
skill.averageLevel
|
||||
)}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -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>
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user