From 1ee784e70d80a7cce68462d984897561b82f1e0c Mon Sep 17 00:00:00 2001
From: "Kemas M. Aryadary Rasyad"
 <112590882+aryadary0706@users.noreply.github.com>
Date: Mon, 27 Jul 2026 14:37:54 +0700
Subject: [PATCH] feat: enhance project intern management with improved loading
 states and refetch functionality

---
 src/Pages/internify/mentor/ProjectTaskTab.tsx | 54 ++++---------------
 .../internify/mentor/ProjectsInternTab.tsx    | 26 +++++----
 src/Pages/internify/mentor/ProjectsPage.tsx   |  4 +-
 .../mentor/components/AddInternsDialog.tsx    | 47 ++--------------
 .../mentor/components/EligibleInternTable.tsx |  2 +-
 .../mentor/components/SidebarMentor.tsx       |  5 +-
 src/hooks/useProjects.ts                      |  6 ++-
 7 files changed, 40 insertions(+), 104 deletions(-)

diff --git a/src/Pages/internify/mentor/ProjectTaskTab.tsx b/src/Pages/internify/mentor/ProjectTaskTab.tsx
index d594186..6d0739d 100644
--- a/src/Pages/internify/mentor/ProjectTaskTab.tsx
+++ b/src/Pages/internify/mentor/ProjectTaskTab.tsx
@@ -26,9 +26,7 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
 
   if (loading) return (
     <div className="flex flex-col gap-3 p-6">
-      {[...Array(3)].map((_, i) => (
-        <div key={i} className="h-12 bg-gray-300 rounded-lg animate-pulse" />
-      ))}
+        <div className="h-[360px] bg-gray-300 rounded-lg animate-pulse" />
     </div>
   );
 
@@ -41,7 +39,7 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
         <button
           onClick={() => setIsModalOpen(true)}
           disabled={!isProjectActive}
-          className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="border border-card-outline text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed hover:bg-card"
         >
           Add Task
         </button>
@@ -68,18 +66,18 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
                 <ClipboardList size={22} className="text-slate-600 shrink-0" />
                 <span className="text-base text-slate-700 font-medium truncate">{task.title}</span>
               </div>
-              <div className="flex items-center gap-4 text-slate-600 shrink-0">
+              <div className="flex items-center gap-2 text-slate-600 shrink-0">
                 <button
                   onClick={() => { setSelectedTask(task); setEditModalOpen(true); }}
                   disabled={!isProjectActive}
-                  className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed hover:bg-card"
                 >
                   <Pencil size={20} />
                 </button>
                 <button
                   onClick={() => handleDeleteTask(task.id)}
                   disabled={!isProjectActive}
-                  className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed hover:bg-card"
                 >
                   <Trash2 size={20} />
                 </button>
@@ -93,43 +91,6 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
           </div>
         )
         }
-
-        {/* {tasks.length > 0 ? (
-          tasks.map((task, idx) => (
-            <div
-              key={task.id}
-              className={`flex items-center justify-between py-4 group ${
-                idx < tasks.length - 1 ? 'border-b border-gray-100' : ''
-              }`}
-            >
-              <div className="flex items-center gap-3 min-w-0">
-                <ClipboardList size={22} className="text-slate-600 shrink-0" />
-                <span className="text-base text-slate-700 font-medium truncate">{task.title}</span>
-              </div>
-              <div className="flex items-center gap-4 text-slate-600 shrink-0">
-                <button
-                  onClick={() => { setSelectedTask(task); setEditModalOpen(true); }}
-                  disabled={!isProjectActive}
-                  className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <Pencil size={20} />
-                </button>
-                <button
-                  onClick={() => handleDeleteTask(task.id, task.title)}
-                  disabled={!isProjectActive}
-                  className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <Trash2 size={20} />
-                </button>
-              </div>
-            </div>
-          ))
-        ) : (
-          <div className='flex flex-col items-center justify-center py-16'>
-            <ClipboardList className='w-12 h-12 text-font-shade mx-auto'/>
-            <p className="text-sm text-font-shade mt-3">Belum ada tugas yang dibuat untuk proyek ini.</p>
-          </div>
-        )} */}
       </div>
 
       {isModalOpen && (
@@ -143,7 +104,10 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
       {editModalOpen && selectedTask && (
         <EditTaskModal
           isOpen={editModalOpen}
-          onClose={() => { setEditModalOpen(false); setSelectedTask(null); }}
+          onClose={() => { 
+            setEditModalOpen(false);
+            setSelectedTask(null); 
+          }}
           task={selectedTask}
           onSuccess={() => { setEditModalOpen(false); setSelectedTask(null); refetch(); }}
         />
diff --git a/src/Pages/internify/mentor/ProjectsInternTab.tsx b/src/Pages/internify/mentor/ProjectsInternTab.tsx
index 0a489f8..17b5de4 100644
--- a/src/Pages/internify/mentor/ProjectsInternTab.tsx
+++ b/src/Pages/internify/mentor/ProjectsInternTab.tsx
@@ -2,30 +2,30 @@ import { useState } from 'react';
 import { Plus, Users } from 'lucide-react';
 import ManageInternsModal from './components/AddInternsDialog';
 import type { ProjectDetail, ProjectMember } from '../../../types/project.types';
-import { useRemoveMember } from '../../../hooks/useProjects';
+import { useProjectInterns, useRemoveMember } from '../../../hooks/useProjects';
 import { customToast } from '../../utils/showToast';
 import { getInitials } from '../../../hooks/useUser';
 import { resolveFileUrl } from '../../utils/resolveFileFromUrl';
 
 export default function InternsTab({ project }: { project: ProjectDetail }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [members, setMembers] = useState<ProjectMember[]>(project.members);
-  const { remove, loading } = useRemoveMember();
-  const isProjectActive = project?.status === "active"
+  const { interns: members, loading, error, refetch } = useProjectInterns(String(project.id));
+  const { remove, loading: removing } = useRemoveMember();
+  const isProjectActive = project?.status === "active";
   const [adminImageError, setAdminImageError] = useState(false);
   const adminAvatar = resolveFileUrl(project.admin.profile_picture);
   const adminHasPhoto = !!adminAvatar && !adminImageError;
 
-  const handleModalClose = (finalMembers: ProjectMember[]) => {
-    setMembers(finalMembers);
+  const handleModalClose = () => {
     setIsModalOpen(false);
+    refetch();
   };
 
   const handleRemove = async (id_user: number) => {
     const res = await remove({ id_project: project.id, id_user });
     if (res.success) {
-      setMembers(prev => prev.filter(m => m.id !== id_user));
       customToast.success('Member removed', res.message);
+      refetch();
     } else {
       customToast.error('Failed to remove', res.message);
     }
@@ -78,7 +78,15 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
             </span>
           </button>
         </div>
-        {members.length === 0 ? (
+        {loading ? (
+          <div className="flex flex-col gap-3 pt-12">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="h-14 bg-gray-300 rounded-lg animate-pulse" />
+            ))}
+          </div>
+        ) : error ? (
+          <p className="text-red-500 text-sm py-4">{error}</p>
+        ) : members.length === 0 ? (
           <div className='flex flex-col items-center justify-center py-16'>
             <Users className='w-12 h-12 text-gray-300 mx-auto' />
             <p className="text-sm text-font mt-3">Belum ada anggota.</p>
@@ -101,7 +109,7 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
               <div>
                 <button
                   onClick={() => handleRemove(member.id)}
-                  disabled={loading || !isProjectActive}
+                  disabled={removing || !isProjectActive}
                   className='flex items-center gap-1 text-[11px] bg-red-600 text-white py-1 px-2 rounded-md disabled:opacity-50 hover:bg-red-700 transition-colors disabled:cursor-not-allowed'
                 >
                   <Plus className='w-4 h-4' />Delete
diff --git a/src/Pages/internify/mentor/ProjectsPage.tsx b/src/Pages/internify/mentor/ProjectsPage.tsx
index 59e0953..7f3a4f6 100644
--- a/src/Pages/internify/mentor/ProjectsPage.tsx
+++ b/src/Pages/internify/mentor/ProjectsPage.tsx
@@ -69,7 +69,7 @@ export default function ProjectDetailPage() {
   const [activeTab, setActiveTab] = useState<'forum' | 'participants' | 'Task'>('forum');
   const { project, loading, error } = useProjectDetail(slug ?? "");
 
-  if (loading) return <ProjectDetailSkeleton/>
+  if (loading && !project) return <ProjectDetailSkeleton/>
 
   if (error) return <p className="p-10 text-[18px] text-red-700">{error}</p>;
 
@@ -110,7 +110,7 @@ export default function ProjectDetailPage() {
             case 'forum':
               return <MentorForumTab project={project} />;
             case 'participants':
-              return <InternsTab project={project} />;
+              return <InternsTab project={project}/>;
             case 'Task':
               return <TaskTab project={project} />;
             default:
diff --git a/src/Pages/internify/mentor/components/AddInternsDialog.tsx b/src/Pages/internify/mentor/components/AddInternsDialog.tsx
index 819cc91..1461d3c 100644
--- a/src/Pages/internify/mentor/components/AddInternsDialog.tsx
+++ b/src/Pages/internify/mentor/components/AddInternsDialog.tsx
@@ -9,7 +9,7 @@ import { customToast } from "../../../utils/showToast";
 
 interface ManageInternsModalProps {
   isOpen: boolean;
-  onClose: (finalMembers: ProjectMember[]) => void;
+  onClose: () => void;
   projectId: number;
   initialMembers: ProjectMember[];
 }
@@ -23,7 +23,6 @@ export default function ManageInternsModal({ isOpen, onClose, projectId, initial
   const { interns, loading: loadingAssignableInterns } = useAssignableInterns();
   const { assign, loading: assigning } = useAssignMember();
 
-  // Reset addedIds saat modal dibuka ulang
   useEffect(() => {
     if (isOpen) setAddedIds(new Set());
   }, [isOpen]);
@@ -40,16 +39,15 @@ export default function ManageInternsModal({ isOpen, onClose, projectId, initial
     }
     const handleCancel = (e: Event) => {
       e.preventDefault();
-      onClose(finalMembers);
+      onClose();
     };
     dialog.addEventListener("cancel", handleCancel);
     return () => {
       dialog.removeEventListener("cancel", handleCancel);
       document.body.style.overflow = "unset";
     };
-  }, [isOpen, onClose, addedIds]);
+  }, [isOpen, onClose]);
 
-  // Semua ID yang sudah jadi member atau baru ditambahkan — tidak tampil di search
   const excludedIds = new Set([...invitedList.map(m => m.id), ...addedIds]);
   const searchResult = interns.filter(m =>
     !excludedIds.has(m.id) &&
@@ -57,21 +55,6 @@ export default function ManageInternsModal({ isOpen, onClose, projectId, initial
       `${m.full_name}`.toLowerCase().includes(searchQuery.toLowerCase()))
   );
 
-  // Gabungan member lama + yang baru ditambah — dikirim ke parent saat close
-  const newlyAddedMembers = interns
-    .filter(i => addedIds.has(i.id))
-    .map(i => ({
-      id: i.id,
-      id_user: i.id,
-      full_name: i.full_name,
-      email: i.email,
-      avatar: "",
-      kelompok_peminatan: i.kelompok_peminatan,
-      professional_bio: "",
-      position: i.position,
-    } as ProjectMember));
-  const finalMembers = [...invitedList, ...newlyAddedMembers];
-
   const handleAssign = async (intern: AssignableIntern) => {
     const result = await assign({ id_project: projectId, id_user: intern.id });
     if (result.success) {
@@ -90,7 +73,7 @@ export default function ManageInternsModal({ isOpen, onClose, projectId, initial
       ref={dialogRef}
       className="custom-dialog"
       onClick={(e) => {
-        if (e.target === dialogRef.current) onClose(finalMembers);
+        if (e.target === dialogRef.current) onClose();
       }}
     >
       <div className="px-3 py-5">
@@ -105,27 +88,7 @@ export default function ManageInternsModal({ isOpen, onClose, projectId, initial
           <Search className="absolute right-3.5 w-4 h-4 text-gray-400" />
         </div>
 
-
         <div className="overflow-y-auto space-y-3 pr-1 flex-1 h-[170px]">
-          {/* Member yang sudah ada — read-only, hapus dari tab Members */}
-          {invitedList.map((member) => (
-            <div key={member.id} className="flex items-center justify-between p-2 rounded-xl hover:bg-gray-50 transition-colors">
-              <div className="flex items-center gap-3">
-                <div className="w-9 h-9 rounded-full bg-gray-200 border border-gray-300 flex items-center justify-center text-xs font-bold text-gray-500">
-                  {getInitials(member as unknown as AssignableIntern)}
-                </div>
-                <div className="flex flex-col">
-                  <span className="text-sm font-medium text-gray-700">{member.full_name}</span>
-                  <span className="text-xs text-gray-400">{member.email}</span>
-                </div>
-              </div>
-              <span className="text-[10px] font-bold text-gray-400 bg-gray-100 px-2 py-1 rounded-full uppercase tracking-wide">
-                Member
-              </span>
-            </div>
-          ))}
-
-          {/* Hasil pencarian — belum jadi member */}
           {loadingAssignableInterns ? (
             <p className="text-sm text-gray-400 text-center py-2">Memuat...</p>
           ) : (
@@ -152,7 +115,7 @@ export default function ManageInternsModal({ isOpen, onClose, projectId, initial
           )}
 
           {!loadingAssignableInterns && searchQuery && searchResult.length === 0 && (
-            <p className="text-sm text-gray-400 text-center py-2">Tidak ada mahasiswa ditemukan.</p>
+            <p className="text-sm text-gray-400 text-center py-2">Tidak ada interns ditemukan.</p>
           )}
         </div>
       </div>
diff --git a/src/Pages/internify/mentor/components/EligibleInternTable.tsx b/src/Pages/internify/mentor/components/EligibleInternTable.tsx
index 9983c36..5cbe202 100644
--- a/src/Pages/internify/mentor/components/EligibleInternTable.tsx
+++ b/src/Pages/internify/mentor/components/EligibleInternTable.tsx
@@ -118,7 +118,7 @@ export default function EligibleInternTable({
       id: intern.id_user,
       id_project: project.id,
       id_user: intern.id_user,
-      certificate_no: "CERT/yymmxx/XXX",
+      certificate_no: "CERT/yyddmm/X",
       issued_at: new Date().toISOString().slice(0, 10),
       uuid: "HANYA SEBATAS PREVIEW",
       user: {
diff --git a/src/Pages/internify/mentor/components/SidebarMentor.tsx b/src/Pages/internify/mentor/components/SidebarMentor.tsx
index 03141ff..e246b4d 100644
--- a/src/Pages/internify/mentor/components/SidebarMentor.tsx
+++ b/src/Pages/internify/mentor/components/SidebarMentor.tsx
@@ -1,13 +1,12 @@
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Home, FolderKanban, UsersRound, Medal, Settings, HelpCircle, LogOut, X } from 'lucide-react';
+import { Home, FolderKanban, UsersRound, FileBadge , Settings, HelpCircle, LogOut, X } from 'lucide-react';
 import { FaUserTie } from "react-icons/fa";
 
 const navItems = [
-  // belum kutambahin
   { label: "Home", icon: Home, path: "/mentor" },
   { label: "List Projects", icon: FolderKanban, path: "/mentor/projects" },
   { label: "Interns", icon: UsersRound, path: "/mentor/intern" },
-  { label: "Certificates", icon: Medal, path: "/mentor/certificates" },
+  { label: "Certificates", icon: FileBadge, path: "/mentor/certificates" },
 ];
 
 const prefItems = [
diff --git a/src/hooks/useProjects.ts b/src/hooks/useProjects.ts
index dad9988..6d4b182 100644
--- a/src/hooks/useProjects.ts
+++ b/src/hooks/useProjects.ts
@@ -73,7 +73,7 @@ export const useProjectInterns = (projectId: string) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
+  const refetch = useCallback(() => {
     if (!projectId) return;
     setLoading(true);
     getProjectMembers(projectId)
@@ -82,7 +82,9 @@ export const useProjectInterns = (projectId: string) => {
       .finally(() => setLoading(false));
   }, [projectId]);
 
-  return { interns, loading, error };
+  useEffect(() => { refetch(); }, [refetch]);
+
+  return { interns, loading, error, refetch };
 };
 
 // GET /project-api/my-projects