From 8974a9b579c44b81796654dd58d3b7d6e7850a12 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 22 Aug 2025 13:48:33 +0200
Subject: [PATCH] refactor: update team stats component usage in
 DirectionOverview

- Replaced TeamStatsCard with TeamStatsRow for better alignment with new design.
- Updated comments and layout structure to reflect the change from grid to list format.
- Ensured proper export of TeamStatsRow in team-detail index for consistency.
---
 .../admin/overview/direction-overview.tsx     |  10 +-
 components/admin/team-detail/index.ts         |   1 +
 .../admin/team-detail/team-stats-row.tsx      | 211 ++++++++++++++++++
 3 files changed, 217 insertions(+), 5 deletions(-)
 create mode 100644 components/admin/team-detail/team-stats-row.tsx

diff --git a/components/admin/overview/direction-overview.tsx b/components/admin/overview/direction-overview.tsx
index a3d24ea..98cc564 100644
--- a/components/admin/overview/direction-overview.tsx
+++ b/components/admin/overview/direction-overview.tsx
@@ -2,10 +2,10 @@
 
 import { Building2, Users, TrendingUp, BarChart3, Target } from "lucide-react";
 import {
-  TeamStatsCard,
+  TeamStatsRow,
   getSkillLevelLabel,
   getSkillLevelColor,
-} from "../team-detail/team-stats-card";
+} from "../team-detail/team-stats-row";
 
 interface DirectionOverviewProps {
   direction: string;
@@ -159,7 +159,7 @@ export function DirectionOverview({
           </div>
         </div>
 
-        {/* Teams Grid */}
+        {/* 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">
@@ -169,9 +169,9 @@ export function DirectionOverview({
               Équipes de la direction
             </h4>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="space-y-4">
             {teams.map((team) => (
-              <TeamStatsCard
+              <TeamStatsRow
                 key={team.teamId}
                 teamId={team.teamId}
                 teamName={team.teamName}
diff --git a/components/admin/team-detail/index.ts b/components/admin/team-detail/index.ts
index 99a48f3..b972fa9 100644
--- a/components/admin/team-detail/index.ts
+++ b/components/admin/team-detail/index.ts
@@ -10,3 +10,4 @@ export { TeamInsightsTab } from "./team-insights-tab";
 export { TeamMemberModal } from "./team-member-modal";
 export { TeamMetricsCards } from "./team-metrics-cards";
 export { TeamStatsCard } from "./team-stats-card";
+export { TeamStatsRow } from "./team-stats-row";
diff --git a/components/admin/team-detail/team-stats-row.tsx b/components/admin/team-detail/team-stats-row.tsx
new file mode 100644
index 0000000..22fbe7d
--- /dev/null
+++ b/components/admin/team-detail/team-stats-row.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Users,
+  TrendingUp,
+  BarChart3,
+  ExternalLink,
+  Target,
+  Award,
+  Star,
+  ChevronRight,
+  Baby,
+  User,
+  Zap,
+  Crown,
+} from "lucide-react";
+import { TechIcon } from "@/components/icons/tech-icon";
+
+interface TeamStatsRowProps {
+  teamId: string;
+  teamName: string;
+  direction: string;
+  totalMembers: number;
+  averageSkillLevel: number;
+  topSkills: Array<{
+    skillName: string;
+    averageLevel: number;
+    color?: string;
+    icon?: string;
+  }>;
+  skillCoverage: number;
+  onViewDetails?: () => void;
+  onViewReport?: () => void;
+}
+
+export function getSkillLevelLabel(level: number): string {
+  if (level < 0.5) return "Débutant";
+  if (level < 1.5) return "Intermédiaire";
+  if (level < 2.5) return "Avancé";
+  return "Expert";
+}
+
+export function getSkillLevelColor(level: number): string {
+  if (level < 0.5) return "bg-red-500";
+  if (level < 1.5) return "bg-orange-500";
+  if (level < 2.5) return "bg-blue-500";
+  return "bg-green-500";
+}
+
+export function getSkillLevelBadgeClasses(level: number): string {
+  if (level < 0.5) return "bg-red-500/20 border-red-500/30 text-red-300";
+  if (level < 1.5)
+    return "bg-orange-500/20 border-orange-500/30 text-orange-300";
+  if (level < 2.5) return "bg-blue-500/20 border-blue-500/30 text-blue-300";
+  return "bg-green-500/20 border-green-500/30 text-green-300";
+}
+
+export function getProgressColor(percentage: number): string {
+  if (percentage < 30) return "bg-red-500";
+  if (percentage < 60) return "bg-orange-500";
+  if (percentage < 80) return "bg-blue-500";
+  return "bg-green-500";
+}
+
+export function TeamStatsRow({
+  teamId,
+  teamName,
+  direction,
+  totalMembers,
+  averageSkillLevel,
+  topSkills,
+  skillCoverage,
+  onViewDetails,
+  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">
+      {/* Layout horizontal compact */}
+      <div className="flex items-center gap-6">
+        {/* Informations de base */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-3 mb-2">
+            <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="flex items-center gap-1.5">
+                <Users className="h-3 w-3 text-slate-400" />
+                <span className="text-xs text-slate-300">{totalMembers}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 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">
+                {((averageSkillLevel / 3) * 100).toFixed(0)}%
+              </span>
+            </div>
+            <div className="w-full bg-white/10 rounded-full h-1.5">
+              <div
+                className={`h-1.5 rounded-full transition-all duration-300 ${
+                  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>
+
+        {/* Indicateurs clés compacts */}
+        <div className="flex items-center gap-4">
+          <div className="text-center">
+            <div className="text-sm font-bold text-white">
+              {averageSkillLevel.toFixed(1)}
+            </div>
+            <div className="text-xs text-slate-400">/ 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>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help ${getSkillLevelBadgeClasses(
+                    averageSkillLevel
+                  )}`}
+                >
+                  <span className="text-xs font-semibold">
+                    {averageSkillLevel < 0.5
+                      ? "D"
+                      : averageSkillLevel < 1.5
+                      ? "I"
+                      : averageSkillLevel < 2.5
+                      ? "A"
+                      : "E"}
+                  </span>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">
+                  {getSkillLevelLabel(averageSkillLevel)}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        {/* Top skills mini */}
+        <div className="flex items-center gap-2">
+          {topSkills.slice(0, 3).map((skill, idx) => (
+            <div
+              key={idx}
+              className={`px-2 py-1 border rounded-md text-center min-w-[60px] ${getSkillLevelBadgeClasses(
+                skill.averageLevel
+              )}`}
+            >
+              <div className="text-xs font-medium text-white truncate mb-1">
+                {skill.skillName}
+              </div>
+              <div className="text-xs font-bold">
+                {((skill.averageLevel / 3) * 100).toFixed(0)}%
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Actions compactes */}
+        <div className="flex items-center gap-2">
+          <Button
+            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"
+          >
+            <ExternalLink className="h-3 w-3" />
+          </Button>
+          <Button
+            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"
+          >
+            <ChevronRight className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}