sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance project intern management with improved loading states and refetch functionality

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-07-27 14:37:54 +07:00
parent f76ab5a3e5
commit 1ee784e70d
7 changed files with 40 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/mentor/ProjectTaskTab.tsx
+9 -45
View File
@@ -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(); }}
/>
src/Pages/internify/mentor/ProjectsInternTab.tsx
+17 -9
View File
@@ -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
src/Pages/internify/mentor/ProjectsPage.tsx
+1 -1
View File
@@ -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>;
src/Pages/internify/mentor/components/AddInternsDialog.tsx
+5 -42
View File
@@ -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>
src/Pages/internify/mentor/components/EligibleInternTable.tsx
+1 -1
View File
@@ -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: {
src/Pages/internify/mentor/components/SidebarMentor.tsx
+2 -3
View File
@@ -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 = [
src/hooks/useProjects.ts
+4 -2
View File
@@ -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