feat: handling SSR on home page

app/login/page.tsx

@@ -5,7 +5,16 @@ import { useRouter } from "next/navigation";
 import { ProfileForm } from "@/components/profile-form";
 import { AuthService } from "@/lib/auth-utils";
 import { UserProfile, Team } from "@/lib/types";
-import { Code2 } from "lucide-react";
+import { Code2, LogOut, Edit, X, Home } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
 
 interface LoginPageProps {}
 
@@ -13,17 +22,16 @@ export default function LoginPage({}: LoginPageProps) {
   const [teams, setTeams] = useState<Team[]>([]);
   const [loading, setLoading] = useState(true);
   const [authenticating, setAuthenticating] = useState(false);
+  const [currentUser, setCurrentUser] = useState<UserProfile | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
     async function initialize() {
       try {
         // Vérifier si l'utilisateur est déjà connecté
-        const currentUser = await AuthService.getCurrentUser();
+        const user = await AuthService.getCurrentUser();
-        if (currentUser) {
+        setCurrentUser(user);
-          router.push("/");
-          return;
-        }
 
         // Charger les équipes
         const teamsResponse = await fetch("/api/teams");
@@ -39,13 +47,20 @@ export default function LoginPage({}: LoginPageProps) {
     }
 
     initialize();
-  }, [router]);
+  }, []);
 
   const handleSubmit = async (profile: UserProfile) => {
     setAuthenticating(true);
     try {
       await AuthService.login(profile);
-      router.push("/");
+      if (isEditing) {
+        // Si on modifie le profil existant, mettre à jour l'état
+        setCurrentUser(profile);
+        setIsEditing(false);
+      } else {
+        // Si c'est un nouveau login, rediriger
+        router.push("/");
+      }
     } catch (error) {
       console.error("Login failed:", error);
       // Vous pouvez ajouter une notification d'erreur ici
@@ -54,6 +69,24 @@ export default function LoginPage({}: LoginPageProps) {
     }
   };
 
+  const handleLogout = async () => {
+    try {
+      await AuthService.logout();
+      setCurrentUser(null);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Logout failed:", error);
+    }
+  };
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
@@ -72,6 +105,100 @@ export default function LoginPage({}: LoginPageProps) {
     );
   }
 
+  // Si l'utilisateur est connecté et qu'on ne modifie pas
+  if (currentUser && !isEditing) {
+    const currentTeam = teams.find((t) => t.id === currentUser.teamId);
+
+    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 py-16 px-6">
+          <div className="text-center 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 mb-6">
+              <Code2 className="h-4 w-4 text-blue-400" />
+              <span className="text-sm font-medium text-slate-200">
+                PeakSkills
+              </span>
+            </div>
+
+            <h1 className="text-4xl font-bold mb-4 text-white">
+              Vous êtes connecté
+            </h1>
+            <p className="text-lg text-slate-400 mb-8">
+              Gérez votre profil ou retournez à l'application
+            </p>
+          </div>
+
+          <div className="max-w-2xl mx-auto space-y-6">
+            {/* Informations utilisateur */}
+            <Card className="bg-white/5 border-white/10 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="text-white">Vos informations</CardTitle>
+                <CardDescription className="text-slate-400">
+                  Profil actuellement connecté
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-sm font-medium text-slate-300">
+                      Prénom
+                    </label>
+                    <p className="text-white">{currentUser.firstName}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-slate-300">
+                      Nom
+                    </label>
+                    <p className="text-white">{currentUser.lastName}</p>
+                  </div>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-slate-300">
+                    Équipe
+                  </label>
+                  <p className="text-white">
+                    {currentTeam?.name || "Équipe non trouvée"}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Actions */}
+            <div className="flex gap-4 justify-center">
+              <Button
+                onClick={() => router.push("/")}
+                className="bg-blue-500 hover:bg-blue-600 text-white"
+              >
+                <Home className="w-4 h-4 mr-2" />
+                Retour à l'accueil
+              </Button>
+              <Button
+                onClick={handleEdit}
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
+                <Edit className="w-4 h-4 mr-2" />
+                Modifier le profil
+              </Button>
+              <Button
+                onClick={handleLogout}
+                variant="outline"
+                className="border-red-500/50 text-red-400 hover:bg-red-500/10"
+              >
+                <LogOut className="w-4 h-4 mr-2" />
+                Se déconnecter
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Sinon, afficher le formulaire (nouvel utilisateur ou modification)
   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" />
@@ -87,11 +214,26 @@ export default function LoginPage({}: LoginPageProps) {
           </div>
 
           <h1 className="text-4xl font-bold mb-4 text-white">
-            Bienvenue sur PeakSkills
+            {isEditing
+              ? "Modifier vos informations"
+              : "Bienvenue sur PeakSkills"}
           </h1>
           <p className="text-lg text-slate-400 mb-8">
-            Évaluez vos compétences techniques et suivez votre progression
+            {isEditing
+              ? "Mettez à jour vos informations personnelles"
+              : "Évaluez vos compétences techniques et suivez votre progression"}
           </p>
+
+          {isEditing && (
+            <Button
+              onClick={handleCancelEdit}
+              variant="outline"
+              className="mb-8 border-white/20 text-white hover:bg-white/10"
+            >
+              <X className="w-4 h-4 mr-2" />
+              Annuler
+            </Button>
+          )}
         </div>
 
         <div className="max-w-2xl mx-auto">
@@ -100,11 +242,21 @@ export default function LoginPage({}: LoginPageProps) {
               <div className="absolute inset-0 bg-black/20 backdrop-blur-sm z-10 flex items-center justify-center rounded-lg">
                 <div className="text-center">
                   <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-400 mx-auto mb-2"></div>
-                  <p className="text-white text-sm">Connexion en cours...</p>
+                  <p className="text-white text-sm">
+                    {isEditing
+                      ? "Mise à jour en cours..."
+                      : "Connexion en cours..."}
+                  </p>
                 </div>
               </div>
             )}
-            <ProfileForm teams={teams} onSubmit={handleSubmit} />
+            <ProfileForm
+              teams={teams}
+              onSubmit={handleSubmit}
+              initialProfile={
+                isEditing && currentUser ? currentUser : undefined
+              }
+            />
           </div>
         </div>
       </div>

app/page.tsx

@@ -1,352 +1,77 @@
-"use client";
+import { redirect } from "next/navigation";
-
-import { useEffect, useState } from "react";
-import { useEvaluation } from "@/hooks/use-evaluation";
-import { SkillsRadarChart } from "@/components/radar-chart";
 import {
-  Card,
+  isUserAuthenticated,
-  CardContent,
+  getServerUserEvaluation,
-  CardDescription,
+  getServerSkillCategories,
-  CardHeader,
+  getServerTeams,
-  CardTitle,
+} from "@/lib/server-auth";
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { generateRadarData } from "@/lib/evaluation-utils";
-import { useUser } from "@/hooks/use-user-context";
+import {
-import { TechIcon } from "@/components/icons/tech-icon";
+  WelcomeHeader,
-import Link from "next/link";
+  RadarSection,
-import { Code2, ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+  CategoryBreakdown,
-import { getCategoryIcon } from "@/lib/category-icons";
+  ActionSection,
+  ClientWrapper,
+  WelcomeScreen,
+} from "@/components/home";
 
-// Fonction pour déterminer la couleur du badge selon le niveau moyen
+export default async function HomePage() {
-function getScoreColors(score: number) {
+  // Vérifier l'authentification
-  if (score >= 2.5) {
+  const isAuthenticated = await isUserAuthenticated();
-    // Expert/Maîtrise (violet)
-    return {
-      bg: "bg-violet-500/20",
-      border: "border-violet-500/30",
-      text: "text-violet-400",
-      gradient: "from-violet-500 to-violet-400",
-    };
-  } else if (score >= 1.5) {
-    // Autonome (vert)
-    return {
-      bg: "bg-green-500/20",
-      border: "border-green-500/30",
-      text: "text-green-400",
-      gradient: "from-green-500 to-green-400",
-    };
-  } else if (score >= 0.5) {
-    // Non autonome (orange/amber)
-    return {
-      bg: "bg-amber-500/20",
-      border: "border-amber-500/30",
-      text: "text-amber-400",
-      gradient: "from-amber-500 to-amber-400",
-    };
-  } else {
-    // Jamais pratiqué (rouge)
-    return {
-      bg: "bg-red-500/20",
-      border: "border-red-500/30",
-      text: "text-red-400",
-      gradient: "from-red-500 to-red-400",
-    };
-  }
-}
 
-export default function HomePage() {
+  // Si pas de cookie d'authentification, rediriger vers login
-  const { userEvaluation, skillCategories, teams, loading } = useEvaluation();
+  if (!isAuthenticated) {
-
+    redirect("/login");
-  const { setUserInfo } = useUser();
-  const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
-
-  // Update user info in navigation when user evaluation is loaded
-  useEffect(() => {
-    if (userEvaluation) {
-      const teamName =
-        teams.find((t) => t.id === userEvaluation.profile.teamId)?.name || "";
-      setUserInfo({
-        firstName: userEvaluation.profile.firstName,
-        lastName: userEvaluation.profile.lastName,
-        teamName,
-      });
-    } else {
-      setUserInfo(null);
-    }
-  }, [userEvaluation, teams, setUserInfo]);
-
-  if (loading) {
-    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 py-16 px-6">
-          <div className="flex items-center justify-center min-h-[400px]">
-            <div className="text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400 mx-auto mb-4"></div>
-              <p className="text-white">Chargement...</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
   }
 
+  // Charger les données côté serveur
+  const [userEvaluation, skillCategories, teams] = await Promise.all([
+    getServerUserEvaluation(),
+    getServerSkillCategories(),
+    getServerTeams(),
+  ]);
+
+  // Si pas d'évaluation, afficher l'écran d'accueil
   if (!userEvaluation) {
-    return (
+    return <WelcomeScreen />;
-      <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 py-16 px-6">
-          <div className="flex items-center justify-center min-h-[400px]">
-            <div className="text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400 mx-auto mb-4"></div>
-              <p className="text-white">
-                Redirection vers la page de connexion...
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
   }
 
+  // Générer les données radar côté serveur
   const radarData = generateRadarData(
     userEvaluation.evaluations,
     skillCategories
   );
 
+  // Tout en server-side, seul le ClientWrapper gère setUserInfo
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+    <ClientWrapper userEvaluation={userEvaluation} teams={teams}>
-      {/* Background Effects */}
+      <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" />
+        {/* Background Effects */}
-      <div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
+        <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-gradient-to-t from-slate-950 via-transparent to-transparent" />
+        <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">
+        <div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl space-y-8">
-        {/* Header */}
+          {/* Header */}
-        <div className="text-center space-y-4 mb-12">
+          <WelcomeHeader firstName={userEvaluation.profile.firstName} />
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
+
-            <Code2 className="h-4 w-4 text-blue-400" />
+          {/* Main Content Grid */}
-            <span className="text-sm font-medium text-slate-200">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-              Tableau de bord
+            {/* Radar Chart */}
-            </span>
+            <RadarSection radarData={radarData} />
+
+            {/* Category Breakdown */}
+            <CategoryBreakdown
+              radarData={radarData}
+              userEvaluation={userEvaluation}
+              skillCategories={skillCategories}
+            />
           </div>
 
-          <h1 className="text-4xl font-bold text-white">
+          {/* Action Button */}
-            Bonjour {userEvaluation.profile.firstName} !
+          <ActionSection />
-          </h1>
-
-          <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
-            Voici un aperçu de vos compétences techniques
-          </p>
-        </div>
-
-        {/* Main Content Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          {/* Radar Chart */}
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
-            <div className="mb-6">
-              <h3 className="text-xl font-bold text-white mb-2">
-                Vue d'ensemble de vos compétences
-              </h3>
-              <p className="text-slate-400 text-sm">
-                Radar chart représentant votre niveau par catégorie
-              </p>
-            </div>
-            <div className="h-80">
-              <SkillsRadarChart data={radarData} />
-            </div>
-          </div>
-
-          {/* Category Breakdown */}
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
-            <div className="mb-6">
-              <h3 className="text-xl font-bold text-white mb-2">
-                Détail par catégorie
-              </h3>
-              <p className="text-slate-400 text-sm">
-                Vue détaillée de votre progression dans chaque domaine
-              </p>
-            </div>
-            <div className="space-y-3">
-              {radarData.map((category) => {
-                const categoryEval = userEvaluation.evaluations.find(
-                  (e) => e.category === category.category
-                );
-                const skillsCount = categoryEval?.selectedSkillIds?.length || 0;
-                const evaluatedCount =
-                  categoryEval?.skills.filter((s) => s.level !== null).length ||
-                  0;
-                const isExpanded = expandedCategory === category.category;
-                const currentSkillCategory = skillCategories.find(
-                  (sc) => sc.category === category.category
-                );
-                const CategoryIcon = currentSkillCategory
-                  ? getCategoryIcon(currentSkillCategory.icon)
-                  : null;
-
-                return (
-                  <div
-                    key={category.category}
-                    className="bg-white/5 border border-white/10 rounded-lg overflow-hidden transition-colors"
-                  >
-                    <div
-                      className="p-3 hover:bg-white/10 transition-colors cursor-pointer"
-                      onClick={() =>
-                        setExpandedCategory(
-                          isExpanded ? null : category.category
-                        )
-                      }
-                    >
-                      <div className="flex justify-between items-center mb-2">
-                        <div className="flex items-center gap-2">
-                          {isExpanded ? (
-                            <ChevronDown className="h-4 w-4 text-slate-400" />
-                          ) : (
-                            <ChevronRight className="h-4 w-4 text-slate-400" />
-                          )}
-                          {CategoryIcon && (
-                            <CategoryIcon className="h-4 w-4 text-blue-400" />
-                          )}
-                          <h4 className="font-medium text-white text-sm">
-                            {category.category}
-                          </h4>
-                        </div>
-                        {skillsCount > 0 ? (
-                          (() => {
-                            const colors = getScoreColors(category.score);
-                            return (
-                              <div
-                                className={`px-2 py-0.5 rounded-full ${colors.bg} border ${colors.border}`}
-                              >
-                                <span
-                                  className={`text-xs font-medium ${colors.text}`}
-                                >
-                                  {Math.round((category.score / 3) * 100)}%
-                                </span>
-                              </div>
-                            );
-                          })()
-                        ) : (
-                          <div className="px-2 py-0.5 rounded-full bg-slate-500/20 border border-slate-500/30">
-                            <span className="text-xs font-medium text-slate-400">
-                              Aucune
-                            </span>
-                          </div>
-                        )}
-                      </div>
-                      <div className="text-xs text-slate-400 mb-2">
-                        {skillsCount > 0
-                          ? `${evaluatedCount}/${skillsCount} compétences sélectionnées évaluées`
-                          : "Aucune compétence sélectionnée"}
-                      </div>
-                      {skillsCount > 0 ? (
-                        <div className="w-full bg-white/10 rounded-full h-1.5">
-                          {(() => {
-                            const colors = getScoreColors(category.score);
-                            return (
-                              <div
-                                className={`bg-gradient-to-r ${colors.gradient} h-1.5 rounded-full transition-all`}
-                                style={{
-                                  width: `${
-                                    (category.score / category.maxScore) * 100
-                                  }%`,
-                                }}
-                              ></div>
-                            );
-                          })()}
-                        </div>
-                      ) : (
-                        <div className="w-full bg-slate-500/10 rounded-full h-1.5"></div>
-                      )}
-                    </div>
-
-                    {/* Expanded Skills */}
-                    {isExpanded && categoryEval && currentSkillCategory && (
-                      <div className="px-3 pb-3 border-t border-white/10 bg-white/5">
-                        <div className="pt-3 space-y-2 max-h-60 overflow-y-auto">
-                          {categoryEval.selectedSkillIds.map((skillId) => {
-                            const skill = currentSkillCategory.skills.find(
-                              (s) => s.id === skillId
-                            );
-                            if (!skill) return null;
-
-                            const skillEval = categoryEval.skills.find(
-                              (s) => s.skillId === skillId
-                            );
-                            return (
-                              <div
-                                key={skillId}
-                                className="flex items-center justify-between p-2 bg-white/5 border border-white/10 rounded-lg"
-                              >
-                                <div className="flex items-center gap-2">
-                                  <TechIcon
-                                    iconName={skill.icon}
-                                    className="w-4 h-4 text-blue-400"
-                                    fallbackText={skill.name}
-                                  />
-                                  <span className="text-sm text-white">
-                                    {skill.name}
-                                  </span>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                  {skillEval?.level && (
-                                    <span className="text-xs text-slate-400">
-                                      {skillEval.level === "never" &&
-                                        "Jamais utilisé"}
-                                      {skillEval.level === "not-autonomous" &&
-                                        "Non autonome"}
-                                      {skillEval.level === "autonomous" &&
-                                        "Autonome"}
-                                      {skillEval.level === "expert" && "Expert"}
-                                    </span>
-                                  )}
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-
-                        <div className="mt-3 pt-3 border-t border-white/10">
-                          <Button
-                            asChild
-                            className="w-full bg-blue-500 hover:bg-blue-600 text-white"
-                          >
-                            <Link
-                              href={`/evaluation?category=${encodeURIComponent(
-                                category.category
-                              )}`}
-                            >
-                              <ExternalLink className="w-4 h-4 mr-2" />
-                              Évaluer {category.category}
-                            </Link>
-                          </Button>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {/* Action Button */}
-        <div className="flex justify-center mt-12">
-          <Button
-            asChild
-            size="lg"
-            className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-xl"
-          >
-            <Link href="/evaluation">Continuer l'évaluation</Link>
-          </Button>
         </div>
       </div>
-    </div>
+    </ClientWrapper>
   );
 }

components/home/action-section.tsx

@@ -0,0 +1,16 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export function ActionSection() {
+  return (
+    <div className="flex justify-center mt-12">
+      <Button
+        asChild
+        size="lg"
+        className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-xl"
+      >
+        <Link href="/evaluation">Continuer l'évaluation</Link>
+      </Button>
+    </div>
+  );
+}

components/home/category-breakdown.tsx

@@ -0,0 +1,66 @@
+import { CategoryCard } from "./category-card";
+
+interface CategoryBreakdownProps {
+  radarData: Array<{
+    category: string;
+    score: number;
+    maxScore: number;
+  }>;
+  userEvaluation: {
+    evaluations: Array<{
+      category: string;
+      selectedSkillIds: string[];
+      skills: Array<{
+        skillId: string;
+        level: string | null;
+      }>;
+    }>;
+  };
+  skillCategories: Array<{
+    category: string;
+    icon: string;
+    skills: Array<{
+      id: string;
+      name: string;
+      icon?: string;
+    }>;
+  }>;
+}
+
+export function CategoryBreakdown({
+  radarData,
+  userEvaluation,
+  skillCategories,
+}: CategoryBreakdownProps) {
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+      <div className="mb-6">
+        <h3 className="text-xl font-bold text-white mb-2">
+          Détail par catégorie
+        </h3>
+        <p className="text-slate-400 text-sm">
+          Vue détaillée de votre progression dans chaque domaine
+        </p>
+      </div>
+      <div className="space-y-3">
+        {radarData.map((category) => {
+          const categoryEval = userEvaluation.evaluations.find(
+            (e) => e.category === category.category
+          );
+          const skillCategory = skillCategories.find(
+            (sc) => sc.category === category.category
+          );
+
+          return (
+            <CategoryCard
+              key={category.category}
+              category={category}
+              categoryEval={categoryEval}
+              skillCategory={skillCategory}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/home/category-card.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { getCategoryIcon } from "@/lib/category-icons";
+import { getScoreColors } from "@/lib/score-utils";
+import { SkillProgress } from "./skill-progress";
+import Link from "next/link";
+
+interface CategoryCardProps {
+  category: {
+    category: string;
+    score: number;
+    maxScore: number;
+  };
+  categoryEval?: {
+    category: string;
+    selectedSkillIds: string[];
+    skills: Array<{
+      skillId: string;
+      level: string | null;
+    }>;
+  };
+  skillCategory?: {
+    category: string;
+    icon: string;
+    skills: Array<{
+      id: string;
+      name: string;
+      icon?: string;
+    }>;
+  };
+}
+
+export function CategoryCard({
+  category,
+  categoryEval,
+  skillCategory,
+}: CategoryCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const skillsCount = categoryEval?.selectedSkillIds?.length || 0;
+  const evaluatedCount =
+    categoryEval?.skills.filter((s) => s.level !== null).length || 0;
+
+  const CategoryIcon = skillCategory
+    ? getCategoryIcon(skillCategory.icon)
+    : null;
+
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-lg overflow-hidden transition-colors">
+      <div
+        className="p-3 hover:bg-white/10 transition-colors cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex justify-between items-center mb-2">
+          <div className="flex items-center gap-2">
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4 text-slate-400" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-slate-400" />
+            )}
+            {CategoryIcon && <CategoryIcon className="h-4 w-4 text-blue-400" />}
+            <h4 className="font-medium text-white text-sm">
+              {category.category}
+            </h4>
+          </div>
+          {skillsCount > 0 ? (
+            (() => {
+              const colors = getScoreColors(category.score);
+              return (
+                <div
+                  className={`px-2 py-0.5 rounded-full ${colors.bg} border ${colors.border}`}
+                >
+                  <span className={`text-xs font-medium ${colors.text}`}>
+                    {Math.round((category.score / 3) * 100)}%
+                  </span>
+                </div>
+              );
+            })()
+          ) : (
+            <div className="px-2 py-0.5 rounded-full bg-slate-500/20 border border-slate-500/30">
+              <span className="text-xs font-medium text-slate-400">Aucune</span>
+            </div>
+          )}
+        </div>
+        <div className="text-xs text-slate-400 mb-2">
+          {skillsCount > 0
+            ? `${evaluatedCount}/${skillsCount} compétences sélectionnées évaluées`
+            : "Aucune compétence sélectionnée"}
+        </div>
+        {skillsCount > 0 ? (
+          <div className="w-full bg-white/10 rounded-full h-1.5">
+            {(() => {
+              const colors = getScoreColors(category.score);
+              return (
+                <div
+                  className={`bg-gradient-to-r ${colors.gradient} h-1.5 rounded-full transition-all`}
+                  style={{
+                    width: `${(category.score / category.maxScore) * 100}%`,
+                  }}
+                ></div>
+              );
+            })()}
+          </div>
+        ) : (
+          <div className="w-full bg-slate-500/10 rounded-full h-1.5"></div>
+        )}
+      </div>
+
+      {/* Expanded Skills */}
+      {isExpanded && (
+        <div className="px-3 pb-3 border-t border-white/10 bg-white/5">
+          {categoryEval && skillCategory && skillsCount > 0 ? (
+            <div className="pt-3 space-y-2 max-h-60 overflow-y-auto">
+              {categoryEval.selectedSkillIds.map((skillId) => {
+                const skill = skillCategory.skills.find(
+                  (s) => s.id === skillId
+                );
+                if (!skill) return null;
+
+                const skillEval = categoryEval.skills.find(
+                  (s) => s.skillId === skillId
+                );
+                return (
+                  <SkillProgress
+                    key={skillId}
+                    skill={skill}
+                    skillEval={skillEval}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div className="pt-3 pb-3 text-center">
+              <p className="text-slate-400 text-sm mb-3">
+                Aucune compétence sélectionnée dans cette catégorie
+              </p>
+            </div>
+          )}
+
+          <div
+            className={`${
+              skillsCount > 0 ? "mt-3 pt-3 border-t border-white/10" : ""
+            }`}
+          >
+            <Button
+              asChild
+              className="w-full bg-blue-500 hover:bg-blue-600 text-white"
+            >
+              <Link
+                href={`/evaluation?category=${encodeURIComponent(
+                  category.category
+                )}`}
+              >
+                <ExternalLink className="w-4 h-4 mr-2" />
+                {skillsCount > 0
+                  ? `Évaluer ${category.category}`
+                  : `Commencer l'évaluation ${category.category}`}
+              </Link>
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/home/client-wrapper.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect } from "react";
+import { useUser } from "@/hooks/use-user-context";
+import { UserEvaluation, Team } from "@/lib/types";
+
+interface ClientWrapperProps {
+  userEvaluation: UserEvaluation | null;
+  teams: Team[];
+  children: React.ReactNode;
+}
+
+export function ClientWrapper({
+  userEvaluation,
+  teams,
+  children,
+}: ClientWrapperProps) {
+  const { setUserInfo } = useUser();
+
+  // Update user info in navigation when user evaluation is loaded
+  useEffect(() => {
+    if (userEvaluation) {
+      const teamName =
+        teams.find((t) => t.id === userEvaluation.profile.teamId)?.name || "";
+      setUserInfo({
+        firstName: userEvaluation.profile.firstName,
+        lastName: userEvaluation.profile.lastName,
+        teamName,
+      });
+    } else {
+      setUserInfo(null);
+    }
+  }, [userEvaluation, teams, setUserInfo]);
+
+  return <>{children}</>;
+}

components/home/index.ts

@@ -0,0 +1,9 @@
+export { LoadingPage } from "./loading-page";
+export { WelcomeHeader } from "./welcome-header";
+export { RadarSection } from "./radar-section";
+export { CategoryBreakdown } from "./category-breakdown";
+export { CategoryCard } from "./category-card";
+export { SkillProgress } from "./skill-progress";
+export { ActionSection } from "./action-section";
+export { ClientWrapper } from "./client-wrapper";
+export { WelcomeScreen } from "./welcome-screen";

components/home/loading-page.tsx

@@ -0,0 +1,17 @@
+export function LoadingPage() {
+  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 py-16 px-6">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400 mx-auto mb-4"></div>
+            <p className="text-white">Chargement...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/home/radar-section.tsx

@@ -0,0 +1,27 @@
+import { SkillsRadarChart } from "@/components/radar-chart";
+
+interface RadarSectionProps {
+  radarData: Array<{
+    category: string;
+    score: number;
+    maxScore: number;
+  }>;
+}
+
+export function RadarSection({ radarData }: RadarSectionProps) {
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+      <div className="mb-6">
+        <h3 className="text-xl font-bold text-white mb-2">
+          Vue d'ensemble de vos compétences
+        </h3>
+        <p className="text-slate-400 text-sm">
+          Radar chart représentant votre niveau par catégorie
+        </p>
+      </div>
+      <div className="h-80">
+        <SkillsRadarChart data={radarData} />
+      </div>
+    </div>
+  );
+}

components/home/skill-progress.tsx

@@ -0,0 +1,36 @@
+import { TechIcon } from "@/components/icons/tech-icon";
+import { getSkillLevelLabel } from "@/lib/score-utils";
+
+interface SkillProgressProps {
+  skill: {
+    id: string;
+    name: string;
+    icon?: string;
+  };
+  skillEval?: {
+    skillId: string;
+    level: string | null;
+  };
+}
+
+export function SkillProgress({ skill, skillEval }: SkillProgressProps) {
+  return (
+    <div className="flex items-center justify-between p-2 bg-white/5 border border-white/10 rounded-lg">
+      <div className="flex items-center gap-2">
+        <TechIcon
+          iconName={skill.icon || ""}
+          className="w-4 h-4 text-blue-400"
+          fallbackText={skill.name}
+        />
+        <span className="text-sm text-white">{skill.name}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        {skillEval?.level && (
+          <span className="text-xs text-slate-400">
+            {getSkillLevelLabel(skillEval.level)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

components/home/welcome-header.tsx

@@ -0,0 +1,24 @@
+import { Code2 } from "lucide-react";
+
+interface WelcomeHeaderProps {
+  firstName: string;
+}
+
+export function WelcomeHeader({ firstName }: WelcomeHeaderProps) {
+  return (
+    <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">
+        <Code2 className="h-4 w-4 text-blue-400" />
+        <span className="text-sm font-medium text-slate-200">
+          Tableau de bord
+        </span>
+      </div>
+
+      <h1 className="text-4xl font-bold text-white">Bonjour {firstName} !</h1>
+
+      <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
+        Voici un aperçu de vos compétences techniques
+      </p>
+    </div>
+  );
+}

components/home/welcome-screen.tsx

@@ -0,0 +1,74 @@
+import { Code2, ArrowRight, Target } from "lucide-react";
+import Link from "next/link";
+
+export function WelcomeScreen() {
+  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-16">
+        <div className="text-center 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 mb-6">
+            <Code2 className="h-4 w-4 text-blue-400" />
+            <span className="text-sm font-medium text-slate-200">
+              PeakSkills
+            </span>
+          </div>
+
+          <h1 className="text-4xl font-bold mb-4 text-white">
+            Bienvenue ! Commencez votre parcours
+          </h1>
+          <p className="text-lg text-slate-400 mb-12 max-w-2xl mx-auto">
+            Vous êtes connecté avec succès. Il est temps d'évaluer vos
+            compétences techniques pour obtenir une vue d'ensemble personnalisée
+            de votre expertise.
+          </p>
+
+          <div className="max-w-4xl mx-auto mb-12">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
+                <Target className="h-8 w-8 text-blue-400 mb-4 mx-auto" />
+                <h3 className="text-white font-semibold mb-2">
+                  Évaluez vos compétences
+                </h3>
+                <p className="text-slate-400 text-sm">
+                  Sélectionnez vos domaines d'expertise et évaluez votre niveau
+                </p>
+              </div>
+              <div className="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
+                <div className="h-8 w-8 bg-gradient-to-r from-violet-400 to-blue-400 rounded-full mb-4 mx-auto" />
+                <h3 className="text-white font-semibold mb-2">
+                  Visualisez vos forces
+                </h3>
+                <p className="text-slate-400 text-sm">
+                  Obtenez un radar chart personnalisé de vos compétences
+                </p>
+              </div>
+              <div className="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
+                <div className="h-8 w-8 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full mb-4 mx-auto" />
+                <h3 className="text-white font-semibold mb-2">
+                  Suivez votre progression
+                </h3>
+                <p className="text-slate-400 text-sm">
+                  Mettez à jour vos évaluations au fil de votre évolution
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <Link
+            href="/evaluation"
+            className="group bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-xl font-medium transition-all inline-flex items-center gap-2"
+          >
+            Commencer l'évaluation
+            <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+

lib/score-utils.ts

@@ -0,0 +1,51 @@
+// Fonction pour déterminer la couleur du badge selon le niveau moyen
+export function getScoreColors(score: number) {
+  if (score >= 2.5) {
+    // Expert/Maîtrise (violet)
+    return {
+      bg: "bg-violet-500/20",
+      border: "border-violet-500/30",
+      text: "text-violet-400",
+      gradient: "from-violet-500 to-violet-400",
+    };
+  } else if (score >= 1.5) {
+    // Autonome (vert)
+    return {
+      bg: "bg-green-500/20",
+      border: "border-green-500/30",
+      text: "text-green-400",
+      gradient: "from-green-500 to-green-400",
+    };
+  } else if (score >= 0.5) {
+    // Non autonome (orange/amber)
+    return {
+      bg: "bg-amber-500/20",
+      border: "border-amber-500/30",
+      text: "text-amber-400",
+      gradient: "from-amber-500 to-amber-400",
+    };
+  } else {
+    // Jamais pratiqué (rouge)
+    return {
+      bg: "bg-red-500/20",
+      border: "border-red-500/30",
+      text: "text-red-400",
+      gradient: "from-red-500 to-red-400",
+    };
+  }
+}
+
+export function getSkillLevelLabel(level: string): string {
+  switch (level) {
+    case "never":
+      return "Jamais utilisé";
+    case "not-autonomous":
+      return "Non autonome";
+    case "autonomous":
+      return "Autonome";
+    case "expert":
+      return "Expert";
+    default:
+      return "";
+  }
+}

lib/server-auth.ts

@@ -0,0 +1,85 @@
+import { cookies } from "next/headers";
+import { COOKIE_NAME } from "./auth-utils";
+import { EvaluationService } from "@/services/evaluation-service";
+import { TeamsService } from "@/services/teams-service";
+import { SkillsService } from "@/services/skills-service";
+import { SkillCategory, Team } from "./types";
+
+/**
+ * Récupère l'ID utilisateur depuis le cookie côté serveur
+ */
+export async function getUserIdFromCookie(): Promise<number | null> {
+  const cookieStore = await cookies();
+  const userIdCookie = cookieStore.get("peakSkills_userId");
+
+  if (!userIdCookie?.value) {
+    return null;
+  }
+
+  const userId = parseInt(userIdCookie.value);
+  return isNaN(userId) ? null : userId;
+}
+
+/**
+ * Récupère l'évaluation complète de l'utilisateur côté serveur
+ */
+export async function getServerUserEvaluation() {
+  const userId = await getUserIdFromCookie();
+
+  if (!userId) {
+    return null;
+  }
+
+  try {
+    const evaluationService = new EvaluationService();
+
+    // Récupérer d'abord le profil utilisateur
+    const userProfile = await evaluationService.getUserById(userId);
+
+    if (!userProfile) {
+      return null;
+    }
+
+    // Puis charger l'évaluation avec le profil
+    const userEvaluation = await evaluationService.loadUserEvaluation(
+      userProfile
+    );
+
+    return userEvaluation;
+  } catch (error) {
+    console.error("Failed to get user evaluation:", error);
+    return null;
+  }
+}
+
+/**
+ * Charge les catégories de compétences côté serveur depuis PostgreSQL
+ */
+export async function getServerSkillCategories(): Promise<SkillCategory[]> {
+  try {
+    return await SkillsService.getSkillCategories();
+  } catch (error) {
+    console.error("Failed to load skill categories:", error);
+    return [];
+  }
+}
+
+/**
+ * Charge les équipes côté serveur depuis PostgreSQL
+ */
+export async function getServerTeams(): Promise<Team[]> {
+  try {
+    return await TeamsService.getTeams();
+  } catch (error) {
+    console.error("Failed to load teams:", error);
+    return [];
+  }
+}
+
+/**
+ * Vérifie simplement si l'utilisateur est authentifié via le cookie
+ */
+export async function isUserAuthenticated(): Promise<boolean> {
+  const userId = await getUserIdFromCookie();
+  return !!userId;
+}