feat: CRUD admin for skills and teams
This commit is contained in:
Julien Froidefond
171
components/admin/overview/admin-client-wrapper.tsx
Normal file
171
components/admin/overview/admin-client-wrapper.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Team, SkillCategory } from "@/lib/types";
|
||||
import { TeamStats, DirectionStats } from "@/services/admin-service";
|
||||
import { TeamDetailModal } from "../team-detail/team-detail-modal";
|
||||
import { AdminHeader } from "../utils/admin-header";
|
||||
import { AdminOverviewCards } from "./admin-overview-cards";
|
||||
import { AdminFilters } from "../utils/admin-filters";
|
||||
import { AdminContentTabs } from "./admin-content-tabs";
|
||||
|
||||
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;
|
||||
|
||||
// Filtrer les équipes avec 0 membres
|
||||
filtered = filtered.filter((team) => team.totalMembers > 0);
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
// 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 */}
|
||||
<AdminHeader />
|
||||
|
||||
{/* Overview Cards */}
|
||||
<AdminOverviewCards
|
||||
teams={teams}
|
||||
skillCategories={skillCategories}
|
||||
teamStats={teamStats}
|
||||
directionStats={directionStats}
|
||||
selectedDirections={selectedDirections}
|
||||
selectedTeams={selectedTeams}
|
||||
getFilteredTeamStats={getFilteredTeamStats}
|
||||
getFilteredDirectionStats={getFilteredDirectionStats}
|
||||
/>
|
||||
|
||||
{/* Filtres */}
|
||||
<AdminFilters
|
||||
teams={teams}
|
||||
teamStats={teamStats}
|
||||
selectedDirections={selectedDirections}
|
||||
selectedTeams={selectedTeams}
|
||||
onDirectionsChange={setSelectedDirections}
|
||||
onTeamsChange={setSelectedTeams}
|
||||
getFilteredTeamStats={getFilteredTeamStats}
|
||||
/>
|
||||
|
||||
{/* Main Content Tabs */}
|
||||
<AdminContentTabs
|
||||
getFilteredDirectionStats={getFilteredDirectionStats}
|
||||
getFilteredTeamStats={getFilteredTeamStats}
|
||||
onViewTeamDetails={handleViewTeamDetails}
|
||||
onExportTeamReport={handleExportTeamReport}
|
||||
/>
|
||||
|
||||
{/* Modale de détails d'équipe */}
|
||||
<TeamDetailModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
team={selectedTeamForModal}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
107
components/admin/overview/admin-content-tabs.tsx
Normal file
107
components/admin/overview/admin-content-tabs.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Users, Building2 } from "lucide-react";
|
||||
import { TeamStats, DirectionStats } from "@/services/admin-service";
|
||||
import { DirectionOverview, TeamStatsCard } from "@/components/admin";
|
||||
|
||||
interface AdminContentTabsProps {
|
||||
getFilteredDirectionStats: () => DirectionStats[];
|
||||
getFilteredTeamStats: () => TeamStats[];
|
||||
onViewTeamDetails: (team: TeamStats) => void;
|
||||
onExportTeamReport: (team: TeamStats) => void;
|
||||
}
|
||||
|
||||
export function AdminContentTabs({
|
||||
getFilteredDirectionStats,
|
||||
getFilteredTeamStats,
|
||||
onViewTeamDetails,
|
||||
onExportTeamReport,
|
||||
}: AdminContentTabsProps) {
|
||||
return (
|
||||
<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={onViewTeamDetails}
|
||||
onExportTeamReport={onExportTeamReport}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<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={() => onViewTeamDetails(team)}
|
||||
onViewReport={() => onExportTeamReport(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>
|
||||
);
|
||||
}
|
||||
134
components/admin/overview/admin-overview-cards.tsx
Normal file
134
components/admin/overview/admin-overview-cards.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { Users, Target, Building2, UserCheck } from "lucide-react";
|
||||
import { Team, SkillCategory } from "@/lib/types";
|
||||
import { TeamStats, DirectionStats } from "@/services/admin-service";
|
||||
|
||||
interface AdminOverviewCardsProps {
|
||||
teams: Team[];
|
||||
skillCategories: SkillCategory[];
|
||||
teamStats: TeamStats[];
|
||||
directionStats: DirectionStats[];
|
||||
selectedDirections: string[];
|
||||
selectedTeams: string[];
|
||||
getFilteredTeamStats: () => TeamStats[];
|
||||
getFilteredDirectionStats: () => DirectionStats[];
|
||||
}
|
||||
|
||||
export function AdminOverviewCards({
|
||||
teams,
|
||||
skillCategories,
|
||||
teamStats,
|
||||
directionStats,
|
||||
selectedDirections,
|
||||
selectedTeams,
|
||||
getFilteredTeamStats,
|
||||
getFilteredDirectionStats,
|
||||
}: AdminOverviewCardsProps) {
|
||||
const hasFilters = selectedDirections.length > 0 || selectedTeams.length > 0;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
|
||||
<div className="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">
|
||||
{hasFilters ? "FILTRÉES" : "TOTAL"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{hasFilters ? getFilteredTeamStats().length : teams.length}
|
||||
</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
{hasFilters ? "Équipes filtrées" : "Équipes"}
|
||||
</p>
|
||||
{hasFilters && (
|
||||
<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">
|
||||
{hasFilters ? "FILTRÉS" : "TOTAL"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{hasFilters
|
||||
? getFilteredTeamStats().reduce(
|
||||
(sum, t) => sum + t.totalMembers,
|
||||
0
|
||||
)
|
||||
: teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
|
||||
</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
{hasFilters ? "Membres filtrés" : "Membres"}
|
||||
</p>
|
||||
{hasFilters && (
|
||||
<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">
|
||||
{hasFilters ? "FILTRÉES" : "TOTAL"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{hasFilters
|
||||
? getFilteredDirectionStats().length
|
||||
: directionStats.length}
|
||||
</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
{hasFilters ? "Directions filtrées" : "Directions"}
|
||||
</p>
|
||||
{hasFilters && (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
192
components/admin/overview/direction-overview.tsx
Normal file
192
components/admin/overview/direction-overview.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import { Building2, Users, TrendingUp, BarChart3, Target } from "lucide-react";
|
||||
import {
|
||||
TeamStatsCard,
|
||||
getSkillLevelLabel,
|
||||
getSkillLevelColor,
|
||||
} from "../team-detail/team-stats-card";
|
||||
|
||||
interface DirectionOverviewProps {
|
||||
direction: string;
|
||||
teams: Array<{
|
||||
teamId: string;
|
||||
teamName: string;
|
||||
direction: string;
|
||||
totalMembers: number;
|
||||
averageSkillLevel: number;
|
||||
topSkills: Array<{ skillName: string; averageLevel: number }>;
|
||||
skillCoverage: number;
|
||||
}>;
|
||||
totalMembers: number;
|
||||
averageSkillLevel: number;
|
||||
topCategories: Array<{ category: string; averageLevel: number }>;
|
||||
onViewTeamDetails?: (team: any) => void;
|
||||
onExportTeamReport?: (team: any) => void;
|
||||
}
|
||||
|
||||
export function DirectionOverview({
|
||||
direction,
|
||||
teams,
|
||||
totalMembers,
|
||||
averageSkillLevel,
|
||||
topCategories,
|
||||
onViewTeamDetails = () => {},
|
||||
onExportTeamReport = () => {},
|
||||
}: DirectionOverviewProps) {
|
||||
return (
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden">
|
||||
<div className="bg-white/5 border-b border-white/10 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
|
||||
<Building2 className="h-5 w-5 text-purple-400" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
Direction {direction}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-green-500/20 border border-green-500/30 rounded-xl">
|
||||
<Users className="h-3 w-3 text-green-400" />
|
||||
<span className="text-sm text-green-300 font-medium">
|
||||
{totalMembers}
|
||||
</span>
|
||||
</div>
|
||||
<div className="px-3 py-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
||||
<span className="text-sm text-blue-300 font-medium">
|
||||
Niveau: {getSkillLevelLabel(averageSkillLevel)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Direction Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Top Categories */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<BarChart3 className="h-4 w-4 text-slate-400" />
|
||||
<h4 className="text-sm font-medium text-slate-300">
|
||||
Top Catégories
|
||||
</h4>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{topCategories.slice(0, 4).map((cat, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
||||
>
|
||||
<span className="text-sm text-white">{cat.category}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${getSkillLevelColor(
|
||||
cat.averageLevel
|
||||
)}`}
|
||||
/>
|
||||
<span className="text-xs font-medium text-slate-300 min-w-8 text-right">
|
||||
{cat.averageLevel.toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overall Progress */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<TrendingUp className="h-4 w-4 text-slate-400" />
|
||||
<h4 className="text-sm font-medium text-slate-300">
|
||||
Progression Globale
|
||||
</h4>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-slate-400">
|
||||
Maîtrise globale:
|
||||
</span>
|
||||
<span className="text-lg font-bold text-white">
|
||||
{((averageSkillLevel / 3) * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/10 rounded-full h-2">
|
||||
<div
|
||||
className="bg-gradient-to-r from-blue-500 to-blue-400 h-2 rounded-full transition-all"
|
||||
style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-2 text-xs text-slate-500">
|
||||
Basé sur {teams.length} équipes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Distribution */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Target className="h-4 w-4 text-slate-400" />
|
||||
<h4 className="text-sm font-medium text-slate-300">
|
||||
Répartition
|
||||
</h4>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{teams.length}
|
||||
</div>
|
||||
<div className="text-xs text-slate-400">équipes actives</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-slate-400">Membres par équipe:</span>
|
||||
<span className="text-white font-medium">
|
||||
{(totalMembers / teams.length).toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-slate-400">Équipes performantes:</span>
|
||||
<span className="text-white font-medium">
|
||||
{teams.filter((t) => t.averageSkillLevel > 2).length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Teams Grid */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
||||
<Users className="h-4 w-4 text-blue-400" />
|
||||
</div>
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Équipes de la direction
|
||||
</h4>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{teams.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={() => onViewTeamDetails(team)}
|
||||
onViewReport={() => onExportTeamReport(team)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
components/admin/overview/index.ts
Normal file
5
components/admin/overview/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
// Composants de vue d'ensemble
|
||||
export { AdminClientWrapper } from "./admin-client-wrapper";
|
||||
export { AdminContentTabs } from "./admin-content-tabs";
|
||||
export { AdminOverviewCards } from "./admin-overview-cards";
|
||||
export { DirectionOverview } from "./direction-overview";
|
||||
Reference in New Issue
Block a user