feat: userr management

app/api/admin/users/[userId]/route.ts

@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getPool } from "@/services/database";
+import { isUserAuthenticated } from "@/lib/server-auth";
+
+// DELETE - Supprimer complètement un utilisateur
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ userId: string }> }
+) {
+  try {
+    // Vérifier l'authentification
+    const isAuthenticated = await isUserAuthenticated();
+    if (!isAuthenticated) {
+      return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+    }
+
+    const { userId } = await params;
+
+    if (!userId) {
+      return NextResponse.json(
+        { error: "L'ID de l'utilisateur est requis" },
+        { status: 400 }
+      );
+    }
+
+    const pool = getPool();
+
+    // Vérifier que l'utilisateur existe
+    const userCheck = await pool.query(
+      "SELECT uuid_id, first_name, last_name FROM users WHERE uuid_id = $1",
+      [userId]
+    );
+
+    if (userCheck.rows.length === 0) {
+      return NextResponse.json(
+        { error: "Utilisateur non trouvé" },
+        { status: 404 }
+      );
+    }
+
+    const user = userCheck.rows[0];
+
+    // Vérifier que l'utilisateur n'est pas dans une équipe
+    if (user.team_id) {
+      return NextResponse.json(
+        {
+          error:
+            "Impossible de supprimer un utilisateur qui appartient à une équipe. Retirez-le d'abord de son équipe.",
+        },
+        { status: 409 }
+      );
+    }
+
+    // Supprimer l'utilisateur (les évaluations par skills seront supprimées automatiquement grâce aux contraintes CASCADE)
+    await pool.query("DELETE FROM users WHERE uuid_id = $1", [userId]);
+
+    return NextResponse.json({
+      message: `Utilisateur ${user.first_name} ${user.last_name} supprimé avec succès`,
+    });
+  } catch (error) {
+    console.error("Error deleting user:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la suppression de l'utilisateur" },
+      { status: 500 }
+    );
+  }
+}

app/api/admin/users/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getPool } from "@/services/database";
+import { isUserAuthenticated } from "@/lib/server-auth";
+
+// GET - Récupérer la liste des utilisateurs
+export async function GET(request: NextRequest) {
+  try {
+    // Vérifier l'authentification
+    const isAuthenticated = await isUserAuthenticated();
+    if (!isAuthenticated) {
+      return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+    }
+
+    const pool = getPool();
+
+    // Récupérer tous les utilisateurs avec leurs informations d'équipe et d'évaluations
+    const query = `
+      SELECT 
+        u.uuid_id,
+        u.first_name,
+        u.last_name,
+        t.name as team_name,
+        CASE 
+          WHEN ue.id IS NOT NULL THEN true 
+          ELSE false 
+        END as has_evaluations
+      FROM users u
+      LEFT JOIN teams t ON u.team_id = t.id
+      LEFT JOIN user_evaluations ue ON u.uuid_id = ue.user_uuid
+      ORDER BY u.first_name, u.last_name
+    `;
+
+    const result = await pool.query(query);
+
+    const users = result.rows.map((row) => ({
+      uuid: row.uuid_id,
+      firstName: row.first_name,
+      lastName: row.last_name,
+      teamName: row.team_name,
+      hasEvaluations: row.has_evaluations,
+    }));
+
+    return NextResponse.json(users);
+  } catch (error) {
+    console.error("Error fetching users:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des utilisateurs" },
+      { status: 500 }
+    );
+  }
+}

components/admin/index.ts

@@ -13,3 +13,6 @@ export * from "./team-detail";
 
 // Composants utilitaires
 export * from "./utils";
+
+// Gestion des utilisateurs
+export { UsersManagement } from "./users-management";

components/admin/layout/manage-content-tabs.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Code2, Users } from "lucide-react";
+import { Code2, Users, User } from "lucide-react";
 import { Team, SkillCategory } from "@/lib/types";
 import { TeamStats, DirectionStats } from "@/services/admin-service";
 import { SkillsManagement } from "../management/pages/skills-management";
 import { TeamsManagement } from "../management/pages/teams-management";
+import { UsersManagement } from "../users-management";
 
 interface ManageContentTabsProps {
   teams: Team[];
@@ -23,7 +24,7 @@ export function ManageContentTabs({
   return (
     <Tabs defaultValue="skills" 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">
+        <TabsList className="grid w-full grid-cols-3 bg-transparent border-0">
           <TabsTrigger
             value="skills"
             className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
@@ -38,6 +39,13 @@ export function ManageContentTabs({
             <Users className="w-4 h-4 mr-2" />
             Gestion des Teams
           </TabsTrigger>
+          <TabsTrigger
+            value="users"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
+          >
+            <User className="w-4 h-4 mr-2" />
+            Gestion des Utilisateurs
+          </TabsTrigger>
         </TabsList>
       </div>
 
@@ -52,6 +60,10 @@ export function ManageContentTabs({
           skillCategories={skillCategories}
         />
       </TabsContent>
+
+      <TabsContent value="users" className="space-y-4">
+        <UsersManagement />
+      </TabsContent>
     </Tabs>
   );
 }

components/admin/users-management.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { Users, User, Trash2, Search, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import {
+  AdminManagementService,
+  Team,
+} from "@/services/admin-management-service";
+import {
+  TreeViewContainer,
+  TreeCategoryHeader,
+  TreeItemRow,
+  TreeSearchControls,
+} from "@/components/admin";
+
+interface User {
+  uuid: string;
+  firstName: string;
+  lastName: string;
+  teamName?: string;
+  hasEvaluations: boolean;
+}
+
+interface UserFormData {
+  firstName: string;
+  lastName: string;
+  teamId: string;
+}
+
+export function UsersManagement() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [userFormData, setUserFormData] = useState<UserFormData>({
+    firstName: "",
+    lastName: "",
+    teamId: "",
+  });
+  const { toast } = useToast();
+
+  // État pour les équipes ouvertes/fermées
+  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
+
+  // Grouper les utilisateurs par équipe et filtrer en fonction de la recherche
+  const filteredUsersByTeam = useMemo(() => {
+    // Grouper les utilisateurs par équipe
+    const usersByTeam = users.reduce((acc, user) => {
+      const teamKey = user.teamName || "Sans équipe";
+      if (!acc[teamKey]) {
+        acc[teamKey] = [];
+      }
+      acc[teamKey].push(user);
+      return acc;
+    }, {} as Record<string, User[]>);
+
+    // Filtrer les utilisateurs en fonction de la recherche
+    return Object.entries(usersByTeam).reduce((acc, [teamName, teamUsers]) => {
+      const filteredUsers = teamUsers.filter((user) => {
+        const matchesSearch =
+          user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          (user.teamName &&
+            user.teamName.toLowerCase().includes(searchTerm.toLowerCase()));
+        return matchesSearch;
+      });
+
+      if (filteredUsers.length > 0) {
+        acc[teamName] = filteredUsers;
+      }
+      return acc;
+    }, {} as Record<string, User[]>);
+  }, [users, searchTerm]);
+
+  useEffect(() => {
+    fetchUsers();
+    fetchTeams();
+  }, []);
+
+  const fetchUsers = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/admin/users");
+      if (!response.ok) {
+        throw new Error("Erreur lors de la récupération des utilisateurs");
+      }
+      const usersData = await response.json();
+      setUsers(usersData);
+    } catch (err: any) {
+      setError(err.message || "Erreur lors du chargement des utilisateurs");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchTeams = async () => {
+    try {
+      const teamsData = await AdminManagementService.getTeams();
+      setTeams(teamsData);
+    } catch (error) {
+      console.error("Error fetching teams:", error);
+    }
+  };
+
+  // Fonctions pour gérer l'expansion des équipes
+  const toggleTeam = useMemo(
+    () => (teamName: string) => {
+      setExpandedTeams((prev) => {
+        const newExpanded = new Set(prev);
+        if (newExpanded.has(teamName)) {
+          newExpanded.delete(teamName);
+        } else {
+          newExpanded.add(teamName);
+        }
+        return newExpanded;
+      });
+    },
+    []
+  );
+
+  const expandAll = useMemo(
+    () => () => {
+      setExpandedTeams(new Set(Object.keys(filteredUsersByTeam)));
+    },
+    [filteredUsersByTeam]
+  );
+
+  const collapseAll = useMemo(
+    () => () => {
+      setExpandedTeams(new Set());
+    },
+    []
+  );
+
+  // Ouvrir automatiquement les équipes qui contiennent des résultats lors de la recherche
+  useEffect(() => {
+    if (searchTerm.trim()) {
+      const teamsWithResults = Object.keys(filteredUsersByTeam);
+      setExpandedTeams(new Set(teamsWithResults));
+    }
+    // Ne pas fermer automatiquement les équipes si pas de recherche
+    // Cela évite que les équipes se ferment lors de la suppression d'utilisateurs
+  }, [searchTerm]); // Retiré filteredUsersByTeam de la dépendance
+
+  const handleCreateUser = async () => {
+    if (!userFormData.firstName || !userFormData.lastName) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      // TODO: Implémenter la création d'utilisateur
+      toast({
+        title: "Succès",
+        description: "Utilisateur créé avec succès",
+      });
+
+      setUserFormData({ firstName: "", lastName: "", teamId: "" });
+      setIsCreateDialogOpen(false);
+
+      // Rafraîchir la liste
+      fetchUsers();
+    } catch (error: any) {
+      toast({
+        title: "Erreur",
+        description:
+          error.message || "Erreur lors de la création de l'utilisateur",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleDeleteUser = async (user: User) => {
+    if (user.teamName) {
+      toast({
+        title: "Action impossible",
+        description:
+          "Retirez d'abord l'utilisateur de son équipe avant de le supprimer",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (
+      !confirm(
+        `Êtes-vous sûr de vouloir supprimer définitivement ${user.firstName} ${user.lastName} ?\n\nCette action supprimera aussi toutes ses évaluations par skills et est irréversible.`
+      )
+    ) {
+      return;
+    }
+
+    setDeletingUserId(user.uuid);
+    try {
+      await AdminManagementService.deleteUser(user.uuid);
+
+      // Mettre à jour la liste locale
+      setUsers((prev) => prev.filter((u) => u.uuid !== user.uuid));
+
+      toast({
+        title: "Succès",
+        description: `${user.firstName} ${user.lastName} a été supprimé avec succès`,
+      });
+    } catch (err: any) {
+      toast({
+        title: "Erreur",
+        description:
+          err.message || "Erreur lors de la suppression de l'utilisateur",
+        variant: "destructive",
+      });
+    } finally {
+      setDeletingUserId(null);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold text-white">
+            Gestion des utilisateurs
+          </h2>
+          <Button disabled>
+            <Users className="w-4 h-4 mr-2" />
+            Créer un utilisateur
+          </Button>
+        </div>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-center gap-3 p-3">
+              <div className="w-8 h-8 rounded-full bg-slate-700 animate-pulse" />
+              <div className="flex-1 space-y-2">
+                <div className="h-4 bg-slate-700 rounded animate-pulse w-32" />
+                <div className="h-3 bg-slate-700 rounded animate-pulse w-24" />
+              </div>
+              <div className="w-20 h-8 bg-slate-700 rounded animate-pulse" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold text-white">
+            Gestion des utilisateurs
+          </h2>
+        </div>
+        <div className="text-center py-8">
+          <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
+            <Users className="w-6 h-6 text-red-400" />
+          </div>
+          <p className="text-red-400 mb-4">{error}</p>
+          <Button onClick={fetchUsers} variant="outline">
+            Réessayer
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* En-tête avec bouton de création */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold text-white">
+          Gestion des utilisateurs
+        </h2>
+        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Users className="w-4 h-4 mr-2" />
+              Créer un utilisateur
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[500px]">
+            <DialogHeader>
+              <DialogTitle>Créer un nouvel utilisateur</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="user-first-name">Prénom *</Label>
+                <Input
+                  id="user-first-name"
+                  value={userFormData.firstName}
+                  onChange={(e) =>
+                    setUserFormData({
+                      ...userFormData,
+                      firstName: e.target.value,
+                    })
+                  }
+                  placeholder="Prénom de l'utilisateur"
+                />
+              </div>
+              <div>
+                <Label htmlFor="user-last-name">Nom *</Label>
+                <Input
+                  id="user-last-name"
+                  value={userFormData.lastName}
+                  onChange={(e) =>
+                    setUserFormData({
+                      ...userFormData,
+                      lastName: e.target.value,
+                    })
+                  }
+                  placeholder="Nom de l'utilisateur"
+                />
+              </div>
+              <div>
+                <Label htmlFor="user-team">Équipe</Label>
+                <Select
+                  value={userFormData.teamId}
+                  onValueChange={(value) =>
+                    setUserFormData({ ...userFormData, teamId: value })
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Sélectionner une équipe (optionnel)" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="">Aucune équipe</SelectItem>
+                    {teams.map((team) => (
+                      <SelectItem key={team.id} value={team.id}>
+                        {team.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex justify-end gap-2 pt-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsCreateDialogOpen(false)}
+                >
+                  Annuler
+                </Button>
+                <Button onClick={handleCreateUser}>Créer</Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* Filtres et contrôles */}
+      <TreeSearchControls
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+        onExpandAll={expandAll}
+        onCollapseAll={collapseAll}
+        placeholder="Rechercher un utilisateur..."
+      />
+
+      {/* Vue arborescente des utilisateurs */}
+      <TreeViewContainer
+        hasContent={Object.keys(filteredUsersByTeam).length > 0}
+        emptyState={
+          <div className="text-center py-8">
+            <Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
+            <h3 className="text-base font-medium text-slate-400 mb-1">
+              {searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
+            </h3>
+            <p className="text-sm text-slate-500">
+              {searchTerm
+                ? "Essayez de modifier vos critères de recherche"
+                : "Commencez par créer votre premier utilisateur"}
+            </p>
+          </div>
+        }
+      >
+        {Object.entries(filteredUsersByTeam).map(
+          ([teamName, teamUsers], index) => (
+            <div key={teamName}>
+              <TreeCategoryHeader
+                category={teamName}
+                isExpanded={expandedTeams.has(teamName)}
+                onToggle={() => toggleTeam(teamName)}
+                icon={<Building2 className="w-5 h-5 text-blue-400" />}
+                itemCount={teamUsers.length}
+                itemLabel="utilisateur"
+                showSeparator={index > 0}
+                canDelete={false}
+                isDirection={false}
+              />
+
+              {/* Liste des utilisateurs de l'équipe */}
+              {expandedTeams.has(teamName) && (
+                <div className="bg-slate-950/30">
+                  {teamUsers.map((user, userIndex) => (
+                    <TreeItemRow
+                      key={user.uuid}
+                      icon={<User className="w-5 h-5 text-green-400" />}
+                      title={`${user.firstName} ${user.lastName}`}
+                      badges={[
+                        {
+                          text: user.hasEvaluations
+                            ? "A des évaluations"
+                            : "Aucune évaluation",
+                          variant: user.hasEvaluations ? "default" : "outline",
+                        },
+                      ]}
+                      onDelete={() => handleDeleteUser(user)}
+                      canDelete={!user.teamName}
+                      showSeparator={userIndex > 0}
+                      additionalInfo={
+                        <p className="text-slate-500 text-xs">
+                          {user.teamName
+                            ? `Équipe: ${user.teamName}`
+                            : "Aucune équipe"}
+                        </p>
+                      }
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        )}
+      </TreeViewContainer>
+    </div>
+  );
+}

services/admin-management-service.ts

@@ -178,4 +178,16 @@ export class AdminManagementService {
       throw new Error(error.error || "Failed to remove team member");
     }
   }
+
+  // User Management
+  static async deleteUser(userId: string): Promise<void> {
+    const response = await fetch(`${this.baseUrl}/users/${userId}`, {
+      method: "DELETE",
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || "Failed to delete user");
+    }
+  }
 }