From 376012fce636a7a1154387dac53e99e6eb5dd750 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 22 Aug 2025 09:41:58 +0200
Subject: [PATCH] feat: redesign TeamStatsCard for improved UI and
 functionality

- 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.
---
 .../admin/team-detail/team-stats-card.tsx     | 315 +++++++++---------
 1 file changed, 155 insertions(+), 160 deletions(-)

diff --git a/components/admin/team-detail/team-stats-card.tsx b/components/admin/team-detail/team-stats-card.tsx
index b4963a4..050045c 100644
--- a/components/admin/team-detail/team-stats-card.tsx
+++ b/components/admin/team-detail/team-stats-card.tsx
@@ -9,6 +9,7 @@ import {
   Target,
   Award,
   Star,
+  ChevronRight,
 } from "lucide-react";
 import { TechIcon } from "@/components/icons/tech-icon";
 
@@ -70,189 +71,183 @@ export function TeamStatsCard({
   onViewReport,
 }: TeamStatsCardProps) {
   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="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-3">
-          <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
-            <Users className="h-4 w-4 text-blue-400" />
-          </div>
-          <h3 className="text-lg font-semibold text-white">{teamName}</h3>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="px-2 py-1 bg-white/10 border border-white/20 rounded-lg">
-            <span className="text-xs text-slate-300 font-medium">
-              {direction}
-            </span>
-          </div>
-          <div className="px-2 py-1 bg-green-500/20 border border-green-500/30 rounded-lg">
-            <div className="flex items-center gap-1">
-              <Users className="h-3 w-3 text-green-300" />
-              <span className="text-xs text-green-300 font-medium">
-                {totalMembers}
+    <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">
+      {/* Header avec nom et direction */}
+      <div className="flex items-start justify-between mb-5">
+        <div className="flex-1 min-w-0">
+          <h3 className="text-lg font-bold text-white mb-2 truncate">
+            {teamName}
+          </h3>
+          <div className="flex items-center gap-2">
+            <div className="px-2.5 py-1 bg-blue-500/20 border border-blue-500/30 rounded-lg">
+              <span className="text-xs font-medium text-blue-300">
+                {direction}
               </span>
             </div>
+            <div className="px-2.5 py-1 bg-white/10 border border-white/20 rounded-lg">
+              <div className="flex items-center gap-1.5">
+                <Users className="h-3 w-3 text-slate-400" />
+                <span className="text-xs font-medium text-slate-300">
+                  {totalMembers} membre{totalMembers > 1 ? "s" : ""}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Indicateur de niveau global */}
+        <div className="flex flex-col items-end gap-2">
+          <div
+            className={`px-3 py-1.5 border rounded-xl text-center ${getSkillLevelBadgeClasses(
+              averageSkillLevel
+            )}`}
+          >
+            <span className="text-sm font-semibold">
+              {getSkillLevelLabel(averageSkillLevel)}
+            </span>
+          </div>
+          <div className="text-right">
+            <div className="text-2xl font-bold text-white">
+              {((averageSkillLevel / 3) * 100).toFixed(0)}%
+            </div>
+            <div className="text-xs text-slate-400">maîtrise</div>
           </div>
         </div>
       </div>
 
-      <div className="space-y-6">
-        {/* Stats Overview */}
-        <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
-                  className={`px-2 py-0.5 border rounded-lg text-center ${getSkillLevelBadgeClasses(
-                    averageSkillLevel
-                  )}`}
-                >
-                  <span className="text-xs font-medium">
-                    {getSkillLevelLabel(averageSkillLevel)}
-                  </span>
-                </div>
-              </div>
-              <div className="w-full bg-white/10 rounded-full h-2">
-                <div
-                  className={`h-2 rounded-full transition-all ${
-                    averageSkillLevel < 0.5
-                      ? "bg-gradient-to-r from-red-500 to-red-400"
-                      : averageSkillLevel < 1.5
-                      ? "bg-gradient-to-r from-orange-500 to-orange-400"
-                      : averageSkillLevel < 2.5
-                      ? "bg-gradient-to-r from-blue-500 to-blue-400"
-                      : "bg-gradient-to-r from-green-500 to-green-400"
-                  }`}
-                  style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
-                />
-              </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
+            className={`h-2.5 rounded-full transition-all duration-500 ${
+              averageSkillLevel < 0.5
+                ? "bg-gradient-to-r from-red-500 to-red-400"
+                : averageSkillLevel < 1.5
+                ? "bg-gradient-to-r from-orange-500 to-orange-400"
+                : averageSkillLevel < 2.5
+                ? "bg-gradient-to-r from-blue-500 to-blue-400"
+                : "bg-gradient-to-r from-green-500 to-green-400"
+            }`}
+            style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
+          />
+        </div>
+      </div>
 
-          <div className="bg-white/5 border border-white/10 rounded-xl p-4">
-            <div className="flex items-center gap-2 mb-3">
-              <Target className="h-4 w-4 text-slate-400" />
-              <span className="text-sm font-medium text-slate-300">
-                Couverture
-              </span>
-            </div>
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <span className="text-lg font-bold text-white">
-                  {skillCoverage.toFixed(0)}%
-                </span>
-                <span className="text-xs text-slate-400">des compétences</span>
-              </div>
-              <div className="w-full bg-white/10 rounded-full h-2">
-                <div
-                  className="bg-gradient-to-r from-green-500 to-green-400 h-2 rounded-full transition-all"
-                  style={{ width: `${skillCoverage}%` }}
-                />
-              </div>
+      {/* Métriques clés en grille */}
+      <div className="grid grid-cols-2 gap-4 mb-5">
+        <div className="bg-white/5 border border-white/10 rounded-xl p-3">
+          <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
+            </span>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-bold text-white">
+              {skillCoverage.toFixed(0)}%
             </div>
+            <div className="text-xs text-slate-400">compétences</div>
           </div>
         </div>
 
-        {/* Top Skills */}
-        <div className="bg-white/5 border border-white/10 rounded-xl p-4">
-          <div className="flex items-center gap-2 mb-4">
-            <div className="p-1.5 bg-purple-500/20 border border-purple-500/30 rounded-lg">
-              <Award className="h-3.5 w-3.5 text-purple-400" />
-            </div>
-            <span className="text-sm font-semibold text-slate-200">
-              Top Compétences
+        <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>
           </div>
-          <div className="space-y-2">
-            {topSkills.slice(0, 3).map((skill, idx) => (
-              <div
-                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"
-              >
-                {/* Icône de la technologie */}
-                <div className="flex-shrink-0">
-                  {skill.icon ? (
-                    <div className="p-1.5 bg-white/10 border border-white/20 rounded-md">
-                      <TechIcon
-                        iconName={skill.icon}
-                        className="w-3 h-3 text-white"
-                      />
-                    </div>
-                  ) : (
-                    <div className="p-1.5 bg-slate-500/20 border border-slate-500/30 rounded-md">
-                      <Star className="w-3 h-3 text-slate-400" />
-                    </div>
-                  )}
-                </div>
+          <div className="text-center">
+            <div className="text-lg font-bold text-white">
+              {averageSkillLevel.toFixed(1)}
+            </div>
+            <div className="text-xs text-slate-400">/ 3.0</div>
+          </div>
+        </div>
+      </div>
 
-                {/* Nom et niveau */}
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm font-medium text-white truncate pr-2">
-                      {skill.skillName}
-                    </span>
-                    <div className="flex items-center gap-2 flex-shrink-0">
-                      <span className="text-xs font-semibold text-white">
-                        {skill.averageLevel.toFixed(1)}
-                      </span>
-                      <div
-                        className={`w-2 h-2 rounded-full ${getSkillLevelColor(
-                          skill.averageLevel
-                        )}`}
-                      />
-                    </div>
+      {/* Top Skills simplifié */}
+      <div className="mb-5">
+        <div className="flex items-center gap-2 mb-3">
+          <div className="p-1 bg-purple-500/20 border border-purple-500/30 rounded-lg">
+            <Award className="h-3 w-3 text-purple-400" />
+          </div>
+          <span className="text-sm font-semibold text-slate-200">
+            Top 3 compétences
+          </span>
+        </div>
+        <div className="space-y-2">
+          {topSkills.slice(0, 3).map((skill, idx) => (
+            <div
+              key={idx}
+              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 */}
+              <div className="flex-shrink-0">
+                {skill.icon ? (
+                  <div className="p-1.5 bg-white/10 border border-white/20 rounded-md">
+                    <TechIcon
+                      iconName={skill.icon}
+                      className="w-3 h-3 text-white"
+                    />
                   </div>
+                ) : (
+                  <div className="p-1.5 bg-slate-500/20 border border-slate-500/30 rounded-md">
+                    <Star className="w-3 h-3 text-slate-400" />
+                  </div>
+                )}
+              </div>
 
-                  {/* Mini barre de progression */}
-                  <div className="w-full bg-white/10 rounded-full h-1 mt-1">
+              {/* Nom et niveau */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-sm font-medium text-white truncate pr-2">
+                    {skill.skillName}
+                  </span>
+                  <div className="flex items-center gap-1.5 flex-shrink-0">
+                    <span className="text-xs font-semibold text-white">
+                      {skill.averageLevel.toFixed(1)}
+                    </span>
                     <div
-                      className={`h-1 rounded-full transition-all ${
-                        skill.averageLevel < 0.5
-                          ? "bg-gradient-to-r from-red-500 to-red-400"
-                          : skill.averageLevel < 1.5
-                          ? "bg-gradient-to-r from-orange-500 to-orange-400"
-                          : skill.averageLevel < 2.5
-                          ? "bg-gradient-to-r from-blue-500 to-blue-400"
-                          : "bg-gradient-to-r from-green-500 to-green-400"
-                      }`}
-                      style={{ width: `${(skill.averageLevel / 3) * 100}%` }}
+                      className={`w-1.5 h-1.5 rounded-full ${getSkillLevelColor(
+                        skill.averageLevel
+                      )}`}
                     />
                   </div>
                 </div>
+
+                {/* Mini barre de progression */}
+                <div className="w-full bg-white/10 rounded-full h-1">
+                  <div
+                    className={`h-1 rounded-full transition-all duration-300 ${
+                      skill.averageLevel < 0.5
+                        ? "bg-gradient-to-r from-red-500 to-red-400"
+                        : skill.averageLevel < 1.5
+                        ? "bg-gradient-to-r from-orange-500 to-orange-400"
+                        : skill.averageLevel < 2.5
+                        ? "bg-gradient-to-r from-blue-500 to-blue-400"
+                        : "bg-gradient-to-r from-green-500 to-green-400"
+                    }`}
+                    style={{ width: `${(skill.averageLevel / 3) * 100}%` }}
+                  />
+                </div>
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
+      </div>
 
-        {/* Action Buttons */}
-        <div className="space-y-3 pt-2 border-t border-white/10">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onViewDetails}
-            className="w-full justify-start bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
-          >
-            <ExternalLink className="h-3 w-3 mr-2" />
-            Voir les détails
-          </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>
+      {/* Actions simplifiées */}
+      <div className="pt-3 border-t border-white/10">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onViewDetails}
+          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"
+        >
+          <span>Voir les détails</span>
+          <ChevronRight className="h-3.5 w-3.5 group-hover:translate-x-0.5 transition-transform" />
+        </Button>
       </div>
     </div>
   );