feat: review admin teams views for importance inclusion
This commit is contained in:
Julien Froidefond
@@ -35,112 +35,107 @@ export function TeamMembersTab({
|
||||
onMemberClick,
|
||||
}: TeamMembersTabProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{members.map((member) => {
|
||||
const memberAvg =
|
||||
member.skills.reduce((sum, skill) => sum + skill.level, 0) /
|
||||
member.skills.length;
|
||||
const expertSkills = member.skills.filter(
|
||||
(s) => s.level >= 2 && s.canMentor
|
||||
).length;
|
||||
const learningGoals = member.skills.filter(
|
||||
(s) => s.wantsToLearn
|
||||
).length;
|
||||
<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) /
|
||||
member.skills.length;
|
||||
const expertSkills = member.skills.filter(
|
||||
(s) => s.level >= 2 && s.canMentor
|
||||
).length;
|
||||
const learningGoals = member.skills.filter(
|
||||
(s) => s.wantsToLearn
|
||||
).length;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={member.uuid}
|
||||
className="bg-white/5 border border-white/10 rounded-xl p-4 hover:bg-white/10 transition-colors cursor-pointer group"
|
||||
onClick={() => onMemberClick(member)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
||||
<User className="h-4 w-4 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-white group-hover:text-blue-300 transition-colors">
|
||||
{member.firstName} {member.lastName}
|
||||
</div>
|
||||
<div className="text-sm text-slate-400">
|
||||
{new Date(member.joinDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`px-2 py-1 border rounded-lg ${getSkillLevelBadgeClasses(
|
||||
memberAvg
|
||||
)}`}
|
||||
>
|
||||
<span className="text-xs font-medium">
|
||||
{getSkillLevelLabel(memberAvg)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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(
|
||||
memberAvg
|
||||
)
|
||||
.replace("bg-", "bg-gradient-to-r from-")
|
||||
.replace("-500", "-400")}`}
|
||||
style={{ width: `${(memberAvg / 3) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||
<div className="text-center">
|
||||
<div className="text-white font-semibold">
|
||||
{member.skills.length}
|
||||
</div>
|
||||
<div className="text-slate-400">Compétences</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<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">
|
||||
Peut mentorer {expertSkills} compétence
|
||||
{expertSkills > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{learningGoals > 0 && (
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<BookOpen className="h-3 w-3 text-blue-400" />
|
||||
<span className="text-blue-300">
|
||||
Souhaite apprendre {learningGoals} compétence
|
||||
{learningGoals > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<tr
|
||||
key={member.uuid}
|
||||
className="border-b border-white/5 hover:bg-white/5 cursor-pointer"
|
||||
onClick={() => onMemberClick(member)}
|
||||
>
|
||||
<td className="py-2 px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 bg-blue-500/20 border border-blue-500/30 rounded-lg">
|
||||
<User className="h-3 w-3 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-slate-200">
|
||||
{member.firstName} {member.lastName}
|
||||
</div>
|
||||
<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={`text-sm font-medium ${getSkillLevelBadgeClasses(
|
||||
memberAvg
|
||||
)}`}
|
||||
>
|
||||
{memberAvg.toFixed(1)}
|
||||
</div>
|
||||
<div className="w-12 bg-white/10 rounded-full h-1">
|
||||
<div
|
||||
className={`h-1 rounded-full ${getSkillLevelColor(
|
||||
memberAvg
|
||||
)}`}
|
||||
style={{ width: `${(memberAvg / 3) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-2 px-2 text-center">
|
||||
<span className="text-sm text-slate-300 font-medium">
|
||||
{member.skills.length}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2 px-2">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Award className="h-3 w-3 text-green-400" />
|
||||
<span className="text-sm text-green-400 font-medium">
|
||||
{expertSkills}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-2 px-2">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<BookOpen className="h-3 w-3 text-blue-400" />
|
||||
<span className="text-sm text-blue-400 font-medium">
|
||||
{learningGoals}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user