Update all hooks (Projects, Tasks, Certificates), implement backend for Projects. HomePage on Mentors

src/Pages/internify/intern/ParticipantTab.tsx

@@ -1,11 +1,6 @@
-import { useParams } from 'react-router-dom';
-import {  } from '../../../hooks/useProjects';
-import type { Project } from '../../../types/project.types';
-
-export default function ParticipantsTab({ project }: { project: Project }) {
-  const { slug } = useParams<{ slug: string }>();
-  const { interns, loading, error } = useProjectInterns(slug ?? "");
+import type { ProjectDetail, ProjectMember } from '../../../types/project.types';
 
+export default function ParticipantsTab({ project }: { project: ProjectDetail }) {
   return (
     <div>
       {/* Mentor */}
@@ -30,44 +25,29 @@ export default function ParticipantsTab({ project }: { project: Project }) {
       {/* Members */}
       <div>
         <h3 className="font-bold text-font-shade mb-3.5">Members</h3>
-
-        {loading && (
-          <div className="flex flex-col gap-3">
-            {[...Array(3)].map((_, i) => (
-              <div key={i} className="h-10 bg-gray-100 rounded animate-pulse" />
-            ))}
-          </div>
-        )}
-
-        {error && <p className="text-red-500 text-sm">{error}</p>}
-
-        {!loading && !error && interns.map((intern, idx) => (
+        {project.members.map((member: ProjectMember, idx) => (
           <div
-            key={intern.id}
+            key={member.id}
             className={`flex items-center justify-between py-3 ${
-              idx < interns.length - 1 ? 'border-b border-box-border' : ''
+              idx < project.members.length - 1 ? 'border-b border-box-border' : ''
             }`}
           >
             <div className="flex items-center gap-3">
-              {intern.avatar ? (
-                <img
-                  src={intern.avatar}
-                  alt={intern.full_name}
-                  className="w-7 h-7 rounded-full object-cover"
-                />
+              {member.avatar ? (
+                <img src={member.avatar} alt={member.full_name} className="w-7 h-7 rounded-full object-cover" />
               ) : (
                 <div className="w-7 h-7 rounded-full bg-gray-200 flex-shrink-0" />
               )}
               <div className="flex flex-col">
-                <span className="text-sm text-[#333]">{intern.full_name}</span>
-                <span className="text-[11px] text-gray-400">{intern.email}</span>
+                <span className="text-sm text-[#333]">{member.full_name}</span>
+                <span className="text-[11px] text-gray-400">{member.email}</span>
               </div>
             </div>
-            <span className="text-[13px] text-[#555] font-semibold">{intern.kelompok_peminatan}</span>
+            <span className="text-[13px] text-[#555] font-semibold">{member.kelompok_peminatan}</span>
           </div>
         ))}
 
-        {!loading && !error && interns.length === 0 && (
+        {project.members.length === 0 && (
           <p className="text-sm text-gray-400">Belum ada members.</p>
         )}
       </div>