feat: review UI of skill matrix in myteam page
This commit is contained in:
Julien Froidefond
@@ -14,10 +14,8 @@ 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";
|
||||
import { isCoverageBelowObjective } from "@/lib/evaluation-utils";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
interface SkillMatrixProps {
|
||||
members: TeamMemberProfile[];
|
||||
@@ -104,12 +102,167 @@ export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-8">
|
||||
{Object.entries(skillsByCategory).map(([category, skills]) => (
|
||||
<div key={`category-${category}`}>
|
||||
<h3 className="text-lg font-semibold text-slate-200 mb-4">
|
||||
<Tabs defaultValue="all" className="w-full">
|
||||
<TabsList className="mb-4 bg-white/5 border-white/10">
|
||||
<TabsTrigger
|
||||
value="all"
|
||||
className="data-[state=active]:bg-white/10"
|
||||
>
|
||||
Toutes
|
||||
</TabsTrigger>
|
||||
{Object.keys(skillsByCategory).map((category) => (
|
||||
<TabsTrigger
|
||||
key={category}
|
||||
value={category}
|
||||
className="data-[state=active]:bg-white/10"
|
||||
>
|
||||
{category}
|
||||
</h3>
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="all">
|
||||
<div className="rounded-md border border-white/10">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-white/10">
|
||||
<TableHead className="w-[200px] text-slate-300">
|
||||
Compétence
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px] text-slate-300">
|
||||
Catégorie
|
||||
</TableHead>
|
||||
{members.map((member) => (
|
||||
<TableHead
|
||||
key={`header-${member.member.uuid}`}
|
||||
className="text-slate-300"
|
||||
>
|
||||
{member.member.firstName} {member.member.lastName}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="w-[120px] text-slate-300">
|
||||
Couverture
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{validSkillGaps.sort(sortByImportance).map((skill) => {
|
||||
const colors = getImportanceColors(skill.importance);
|
||||
return (
|
||||
<TableRow
|
||||
key={`skill-row-${skill.skillId}-${skill.category}`}
|
||||
className="border-white/10"
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-lg ${colors.bg} ${colors.border} border flex items-center justify-center`}
|
||||
>
|
||||
<TechIcon
|
||||
iconName={skill.icon || ""}
|
||||
className={`w-4 h-4 ${colors.text}`}
|
||||
fallbackText={skill.skillName}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className={`${colors.text} font-medium`}>
|
||||
{skill.skillName}
|
||||
</span>
|
||||
{skill.risk === "high" && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="bg-red-500/20 text-red-200 border-red-500/30 w-fit"
|
||||
>
|
||||
Risque
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-white/5 text-slate-300 border-white/10"
|
||||
>
|
||||
{skill.category}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
{members.map((member) => {
|
||||
const memberSkill = member.skills.find(
|
||||
(s) => s.skillId === skill.skillId
|
||||
);
|
||||
return (
|
||||
<TableCell
|
||||
key={`skill-${skill.skillId}-member-${member.member.uuid}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{getLevelBadge(memberSkill?.level || null)}
|
||||
{memberSkill?.canMentor && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="flex items-center gap-1 bg-green-500/10 text-green-200 border-green-500/30"
|
||||
>
|
||||
<UserCheck className="h-3 w-3" />
|
||||
<span className="text-xs">Mentor</span>
|
||||
</Badge>
|
||||
)}
|
||||
{memberSkill?.wantsToLearn && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="flex items-center gap-1 bg-blue-500/10 text-blue-200 border-blue-500/30"
|
||||
>
|
||||
<GraduationCap className="h-3 w-3" />
|
||||
<span className="text-xs">Apprenant</span>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-full bg-white/10 rounded-full h-2">
|
||||
<div
|
||||
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,
|
||||
Math.min(100, skill.coverage || 0)
|
||||
)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm whitespace-nowrap ${
|
||||
isCoverageBelowObjective(
|
||||
skill.coverage || 0,
|
||||
skill.importance
|
||||
)
|
||||
? "text-red-400"
|
||||
: colors.text
|
||||
}`}
|
||||
>
|
||||
{Math.round(skill.coverage || 0)}%
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{Object.entries(skillsByCategory).map(([category, skills]) => (
|
||||
<TabsContent key={category} value={category}>
|
||||
<div className="rounded-md border border-white/10">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
@@ -236,9 +389,9 @@ export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</div>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user