feat: review admin teams views for importance inclusion

components/admin/team-detail/team-detail-client-wrapper.tsx

@@ -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;
+  skillGaps: {
-  strongSkills: number;
+    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,
+    skillGaps: {
-    strongSkills: skillAnalysis.filter((s) => s.averageLevel >= 2.5).length,
+      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 (

components/admin/team-detail/team-detail-tabs.tsx

@@ -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;
+  skillGaps: {
-  strongSkills: number;
+    incontournable: number;
+    majeure: number;
+    standard: number;
+  };
+  strongSkills: {
+    incontournable: number;
+    majeure: number;
+    standard: number;
+  };
+  criticalSkillsCoverage: {
+    incontournable: number;
+    majeure: number;
+  };
 }
 
 interface TeamDetailTabsProps {

components/admin/team-detail/team-insights-tab.tsx

@@ -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;
+  skillGaps: {
-  strongSkills: number;
+    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)
+              .filter(
-              .slice(0, 5)
+                (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="flex-1 flex items-center justify-between">
-                    <div className="text-white font-medium">
+                    <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="flex items-center gap-2">
-                    <div className="text-red-300 font-semibold">
+                      <div className="text-[10px] text-red-300 opacity-0 group-hover:opacity-100 transition-opacity">
-                      {skill.averageLevel.toFixed(1)}
+                        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
-                  <div className="flex items-center justify-between mb-2">
+                  key={idx}
-                    <div className="text-white font-medium">
+                  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">
+                      <div
-                      {skill.category}
+                        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">
+          <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
-            <h4 className="font-medium text-blue-300 mb-2">
+            <h4 className="font-medium text-red-300 mb-2">
-              🎯 Formations prioritaires
+              🎯 Compétences incontournables
             </h4>
             <p className="text-sm text-slate-300">
-              Organiser des formations sur{" "}
+              {teamInsights.skillGaps.incontournable > 0 ? (
-              {skillAnalysis
+                <>
-                .filter((s) => s.averageLevel < 1.5)
+                  Priorité: combler les lacunes sur{" "}
-                .slice(0, 2)
+                  {teamInsights.skillGaps.incontournable} compétence
-                .map((s) => s.skillName)
+                  {teamInsights.skillGaps.incontournable > 1 ? "s" : ""}{" "}
-                .join(" et ")}
+                  incontournable
-              pour combler les lacunes identifiées.
+                  {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.filter(
-              {skillAnalysis.reduce(
+                (s) =>
-                (sum, skill) =>
+                  s.experts.filter((e) => e.canMentor).length > 0 &&
-                  sum + skill.experts.filter((e) => e.canMentor).length,
+                  s.learnerCount > 0 &&
-                0
+                  (s.importance === "incontournable" ||
-              )}{" "}
+                    s.importance === "majeure")
-              mentors disponibles.
+              ).length > 0 ? (
-            </p>
+                <>
-          </div>
+                  {
-
+                    skillAnalysis.filter(
-          <div className="p-4 bg-purple-500/10 border border-purple-500/20 rounded-xl">
+                      (s) =>
-            <h4 className="font-medium text-purple-300 mb-2">
+                        s.experts.filter((e) => e.canMentor).length > 0 &&
-              📈 Capitaliser sur les forces
+                        s.learnerCount > 0 &&
-            </h4>
+                        (s.importance === "incontournable" ||
-            <p className="text-sm text-slate-300">
+                          s.importance === "majeure")
-              Exploiter l'expertise en{" "}
+                    ).length
-              {skillAnalysis
+                  }{" "}
-                .filter((s) => s.averageLevel >= 2.5)
+                  opportunité
-                .slice(0, 2)
+                  {skillAnalysis.filter(
-                .map((s) => s.skillName)
+                    (s) =>
-                .join(" et ")}
+                      s.experts.filter((e) => e.canMentor).length > 0 &&
-              pour des projets ambitieux.
+                      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{" "}
+              Incontournables:{" "}
-              {teamInsights.totalLearners} objectifs d'apprentissage.
+              {teamInsights.criticalSkillsCoverage.incontournable.toFixed(0)}%
+              {" • "}
+              Majeures: {teamInsights.criticalSkillsCoverage.majeure.toFixed(0)}
+              %
             </p>
           </div>
         </div>

components/admin/team-detail/team-member-modal.tsx

@@ -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="flex items-center gap-4 bg-white/5 border border-white/10 rounded-xl p-3">
-            <div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
+            <div className="flex items-center gap-2">
-              <div className="text-2xl font-bold text-white">
+              <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="h-8 w-px bg-white/10" />
-              <div className="text-2xl font-bold text-green-300">
+            <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="h-8 w-px bg-white/10" />
-              <div className="text-2xl font-bold text-blue-300">
+            <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>
+          <div className="bg-white/5 border border-white/10 rounded-xl overflow-hidden">
-            <h4 className="font-medium mb-4 text-lg">
+            <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">
+                        <td className="py-2 px-3">
-                      <div className="flex items-center justify-between mb-2">
+                          <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">
+                              {skill.level.toFixed(1)}
-                            {getSkillLevelLabel(skill.level)}
-                          </span>
                             </div>
-                      </div>
+                            <div className="w-12 bg-white/10 rounded-full h-1">
-
-                      <div className="w-full bg-white/10 rounded-full h-2 mb-2">
                               <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>
-                      <div className="flex items-center gap-2">
+                        </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>
+                        </td>
-                  </div>
+                      </tr>
                     ))}
+                </tbody>
+              </table>
             </div>
           </div>
         </div>

components/admin/team-detail/team-members-tab.tsx

@@ -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">
+                  <td className="py-2 px-4">
-              <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2">
-                <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
+                      <div className="p-1.5 bg-blue-500/20 border border-blue-500/30 rounded-lg">
-                  <User className="h-4 w-4 text-blue-400" />
+                        <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">
+                        {memberAvg.toFixed(1)}
-                  {getSkillLevelLabel(memberAvg)}
-                </span>
                       </div>
-            </div>
+                      <div className="w-12 bg-white/10 rounded-full h-1">
-
-            <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={`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>
-              <div className="grid grid-cols-3 gap-2 text-xs">
+                  </td>
-                <div className="text-center">
+                  <td className="py-2 px-2 text-center">
-                  <div className="text-white font-semibold">
+                    <span className="text-sm text-slate-300 font-medium">
                       {member.skills.length}
-                  </div>
+                    </span>
-                  <div className="text-slate-400">Compétences</div>
+                  </td>
-                </div>
+                  <td className="py-2 px-2">
-                <div className="text-center">
+                    <div className="flex items-center justify-center gap-2">
-                  <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">
                       <Award className="h-3 w-3 text-green-400" />
-                  <span className="text-green-300">
+                      <span className="text-sm text-green-400 font-medium">
-                    Peut mentorer {expertSkills} compétence
+                        {expertSkills}
-                    {expertSkills > 1 ? "s" : ""}
                       </span>
                     </div>
-              )}
+                  </td>
-
+                  <td className="py-2 px-2">
-              {learningGoals > 0 && (
+                    <div className="flex items-center justify-center gap-2">
-                <div className="flex items-center gap-2 text-xs">
                       <BookOpen className="h-3 w-3 text-blue-400" />
-                  <span className="text-blue-300">
+                      <span className="text-sm text-blue-400 font-medium">
-                    Souhaite apprendre {learningGoals} compétence
+                        {learningGoals}
-                    {learningGoals > 1 ? "s" : ""}
                       </span>
                     </div>
-              )}
+                  </td>
-            </div>
+                </tr>
-          </div>
               );
             })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

components/admin/team-detail/team-metrics-cards.tsx

@@ -6,8 +6,20 @@ interface TeamInsights {
   averageTeamLevel: number;
   totalExperts: number;
   totalLearners: number;
-  skillGaps: number;
+  skillGaps: {
-  strongSkills: number;
+    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
+          {teamInsights.strongSkills.incontournable +
-        </div>
+            teamInsights.strongSkills.majeure}{" "}
-      </div>
+          critiques maîtrisées
-
-      <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
         </div>
       </div>
     </div>

components/admin/team-detail/team-overview-tab.tsx

@@ -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;
+  skillGaps: {
-  strongSkills: number;
+    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-slate-300">
-              <span className="text-white font-bold">
+                Compétences incontournables
-                {team.skillCoverage.toFixed(1)}%
+              </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-slate-300">Compétences majeures</span>
-              <span className="text-white font-bold">
+              <div className="flex items-center gap-3">
-                {teamInsights.strongSkills}
+                <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">

components/admin/team-detail/team-skills-tab.tsx

@@ -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">
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl">
-        {filteredSkills.map((skill, idx) => (
+        <div className="overflow-hidden">
-          <div
+          <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">
+                    <td className="py-2 px-4">
-              <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
-                <h4 className="font-medium text-white text-sm truncate">
-                  {skill.skillName}
-                </h4>
-                <p className="text-xs text-slate-400">{skill.category}</p>
-              </div>
                         <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">
+                          {skill.averageLevel.toFixed(1)}
-                  {getSkillLevelLabel(skill.averageLevel)}
-                </span>
                         </div>
-            </div>
+                        <div className="w-12 bg-white/10 rounded-full h-1">
-
-            <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={`h-1.5 rounded-full transition-all ${getSkillLevelColor(
+                            className={`h-1 rounded-full ${getSkillLevelColor(
                               skill.averageLevel
-                  )
+                            )}`}
-                    .replace("bg-", "bg-gradient-to-r from-")
+                            style={{
-                    .replace("-500", "-500 to-")
+                              width: `${(skill.averageLevel / 3) * 100}%`,
-                    .replace("500 to-", "400")}`}
+                            }}
-                  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>
+                    </td>
-                </div>
+                    <td className="py-2 px-2 text-center">
-                <div className="text-center">
+                      <span className="text-sm text-green-400 font-medium">
-                  <div className="text-green-300 font-semibold">
                         {skill.expertCount}
-                  </div>
+                      </span>
-                  <div className="text-slate-400 text-xs">Experts</div>
+                    </td>
-                </div>
+                    <td className="py-2 px-2 text-center">
-                <div className="text-center">
+                      <span className="text-sm text-blue-400 font-medium">
-                  <div className="text-blue-300 font-semibold">
                         {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>
-
+                    </td>
-              {skill.experts.filter((e) => e.canMentor).length > 0 && (
+                    <td className="py-2 px-4">
-                <div className="pt-2 border-t border-white/10">
+                      <div className="flex items-center justify-center gap-1">
-                  <div className="text-xs text-slate-400 mb-1">Mentors:</div>
-                  <div className="flex flex-wrap 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>
     </>
   );

lib/admin-types.ts

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

services/admin-service.ts

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