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

feat: enhance team overview and skills tabs with improved skill distribution and UI

Browse Source 
- Updated team overview tab to calculate and display skill distribution by individual skill levels.
- Refactored skill tab layout for better responsiveness and readability, including adjustments to grid and text sizes.
- Added a new utility function to calculate skill level distribution for cleaner code and reusability.
- Improved visual elements for better user interaction and clarity in skill metrics.
This commit is contained in:
Julien Froidefond
2025-08-22 13:59:51 +02:00
parent 8974a9b579
commit 5c76ec0549
3 changed files with 103 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/admin/team-detail/team-skills-tab.tsx
View File

@@ -95,19 +95,21 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
</div>
{/* Liste des compétences détaillée */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
{filteredSkills.map((skill, idx) => (
<div
key={idx}
className="bg-white/5 border border-white/10 rounded-xl p-4 hover:bg-white/10 transition-colors"
className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
>
<div className="flex items-center justify-between mb-3">
<div>
<h4 className="font-medium text-white">{skill.skillName}</h4>
<div className="flex items-center justify-between mb-2">
<div className="min-w-0 flex-1">
<h4 className="font-medium text-white text-sm truncate">
{skill.skillName}
</h4>
<p className="text-xs text-slate-400">{skill.category}</p>
</div>
<div
className={`px-2 py-1 border rounded-lg text-center ${getSkillLevelBadgeClasses(
className={`px-2 py-1 border rounded text-center ml-2 flex-shrink-0 ${getSkillLevelBadgeClasses(
skill.averageLevel
)}`}
>
@@ -117,17 +119,17 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
</div>
</div>
<div className="space-y-3">
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm text-slate-300">Niveau moyen:</span>
<span className="text-white font-semibold">
<span className="text-xs text-slate-300">Niveau:</span>
<span className="text-white font-semibold text-sm">
{skill.averageLevel.toFixed(1)}/3
</span>
</div>
<div className="w-full bg-white/10 rounded-full h-2">
<div className="w-full bg-white/10 rounded-full h-1.5">
<div
className={`h-2 rounded-full transition-all ${getSkillLevelColor(
className={`h-1.5 rounded-full transition-all ${getSkillLevelColor(
skill.averageLevel
)
.replace("bg-", "bg-gradient-to-r from-")
@@ -137,32 +139,30 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
/>
</div>
<div className="grid grid-cols-3 gap-2 text-xs">
<div className="grid grid-cols-3 gap-1 text-xs">
<div className="text-center">
<div className="text-white font-semibold">
{skill.totalEvaluations}
</div>
<div className="text-slate-400">Évaluations</div>
<div className="text-slate-400 text-xs">Éval.</div>
</div>
<div className="text-center">
<div className="text-green-300 font-semibold">
{skill.expertCount}
</div>
<div className="text-slate-400">Experts</div>
<div className="text-slate-400 text-xs">Experts</div>
</div>
<div className="text-center">
<div className="text-blue-300 font-semibold">
{skill.learnerCount}
</div>
<div className="text-slate-400">Apprenants</div>
<div className="text-slate-400 text-xs">Appren.</div>
</div>
</div>
{skill.experts.filter((e) => e.canMentor).length > 0 && (
<div className="pt-2 border-t border-white/10">
<div className="text-xs text-slate-400 mb-1">
Mentors disponibles:
</div>
<div className="text-xs text-slate-400 mb-1">Mentors:</div>
<div className="flex flex-wrap gap-1">
{skill.experts
.filter((e) => e.canMentor)
@@ -171,15 +171,15 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
<Badge
key={i}
variant="outline"
className="text-xs text-green-300 border-green-500/30"
className="text-xs text-green-300 border-green-500/30 px-1 py-0.5"
>
{expert.name}
{expert.name.split(" ")[0]}
</Badge>
))}
{skill.experts.filter((e) => e.canMentor).length > 2 && (
<Badge
variant="outline"
className="text-xs text-slate-400 border-slate-500/30"
className="text-xs text-slate-400 border-slate-500/30 px-1 py-0.5"
>
+{skill.experts.filter((e) => e.canMentor).length - 2}
</Badge>