feat: handling SSR and PG datas for admin space

components/admin/team-detail-modal.tsx

@@ -11,27 +11,9 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import {
-  Users,
-  ExternalLink,
-  Download,
-  Eye,
-} from "lucide-react";
+import { Users, ExternalLink, Download, Eye } from "lucide-react";
 
-interface TeamMember {
-  id: string;
-  firstName: string;
-  lastName: string;
-  skills: Array<{
-    skillId: string;
-    skillName: string;
-    category: string;
-    level: number;
-    canMentor: boolean;
-    wantsToLearn: boolean;
-  }>;
-  joinDate: string;
-}
+import { TeamMember } from "@/services/admin-service";
 
 interface TeamDetailModalProps {
   isOpen: boolean;
@@ -42,7 +24,11 @@ interface TeamDetailModalProps {
     direction: string;
     totalMembers: number;
     averageSkillLevel: number;
-    topSkills: Array<{ skillName: string; averageLevel: number }>;
+    topSkills: Array<{
+      skillName: string;
+      averageLevel: number;
+      icon?: string;
+    }>;
     skillCoverage: number;
     members: TeamMember[];
   } | null;
@@ -68,7 +54,7 @@ export function TeamDetailModal({
   team,
 }: TeamDetailModalProps) {
   const router = useRouter();
-  
+
   if (!team) return null;
 
   const handleViewFullDetails = () => {
@@ -120,7 +106,8 @@ export function TeamDetailModal({
             </div>
           </DialogTitle>
           <DialogDescription className="text-slate-400">
-            Aperçu rapide de l'équipe. Cliquez sur "Voir tous les détails" pour une vue complète.
+            Aperçu rapide de l'équipe. Cliquez sur "Voir tous les détails" pour
+            une vue complète.
           </DialogDescription>
         </DialogHeader>
 
@@ -155,14 +142,19 @@ export function TeamDetailModal({
             <h3 className="font-medium text-white mb-3">Top 3 Compétences</h3>
             <div className="space-y-2">
               {team.topSkills.slice(0, 3).map((skill, idx) => (
-                <div key={idx} className="flex items-center justify-between p-2 bg-white/5 rounded-lg">
+                <div
+                  key={idx}
+                  className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
+                >
                   <span className="text-white text-sm">{skill.skillName}</span>
                   <div className="flex items-center gap-2">
                     <span className="text-xs text-slate-400">
                       {((skill.averageLevel / 3) * 100).toFixed(0)}%
                     </span>
                     <div
-                      className={`w-2 h-2 rounded-full ${getSkillLevelColor(skill.averageLevel)}`}
+                      className={`w-2 h-2 rounded-full ${getSkillLevelColor(
+                        skill.averageLevel
+                      )}`}
                     />
                   </div>
                 </div>