From 1a05b22242c6f95727cf8c8fba078ae1b27e0fe7 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 22 Aug 2025 14:03:45 +0200
Subject: [PATCH] style: update UI components for improved visual consistency
 and interactivity

- Enhanced AdminOverviewCards with gradient backgrounds and updated hover effects for better user engagement.
- Introduced a utility function to dynamically assign colors based on direction in DirectionOverview, improving maintainability.
- Updated TeamStatsRow with gradient backgrounds and refined text colors for better readability and aesthetics.
- Overall improvements to component styling for a more cohesive look across the admin interface.
---
 .../admin/overview/admin-overview-cards.tsx   |  50 ++++----
 .../admin/overview/direction-overview.tsx     | 107 +++++++++++++-----
 .../admin/team-detail/team-stats-row.tsx      |  28 ++---
 3 files changed, 116 insertions(+), 69 deletions(-)

diff --git a/components/admin/overview/admin-overview-cards.tsx b/components/admin/overview/admin-overview-cards.tsx
index 58d6fe6..ce0d11a 100644
--- a/components/admin/overview/admin-overview-cards.tsx
+++ b/components/admin/overview/admin-overview-cards.tsx
@@ -29,12 +29,12 @@ export function AdminOverviewCards({
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+      <div className="bg-gradient-to-br from-blue-900/30 to-blue-800/20 backdrop-blur-sm border border-blue-600/30 rounded-2xl p-6 hover:from-blue-800/40 hover:to-blue-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
         <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
-            <Users className="h-5 w-5 text-blue-400" />
+          <div className="p-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
+            <Users className="h-5 w-5 text-blue-300" />
           </div>
-          <div className="text-xs text-slate-400 font-medium">
+          <div className="text-xs text-blue-200 font-medium">
             {hasFilters ? "FILTRÉES" : "TOTAL"}
           </div>
         </div>
@@ -42,23 +42,21 @@ export function AdminOverviewCards({
           <p className="text-2xl font-bold text-white">
             {hasFilters ? getFilteredTeamStats().length : teams.length}
           </p>
-          <p className="text-sm text-slate-400">
+          <p className="text-sm text-blue-200">
             {hasFilters ? "Équipes filtrées" : "Équipes"}
           </p>
           {hasFilters && (
-            <p className="text-xs text-slate-500">
-              sur {teams.length} au total
-            </p>
+            <p className="text-xs text-blue-300">sur {teams.length} au total</p>
           )}
         </div>
       </div>
 
-      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+      <div className="bg-gradient-to-br from-green-900/30 to-green-800/20 backdrop-blur-sm border border-green-600/30 rounded-2xl p-6 hover:from-green-800/40 hover:to-green-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
         <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
-            <UserCheck className="h-5 w-5 text-green-400" />
+          <div className="p-2 bg-green-500/30 border border-green-500/40 rounded-xl">
+            <UserCheck className="h-5 w-5 text-green-300" />
           </div>
-          <div className="text-xs text-slate-400 font-medium">
+          <div className="text-xs text-green-200 font-medium">
             {hasFilters ? "FILTRÉS" : "TOTAL"}
           </div>
         </div>
@@ -71,11 +69,11 @@ export function AdminOverviewCards({
                 )
               : teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
           </p>
-          <p className="text-sm text-slate-400">
+          <p className="text-sm text-green-200">
             {hasFilters ? "Membres filtrés" : "Membres"}
           </p>
           {hasFilters && (
-            <p className="text-xs text-slate-500">
+            <p className="text-xs text-green-300">
               sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} au
               total
             </p>
@@ -83,12 +81,12 @@ export function AdminOverviewCards({
         </div>
       </div>
 
-      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+      <div className="bg-gradient-to-br from-purple-900/30 to-purple-800/20 backdrop-blur-sm border border-purple-600/30 rounded-2xl p-6 hover:from-purple-800/40 hover:to-purple-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
         <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
-            <Building2 className="h-5 w-5 text-purple-400" />
+          <div className="p-2 bg-purple-500/30 border border-purple-500/40 rounded-xl">
+            <Building2 className="h-5 w-5 text-purple-300" />
           </div>
-          <div className="text-xs text-slate-400 font-medium">
+          <div className="text-xs text-purple-200 font-medium">
             {hasFilters ? "FILTRÉES" : "TOTAL"}
           </div>
         </div>
@@ -98,23 +96,23 @@ export function AdminOverviewCards({
               ? getFilteredDirectionStats().length
               : directionStats.length}
           </p>
-          <p className="text-sm text-slate-400">
+          <p className="text-sm text-purple-200">
             {hasFilters ? "Directions filtrées" : "Directions"}
           </p>
           {hasFilters && (
-            <p className="text-xs text-slate-500">
+            <p className="text-xs text-purple-300">
               sur {directionStats.length} au total
             </p>
           )}
         </div>
       </div>
 
-      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+      <div className="bg-gradient-to-br from-orange-900/30 to-orange-800/20 backdrop-blur-sm border border-orange-600/30 rounded-2xl p-6 hover:from-orange-800/40 hover:to-orange-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
         <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
-            <Target className="h-5 w-5 text-orange-400" />
+          <div className="p-2 bg-orange-500/30 border border-orange-500/40 rounded-xl">
+            <Target className="h-5 w-5 text-orange-300" />
           </div>
-          <div className="text-xs text-slate-400 font-medium">RÉFÉRENTIEL</div>
+          <div className="text-xs text-orange-200 font-medium">RÉFÉRENTIEL</div>
         </div>
         <div className="space-y-1">
           <p className="text-2xl font-bold text-white">
@@ -123,8 +121,8 @@ export function AdminOverviewCards({
               0
             )}
           </p>
-          <p className="text-sm text-slate-400">Compétences suivies</p>
-          <p className="text-xs text-slate-500">
+          <p className="text-sm text-orange-200">Compétences suivies</p>
+          <p className="text-xs text-orange-300">
             {skillCategories.length} catégories
           </p>
         </div>
diff --git a/components/admin/overview/direction-overview.tsx b/components/admin/overview/direction-overview.tsx
index 98cc564..1baa7ec 100644
--- a/components/admin/overview/direction-overview.tsx
+++ b/components/admin/overview/direction-overview.tsx
@@ -25,6 +25,51 @@ interface DirectionOverviewProps {
   onExportTeamReport?: (team: any) => void;
 }
 
+// Fonction pour obtenir les couleurs de direction
+function getDirectionColors(direction: string) {
+  const directionLower = direction.toLowerCase();
+  if (directionLower.includes("tech") || directionLower.includes("dev")) {
+    return {
+      header: "from-blue-600/30 to-cyan-600/30",
+      border: "border-blue-500/40",
+      icon: "bg-blue-500/20 border-blue-500/30",
+    };
+  } else if (
+    directionLower.includes("design") ||
+    directionLower.includes("ux")
+  ) {
+    return {
+      header: "from-purple-600/30 to-pink-600/30",
+      border: "border-purple-500/40",
+      icon: "bg-purple-500/20 border-purple-500/30",
+    };
+  } else if (
+    directionLower.includes("data") ||
+    directionLower.includes("analytics")
+  ) {
+    return {
+      header: "from-emerald-600/30 to-teal-600/30",
+      border: "border-emerald-500/40",
+      icon: "bg-emerald-500/20 border-emerald-500/30",
+    };
+  } else if (
+    directionLower.includes("security") ||
+    directionLower.includes("sec")
+  ) {
+    return {
+      header: "from-red-600/30 to-orange-600/30",
+      border: "border-red-500/40",
+      icon: "bg-red-500/20 border-red-500/30",
+    };
+  } else {
+    return {
+      header: "from-purple-600/30 to-blue-600/30",
+      border: "border-purple-500/40",
+      icon: "bg-purple-500/20 border-purple-500/30",
+    };
+  }
+}
+
 export function DirectionOverview({
   direction,
   teams,
@@ -34,27 +79,31 @@ export function DirectionOverview({
   onViewTeamDetails = () => {},
   onExportTeamReport = () => {},
 }: DirectionOverviewProps) {
+  const colors = getDirectionColors(direction);
+
   return (
-    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden">
-      <div className="bg-white/5 border-b border-white/10 p-6">
+    <div className="bg-gradient-to-br from-slate-800/40 to-slate-700/30 backdrop-blur-sm border border-slate-600/30 rounded-2xl overflow-hidden shadow-xl">
+      <div
+        className={`bg-gradient-to-r ${colors.header} border-b ${colors.border} p-6`}
+      >
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
-              <Building2 className="h-5 w-5 text-purple-400" />
+            <div className={`p-2 ${colors.icon} rounded-xl`}>
+              <Building2 className="h-5 w-5 text-white" />
             </div>
             <h2 className="text-xl font-bold text-white">
               Direction {direction}
             </h2>
           </div>
           <div className="flex items-center gap-3">
-            <div className="flex items-center gap-2 px-3 py-2 bg-green-500/20 border border-green-500/30 rounded-xl">
-              <Users className="h-3 w-3 text-green-400" />
-              <span className="text-sm text-green-300 font-medium">
+            <div className="flex items-center gap-2 px-3 py-2 bg-green-500/30 border border-green-500/40 rounded-xl">
+              <Users className="h-3 w-3 text-green-300" />
+              <span className="text-sm text-green-200 font-medium">
                 {totalMembers}
               </span>
             </div>
-            <div className="px-3 py-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
-              <span className="text-sm text-blue-300 font-medium">
+            <div className="px-3 py-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
+              <span className="text-sm text-blue-200 font-medium">
                 Niveau: {getSkillLevelLabel(averageSkillLevel)}
               </span>
             </div>
@@ -66,10 +115,10 @@ export function DirectionOverview({
         {/* Direction Metrics */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           {/* Top Categories */}
-          <div className="bg-white/5 border border-white/10 rounded-xl p-4">
+          <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/40 border border-slate-600/40 rounded-xl p-4 shadow-lg">
             <div className="flex items-center gap-2 mb-4">
-              <BarChart3 className="h-4 w-4 text-slate-400" />
-              <h4 className="text-sm font-medium text-slate-300">
+              <BarChart3 className="h-4 w-4 text-slate-300" />
+              <h4 className="text-sm font-medium text-slate-200">
                 Top Catégories
               </h4>
             </div>
@@ -77,7 +126,7 @@ export function DirectionOverview({
               {topCategories.slice(0, 4).map((cat, idx) => (
                 <div
                   key={idx}
-                  className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
+                  className="flex items-center justify-between p-2 bg-slate-700/50 rounded-lg border border-slate-600/30"
                 >
                   <span className="text-sm text-white">{cat.category}</span>
                   <div className="flex items-center gap-2">
@@ -86,7 +135,7 @@ export function DirectionOverview({
                         cat.averageLevel
                       )}`}
                     />
-                    <span className="text-xs font-medium text-slate-300 min-w-8 text-right">
+                    <span className="text-xs font-medium text-slate-200 min-w-8 text-right">
                       {cat.averageLevel.toFixed(1)}
                     </span>
                   </div>
@@ -96,41 +145,41 @@ export function DirectionOverview({
           </div>
 
           {/* Overall Progress */}
-          <div className="bg-white/5 border border-white/10 rounded-xl p-4">
+          <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/40 border border-slate-600/40 rounded-xl p-4 shadow-lg">
             <div className="flex items-center gap-2 mb-4">
-              <TrendingUp className="h-4 w-4 text-slate-400" />
-              <h4 className="text-sm font-medium text-slate-300">
+              <TrendingUp className="h-4 w-4 text-slate-300" />
+              <h4 className="text-sm font-medium text-slate-200">
                 Progression Globale
               </h4>
             </div>
             <div className="space-y-3">
               <div className="space-y-2">
                 <div className="flex justify-between">
-                  <span className="text-sm text-slate-400">
+                  <span className="text-sm text-slate-300">
                     Maîtrise globale:
                   </span>
                   <span className="text-lg font-bold text-white">
                     {((averageSkillLevel / 3) * 100).toFixed(0)}%
                   </span>
                 </div>
-                <div className="w-full bg-white/10 rounded-full h-2">
+                <div className="w-full bg-slate-700/50 rounded-full h-2">
                   <div
-                    className="bg-gradient-to-r from-blue-500 to-blue-400 h-2 rounded-full transition-all"
+                    className="bg-gradient-to-r from-blue-500 to-blue-400 h-2 rounded-full transition-all shadow-sm"
                     style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
                   />
                 </div>
               </div>
-              <div className="pt-2 text-xs text-slate-500">
+              <div className="pt-2 text-xs text-slate-400">
                 Basé sur {teams.length} équipes
               </div>
             </div>
           </div>
 
           {/* Team Distribution */}
-          <div className="bg-white/5 border border-white/10 rounded-xl p-4">
+          <div className="bg-gradient-to-br from-slate-800/50 to-slate-700/40 border border-slate-600/40 rounded-xl p-4 shadow-lg">
             <div className="flex items-center gap-2 mb-4">
-              <Target className="h-4 w-4 text-slate-400" />
-              <h4 className="text-sm font-medium text-slate-300">
+              <Target className="h-4 w-4 text-slate-300" />
+              <h4 className="text-sm font-medium text-slate-200">
                 Répartition
               </h4>
             </div>
@@ -139,17 +188,17 @@ export function DirectionOverview({
                 <div className="text-2xl font-bold text-white">
                   {teams.length}
                 </div>
-                <div className="text-xs text-slate-400">équipes actives</div>
+                <div className="text-xs text-slate-300">équipes actives</div>
               </div>
               <div className="space-y-2">
                 <div className="flex justify-between text-xs">
-                  <span className="text-slate-400">Membres par équipe:</span>
+                  <span className="text-slate-300">Membres par équipe:</span>
                   <span className="text-white font-medium">
                     {(totalMembers / teams.length).toFixed(1)}
                   </span>
                 </div>
                 <div className="flex justify-between text-xs">
-                  <span className="text-slate-400">Équipes performantes:</span>
+                  <span className="text-slate-300">Équipes performantes:</span>
                   <span className="text-white font-medium">
                     {teams.filter((t) => t.averageSkillLevel > 2).length}
                   </span>
@@ -162,8 +211,8 @@ export function DirectionOverview({
         {/* Teams List */}
         <div className="space-y-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 className="p-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
+              <Users className="h-4 w-4 text-blue-300" />
             </div>
             <h4 className="text-lg font-semibold text-white">
               Équipes de la direction
diff --git a/components/admin/team-detail/team-stats-row.tsx b/components/admin/team-detail/team-stats-row.tsx
index 22fbe7d..48392fb 100644
--- a/components/admin/team-detail/team-stats-row.tsx
+++ b/components/admin/team-detail/team-stats-row.tsx
@@ -81,7 +81,7 @@ export function TeamStatsRow({
   onViewReport,
 }: TeamStatsRowProps) {
   return (
-    <div className="group bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 hover:bg-white/10 hover:border-white/20 transition-all duration-300">
+    <div className="group bg-gradient-to-r from-slate-800/50 to-slate-700/40 backdrop-blur-sm border border-slate-600/40 rounded-xl p-4 hover:from-slate-700/60 hover:to-slate-600/50 hover:border-slate-500/50 transition-all duration-300 shadow-lg hover:shadow-xl">
       {/* Layout horizontal compact */}
       <div className="flex items-center gap-6">
         {/* Informations de base */}
@@ -90,10 +90,10 @@ export function TeamStatsRow({
             <h3 className="text-lg font-semibold text-white truncate">
               {teamName}
             </h3>
-            <div className="px-2 py-1 bg-white/10 border border-white/20 rounded-md">
+            <div className="px-2 py-1 bg-slate-700/60 border border-slate-500/40 rounded-md">
               <div className="flex items-center gap-1.5">
-                <Users className="h-3 w-3 text-slate-400" />
-                <span className="text-xs text-slate-300">{totalMembers}</span>
+                <Users className="h-3 w-3 text-slate-300" />
+                <span className="text-xs text-slate-200">{totalMembers}</span>
               </div>
             </div>
           </div>
@@ -101,14 +101,14 @@ export function TeamStatsRow({
           {/* Mini barre de progression */}
           <div className="w-full max-w-xs">
             <div className="flex items-center justify-between mb-1">
-              <span className="text-xs text-slate-400">Niveau</span>
-              <span className="text-xs text-slate-300">
+              <span className="text-xs text-slate-300">Niveau</span>
+              <span className="text-xs text-slate-200">
                 {((averageSkillLevel / 3) * 100).toFixed(0)}%
               </span>
             </div>
-            <div className="w-full bg-white/10 rounded-full h-1.5">
+            <div className="w-full bg-slate-700/60 rounded-full h-1.5">
               <div
-                className={`h-1.5 rounded-full transition-all duration-300 ${
+                className={`h-1.5 rounded-full transition-all duration-300 shadow-sm ${
                   averageSkillLevel < 0.5
                     ? "bg-gradient-to-r from-red-500 to-red-400"
                     : averageSkillLevel < 1.5
@@ -129,21 +129,21 @@ export function TeamStatsRow({
             <div className="text-sm font-bold text-white">
               {averageSkillLevel.toFixed(1)}
             </div>
-            <div className="text-xs text-slate-400">/ 3.0</div>
+            <div className="text-xs text-slate-300">/ 3.0</div>
           </div>
 
           <div className="text-center">
             <div className="text-sm font-bold text-white">
               {skillCoverage.toFixed(0)}%
             </div>
-            <div className="text-xs text-slate-400">Couv.</div>
+            <div className="text-xs text-slate-300">Couv.</div>
           </div>
 
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <div
-                  className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help ${getSkillLevelBadgeClasses(
+                  className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help shadow-sm ${getSkillLevelBadgeClasses(
                     averageSkillLevel
                   )}`}
                 >
@@ -172,7 +172,7 @@ export function TeamStatsRow({
           {topSkills.slice(0, 3).map((skill, idx) => (
             <div
               key={idx}
-              className={`px-2 py-1 border rounded-md text-center min-w-[60px] ${getSkillLevelBadgeClasses(
+              className={`px-2 py-1 border rounded-md text-center min-w-[60px] shadow-sm ${getSkillLevelBadgeClasses(
                 skill.averageLevel
               )}`}
             >
@@ -192,7 +192,7 @@ export function TeamStatsRow({
             variant="outline"
             size="sm"
             onClick={onViewReport}
-            className="h-8 px-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
+            className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
           >
             <ExternalLink className="h-3 w-3" />
           </Button>
@@ -200,7 +200,7 @@ export function TeamStatsRow({
             variant="outline"
             size="sm"
             onClick={onViewDetails}
-            className="h-8 px-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
+            className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
           >
             <ChevronRight className="h-3 w-3" />
           </Button>