feat: handling SSR and PG datas for admin space
This commit is contained in:
Julien Froidefond
@@ -1,698 +1,39 @@
|
|||||||
"use client";
|
import { redirect } from "next/navigation";
|
||||||
|
import { isUserAuthenticated } from "@/lib/server-auth";
|
||||||
|
import { AdminService } from "@/services/admin-service";
|
||||||
|
import { AdminClientWrapper } from "@/components/admin";
|
||||||
|
|
||||||
import { useState, useEffect } from "react";
|
export default async function AdminPage() {
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
// Vérifier l'authentification
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
const isAuthenticated = await isUserAuthenticated();
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Progress } from "@/components/ui/progress";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Users,
|
|
||||||
TrendingUp,
|
|
||||||
BarChart3,
|
|
||||||
Target,
|
|
||||||
Building2,
|
|
||||||
UserCheck,
|
|
||||||
Filter,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { loadTeams, loadSkillCategories } from "@/lib/data-loader";
|
|
||||||
import { Team, SkillCategory, UserEvaluation } from "@/lib/types";
|
|
||||||
import {
|
|
||||||
TeamStatsCard,
|
|
||||||
DirectionOverview,
|
|
||||||
MultiSelectFilter,
|
|
||||||
} from "@/components/admin";
|
|
||||||
import { TeamDetailModal } from "@/components/admin/team-detail-modal";
|
|
||||||
|
|
||||||
interface TeamMember {
|
// Si pas de cookie d'authentification, rediriger vers login
|
||||||
id: string;
|
if (!isAuthenticated) {
|
||||||
firstName: string;
|
redirect("/login");
|
||||||
lastName: string;
|
}
|
||||||
skills: Array<{
|
|
||||||
skillId: string;
|
|
||||||
skillName: string;
|
|
||||||
category: string;
|
|
||||||
level: number;
|
|
||||||
canMentor: boolean;
|
|
||||||
wantsToLearn: boolean;
|
|
||||||
}>;
|
|
||||||
joinDate: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TeamStats {
|
// Charger les données côté serveur
|
||||||
teamId: string;
|
|
||||||
teamName: string;
|
|
||||||
direction: string;
|
|
||||||
totalMembers: number;
|
|
||||||
averageSkillLevel: number;
|
|
||||||
topSkills: Array<{ skillName: string; averageLevel: number }>;
|
|
||||||
skillCoverage: number; // Percentage of skills evaluated
|
|
||||||
members: TeamMember[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DirectionStats {
|
|
||||||
direction: string;
|
|
||||||
teams: TeamStats[];
|
|
||||||
totalMembers: number;
|
|
||||||
averageSkillLevel: number;
|
|
||||||
topCategories: Array<{ category: string; averageLevel: number }>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper function to generate realistic team members
|
|
||||||
function generateTeamMembers(
|
|
||||||
teamName: string,
|
|
||||||
memberCount: number,
|
|
||||||
skillCategories: SkillCategory[]
|
|
||||||
) {
|
|
||||||
const firstNames = [
|
|
||||||
"Alice",
|
|
||||||
"Bob",
|
|
||||||
"Claire",
|
|
||||||
"David",
|
|
||||||
"Emma",
|
|
||||||
"Frank",
|
|
||||||
"Grace",
|
|
||||||
"Hugo",
|
|
||||||
"Iris",
|
|
||||||
"Jack",
|
|
||||||
"Kelly",
|
|
||||||
"Liam",
|
|
||||||
"Maya",
|
|
||||||
"Noah",
|
|
||||||
"Olivia",
|
|
||||||
"Paul",
|
|
||||||
"Quinn",
|
|
||||||
"Rose",
|
|
||||||
"Sam",
|
|
||||||
"Tara",
|
|
||||||
];
|
|
||||||
const lastNames = [
|
|
||||||
"Martin",
|
|
||||||
"Bernard",
|
|
||||||
"Dubois",
|
|
||||||
"Thomas",
|
|
||||||
"Robert",
|
|
||||||
"Richard",
|
|
||||||
"Petit",
|
|
||||||
"Durand",
|
|
||||||
"Leroy",
|
|
||||||
"Moreau",
|
|
||||||
"Simon",
|
|
||||||
"Laurent",
|
|
||||||
"Michel",
|
|
||||||
"Garcia",
|
|
||||||
"David",
|
|
||||||
"Bertrand",
|
|
||||||
"Roux",
|
|
||||||
"Vincent",
|
|
||||||
"Fournier",
|
|
||||||
"Morel",
|
|
||||||
];
|
|
||||||
|
|
||||||
const allSkills: Array<{ skillName: string; category: string; id: string }> =
|
|
||||||
[];
|
|
||||||
skillCategories.forEach((category) => {
|
|
||||||
category.skills.forEach((skill) => {
|
|
||||||
allSkills.push({
|
|
||||||
skillName: skill.name,
|
|
||||||
category: category.category,
|
|
||||||
id: skill.id,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return Array.from({ length: memberCount }, (_, index) => {
|
|
||||||
const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
|
|
||||||
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
||||||
|
|
||||||
// Each member evaluates 8-15 random skills
|
|
||||||
const skillCount = Math.floor(Math.random() * 8) + 8;
|
|
||||||
const memberSkills = allSkills
|
|
||||||
.sort(() => Math.random() - 0.5)
|
|
||||||
.slice(0, skillCount)
|
|
||||||
.map((skill) => ({
|
|
||||||
skillId: skill.id,
|
|
||||||
skillName: skill.skillName,
|
|
||||||
category: skill.category,
|
|
||||||
level: Math.floor(Math.random() * 4), // 0-3
|
|
||||||
canMentor: Math.random() > 0.7, // 30% chance
|
|
||||||
wantsToLearn: Math.random() > 0.6, // 40% chance
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: `${teamName}-member-${index + 1}`,
|
|
||||||
firstName,
|
|
||||||
lastName,
|
|
||||||
skills: memberSkills,
|
|
||||||
joinDate: new Date(
|
|
||||||
Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000 * 3
|
|
||||||
)
|
|
||||||
.toISOString()
|
|
||||||
.split("T")[0], // Random date in last 3 years
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper function to get random skills from categories
|
|
||||||
function getRandomSkills(skillCategories: SkillCategory[], count: number = 3) {
|
|
||||||
const allSkills: Array<{
|
|
||||||
skillName: string;
|
|
||||||
category: string;
|
|
||||||
icon: string;
|
|
||||||
}> = [];
|
|
||||||
|
|
||||||
skillCategories.forEach((category) => {
|
|
||||||
category.skills.forEach((skill) => {
|
|
||||||
allSkills.push({
|
|
||||||
skillName: skill.name,
|
|
||||||
category: category.category,
|
|
||||||
icon: skill.icon || "",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Shuffle and pick random skills
|
|
||||||
const shuffled = allSkills.sort(() => Math.random() - 0.5);
|
|
||||||
const randomSkills = shuffled.slice(0, count).map((skill) => ({
|
|
||||||
skillName: skill.skillName,
|
|
||||||
averageLevel: Math.random() * 3,
|
|
||||||
icon: skill.icon,
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Sort by average level (descending - highest first)
|
|
||||||
return randomSkills.sort((a, b) => b.averageLevel - a.averageLevel);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mock data generator - à remplacer par de vraies données
|
|
||||||
function generateMockTeamStats(
|
|
||||||
teams: Team[],
|
|
||||||
skillCategories: SkillCategory[]
|
|
||||||
): TeamStats[] {
|
|
||||||
return teams.map((team) => {
|
|
||||||
const memberCount = Math.floor(Math.random() * 10) + 3; // 3-12 members
|
|
||||||
const members = generateTeamMembers(
|
|
||||||
team.name,
|
|
||||||
memberCount,
|
|
||||||
skillCategories
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
teamId: team.id,
|
|
||||||
teamName: team.name,
|
|
||||||
direction: team.direction,
|
|
||||||
totalMembers: memberCount,
|
|
||||||
averageSkillLevel: Math.random() * 3, // 0-3
|
|
||||||
topSkills: getRandomSkills(skillCategories, 3),
|
|
||||||
skillCoverage: Math.random() * 100, // 0-100%
|
|
||||||
members: members,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateDirectionStats(teamStats: TeamStats[]): DirectionStats[] {
|
|
||||||
const directions = Array.from(new Set(teamStats.map((t) => t.direction)));
|
|
||||||
|
|
||||||
return directions.map((direction) => {
|
|
||||||
const directionTeams = teamStats.filter((t) => t.direction === direction);
|
|
||||||
const totalMembers = directionTeams.reduce(
|
|
||||||
(sum, t) => sum + t.totalMembers,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const averageSkillLevel =
|
|
||||||
directionTeams.reduce((sum, t) => sum + t.averageSkillLevel, 0) /
|
|
||||||
directionTeams.length;
|
|
||||||
|
|
||||||
return {
|
|
||||||
direction,
|
|
||||||
teams: directionTeams,
|
|
||||||
totalMembers,
|
|
||||||
averageSkillLevel,
|
|
||||||
topCategories: [
|
|
||||||
{ category: "Frontend", averageLevel: Math.random() * 3 },
|
|
||||||
{ category: "Backend", averageLevel: Math.random() * 3 },
|
|
||||||
{ category: "DevOps", averageLevel: Math.random() * 3 },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AdminPage() {
|
|
||||||
const [teams, setTeams] = useState<Team[]>([]);
|
|
||||||
const [skillCategories, setSkillCategories] = useState<SkillCategory[]>([]);
|
|
||||||
const [teamStats, setTeamStats] = useState<TeamStats[]>([]);
|
|
||||||
const [directionStats, setDirectionStats] = useState<DirectionStats[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
// Filtres
|
|
||||||
const [selectedDirections, setSelectedDirections] = useState<string[]>([]);
|
|
||||||
const [selectedTeams, setSelectedTeams] = useState<string[]>([]);
|
|
||||||
|
|
||||||
// Modale de détails
|
|
||||||
const [selectedTeamForModal, setSelectedTeamForModal] =
|
|
||||||
useState<TeamStats | null>(null);
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadData() {
|
|
||||||
try {
|
try {
|
||||||
const [teamsData, categoriesData] = await Promise.all([
|
const adminData = await AdminService.getAdminData();
|
||||||
loadTeams(),
|
|
||||||
loadSkillCategories(),
|
|
||||||
]);
|
|
||||||
|
|
||||||
setTeams(teamsData);
|
return (
|
||||||
setSkillCategories(categoriesData);
|
<AdminClientWrapper
|
||||||
|
teams={adminData.teams}
|
||||||
// Generate mock stats
|
skillCategories={adminData.skillCategories}
|
||||||
const mockTeamStats = generateMockTeamStats(teamsData, categoriesData);
|
teamStats={adminData.teamStats}
|
||||||
const mockDirectionStats = generateDirectionStats(mockTeamStats);
|
directionStats={adminData.directionStats}
|
||||||
|
/>
|
||||||
setTeamStats(mockTeamStats);
|
);
|
||||||
setDirectionStats(mockDirectionStats);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to load admin data:", error);
|
console.error("Failed to load admin data:", error);
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
loadData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Fonctions de filtrage
|
|
||||||
const getFilteredTeamStats = () => {
|
|
||||||
let filtered = teamStats;
|
|
||||||
|
|
||||||
if (selectedDirections.length > 0) {
|
|
||||||
filtered = filtered.filter((team) =>
|
|
||||||
selectedDirections.includes(team.direction)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedTeams.length > 0) {
|
|
||||||
filtered = filtered.filter((team) => selectedTeams.includes(team.teamId));
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getFilteredDirectionStats = () => {
|
|
||||||
let filtered = directionStats;
|
|
||||||
|
|
||||||
if (selectedDirections.length > 0) {
|
|
||||||
filtered = filtered.filter((direction) =>
|
|
||||||
selectedDirections.includes(direction.direction)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si des équipes spécifiques sont sélectionnées, filtrer aussi les équipes dans les directions
|
|
||||||
if (selectedTeams.length > 0) {
|
|
||||||
filtered = filtered
|
|
||||||
.map((direction) => ({
|
|
||||||
...direction,
|
|
||||||
teams: direction.teams.filter((team) =>
|
|
||||||
selectedTeams.includes(team.teamId)
|
|
||||||
),
|
|
||||||
totalMembers: direction.teams
|
|
||||||
.filter((team) => selectedTeams.includes(team.teamId))
|
|
||||||
.reduce((sum, team) => sum + team.totalMembers, 0),
|
|
||||||
averageSkillLevel: direction.teams
|
|
||||||
.filter((team) => selectedTeams.includes(team.teamId))
|
|
||||||
.reduce(
|
|
||||||
(sum, team, _, arr) => sum + team.averageSkillLevel / arr.length,
|
|
||||||
0
|
|
||||||
),
|
|
||||||
}))
|
|
||||||
.filter((direction) => direction.teams.length > 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Options pour les filtres
|
|
||||||
const directionOptions = Array.from(
|
|
||||||
new Set(teams.map((team) => team.direction))
|
|
||||||
).map((direction) => ({
|
|
||||||
id: direction,
|
|
||||||
label: direction,
|
|
||||||
count: teams.filter((team) => team.direction === direction).length,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const teamOptions = teams.map((team) => ({
|
|
||||||
id: team.id,
|
|
||||||
label: `${team.name} (${team.direction})`,
|
|
||||||
count: teamStats.find((stat) => stat.teamId === team.id)?.totalMembers || 0,
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Fonctions pour les actions des équipes
|
|
||||||
const handleViewTeamDetails = (team: TeamStats) => {
|
|
||||||
setSelectedTeamForModal(team);
|
|
||||||
setIsModalOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExportTeamReport = (team: TeamStats) => {
|
|
||||||
const reportData = {
|
|
||||||
team: team.teamName,
|
|
||||||
direction: team.direction,
|
|
||||||
date: new Date().toLocaleDateString(),
|
|
||||||
stats: {
|
|
||||||
members: team.totalMembers,
|
|
||||||
averageLevel: team.averageSkillLevel,
|
|
||||||
coverage: team.skillCoverage,
|
|
||||||
},
|
|
||||||
topSkills: team.topSkills,
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataStr = JSON.stringify(reportData, null, 2);
|
|
||||||
const dataUri =
|
|
||||||
"data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
|
|
||||||
|
|
||||||
const exportFileDefaultName = `rapport-${team.teamName.toLowerCase()}-${
|
|
||||||
new Date().toISOString().split("T")[0]
|
|
||||||
}.json`;
|
|
||||||
|
|
||||||
const linkElement = document.createElement("a");
|
|
||||||
linkElement.setAttribute("href", dataUri);
|
|
||||||
linkElement.setAttribute("download", exportFileDefaultName);
|
|
||||||
linkElement.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto p-6">
|
<div className="container mx-auto p-6">
|
||||||
<div className="flex items-center justify-center h-64">
|
<div className="flex items-center justify-center h-64">
|
||||||
<div className="text-lg">
|
<div className="text-lg text-red-500">
|
||||||
Chargement des données d'administration...
|
Erreur lors du chargement des données d'administration
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
|
||||||
{/* Background Effects */}
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
|
|
||||||
<div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
|
|
||||||
|
|
||||||
<div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl space-y-8">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="text-center space-y-4 mb-12">
|
|
||||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
|
|
||||||
<Building2 className="h-4 w-4 text-blue-400" />
|
|
||||||
<span className="text-sm font-medium text-slate-200">
|
|
||||||
Administration
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 className="text-4xl font-bold text-white">
|
|
||||||
Dashboard Managérial
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
|
|
||||||
Vue d'ensemble des compétences par équipe et direction pour pilotage
|
|
||||||
stratégique
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Overview Cards */}
|
|
||||||
<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="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>
|
|
||||||
<div className="text-xs text-slate-400 font-medium">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? "FILTRÉES"
|
|
||||||
: "TOTAL"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-2xl font-bold text-white">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? getFilteredTeamStats().length
|
|
||||||
: teams.length}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-slate-400">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? "Équipes filtrées"
|
|
||||||
: "Équipes"}
|
|
||||||
</p>
|
|
||||||
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
|
||||||
<p className="text-xs text-slate-500">
|
|
||||||
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="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>
|
|
||||||
<div className="text-xs text-slate-400 font-medium">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? "FILTRÉS"
|
|
||||||
: "TOTAL"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-2xl font-bold text-white">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? getFilteredTeamStats().reduce(
|
|
||||||
(sum, t) => sum + t.totalMembers,
|
|
||||||
0
|
|
||||||
)
|
|
||||||
: teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-slate-400">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? "Membres filtrés"
|
|
||||||
: "Membres"}
|
|
||||||
</p>
|
|
||||||
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
|
||||||
<p className="text-xs text-slate-500">
|
|
||||||
sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} 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="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>
|
|
||||||
<div className="text-xs text-slate-400 font-medium">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? "FILTRÉES"
|
|
||||||
: "TOTAL"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-2xl font-bold text-white">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? getFilteredDirectionStats().length
|
|
||||||
: directionStats.length}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-slate-400">
|
|
||||||
{selectedDirections.length > 0 || selectedTeams.length > 0
|
|
||||||
? "Directions filtrées"
|
|
||||||
: "Directions"}
|
|
||||||
</p>
|
|
||||||
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
|
||||||
<p className="text-xs text-slate-500">
|
|
||||||
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="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>
|
|
||||||
<div className="text-xs text-slate-400 font-medium">
|
|
||||||
RÉFÉRENTIEL
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-2xl font-bold text-white">
|
|
||||||
{skillCategories.reduce(
|
|
||||||
(sum, cat) => sum + cat.skills.length,
|
|
||||||
0
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-slate-400">Compétences suivies</p>
|
|
||||||
<p className="text-xs text-slate-500">
|
|
||||||
{skillCategories.length} catégories
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filtres */}
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
|
|
||||||
<div className="flex items-center gap-2 mb-6">
|
|
||||||
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
|
||||||
<Filter className="h-4 w-4 text-blue-400" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-white">
|
|
||||||
Filtres avancés
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row gap-4">
|
|
||||||
<div className="flex-1">
|
|
||||||
<MultiSelectFilter
|
|
||||||
title="Directions"
|
|
||||||
options={directionOptions}
|
|
||||||
selectedValues={selectedDirections}
|
|
||||||
onChange={setSelectedDirections}
|
|
||||||
placeholder="Toutes les directions"
|
|
||||||
icon={<Building2 className="h-4 w-4" />}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<MultiSelectFilter
|
|
||||||
title="Équipes"
|
|
||||||
options={teamOptions}
|
|
||||||
selectedValues={selectedTeams}
|
|
||||||
onChange={setSelectedTeams}
|
|
||||||
placeholder="Toutes les équipes"
|
|
||||||
icon={<Users className="h-4 w-4" />}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Résumé des filtres actifs */}
|
|
||||||
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
|
||||||
<div className="flex flex-col lg:flex-row items-center gap-3">
|
|
||||||
<div className="bg-blue-500/20 border border-blue-500/30 rounded-xl px-3 py-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Target className="h-3 w-3 text-blue-400" />
|
|
||||||
<span className="text-sm text-blue-300 font-medium">
|
|
||||||
{getFilteredTeamStats().reduce(
|
|
||||||
(sum, t) => sum + t.totalMembers,
|
|
||||||
0
|
|
||||||
)}{" "}
|
|
||||||
membres
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedDirections([]);
|
|
||||||
setSelectedTeams([]);
|
|
||||||
}}
|
|
||||||
className="text-xs text-slate-400 hover:text-white hover:bg-white/10"
|
|
||||||
>
|
|
||||||
Réinitialiser
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Main Content Tabs */}
|
|
||||||
<Tabs defaultValue="directions" className="w-full">
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
|
|
||||||
<TabsList className="grid w-full grid-cols-2 bg-transparent border-0">
|
|
||||||
<TabsTrigger
|
|
||||||
value="directions"
|
|
||||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
Vue par Direction
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="teams"
|
|
||||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
Vue par Équipe
|
|
||||||
</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabsContent value="directions" className="space-y-6">
|
|
||||||
<div className="grid gap-6">
|
|
||||||
{getFilteredDirectionStats().length > 0 ? (
|
|
||||||
getFilteredDirectionStats().map((direction) => (
|
|
||||||
<DirectionOverview
|
|
||||||
key={direction.direction}
|
|
||||||
direction={direction.direction}
|
|
||||||
teams={direction.teams}
|
|
||||||
totalMembers={direction.totalMembers}
|
|
||||||
averageSkillLevel={direction.averageSkillLevel}
|
|
||||||
topCategories={direction.topCategories}
|
|
||||||
onViewTeamDetails={handleViewTeamDetails}
|
|
||||||
onExportTeamReport={handleExportTeamReport}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
|
|
||||||
<div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
|
|
||||||
<Building2 className="h-6 w-6 text-slate-400" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-medium text-white mb-2">
|
|
||||||
Aucune direction trouvée
|
|
||||||
</h3>
|
|
||||||
<p className="text-slate-400 text-sm">
|
|
||||||
Aucune direction ne correspond aux filtres sélectionnés.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="teams" className="space-y-6">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{getFilteredTeamStats().length > 0 ? (
|
|
||||||
getFilteredTeamStats().map((team) => (
|
|
||||||
<TeamStatsCard
|
|
||||||
key={team.teamId}
|
|
||||||
teamId={team.teamId}
|
|
||||||
teamName={team.teamName}
|
|
||||||
direction={team.direction}
|
|
||||||
totalMembers={team.totalMembers}
|
|
||||||
averageSkillLevel={team.averageSkillLevel}
|
|
||||||
topSkills={team.topSkills}
|
|
||||||
skillCoverage={team.skillCoverage}
|
|
||||||
onViewDetails={() => handleViewTeamDetails(team)}
|
|
||||||
onViewReport={() => handleExportTeamReport(team)}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="col-span-full">
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
|
|
||||||
<div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
|
|
||||||
<Users className="h-6 w-6 text-slate-400" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-medium text-white mb-2">
|
|
||||||
Aucune équipe trouvée
|
|
||||||
</h3>
|
|
||||||
<p className="text-slate-400 text-sm">
|
|
||||||
Aucune équipe ne correspond aux filtres sélectionnés.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
{/* Modale de détails d'équipe */}
|
|
||||||
<TeamDetailModal
|
|
||||||
isOpen={isModalOpen}
|
|
||||||
onClose={() => setIsModalOpen(false)}
|
|
||||||
team={selectedTeamForModal}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,950 +1,45 @@
|
|||||||
"use client";
|
import { redirect } from "next/navigation";
|
||||||
|
import { isUserAuthenticated } from "@/lib/server-auth";
|
||||||
|
import { AdminService, TeamStats } from "@/services/admin-service";
|
||||||
|
import { TeamDetailClientWrapper } from "@/components/admin";
|
||||||
|
|
||||||
import React, { useState, useEffect } from "react";
|
interface TeamDetailPageProps {
|
||||||
import { useParams, useRouter } from "next/navigation";
|
params: {
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import {
|
|
||||||
Users,
|
|
||||||
TrendingUp,
|
|
||||||
Target,
|
|
||||||
Award,
|
|
||||||
BarChart3,
|
|
||||||
ArrowLeft,
|
|
||||||
Download,
|
|
||||||
UserCheck,
|
|
||||||
GraduationCap,
|
|
||||||
Building2,
|
|
||||||
Star,
|
|
||||||
BookOpen,
|
|
||||||
X,
|
|
||||||
ChevronRight,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { TechIcon } from "@/components/icons/tech-icon";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { loadTeams, loadSkillCategories } from "@/lib/data-loader";
|
|
||||||
import { Team, SkillCategory } from "@/lib/types";
|
|
||||||
|
|
||||||
interface TeamMember {
|
|
||||||
id: string;
|
|
||||||
firstName: string;
|
|
||||||
lastName: string;
|
|
||||||
skills: Array<{
|
|
||||||
skillId: string;
|
|
||||||
skillName: string;
|
|
||||||
category: string;
|
|
||||||
level: number;
|
|
||||||
canMentor: boolean;
|
|
||||||
wantsToLearn: boolean;
|
|
||||||
}>;
|
|
||||||
joinDate: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TeamStats {
|
|
||||||
teamId: string;
|
teamId: string;
|
||||||
teamName: string;
|
|
||||||
direction: string;
|
|
||||||
totalMembers: number;
|
|
||||||
averageSkillLevel: number;
|
|
||||||
topSkills: Array<{ skillName: string; averageLevel: number }>;
|
|
||||||
skillCoverage: number;
|
|
||||||
members: TeamMember[];
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSkillLevelLabel(level: number): string {
|
|
||||||
if (level < 0.5) return "Débutant";
|
|
||||||
if (level < 1.5) return "Intermé.";
|
|
||||||
if (level < 2.5) return "Avancé";
|
|
||||||
return "Expert";
|
|
||||||
}
|
|
||||||
|
|
||||||
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";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mock data generation (same as admin page)
|
|
||||||
function generateTeamMembers(
|
|
||||||
teamName: string,
|
|
||||||
memberCount: number,
|
|
||||||
skillCategories: SkillCategory[]
|
|
||||||
) {
|
|
||||||
const firstNames = [
|
|
||||||
"Alice",
|
|
||||||
"Bob",
|
|
||||||
"Claire",
|
|
||||||
"David",
|
|
||||||
"Emma",
|
|
||||||
"Frank",
|
|
||||||
"Grace",
|
|
||||||
"Hugo",
|
|
||||||
"Iris",
|
|
||||||
"Jack",
|
|
||||||
"Kelly",
|
|
||||||
"Liam",
|
|
||||||
"Maya",
|
|
||||||
"Noah",
|
|
||||||
"Olivia",
|
|
||||||
"Paul",
|
|
||||||
"Quinn",
|
|
||||||
"Rose",
|
|
||||||
"Sam",
|
|
||||||
"Tara",
|
|
||||||
];
|
|
||||||
const lastNames = [
|
|
||||||
"Martin",
|
|
||||||
"Bernard",
|
|
||||||
"Dubois",
|
|
||||||
"Thomas",
|
|
||||||
"Robert",
|
|
||||||
"Richard",
|
|
||||||
"Petit",
|
|
||||||
"Durand",
|
|
||||||
"Leroy",
|
|
||||||
"Moreau",
|
|
||||||
"Simon",
|
|
||||||
"Laurent",
|
|
||||||
"Michel",
|
|
||||||
"Garcia",
|
|
||||||
"David",
|
|
||||||
"Bertrand",
|
|
||||||
"Roux",
|
|
||||||
"Vincent",
|
|
||||||
"Fournier",
|
|
||||||
"Morel",
|
|
||||||
];
|
|
||||||
|
|
||||||
const allSkills: Array<{ skillName: string; category: string; id: string }> =
|
|
||||||
[];
|
|
||||||
skillCategories.forEach((category) => {
|
|
||||||
category.skills.forEach((skill) => {
|
|
||||||
allSkills.push({
|
|
||||||
skillName: skill.name,
|
|
||||||
category: category.category,
|
|
||||||
id: skill.id,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return Array.from({ length: memberCount }, (_, index) => {
|
|
||||||
const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
|
|
||||||
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
||||||
|
|
||||||
const skillCount = Math.floor(Math.random() * 8) + 8;
|
|
||||||
const memberSkills = allSkills
|
|
||||||
.sort(() => Math.random() - 0.5)
|
|
||||||
.slice(0, skillCount)
|
|
||||||
.map((skill) => ({
|
|
||||||
skillId: skill.id,
|
|
||||||
skillName: skill.skillName,
|
|
||||||
category: skill.category,
|
|
||||||
level: Math.floor(Math.random() * 4),
|
|
||||||
canMentor: Math.random() > 0.7,
|
|
||||||
wantsToLearn: Math.random() > 0.6,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: `${teamName}-member-${index + 1}`,
|
|
||||||
firstName,
|
|
||||||
lastName,
|
|
||||||
skills: memberSkills,
|
|
||||||
joinDate: new Date(
|
|
||||||
Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000 * 3
|
|
||||||
)
|
|
||||||
.toISOString()
|
|
||||||
.split("T")[0],
|
|
||||||
};
|
};
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getRandomSkills(skillCategories: SkillCategory[], count: number = 3) {
|
export default async function TeamDetailPage({ params }: TeamDetailPageProps) {
|
||||||
const allSkills: Array<{ skillName: string; category: string }> = [];
|
// Vérifier l'authentification
|
||||||
skillCategories.forEach((category) => {
|
const isAuthenticated = await isUserAuthenticated();
|
||||||
category.skills.forEach((skill) => {
|
|
||||||
allSkills.push({ skillName: skill.name, category: category.category });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const shuffled = allSkills.sort(() => Math.random() - 0.5);
|
// Si pas de cookie d'authentification, rediriger vers login
|
||||||
const randomSkills = shuffled.slice(0, count).map((skill) => ({
|
if (!isAuthenticated) {
|
||||||
skillName: skill.skillName,
|
redirect("/login");
|
||||||
averageLevel: Math.random() * 3,
|
}
|
||||||
}));
|
|
||||||
|
|
||||||
return randomSkills.sort((a, b) => b.averageLevel - a.averageLevel);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TeamDetailPage() {
|
|
||||||
const params = useParams();
|
|
||||||
const router = useRouter();
|
|
||||||
const teamId = params.teamId as string;
|
|
||||||
|
|
||||||
const [team, setTeam] = useState<TeamStats | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [skillAnalysis, setSkillAnalysis] = useState<any[]>([]);
|
|
||||||
const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
|
|
||||||
const [isMemberModalOpen, setIsMemberModalOpen] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadTeamData() {
|
|
||||||
try {
|
try {
|
||||||
const [teamsData, categoriesData] = await Promise.all([
|
// Charger les données côté serveur
|
||||||
loadTeams(),
|
const allTeamsStats = await AdminService.getTeamsStats();
|
||||||
loadSkillCategories(),
|
const foundTeamStats = allTeamsStats.find(
|
||||||
]);
|
(t) => t.teamId === params.teamId
|
||||||
|
|
||||||
const foundTeam = teamsData.find((t) => t.id === teamId);
|
|
||||||
if (!foundTeam) {
|
|
||||||
router.push("/admin");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const memberCount = Math.floor(Math.random() * 10) + 3;
|
|
||||||
const members = generateTeamMembers(
|
|
||||||
foundTeam.name,
|
|
||||||
memberCount,
|
|
||||||
categoriesData
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const teamStats: TeamStats = {
|
if (!foundTeamStats) {
|
||||||
teamId: foundTeam.id,
|
redirect("/admin");
|
||||||
teamName: foundTeam.name,
|
}
|
||||||
direction: foundTeam.direction,
|
|
||||||
totalMembers: memberCount,
|
|
||||||
averageSkillLevel: Math.random() * 3,
|
|
||||||
topSkills: getRandomSkills(categoriesData, 3),
|
|
||||||
skillCoverage: Math.random() * 100,
|
|
||||||
members: members,
|
|
||||||
};
|
|
||||||
|
|
||||||
setTeam(teamStats);
|
return (
|
||||||
|
<TeamDetailClientWrapper team={foundTeamStats} teamId={params.teamId} />
|
||||||
// Analyser les compétences
|
|
||||||
const skillMap = new Map();
|
|
||||||
members.forEach((member) => {
|
|
||||||
member.skills.forEach((skill) => {
|
|
||||||
if (!skillMap.has(skill.skillName)) {
|
|
||||||
// Trouver l'icône de la compétence dans les données
|
|
||||||
let skillIcon = null;
|
|
||||||
for (const category of categoriesData) {
|
|
||||||
const foundSkill = category.skills.find(
|
|
||||||
(s) => s.name === skill.skillName
|
|
||||||
);
|
);
|
||||||
if (foundSkill) {
|
|
||||||
skillIcon = foundSkill.icon;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
skillMap.set(skill.skillName, {
|
|
||||||
skillName: skill.skillName,
|
|
||||||
category: skill.category,
|
|
||||||
icon: skillIcon,
|
|
||||||
experts: [],
|
|
||||||
learners: [],
|
|
||||||
averageLevel: 0,
|
|
||||||
totalEvaluations: 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const skillData = skillMap.get(skill.skillName);
|
|
||||||
skillData.totalEvaluations++;
|
|
||||||
skillData.averageLevel += skill.level;
|
|
||||||
|
|
||||||
if (skill.level >= 2) {
|
|
||||||
skillData.experts.push({
|
|
||||||
name: `${member.firstName} ${member.lastName}`,
|
|
||||||
level: skill.level,
|
|
||||||
canMentor: skill.canMentor,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (skill.wantsToLearn) {
|
|
||||||
skillData.learners.push({
|
|
||||||
name: `${member.firstName} ${member.lastName}`,
|
|
||||||
currentLevel: skill.level,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const skills = Array.from(skillMap.values())
|
|
||||||
.map((skill) => ({
|
|
||||||
...skill,
|
|
||||||
averageLevel: skill.averageLevel / skill.totalEvaluations,
|
|
||||||
}))
|
|
||||||
.sort((a, b) => b.averageLevel - a.averageLevel);
|
|
||||||
|
|
||||||
setSkillAnalysis(skills);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error loading team data:", error);
|
console.error("Failed to load team data:", error);
|
||||||
router.push("/admin");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
loadTeamData();
|
|
||||||
}, [teamId, router]);
|
|
||||||
|
|
||||||
const handleMemberClick = (member: TeamMember) => {
|
|
||||||
setSelectedMember(member);
|
|
||||||
setIsMemberModalOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseMemberModal = () => {
|
|
||||||
setIsMemberModalOpen(false);
|
|
||||||
setSelectedMember(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExportReport = () => {
|
|
||||||
if (!team) return;
|
|
||||||
|
|
||||||
const reportData = {
|
|
||||||
team: team.teamName,
|
|
||||||
direction: team.direction,
|
|
||||||
exportDate: new Date().toLocaleDateString(),
|
|
||||||
summary: {
|
|
||||||
totalMembers: team.totalMembers,
|
|
||||||
averageSkillLevel: team.averageSkillLevel,
|
|
||||||
skillCoverage: team.skillCoverage,
|
|
||||||
},
|
|
||||||
topSkills: team.topSkills,
|
|
||||||
skillAnalysis: skillAnalysis.slice(0, 15),
|
|
||||||
members: team.members.map((member) => ({
|
|
||||||
name: `${member.firstName} ${member.lastName}`,
|
|
||||||
joinDate: member.joinDate,
|
|
||||||
skillsCount: member.skills.length,
|
|
||||||
averageLevel:
|
|
||||||
member.skills.reduce((sum, s) => sum + s.level, 0) /
|
|
||||||
member.skills.length,
|
|
||||||
skills: member.skills.map((skill) => ({
|
|
||||||
skillName: skill.skillName,
|
|
||||||
category: skill.category,
|
|
||||||
level: skill.level,
|
|
||||||
levelLabel: getSkillLevelLabel(skill.level),
|
|
||||||
canMentor: skill.canMentor,
|
|
||||||
wantsToLearn: skill.wantsToLearn,
|
|
||||||
})),
|
|
||||||
})),
|
|
||||||
mentorshipOpportunities: skillAnalysis
|
|
||||||
.filter(
|
|
||||||
(skill) => skill.experts.length > 0 && skill.learners.length > 0
|
|
||||||
)
|
|
||||||
.map((skill) => ({
|
|
||||||
skillName: skill.skillName,
|
|
||||||
experts: skill.experts.filter((e) => e.canMentor),
|
|
||||||
learners: skill.learners,
|
|
||||||
})),
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataStr = JSON.stringify(reportData, null, 2);
|
|
||||||
const dataUri =
|
|
||||||
"data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
|
|
||||||
|
|
||||||
const exportFileDefaultName = `rapport-complet-${team.teamName.toLowerCase()}-${
|
|
||||||
new Date().toISOString().split("T")[0]
|
|
||||||
}.json`;
|
|
||||||
|
|
||||||
const linkElement = document.createElement("a");
|
|
||||||
linkElement.setAttribute("href", dataUri);
|
|
||||||
linkElement.setAttribute("download", exportFileDefaultName);
|
|
||||||
linkElement.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center">
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
|
<div className="text-white text-xl text-red-500">
|
||||||
<div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
|
Erreur lors du chargement des détails de l'équipe
|
||||||
<div className="relative z-10 container mx-auto p-6">
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-white">Chargement...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!team) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
|
|
||||||
<div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
|
|
||||||
<div className="relative z-10 container mx-auto p-6">
|
|
||||||
<div className="text-center text-white">Équipe non trouvée</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
|
|
||||||
<div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
|
|
||||||
|
|
||||||
<div className="relative z-10 container mx-auto p-6 space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => router.back()}
|
|
||||||
className="text-slate-400 hover:text-white hover:bg-white/10"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
||||||
Retour
|
|
||||||
</Button>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-3 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
|
||||||
<Users className="h-6 w-6 text-blue-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-bold text-white">
|
|
||||||
Équipe {team.teamName}
|
|
||||||
</h1>
|
|
||||||
<p className="text-slate-400">
|
|
||||||
{team.direction} • {team.totalMembers} membres
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
onClick={handleExportReport}
|
|
||||||
className="bg-blue-500 hover:bg-blue-600 text-white"
|
|
||||||
>
|
|
||||||
<Download className="h-4 w-4 mr-2" />
|
|
||||||
Exporter rapport complet
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats générales */}
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
|
||||||
<Users className="h-8 w-8 text-green-400 mx-auto mb-3" />
|
|
||||||
<div className="text-3xl font-bold text-white">
|
|
||||||
{team.totalMembers}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-slate-400">Membres actifs</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
|
||||||
<BarChart3 className="h-8 w-8 text-blue-400 mx-auto mb-3" />
|
|
||||||
<div className="text-3xl font-bold text-white">
|
|
||||||
{((team.averageSkillLevel / 3) * 100).toFixed(0)}%
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-slate-400">Niveau moyen</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
|
||||||
<Target className="h-8 w-8 text-orange-400 mx-auto mb-3" />
|
|
||||||
<div className="text-3xl font-bold text-white">
|
|
||||||
{skillAnalysis.length}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-slate-400">Compétences évaluées</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
|
||||||
<Award className="h-8 w-8 text-purple-400 mx-auto mb-3" />
|
|
||||||
<div className="text-3xl font-bold text-white">
|
|
||||||
{skillAnalysis.filter((s) => s.experts.length > 0).length}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-slate-400">Expertises disponibles</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
|
||||||
{/* Analyse des compétences */}
|
|
||||||
<div className="xl:col-span-1">
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 h-fit">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
|
|
||||||
<Award className="h-5 w-5 text-purple-400" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-xl font-bold text-white">
|
|
||||||
Top Compétences
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{skillAnalysis.slice(0, 15).map((skill, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="group p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-white/20 transition-all duration-200"
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
{/* Icône de la technologie */}
|
|
||||||
<div className="flex-shrink-0 mt-0.5">
|
|
||||||
{skill.icon ? (
|
|
||||||
<div className="p-2 bg-white/10 border border-white/20 rounded-lg">
|
|
||||||
<TechIcon
|
|
||||||
iconName={skill.icon}
|
|
||||||
className="w-4 h-4 text-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="p-2 bg-slate-500/20 border border-slate-500/30 rounded-lg">
|
|
||||||
<Star className="w-4 h-4 text-slate-400" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contenu principal */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<h3 className="text-white font-medium truncate pr-2">
|
|
||||||
{skill.skillName}
|
|
||||||
</h3>
|
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
|
||||||
<span className="text-sm font-semibold text-white">
|
|
||||||
{((skill.averageLevel / 3) * 100).toFixed(0)}%
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
className={`w-2 h-2 rounded-full ${getSkillLevelColor(
|
|
||||||
skill.averageLevel
|
|
||||||
)}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Barre de progression */}
|
|
||||||
<div className="w-full bg-white/10 rounded-full h-1.5 mb-3">
|
|
||||||
<div
|
|
||||||
className={`h-1.5 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}%`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Métadonnées */}
|
|
||||||
<div className="flex items-center justify-between text-xs">
|
|
||||||
<span className="text-slate-400 font-medium">
|
|
||||||
{skill.category}
|
|
||||||
</span>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{skill.experts.length > 0 && (
|
|
||||||
<div className="flex items-center gap-1 text-green-400">
|
|
||||||
<GraduationCap className="w-3 h-3" />
|
|
||||||
<span className="font-medium">
|
|
||||||
{skill.experts.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{skill.learners.length > 0 && (
|
|
||||||
<div className="flex items-center gap-1 text-blue-400">
|
|
||||||
<BookOpen className="w-3 h-3" />
|
|
||||||
<span className="font-medium">
|
|
||||||
{skill.learners.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Experts et mentors */}
|
|
||||||
<div className="xl:col-span-1">
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 h-fit">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
|
|
||||||
<GraduationCap className="h-5 w-5 text-green-400" />
|
|
||||||
</div>
|
|
||||||
<h2 className="text-xl font-bold text-white">
|
|
||||||
Experts & Mentors
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{skillAnalysis
|
|
||||||
.filter((skill) => skill.experts.length > 0)
|
|
||||||
.slice(0, 20)
|
|
||||||
.map((skill, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="group p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-white/20 transition-all duration-200"
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3 mb-3">
|
|
||||||
{/* 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-lg">
|
|
||||||
<TechIcon
|
|
||||||
iconName={skill.icon}
|
|
||||||
className="w-3.5 h-3.5 text-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="p-1.5 bg-slate-500/20 border border-slate-500/30 rounded-lg">
|
|
||||||
<Star className="w-3.5 h-3.5 text-slate-400" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Nom de la compétence */}
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="font-semibold text-white text-sm">
|
|
||||||
{skill.skillName}
|
|
||||||
</h3>
|
|
||||||
<p className="text-xs text-slate-400">
|
|
||||||
{skill.category}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Badge du nombre d'experts */}
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<div className="px-2 py-1 bg-green-500/20 border border-green-500/30 rounded-lg">
|
|
||||||
<span className="text-xs font-medium text-green-300">
|
|
||||||
{skill.experts.length} expert
|
|
||||||
{skill.experts.length > 1 ? "s" : ""}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Liste des experts */}
|
|
||||||
<div className="space-y-2 ml-8">
|
|
||||||
{skill.experts.map((expert, expertIdx) => (
|
|
||||||
<div
|
|
||||||
key={expertIdx}
|
|
||||||
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
|
|
||||||
<span className="text-xs font-bold text-white">
|
|
||||||
{expert.name
|
|
||||||
.split(" ")
|
|
||||||
.map((n) => n[0])
|
|
||||||
.join("")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-sm text-slate-200 font-medium">
|
|
||||||
{expert.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div
|
|
||||||
className={`px-2 py-0.5 rounded-md text-xs font-medium ${
|
|
||||||
expert.level >= 3
|
|
||||||
? "bg-green-500/20 text-green-300 border border-green-500/30"
|
|
||||||
: expert.level >= 2
|
|
||||||
? "bg-blue-500/20 text-blue-300 border border-blue-500/30"
|
|
||||||
: "bg-orange-500/20 text-orange-300 border border-orange-500/30"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{getSkillLevelLabel(expert.level)}
|
|
||||||
</div>
|
|
||||||
{expert.canMentor && (
|
|
||||||
<div className="p-1 bg-green-500/20 border border-green-500/30 rounded">
|
|
||||||
<GraduationCap className="w-3 h-3 text-green-400" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Liste des membres */}
|
|
||||||
<div className="xl:col-span-1">
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 h-fit">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<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>
|
|
||||||
<h2 className="text-xl font-bold text-white">
|
|
||||||
Membres de l'équipe
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{team.members.map((member, idx) => {
|
|
||||||
const avgLevel =
|
|
||||||
member.skills.reduce((sum, s) => sum + s.level, 0) /
|
|
||||||
member.skills.length;
|
|
||||||
const mentorSkills = member.skills.filter(
|
|
||||||
(s) => s.canMentor
|
|
||||||
).length;
|
|
||||||
const learningSkills = member.skills.filter(
|
|
||||||
(s) => s.wantsToLearn
|
|
||||||
).length;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
onClick={() => handleMemberClick(member)}
|
|
||||||
className="group p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-white/20 transition-all duration-200 cursor-pointer"
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
{/* Avatar */}
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center">
|
|
||||||
<span className="text-sm font-bold text-white">
|
|
||||||
{member.firstName[0]}
|
|
||||||
{member.lastName[0]}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Informations principales */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<h3 className="font-semibold text-white truncate">
|
|
||||||
{member.firstName} {member.lastName}
|
|
||||||
</h3>
|
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
|
||||||
<span className="text-xs font-semibold text-white">
|
|
||||||
{((avgLevel / 3) * 100).toFixed(0)}%
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
className={`w-2 h-2 rounded-full ${getSkillLevelColor(
|
|
||||||
avgLevel
|
|
||||||
)}`}
|
|
||||||
/>
|
|
||||||
<ChevronRight className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Date d'arrivée */}
|
|
||||||
<p className="text-xs text-slate-400 mb-3">
|
|
||||||
Membre depuis{" "}
|
|
||||||
{new Date(member.joinDate).toLocaleDateString(
|
|
||||||
"fr-FR",
|
|
||||||
{
|
|
||||||
year: "numeric",
|
|
||||||
month: "long",
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Barre de progression du niveau */}
|
|
||||||
<div className="w-full bg-white/10 rounded-full h-1.5 mb-3">
|
|
||||||
<div
|
|
||||||
className={`h-1.5 rounded-full transition-all ${
|
|
||||||
avgLevel < 0.5
|
|
||||||
? "bg-gradient-to-r from-red-500 to-red-400"
|
|
||||||
: avgLevel < 1.5
|
|
||||||
? "bg-gradient-to-r from-orange-500 to-orange-400"
|
|
||||||
: avgLevel < 2.5
|
|
||||||
? "bg-gradient-to-r from-blue-500 to-blue-400"
|
|
||||||
: "bg-gradient-to-r from-green-500 to-green-400"
|
|
||||||
}`}
|
|
||||||
style={{ width: `${(avgLevel / 3) * 100}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Statistiques */}
|
|
||||||
<div className="grid grid-cols-3 gap-3 text-xs">
|
|
||||||
<div className="text-center p-2 bg-white/5 rounded-lg">
|
|
||||||
<div className="text-white font-semibold">
|
|
||||||
{member.skills.length}
|
|
||||||
</div>
|
|
||||||
<div className="text-slate-400">Compétences</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
|
|
||||||
<div className="text-green-300 font-semibold">
|
|
||||||
{mentorSkills}
|
|
||||||
</div>
|
|
||||||
<div className="text-green-400">Mentor</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center p-2 bg-blue-500/10 border border-blue-500/20 rounded-lg">
|
|
||||||
<div className="text-blue-300 font-semibold">
|
|
||||||
{learningSkills}
|
|
||||||
</div>
|
|
||||||
<div className="text-blue-400">Apprend</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modal des détails du membre */}
|
|
||||||
<Dialog open={isMemberModalOpen} onOpenChange={setIsMemberModalOpen}>
|
|
||||||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto bg-slate-900 border-slate-700">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="text-xl font-bold text-white flex items-center gap-3">
|
|
||||||
{selectedMember && (
|
|
||||||
<>
|
|
||||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center">
|
|
||||||
<span className="text-sm font-bold text-white">
|
|
||||||
{selectedMember.firstName[0]}
|
|
||||||
{selectedMember.lastName[0]}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-white">
|
|
||||||
{selectedMember.firstName} {selectedMember.lastName}
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-slate-400 font-normal">
|
|
||||||
{selectedMember.skills.length} compétences évaluées
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
{selectedMember && (
|
|
||||||
<div className="space-y-6 mt-6">
|
|
||||||
{/* Statistiques rapides */}
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
|
|
||||||
<div className="text-2xl font-bold text-white">
|
|
||||||
{selectedMember.skills.length}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-slate-400">Compétences</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-green-500/10 border border-green-500/20 rounded-xl p-4 text-center">
|
|
||||||
<div className="text-2xl font-bold text-green-300">
|
|
||||||
{selectedMember.skills.filter((s) => s.canMentor).length}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-green-400">Peut mentorer</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-300">
|
|
||||||
{selectedMember.skills.filter((s) => s.wantsToLearn).length}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-blue-400">Veut apprendre</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Liste des compétences par catégorie */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
|
||||||
<Award className="w-5 h-5 text-purple-400" />
|
|
||||||
Compétences détaillées
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{/* Grouper les compétences par catégorie */}
|
|
||||||
{Object.entries(
|
|
||||||
selectedMember.skills.reduce((acc, skill) => {
|
|
||||||
if (!acc[skill.category]) {
|
|
||||||
acc[skill.category] = [];
|
|
||||||
}
|
|
||||||
acc[skill.category].push(skill);
|
|
||||||
return acc;
|
|
||||||
}, {} as Record<string, typeof selectedMember.skills>)
|
|
||||||
).map(([category, skills]) => (
|
|
||||||
<div
|
|
||||||
key={category}
|
|
||||||
className="bg-white/5 border border-white/10 rounded-xl p-4"
|
|
||||||
>
|
|
||||||
<h4 className="font-semibold text-white mb-4 flex items-center gap-2">
|
|
||||||
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
|
|
||||||
{category}
|
|
||||||
<span className="text-sm text-slate-400 font-normal">
|
|
||||||
({skills.length} compétence
|
|
||||||
{skills.length > 1 ? "s" : ""})
|
|
||||||
</span>
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
{skills
|
|
||||||
.sort((a, b) => b.level - a.level)
|
|
||||||
.map((skill, skillIdx) => {
|
|
||||||
// Trouver l'icône de la compétence
|
|
||||||
let skillIcon = null;
|
|
||||||
if (skillAnalysis.length > 0) {
|
|
||||||
const foundSkill = skillAnalysis.find(
|
|
||||||
(s) => s.skillName === skill.skillName
|
|
||||||
);
|
|
||||||
if (foundSkill) {
|
|
||||||
skillIcon = foundSkill.icon;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={skillIdx}
|
|
||||||
className="flex items-center gap-3 p-2 hover:bg-white/5 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
{/* Icône de la technologie */}
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
{skillIcon ? (
|
|
||||||
<TechIcon
|
|
||||||
iconName={skillIcon}
|
|
||||||
className="w-4 h-4 text-white"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Star className="w-4 h-4 text-slate-400" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Nom de la compétence */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<span className="text-sm font-medium text-white truncate">
|
|
||||||
{skill.skillName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Niveau et badges */}
|
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
|
||||||
{/* Badge de niveau */}
|
|
||||||
<div
|
|
||||||
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
||||||
skill.level >= 3
|
|
||||||
? "bg-green-500/20 text-green-300"
|
|
||||||
: skill.level >= 2
|
|
||||||
? "bg-blue-500/20 text-blue-300"
|
|
||||||
: skill.level >= 1
|
|
||||||
? "bg-orange-500/20 text-orange-300"
|
|
||||||
: "bg-red-500/20 text-red-300"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{getSkillLevelLabel(skill.level)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Icônes mentor/apprenant */}
|
|
||||||
{skill.canMentor && (
|
|
||||||
<div className="p-1 bg-green-500/20 rounded">
|
|
||||||
<GraduationCap className="w-3 h-3 text-green-400" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{skill.wantsToLearn && (
|
|
||||||
<div className="p-1 bg-blue-500/20 rounded">
|
|
||||||
<BookOpen className="w-3 h-3 text-blue-400" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
442
components/admin/admin-client-wrapper.tsx
Normal file
442
components/admin/admin-client-wrapper.tsx
Normal file
@@ -0,0 +1,442 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Users, Target, Building2, UserCheck, Filter } from "lucide-react";
|
||||||
|
import { Team, SkillCategory } from "@/lib/types";
|
||||||
|
import {
|
||||||
|
TeamStatsCard,
|
||||||
|
DirectionOverview,
|
||||||
|
MultiSelectFilter,
|
||||||
|
} from "@/components/admin";
|
||||||
|
import { TeamDetailModal } from "@/components/admin/team-detail-modal";
|
||||||
|
import { TeamStats, DirectionStats } from "@/services/admin-service";
|
||||||
|
|
||||||
|
interface AdminClientWrapperProps {
|
||||||
|
teams: Team[];
|
||||||
|
skillCategories: SkillCategory[];
|
||||||
|
teamStats: TeamStats[];
|
||||||
|
directionStats: DirectionStats[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AdminClientWrapper({
|
||||||
|
teams,
|
||||||
|
skillCategories,
|
||||||
|
teamStats,
|
||||||
|
directionStats,
|
||||||
|
}: AdminClientWrapperProps) {
|
||||||
|
// Filtres
|
||||||
|
const [selectedDirections, setSelectedDirections] = useState<string[]>([]);
|
||||||
|
const [selectedTeams, setSelectedTeams] = useState<string[]>([]);
|
||||||
|
|
||||||
|
// Modale de détails
|
||||||
|
const [selectedTeamForModal, setSelectedTeamForModal] =
|
||||||
|
useState<TeamStats | null>(null);
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
|
||||||
|
// Fonctions de filtrage
|
||||||
|
const getFilteredTeamStats = () => {
|
||||||
|
let filtered = teamStats;
|
||||||
|
|
||||||
|
if (selectedDirections.length > 0) {
|
||||||
|
filtered = filtered.filter((team) =>
|
||||||
|
selectedDirections.includes(team.direction)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedTeams.length > 0) {
|
||||||
|
filtered = filtered.filter((team) => selectedTeams.includes(team.teamId));
|
||||||
|
}
|
||||||
|
|
||||||
|
return filtered;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFilteredDirectionStats = () => {
|
||||||
|
let filtered = directionStats;
|
||||||
|
|
||||||
|
if (selectedDirections.length > 0) {
|
||||||
|
filtered = filtered.filter((direction) =>
|
||||||
|
selectedDirections.includes(direction.direction)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si des équipes spécifiques sont sélectionnées, filtrer aussi les équipes dans les directions
|
||||||
|
if (selectedTeams.length > 0) {
|
||||||
|
filtered = filtered
|
||||||
|
.map((direction) => ({
|
||||||
|
...direction,
|
||||||
|
teams: direction.teams.filter((team) =>
|
||||||
|
selectedTeams.includes(team.teamId)
|
||||||
|
),
|
||||||
|
totalMembers: direction.teams
|
||||||
|
.filter((team) => selectedTeams.includes(team.teamId))
|
||||||
|
.reduce((sum, team) => sum + team.totalMembers, 0),
|
||||||
|
averageSkillLevel: direction.teams
|
||||||
|
.filter((team) => selectedTeams.includes(team.teamId))
|
||||||
|
.reduce(
|
||||||
|
(sum, team, _, arr) => sum + team.averageSkillLevel / arr.length,
|
||||||
|
0
|
||||||
|
),
|
||||||
|
}))
|
||||||
|
.filter((direction) => direction.teams.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return filtered;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Options pour les filtres
|
||||||
|
const directionOptions = Array.from(
|
||||||
|
new Set(teams.map((team) => team.direction))
|
||||||
|
).map((direction) => ({
|
||||||
|
id: direction,
|
||||||
|
label: direction,
|
||||||
|
count: teams.filter((team) => team.direction === direction).length,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const teamOptions = teams.map((team) => ({
|
||||||
|
id: team.id,
|
||||||
|
label: `${team.name} (${team.direction})`,
|
||||||
|
count: teamStats.find((stat) => stat.teamId === team.id)?.totalMembers || 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Fonctions pour les actions des équipes
|
||||||
|
const handleViewTeamDetails = (team: TeamStats) => {
|
||||||
|
setSelectedTeamForModal(team);
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExportTeamReport = (team: TeamStats) => {
|
||||||
|
const reportData = {
|
||||||
|
team: team.teamName,
|
||||||
|
direction: team.direction,
|
||||||
|
date: new Date().toLocaleDateString(),
|
||||||
|
stats: {
|
||||||
|
members: team.totalMembers,
|
||||||
|
averageLevel: team.averageSkillLevel,
|
||||||
|
coverage: team.skillCoverage,
|
||||||
|
},
|
||||||
|
topSkills: team.topSkills,
|
||||||
|
};
|
||||||
|
|
||||||
|
const dataStr = JSON.stringify(reportData, null, 2);
|
||||||
|
const dataUri =
|
||||||
|
"data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
|
||||||
|
|
||||||
|
const exportFileDefaultName = `rapport-${team.teamName.toLowerCase()}-${
|
||||||
|
new Date().toISOString().split("T")[0]
|
||||||
|
}.json`;
|
||||||
|
|
||||||
|
const linkElement = document.createElement("a");
|
||||||
|
linkElement.setAttribute("href", dataUri);
|
||||||
|
linkElement.setAttribute("download", exportFileDefaultName);
|
||||||
|
linkElement.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
||||||
|
{/* Background Effects */}
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
|
||||||
|
<div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
|
||||||
|
|
||||||
|
<div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center space-y-4 mb-12">
|
||||||
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
|
||||||
|
<Building2 className="h-4 w-4 text-blue-400" />
|
||||||
|
<span className="text-sm font-medium text-slate-200">
|
||||||
|
Administration
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-4xl font-bold text-white">
|
||||||
|
Dashboard Managérial
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Vue d'ensemble des compétences par équipe et direction pour pilotage
|
||||||
|
stratégique
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Overview Cards */}
|
||||||
|
<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="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>
|
||||||
|
<div className="text-xs text-slate-400 font-medium">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? "FILTRÉES"
|
||||||
|
: "TOTAL"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-2xl font-bold text-white">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? getFilteredTeamStats().length
|
||||||
|
: teams.length}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-400">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? "Équipes filtrées"
|
||||||
|
: "Équipes"}
|
||||||
|
</p>
|
||||||
|
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
||||||
|
<p className="text-xs text-slate-500">
|
||||||
|
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="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>
|
||||||
|
<div className="text-xs text-slate-400 font-medium">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? "FILTRÉS"
|
||||||
|
: "TOTAL"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-2xl font-bold text-white">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? getFilteredTeamStats().reduce(
|
||||||
|
(sum, t) => sum + t.totalMembers,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
: teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-400">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? "Membres filtrés"
|
||||||
|
: "Membres"}
|
||||||
|
</p>
|
||||||
|
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
||||||
|
<p className="text-xs text-slate-500">
|
||||||
|
sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} 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="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>
|
||||||
|
<div className="text-xs text-slate-400 font-medium">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? "FILTRÉES"
|
||||||
|
: "TOTAL"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-2xl font-bold text-white">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? getFilteredDirectionStats().length
|
||||||
|
: directionStats.length}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-400">
|
||||||
|
{selectedDirections.length > 0 || selectedTeams.length > 0
|
||||||
|
? "Directions filtrées"
|
||||||
|
: "Directions"}
|
||||||
|
</p>
|
||||||
|
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
||||||
|
<p className="text-xs text-slate-500">
|
||||||
|
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="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>
|
||||||
|
<div className="text-xs text-slate-400 font-medium">
|
||||||
|
RÉFÉRENTIEL
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-2xl font-bold text-white">
|
||||||
|
{skillCategories.reduce(
|
||||||
|
(sum, cat) => sum + (cat.skills?.length || 0),
|
||||||
|
0
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-400">Compétences suivies</p>
|
||||||
|
<p className="text-xs text-slate-500">
|
||||||
|
{skillCategories.length} catégories
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtres */}
|
||||||
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
||||||
|
<Filter className="h-4 w-4 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white">
|
||||||
|
Filtres avancés
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<MultiSelectFilter
|
||||||
|
title="Directions"
|
||||||
|
options={directionOptions}
|
||||||
|
selectedValues={selectedDirections}
|
||||||
|
onChange={setSelectedDirections}
|
||||||
|
placeholder="Toutes les directions"
|
||||||
|
icon={<Building2 className="h-4 w-4" />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<MultiSelectFilter
|
||||||
|
title="Équipes"
|
||||||
|
options={teamOptions}
|
||||||
|
selectedValues={selectedTeams}
|
||||||
|
onChange={setSelectedTeams}
|
||||||
|
placeholder="Toutes les équipes"
|
||||||
|
icon={<Users className="h-4 w-4" />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Résumé des filtres actifs */}
|
||||||
|
{(selectedDirections.length > 0 || selectedTeams.length > 0) && (
|
||||||
|
<div className="flex flex-col lg:flex-row items-center gap-3">
|
||||||
|
<div className="bg-blue-500/20 border border-blue-500/30 rounded-xl px-3 py-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Target className="h-3 w-3 text-blue-400" />
|
||||||
|
<span className="text-sm text-blue-300 font-medium">
|
||||||
|
{getFilteredTeamStats().reduce(
|
||||||
|
(sum, t) => sum + t.totalMembers,
|
||||||
|
0
|
||||||
|
)}{" "}
|
||||||
|
membres
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedDirections([]);
|
||||||
|
setSelectedTeams([]);
|
||||||
|
}}
|
||||||
|
className="text-xs text-slate-400 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
Réinitialiser
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content Tabs */}
|
||||||
|
<Tabs defaultValue="directions" className="w-full">
|
||||||
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
|
||||||
|
<TabsList className="grid w-full grid-cols-2 bg-transparent border-0">
|
||||||
|
<TabsTrigger
|
||||||
|
value="directions"
|
||||||
|
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
Vue par Direction
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="teams"
|
||||||
|
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
Vue par Équipe
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TabsContent value="directions" className="space-y-6">
|
||||||
|
<div className="grid gap-6">
|
||||||
|
{getFilteredDirectionStats().length > 0 ? (
|
||||||
|
getFilteredDirectionStats().map((direction) => (
|
||||||
|
<DirectionOverview
|
||||||
|
key={direction.direction}
|
||||||
|
direction={direction.direction}
|
||||||
|
teams={direction.teams}
|
||||||
|
totalMembers={direction.totalMembers}
|
||||||
|
averageSkillLevel={direction.averageSkillLevel}
|
||||||
|
topCategories={direction.topCategories}
|
||||||
|
onViewTeamDetails={handleViewTeamDetails}
|
||||||
|
onExportTeamReport={handleExportTeamReport}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
|
||||||
|
<div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
|
||||||
|
<Building2 className="h-6 w-6 text-slate-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-white mb-2">
|
||||||
|
Aucune direction trouvée
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 text-sm">
|
||||||
|
Aucune direction ne correspond aux filtres sélectionnés.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="teams" className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{getFilteredTeamStats().length > 0 ? (
|
||||||
|
getFilteredTeamStats().map((team) => (
|
||||||
|
<TeamStatsCard
|
||||||
|
key={team.teamId}
|
||||||
|
teamId={team.teamId}
|
||||||
|
teamName={team.teamName}
|
||||||
|
direction={team.direction}
|
||||||
|
totalMembers={team.totalMembers}
|
||||||
|
averageSkillLevel={team.averageSkillLevel}
|
||||||
|
topSkills={team.topSkills}
|
||||||
|
skillCoverage={team.skillCoverage}
|
||||||
|
onViewDetails={() => handleViewTeamDetails(team)}
|
||||||
|
onViewReport={() => handleExportTeamReport(team)}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="col-span-full">
|
||||||
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
|
||||||
|
<div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
|
||||||
|
<Users className="h-6 w-6 text-slate-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-white mb-2">
|
||||||
|
Aucune équipe trouvée
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 text-sm">
|
||||||
|
Aucune équipe ne correspond aux filtres sélectionnés.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* Modale de détails d'équipe */}
|
||||||
|
<TeamDetailModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
team={selectedTeamForModal}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
export { TeamStatsCard } from "./team-stats-card";
|
export { TeamStatsCard } from "./team-stats-card";
|
||||||
export { DirectionOverview } from "./direction-overview";
|
export { DirectionOverview } from "./direction-overview";
|
||||||
export { MultiSelectFilter } from "./multi-select-filter";
|
export { MultiSelectFilter } from "./multi-select-filter";
|
||||||
|
export { AdminClientWrapper } from "./admin-client-wrapper";
|
||||||
|
export { TeamDetailClientWrapper } from "./team-detail-client-wrapper";
|
||||||
|
|||||||
1178
components/admin/team-detail-client-wrapper.tsx
Normal file
1178
components/admin/team-detail-client-wrapper.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -11,27 +11,9 @@ import {
|
|||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import {
|
import { Users, ExternalLink, Download, Eye } from "lucide-react";
|
||||||
Users,
|
|
||||||
ExternalLink,
|
|
||||||
Download,
|
|
||||||
Eye,
|
|
||||||
} from "lucide-react";
|
|
||||||
|
|
||||||
interface TeamMember {
|
import { TeamMember } from "@/services/admin-service";
|
||||||
id: string;
|
|
||||||
firstName: string;
|
|
||||||
lastName: string;
|
|
||||||
skills: Array<{
|
|
||||||
skillId: string;
|
|
||||||
skillName: string;
|
|
||||||
category: string;
|
|
||||||
level: number;
|
|
||||||
canMentor: boolean;
|
|
||||||
wantsToLearn: boolean;
|
|
||||||
}>;
|
|
||||||
joinDate: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TeamDetailModalProps {
|
interface TeamDetailModalProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@@ -42,7 +24,11 @@ interface TeamDetailModalProps {
|
|||||||
direction: string;
|
direction: string;
|
||||||
totalMembers: number;
|
totalMembers: number;
|
||||||
averageSkillLevel: number;
|
averageSkillLevel: number;
|
||||||
topSkills: Array<{ skillName: string; averageLevel: number }>;
|
topSkills: Array<{
|
||||||
|
skillName: string;
|
||||||
|
averageLevel: number;
|
||||||
|
icon?: string;
|
||||||
|
}>;
|
||||||
skillCoverage: number;
|
skillCoverage: number;
|
||||||
members: TeamMember[];
|
members: TeamMember[];
|
||||||
} | null;
|
} | null;
|
||||||
@@ -120,7 +106,8 @@ export function TeamDetailModal({
|
|||||||
</div>
|
</div>
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<DialogDescription className="text-slate-400">
|
<DialogDescription className="text-slate-400">
|
||||||
Aperçu rapide de l'équipe. Cliquez sur "Voir tous les détails" pour une vue complète.
|
Aperçu rapide de l'équipe. Cliquez sur "Voir tous les détails" pour
|
||||||
|
une vue complète.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
@@ -155,14 +142,19 @@ export function TeamDetailModal({
|
|||||||
<h3 className="font-medium text-white mb-3">Top 3 Compétences</h3>
|
<h3 className="font-medium text-white mb-3">Top 3 Compétences</h3>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{team.topSkills.slice(0, 3).map((skill, idx) => (
|
{team.topSkills.slice(0, 3).map((skill, idx) => (
|
||||||
<div key={idx} className="flex items-center justify-between p-2 bg-white/5 rounded-lg">
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
||||||
|
>
|
||||||
<span className="text-white text-sm">{skill.skillName}</span>
|
<span className="text-white text-sm">{skill.skillName}</span>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-xs text-slate-400">
|
<span className="text-xs text-slate-400">
|
||||||
{((skill.averageLevel / 3) * 100).toFixed(0)}%
|
{((skill.averageLevel / 3) * 100).toFixed(0)}%
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
className={`w-2 h-2 rounded-full ${getSkillLevelColor(skill.averageLevel)}`}
|
className={`w-2 h-2 rounded-full ${getSkillLevelColor(
|
||||||
|
skill.averageLevel
|
||||||
|
)}`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
260
services/admin-service.ts
Normal file
260
services/admin-service.ts
Normal file
@@ -0,0 +1,260 @@
|
|||||||
|
import { getPool } from "./database";
|
||||||
|
import { Team, SkillCategory } from "@/lib/types";
|
||||||
|
|
||||||
|
export interface TeamMember {
|
||||||
|
uuid: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
skills: Array<{
|
||||||
|
skillId: string;
|
||||||
|
skillName: string;
|
||||||
|
category: string;
|
||||||
|
level: number;
|
||||||
|
canMentor: boolean;
|
||||||
|
wantsToLearn: boolean;
|
||||||
|
}>;
|
||||||
|
joinDate: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TeamStats {
|
||||||
|
teamId: string;
|
||||||
|
teamName: string;
|
||||||
|
direction: string;
|
||||||
|
totalMembers: number;
|
||||||
|
averageSkillLevel: number;
|
||||||
|
topSkills: Array<{ skillName: string; averageLevel: number; icon?: string }>;
|
||||||
|
skillCoverage: number; // Percentage of skills evaluated
|
||||||
|
members: TeamMember[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DirectionStats {
|
||||||
|
direction: string;
|
||||||
|
teams: TeamStats[];
|
||||||
|
totalMembers: number;
|
||||||
|
averageSkillLevel: number;
|
||||||
|
topCategories: Array<{ category: string; averageLevel: number }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class AdminService {
|
||||||
|
/**
|
||||||
|
* Récupère toutes les statistiques des équipes depuis la base de données
|
||||||
|
*/
|
||||||
|
static async getTeamsStats(): Promise<TeamStats[]> {
|
||||||
|
const pool = getPool();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Récupérer toutes les équipes avec leurs membres et évaluations
|
||||||
|
const query = `
|
||||||
|
WITH team_members AS (
|
||||||
|
SELECT
|
||||||
|
t.id as team_id,
|
||||||
|
t.name as team_name,
|
||||||
|
t.direction,
|
||||||
|
u.uuid_id,
|
||||||
|
u.first_name,
|
||||||
|
u.last_name,
|
||||||
|
u.created_at as join_date
|
||||||
|
FROM teams t
|
||||||
|
LEFT JOIN users u ON t.id = u.team_id
|
||||||
|
),
|
||||||
|
skill_stats AS (
|
||||||
|
SELECT
|
||||||
|
tm.team_id,
|
||||||
|
tm.uuid_id,
|
||||||
|
s.id as skill_id,
|
||||||
|
s.name as skill_name,
|
||||||
|
sc.name as category_name,
|
||||||
|
CASE
|
||||||
|
WHEN se.level = 'never' THEN 0
|
||||||
|
WHEN se.level = 'not-autonomous' THEN 1
|
||||||
|
WHEN se.level = 'autonomous' THEN 2
|
||||||
|
WHEN se.level = 'expert' THEN 3
|
||||||
|
ELSE 0
|
||||||
|
END as level_numeric,
|
||||||
|
se.can_mentor,
|
||||||
|
se.wants_to_learn
|
||||||
|
FROM team_members tm
|
||||||
|
LEFT JOIN user_evaluations ue ON tm.uuid_id = ue.user_uuid
|
||||||
|
LEFT JOIN skill_evaluations se ON ue.id = se.user_evaluation_id AND se.is_selected = true
|
||||||
|
LEFT JOIN skills s ON se.skill_id = s.id
|
||||||
|
LEFT JOIN skill_categories sc ON s.category_id = sc.id
|
||||||
|
WHERE tm.uuid_id IS NOT NULL
|
||||||
|
),
|
||||||
|
team_skill_averages AS (
|
||||||
|
SELECT
|
||||||
|
ss.team_id,
|
||||||
|
ss.skill_name,
|
||||||
|
s.icon as skill_icon,
|
||||||
|
AVG(ss.level_numeric) as avg_level
|
||||||
|
FROM skill_stats ss
|
||||||
|
JOIN skills s ON ss.skill_id = s.id
|
||||||
|
WHERE ss.skill_name IS NOT NULL
|
||||||
|
GROUP BY ss.team_id, ss.skill_name, s.icon
|
||||||
|
)
|
||||||
|
SELECT
|
||||||
|
tm.team_id,
|
||||||
|
tm.team_name,
|
||||||
|
tm.direction,
|
||||||
|
json_agg(
|
||||||
|
DISTINCT jsonb_build_object(
|
||||||
|
'uuid', tm.uuid_id,
|
||||||
|
'firstName', tm.first_name,
|
||||||
|
'lastName', tm.last_name,
|
||||||
|
'joinDate', tm.join_date,
|
||||||
|
'skills', COALESCE(
|
||||||
|
(SELECT json_agg(
|
||||||
|
jsonb_build_object(
|
||||||
|
'skillId', ss.skill_id,
|
||||||
|
'skillName', ss.skill_name,
|
||||||
|
'category', ss.category_name,
|
||||||
|
'level', ss.level_numeric,
|
||||||
|
'canMentor', ss.can_mentor,
|
||||||
|
'wantsToLearn', ss.wants_to_learn
|
||||||
|
)
|
||||||
|
)
|
||||||
|
FROM skill_stats ss
|
||||||
|
WHERE ss.team_id = tm.team_id AND ss.uuid_id = tm.uuid_id AND ss.skill_name IS NOT NULL
|
||||||
|
), '[]'::json
|
||||||
|
)
|
||||||
|
)
|
||||||
|
) FILTER (WHERE tm.uuid_id IS NOT NULL) as members,
|
||||||
|
COUNT(DISTINCT tm.uuid_id) FILTER (WHERE tm.uuid_id IS NOT NULL) as total_members,
|
||||||
|
COALESCE(AVG(ss.level_numeric) FILTER (WHERE ss.skill_name IS NOT NULL), 0) as avg_skill_level,
|
||||||
|
(SELECT json_agg(
|
||||||
|
jsonb_build_object(
|
||||||
|
'skillName', tsa.skill_name,
|
||||||
|
'averageLevel', tsa.avg_level,
|
||||||
|
'icon', tsa.skill_icon
|
||||||
|
) ORDER BY tsa.avg_level DESC
|
||||||
|
)
|
||||||
|
FROM team_skill_averages tsa
|
||||||
|
WHERE tsa.team_id = tm.team_id
|
||||||
|
LIMIT 3
|
||||||
|
) as top_skills,
|
||||||
|
CASE
|
||||||
|
WHEN COUNT(DISTINCT ss.skill_id) > 0 THEN
|
||||||
|
(COUNT(DISTINCT ss.skill_id) * 100.0 / (SELECT COUNT(*) FROM skills))
|
||||||
|
ELSE 0
|
||||||
|
END as skill_coverage
|
||||||
|
FROM team_members tm
|
||||||
|
LEFT JOIN skill_stats ss ON tm.team_id = ss.team_id AND tm.uuid_id = ss.uuid_id
|
||||||
|
GROUP BY tm.team_id, tm.team_name, tm.direction
|
||||||
|
ORDER BY tm.direction, tm.team_name
|
||||||
|
`;
|
||||||
|
|
||||||
|
const result = await pool.query(query);
|
||||||
|
|
||||||
|
return result.rows.map((row) => ({
|
||||||
|
teamId: row.team_id,
|
||||||
|
teamName: row.team_name,
|
||||||
|
direction: row.direction,
|
||||||
|
totalMembers: parseInt(row.total_members) || 0,
|
||||||
|
averageSkillLevel: parseFloat(row.avg_skill_level) || 0,
|
||||||
|
topSkills: row.top_skills || [],
|
||||||
|
skillCoverage: parseFloat(row.skill_coverage) || 0,
|
||||||
|
members: (row.members || []).filter(
|
||||||
|
(member: any) => member.uuid !== null
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching teams stats:", error);
|
||||||
|
throw new Error("Failed to fetch teams statistics");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Génère les statistiques par direction à partir des stats d'équipes
|
||||||
|
*/
|
||||||
|
static generateDirectionStats(teamStats: TeamStats[]): DirectionStats[] {
|
||||||
|
const directions = Array.from(new Set(teamStats.map((t) => t.direction)));
|
||||||
|
|
||||||
|
return directions.map((direction) => {
|
||||||
|
const directionTeams = teamStats.filter((t) => t.direction === direction);
|
||||||
|
const totalMembers = directionTeams.reduce(
|
||||||
|
(sum, t) => sum + t.totalMembers,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
const averageSkillLevel =
|
||||||
|
directionTeams.length > 0
|
||||||
|
? directionTeams.reduce((sum, t) => sum + t.averageSkillLevel, 0) /
|
||||||
|
directionTeams.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// Calculer les top catégories pour cette direction
|
||||||
|
const categoryMap = new Map<string, { total: number; count: number }>();
|
||||||
|
|
||||||
|
directionTeams.forEach((team) => {
|
||||||
|
team.members.forEach((member) => {
|
||||||
|
member.skills.forEach((skill) => {
|
||||||
|
const current = categoryMap.get(skill.category) || {
|
||||||
|
total: 0,
|
||||||
|
count: 0,
|
||||||
|
};
|
||||||
|
categoryMap.set(skill.category, {
|
||||||
|
total: current.total + skill.level,
|
||||||
|
count: current.count + 1,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const topCategories = Array.from(categoryMap.entries())
|
||||||
|
.map(([category, stats]) => ({
|
||||||
|
category,
|
||||||
|
averageLevel: stats.count > 0 ? stats.total / stats.count : 0,
|
||||||
|
}))
|
||||||
|
.sort((a, b) => b.averageLevel - a.averageLevel)
|
||||||
|
.slice(0, 3);
|
||||||
|
|
||||||
|
return {
|
||||||
|
direction,
|
||||||
|
teams: directionTeams,
|
||||||
|
totalMembers,
|
||||||
|
averageSkillLevel,
|
||||||
|
topCategories,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Récupère toutes les données nécessaires pour l'admin
|
||||||
|
*/
|
||||||
|
static async getAdminData(): Promise<{
|
||||||
|
teams: Team[];
|
||||||
|
skillCategories: SkillCategory[];
|
||||||
|
teamStats: TeamStats[];
|
||||||
|
directionStats: DirectionStats[];
|
||||||
|
}> {
|
||||||
|
const pool = getPool();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Récupérer toutes les données en parallèle
|
||||||
|
const [teamsResult, categoriesResult, teamStats] = await Promise.all([
|
||||||
|
pool.query(
|
||||||
|
"SELECT id, name, direction FROM teams ORDER BY direction, name"
|
||||||
|
),
|
||||||
|
pool.query("SELECT id, name, icon FROM skill_categories ORDER BY name"),
|
||||||
|
AdminService.getTeamsStats(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const teams = teamsResult.rows;
|
||||||
|
const skillCategories = categoriesResult.rows.map((row) => ({
|
||||||
|
...row,
|
||||||
|
category: row.name, // Adapter le format
|
||||||
|
skills: [], // Les skills individuelles ne sont pas nécessaires pour l'admin
|
||||||
|
}));
|
||||||
|
|
||||||
|
const directionStats = AdminService.generateDirectionStats(teamStats);
|
||||||
|
|
||||||
|
return {
|
||||||
|
teams,
|
||||||
|
skillCategories,
|
||||||
|
teamStats,
|
||||||
|
directionStats,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching admin data:", error);
|
||||||
|
throw new Error("Failed to fetch admin data");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -14,5 +14,8 @@ export { TeamsService } from "./teams-service";
|
|||||||
// Skills services (server-only)
|
// Skills services (server-only)
|
||||||
export { SkillsService } from "./skills-service";
|
export { SkillsService } from "./skills-service";
|
||||||
|
|
||||||
|
// Admin services (server-only)
|
||||||
|
export { AdminService } from "./admin-service";
|
||||||
|
|
||||||
// API client (can be used client-side)
|
// API client (can be used client-side)
|
||||||
export { ApiClient, apiClient } from "./api-client";
|
export { ApiClient, apiClient } from "./api-client";
|
||||||
|
|||||||
Reference in New Issue
Block a user