refactor: rule of coverage are in one place

components/team-review/skill-matrix.tsx

@@ -14,6 +14,10 @@ import { TeamMemberProfile, SkillGap } from "@/lib/team-review-types";
 import { UserCheck, GraduationCap } from "lucide-react";
 import { TechIcon } from "@/components/icons/tech-icon";
 import { getImportanceColors } from "@/lib/tech-colors";
+import {
+  isCoverageBelowObjective,
+  SKILL_LEVEL_VALUES,
+} from "@/lib/evaluation-utils";
 
 interface SkillMatrixProps {
   members: TeamMemberProfile[];
@@ -26,6 +30,21 @@ export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
     (skill) => skill.skillId && skill.skillName && skill.category
   );
 
+  // Fonction de tri par importance
+  const sortByImportance = (a: SkillGap, b: SkillGap) => {
+    const importanceOrder = {
+      incontournable: 2,
+      majeure: 1,
+      standard: 0,
+    };
+    const importanceDiff =
+      importanceOrder[b.importance] - importanceOrder[a.importance];
+    if (importanceDiff !== 0) return importanceDiff;
+
+    // Si même importance, trier par couverture (décroissant)
+    return (b.coverage || 0) - (a.coverage || 0);
+  };
+
   const skillsByCategory = validSkillGaps.reduce((acc, skill) => {
     if (!acc[skill.category]) {
       acc[skill.category] = [];
@@ -34,6 +53,11 @@ export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
     return acc;
   }, {} as Record<string, SkillGap[]>);
 
+  // Trier les compétences par importance dans chaque catégorie
+  Object.values(skillsByCategory).forEach((skills) => {
+    skills.sort(sortByImportance);
+  });
+
   const getLevelBadge = (level: string | null) => {
     const colors = {
       never: "bg-white/5 text-slate-300",
@@ -176,10 +200,14 @@ export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
                             <div className="flex items-center gap-2">
                               <div className="w-full bg-white/10 rounded-full h-2">
                                 <div
-                                  className={`h-2 rounded-full ${colors.bg.replace(
-                                    "/20",
-                                    "/50"
-                                  )}`}
+                                  className={`h-2 rounded-full ${
+                                    isCoverageBelowObjective(
+                                      skill.coverage || 0,
+                                      skill.importance
+                                    )
+                                      ? "bg-red-500/50"
+                                      : colors.bg.replace("/20", "/50")
+                                  }`}
                                   style={{
                                     width: `${Math.max(
                                       0,
@@ -189,7 +217,14 @@ export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
                                 />
                               </div>
                               <span
-                                className={`text-sm ${colors.text} whitespace-nowrap`}
+                                className={`text-sm whitespace-nowrap ${
+                                  isCoverageBelowObjective(
+                                    skill.coverage || 0,
+                                    skill.importance
+                                  )
+                                    ? "text-red-400"
+                                    : colors.text
+                                }`}
                               >
                                 {Math.round(skill.coverage || 0)}%
                               </span>