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

feat: review my team page with importance

Browse Source
This commit is contained in:
Julien Froidefond
2025-08-27 12:56:48 +02:00
parent 88dc00a44b
commit 94a18b0ca5
8 changed files with 544 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
components/team-review/skill-matrix.tsx
View File

@@ -13,6 +13,7 @@ import { Badge } from "@/components/ui/badge";
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";
interface SkillMatrixProps {
members: TeamMemberProfile[];
@@ -106,87 +107,97 @@ export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
</TableRow>
</TableHeader>
<TableBody>
{skills.map((skill) => (
<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 bg-white/10 border border-white/20 flex items-center justify-center">
<TechIcon
iconName={skill.icon || ""}
className="w-4 h-4 text-blue-400"
fallbackText={skill.skillName}
/>
</div>
<div className="flex items-center gap-2">
<span className="text-slate-200">
{skill.skillName}
</span>
{skill.risk === "high" && (
<Badge
variant="destructive"
className="bg-red-500/20 text-red-200 border-red-500/30"
>
Risque
</Badge>
)}
</div>
</div>
</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 && (
{skills.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="outline"
className="flex items-center gap-1 bg-green-500/10 text-green-200 border-green-500/30"
variant="destructive"
className="bg-red-500/20 text-red-200 border-red-500/30 w-fit"
>
<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>
Risque
</Badge>
)}
</div>
</TableCell>
);
})}
<TableCell>
<div className="flex items-center gap-2">
<div className="w-full bg-white/10 rounded-full h-2">
<div
className="bg-blue-500/50 h-2 rounded-full"
style={{
width: `${Math.max(
0,
Math.min(100, skill.coverage || 0)
)}%`,
}}
/>
</div>
<span className="text-sm text-slate-400 whitespace-nowrap">
{Math.round(skill.coverage || 0)}%
</span>
</div>
</TableCell>
</TableRow>
))}
</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 ${colors.bg.replace(
"/20",
"/50"
)}`}
style={{
width: `${Math.max(
0,
Math.min(100, skill.coverage || 0)
)}%`,
}}
/>
</div>
<span
className={`text-sm ${colors.text} whitespace-nowrap`}
>
{Math.round(skill.coverage || 0)}%
</span>
</div>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>