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

feat: my team page

Browse Source
This commit is contained in:
Julien Froidefond
2025-08-27 10:53:11 +02:00
parent b7e6fa257e
commit c7a5b25501
11 changed files with 1529 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
components/team-review/skill-matrix.tsx Normal file
View File

@@ -0,0 +1,199 @@
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
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";
interface SkillMatrixProps {
members: TeamMemberProfile[];
skillGaps: SkillGap[];
}
export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
// Filtrer les skills valides et les organiser par catégorie
const validSkillGaps = skillGaps.filter(
(skill) => skill.skillId && skill.skillName && skill.category
);
const skillsByCategory = validSkillGaps.reduce((acc, skill) => {
if (!acc[skill.category]) {
acc[skill.category] = [];
}
acc[skill.category].push(skill);
return acc;
}, {} as Record<string, SkillGap[]>);
const getLevelBadge = (level: string | null) => {
const colors = {
never: "bg-white/5 text-slate-300",
"not-autonomous": "bg-yellow-500/20 text-yellow-200",
autonomous: "bg-green-500/20 text-green-200",
expert: "bg-blue-500/20 text-blue-200",
};
return level ? (
<Badge
variant="secondary"
className={colors[level as keyof typeof colors]}
>
{level}
</Badge>
) : (
<span className="text-slate-600">-</span>
);
};
// Vérifier si nous avons des données valides
if (validSkillGaps.length === 0 || members.length === 0) {
return (
<Card className="bg-white/5 border-white/10 backdrop-blur">
<CardHeader>
<CardTitle className="text-slate-200">
Matrice des compétences
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-slate-400">
Aucune donnée disponible pour la matrice des compétences.
</p>
</CardContent>
</Card>
);
}
return (
<Card className="bg-white/5 border-white/10 backdrop-blur">
<CardHeader>
<CardTitle className="text-slate-200">
Matrice des compétences
</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">
{category}
</h3>
<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>
{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>
{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 && (
<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="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>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}