refactor: SSR on skills management

app/admin/manage/skills/page.tsx

@@ -4,10 +4,15 @@ import { SkillsManagementPage } from "@/components/admin/skills";
 export default async function SkillsPage() {
   // Charger les données côté serveur
   try {
-    const { skillCategories, teams } = await AdminService.getAdminData();
+    const { skillCategories, teams, skills } =
+      await AdminService.getAdminData();
 
     return (
-      <SkillsManagementPage skillCategories={skillCategories} teams={teams} />
+      <SkillsManagementPage
+        skillCategories={skillCategories}
+        teams={teams}
+        initialSkills={skills}
+      />
     );
   } catch (error) {
     console.error("Failed to load admin data:", error);

app/api/admin/skills/route.ts

@@ -4,20 +4,6 @@ import { SkillsService } from "@/services/skills-service";
 // Configuration pour éviter la génération statique
 export const dynamic = "force-dynamic";
 
-// GET - Récupérer toutes les skills
-export async function GET() {
-  try {
-    const skills = await SkillsService.getAllSkillsWithUsage();
-    return NextResponse.json(skills);
-  } catch (error) {
-    console.error("Error fetching skills:", error);
-    return NextResponse.json(
-      { error: "Erreur lors de la récupération des skills" },
-      { status: 500 }
-    );
-  }
-}
-
 // POST - Créer une nouvelle skill
 export async function POST(request: NextRequest) {
   try {

clients/domains/admin-client.ts

@@ -41,10 +41,6 @@ export interface User {
 
 export class AdminClient extends BaseHttpClient {
   // Skills Management
-  async getSkills(): Promise<Skill[]> {
-    return await this.get<Skill[]>(`/admin/skills`);
-  }
-
   async createSkill(
     skillData: Omit<Skill, "id" | "usageCount">
   ): Promise<Skill> {

components/admin/skills/skills-management-page.tsx

@@ -15,11 +15,13 @@ import { SkillsList } from "./skills-list";
 interface SkillsManagementPageProps {
   skillCategories: SkillCategory[];
   teams: Team[];
+  initialSkills: any[];
 }
 
 export function SkillsManagementPage({
   skillCategories,
   teams,
+  initialSkills,
 }: SkillsManagementPageProps) {
   const [searchTerm, setSearchTerm] = useState("");
   const {
@@ -43,7 +45,7 @@ export function SkillsManagementPage({
     handleEditSkill,
     handleUpdateSkill,
     handleDeleteSkill,
-  } = useSkillsManagement(skillCategories);
+  } = useSkillsManagement(skillCategories, initialSkills);
 
   // Utilisation du hook factorisé pour la vue arborescente
   const {

hooks/use-skills-management.ts

@@ -11,9 +11,12 @@ interface SkillFormData {
   icon: string;
 }
 
-export function useSkillsManagement(skillCategories: SkillCategory[]) {
+export function useSkillsManagement(
-  const [skills, setSkills] = useState<Skill[]>([]);
+  skillCategories: SkillCategory[],
-  const [isLoading, setIsLoading] = useState(true);
+  initialSkills?: any[]
+) {
+  const [skills, setSkills] = useState<Skill[]>(initialSkills || []);
+  const [isLoading, setIsLoading] = useState(!initialSkills);
   const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
   const [skillFormData, setSkillFormData] = useState<SkillFormData>({
     name: "",
@@ -24,7 +27,9 @@ export function useSkillsManagement(skillCategories: SkillCategory[]) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { toast } = useToast();
 
-  // Charger les skills depuis l'API
+  // Charger les skills depuis l'API si pas de skills initiales
+  useEffect(() => {
+    if (!initialSkills) {
       const fetchSkills = async () => {
         try {
           setIsLoading(true);
@@ -41,11 +46,9 @@ export function useSkillsManagement(skillCategories: SkillCategory[]) {
           setIsLoading(false);
         }
       };
-
-  // Charger les skills au montage du composant
-  useEffect(() => {
       fetchSkills();
-  }, []);
+    }
+  }, [initialSkills]);
 
   const resetForm = () => {
     setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });

services/admin-service.ts

@@ -1,6 +1,7 @@
 import { getPool } from "./database";
 import { Team, SkillCategory } from "@/lib/types";
 import { TeamMember, TeamStats, DirectionStats } from "@/lib/admin-types";
+import { SkillsService } from "./skills-service";
 
 export class AdminService {
   /**
@@ -197,17 +198,22 @@ export class AdminService {
     skillCategories: SkillCategory[];
     teamStats: TeamStats[];
     directionStats: DirectionStats[];
+    skills: any[];
   }> {
     const pool = getPool();
 
     try {
       // Récupérer toutes les données en parallèle
-      const [teamsResult, categoriesResult, teamStats] = await Promise.all([
+      const [teamsResult, categoriesResult, teamStats, skills] =
+        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"),
+          pool.query(
+            "SELECT id, name, icon FROM skill_categories ORDER BY name"
+          ),
           AdminService.getTeamsStats(),
+          SkillsService.getAllSkillsWithUsage(),
         ]);
 
       const teams = teamsResult.rows;
@@ -224,6 +230,7 @@ export class AdminService {
         skillCategories,
         teamStats,
         directionStats,
+        skills,
       };
     } catch (error) {
       console.error("Error fetching admin data:", error);