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

feat: redesign TeamStatsCard for improved UI and functionality

Browse Source 
- Updated layout and styling for better visual hierarchy and user interaction.
- Simplified skill metrics display and added progress bars for clarity.
- Enhanced top skills section for better readability and engagement.
- Introduced ChevronRight icon for action buttons to indicate interactivity.
- Streamlined component structure for maintainability and performance.
This commit is contained in:
Julien Froidefond
2025-08-22 09:41:58 +02:00
parent 8e7c65d81a
commit 376012fce6
1 changed files with 155 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
components/admin/team-detail/team-stats-card.tsx
View File

@@ -9,6 +9,7 @@ import {
Target, Target,
Award, Award,
Star, Star,
ChevronRight,
} from "lucide-react"; } from "lucide-react";
import { TechIcon } from "@/components/icons/tech-icon"; import { TechIcon } from "@/components/icons/tech-icon";
@@ -70,59 +71,55 @@ export function TeamStatsCard({
onViewReport, onViewReport,
}: TeamStatsCardProps) { }: TeamStatsCardProps) {
return ( return (
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors"> <div className="group bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-5 hover:bg-white/10 hover:border-white/20 transition-all duration-300 cursor-pointer">
<div className="flex items-center justify-between mb-6"> {/* Header avec nom et direction */}
<div className="flex items-center gap-3"> <div className="flex items-start justify-between mb-5">
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl"> <div className="flex-1 min-w-0">
<Users className="h-4 w-4 text-blue-400" /> <h3 className="text-lg font-bold text-white mb-2 truncate">
</div> {teamName}
<h3 className="text-lg font-semibold text-white">{teamName}</h3> </h3>
</div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="px-2 py-1 bg-white/10 border border-white/20 rounded-lg"> <div className="px-2.5 py-1 bg-blue-500/20 border border-blue-500/30 rounded-lg">
<span className="text-xs text-slate-300 font-medium"> <span className="text-xs font-medium text-blue-300">
{direction} {direction}
</span> </span>
</div> </div>
<div className="px-2 py-1 bg-green-500/20 border border-green-500/30 rounded-lg"> <div className="px-2.5 py-1 bg-white/10 border border-white/20 rounded-lg">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1.5">
<Users className="h-3 w-3 text-green-300" /> <Users className="h-3 w-3 text-slate-400" />
<span className="text-xs text-green-300 font-medium"> <span className="text-xs font-medium text-slate-300">
{totalMembers} {totalMembers} membre{totalMembers > 1 ? "s" : ""}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="space-y-6"> {/* Indicateur de niveau global */}
{/* Stats Overview */} <div className="flex flex-col items-end gap-2">
<div className="grid grid-cols-2 gap-4">
<div className="bg-white/5 border border-white/10 rounded-xl p-4">
<div className="flex items-center gap-2 mb-3">
<BarChart3 className="h-4 w-4 text-slate-400" />
<span className="text-sm font-medium text-slate-300">
Niveau moyen
</span>
</div>
<div className="space-y-2">
<div className="grid grid-cols-2 gap-2 items-center">
<span className="text-lg font-bold text-white">
{((averageSkillLevel / 3) * 100).toFixed(0)}%
</span>
<div <div
className={`px-2 py-0.5 border rounded-lg text-center ${getSkillLevelBadgeClasses( className={`px-3 py-1.5 border rounded-xl text-center ${getSkillLevelBadgeClasses(
averageSkillLevel averageSkillLevel
)}`} )}`}
> >
<span className="text-xs font-medium"> <span className="text-sm font-semibold">
{getSkillLevelLabel(averageSkillLevel)} {getSkillLevelLabel(averageSkillLevel)}
</span> </span>
</div> </div>
<div className="text-right">
<div className="text-2xl font-bold text-white">
{((averageSkillLevel / 3) * 100).toFixed(0)}%
</div> </div>
<div className="w-full bg-white/10 rounded-full h-2"> <div className="text-xs text-slate-400">maîtrise</div>
</div>
</div>
</div>
{/* Barre de progression principale */}
<div className="mb-5">
<div className="w-full bg-white/10 rounded-full h-2.5 mb-2">
<div <div
className={`h-2 rounded-full transition-all ${ className={`h-2.5 rounded-full transition-all duration-500 ${
averageSkillLevel < 0.5 averageSkillLevel < 0.5
? "bg-gradient-to-r from-red-500 to-red-400" ? "bg-gradient-to-r from-red-500 to-red-400"
: averageSkillLevel < 1.5 : averageSkillLevel < 1.5
@@ -135,49 +132,57 @@ export function TeamStatsCard({
/> />
</div> </div>
</div> </div>
</div>
<div className="bg-white/5 border border-white/10 rounded-xl p-4"> {/* Métriques clés en grille */}
<div className="flex items-center gap-2 mb-3"> <div className="grid grid-cols-2 gap-4 mb-5">
<Target className="h-4 w-4 text-slate-400" /> <div className="bg-white/5 border border-white/10 rounded-xl p-3">
<span className="text-sm font-medium text-slate-300"> <div className="flex items-center gap-2 mb-2">
<Target className="h-3.5 w-3.5 text-slate-400" />
<span className="text-xs font-medium text-slate-300">
Couverture Couverture
</span> </span>
</div> </div>
<div className="space-y-2"> <div className="text-center">
<div className="flex items-center justify-between"> <div className="text-lg font-bold text-white">
<span className="text-lg font-bold text-white">
{skillCoverage.toFixed(0)}% {skillCoverage.toFixed(0)}%
</div>
<div className="text-xs text-slate-400">compétences</div>
</div>
</div>
<div className="bg-white/5 border border-white/10 rounded-xl p-3">
<div className="flex items-center gap-2 mb-2">
<BarChart3 className="h-3.5 w-3.5 text-slate-400" />
<span className="text-xs font-medium text-slate-300">
Niveau moyen
</span> </span>
<span className="text-xs text-slate-400">des compétences</span>
</div> </div>
<div className="w-full bg-white/10 rounded-full h-2"> <div className="text-center">
<div <div className="text-lg font-bold text-white">
className="bg-gradient-to-r from-green-500 to-green-400 h-2 rounded-full transition-all" {averageSkillLevel.toFixed(1)}
style={{ width: `${skillCoverage}%` }}
/>
</div> </div>
<div className="text-xs text-slate-400">/ 3.0</div>
</div> </div>
</div> </div>
</div> </div>
{/* Top Skills */} {/* Top Skills simplifié */}
<div className="bg-white/5 border border-white/10 rounded-xl p-4"> <div className="mb-5">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-3">
<div className="p-1.5 bg-purple-500/20 border border-purple-500/30 rounded-lg"> <div className="p-1 bg-purple-500/20 border border-purple-500/30 rounded-lg">
<Award className="h-3.5 w-3.5 text-purple-400" /> <Award className="h-3 w-3 text-purple-400" />
</div> </div>
<span className="text-sm font-semibold text-slate-200"> <span className="text-sm font-semibold text-slate-200">
Top Compétences Top 3 compétences
</span> </span>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{topSkills.slice(0, 3).map((skill, idx) => ( {topSkills.slice(0, 3).map((skill, idx) => (
<div <div
key={idx} key={idx}
className="group flex items-center gap-3 p-3 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 hover:border-white/20 transition-all duration-200" className="flex items-center gap-3 p-2.5 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-colors"
> >
{/* Icône de la technologie */} {/* Icône */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{skill.icon ? ( {skill.icon ? (
<div className="p-1.5 bg-white/10 border border-white/20 rounded-md"> <div className="p-1.5 bg-white/10 border border-white/20 rounded-md">
@@ -195,16 +200,16 @@ export function TeamStatsCard({
{/* Nom et niveau */} {/* Nom et niveau */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between mb-1">
<span className="text-sm font-medium text-white truncate pr-2"> <span className="text-sm font-medium text-white truncate pr-2">
{skill.skillName} {skill.skillName}
</span> </span>
<div className="flex items-center gap-2 flex-shrink-0"> <div className="flex items-center gap-1.5 flex-shrink-0">
<span className="text-xs font-semibold text-white"> <span className="text-xs font-semibold text-white">
{skill.averageLevel.toFixed(1)} {skill.averageLevel.toFixed(1)}
</span> </span>
<div <div
className={`w-2 h-2 rounded-full ${getSkillLevelColor( className={`w-1.5 h-1.5 rounded-full ${getSkillLevelColor(
skill.averageLevel skill.averageLevel
)}`} )}`}
/> />
@@ -212,9 +217,9 @@ export function TeamStatsCard({
</div> </div>
{/* Mini barre de progression */} {/* Mini barre de progression */}
<div className="w-full bg-white/10 rounded-full h-1 mt-1"> <div className="w-full bg-white/10 rounded-full h-1">
<div <div
className={`h-1 rounded-full transition-all ${ className={`h-1 rounded-full transition-all duration-300 ${
skill.averageLevel < 0.5 skill.averageLevel < 0.5
? "bg-gradient-to-r from-red-500 to-red-400" ? "bg-gradient-to-r from-red-500 to-red-400"
: skill.averageLevel < 1.5 : skill.averageLevel < 1.5
@@ -232,27 +237,17 @@ export function TeamStatsCard({
</div> </div>
</div> </div>
{/* Action Buttons */} {/* Actions simplifiées */}
<div className="space-y-3 pt-2 border-t border-white/10"> <div className="pt-3 border-t border-white/10">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={onViewDetails} onClick={onViewDetails}
className="w-full justify-start bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30" className="w-full justify-between bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30 group-hover:bg-white/10 transition-all"
> >
<ExternalLink className="h-3 w-3 mr-2" /> <span>Voir les détails</span>
Voir les détails <ChevronRight className="h-3.5 w-3.5 group-hover:translate-x-0.5 transition-transform" />
</Button> </Button>
<Button
variant="ghost"
size="sm"
onClick={onViewReport}
className="w-full justify-start text-xs text-slate-400 hover:text-white hover:bg-white/10"
>
📈 Exporter rapport complet
</Button>
</div>
</div> </div>
</div> </div>
); );