Refactor internify components and services

- Updated LoginInternify to remove unnecessary state initialization. - Cleaned up NotificationList by removing unused code and fixing button click handler. - Added project_id prop to InternClaimCert for better data handling. - Enhanced CertificateNotAvailable to include claim functionality with loading and error states. - Modified HomeHeader to display a default user name. - Corrected ProjectTimeline to import ProjectTask from the correct type file. - Implemented loading and error handling in CertificateListPage. - Improved MentorProjectDetailPage to handle task updates and navigation correctly. - Enhanced MentorSettingsPage to manage profile picture errors and state. - Updated AddInternsDialog to use the correct hook for fetching interns. - Refactored EditSubmissionTask to handle task updates and errors more effectively. - Improved MentorProjectCard to include project archiving functionality. - Removed deprecated useInterns hook and replaced it with useUser for fetching user data. - Added new useMentors hook for managing mentor-related operations. - Cleaned up CertificateService by removing unused verifyCertificate function. - Created MentorServices for managing mentor data operations. - Updated UserService to include fetching Mahasiswa data and removed unused UserServices file.
2026-06-29 15:42:48 +07:00
parent 4084ccf1bf
commit da67ad86d8
29 changed files with 1099 additions and 5581 deletions
@@ -23,3 +23,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+package-lock.json
@@ -50,6 +50,9 @@ import ViewInternSubmission from "./Pages/Internify/mentor/ViewInternSubmission"
 import ProtectedRoutes from "./Pages/utils/ProtectedRoute";
 import CertificateDetail from "./Pages/Internify/mentor/CertificateForm";
 import CertificateResult from "./Pages/Internify/mentor/CertificateResult";
+import AdminMentorPage from "./Pages/MentorPage";
+import CreateMentorForm from "./Pages/CreateMentorForm";
+import EditMentorForm from "./Pages/EditMentorForm";
 import NotFoundPage from "./Pages/NotFoundPage";

 function App() {
@@ -86,6 +89,9 @@ function App() {
          <Route path="/edit-faq/:id" element={<EditFaq />}></Route>
          <Route path="/edit-feedback/:id" element={<EditFeedback />}></Route>
          <Route path="/edit-lowongan/:id" element={<EditLowongan />}></Route>
+          <Route path="/mentor-admin" element={<AdminMentorPage/>}/>
+          <Route path="/create-mentor" element={<CreateMentorForm/>}/>
+          <Route path="/edit-mentor/:id" element={<EditMentorForm/>}/>

        </Route>

@@ -1,4 +1,5 @@
 import { Bell, Menu } from "lucide-react"
+import { useEffect, useState } from "react";
 import humiclogo from "../assets/logo.png";
 import { useNavigate } from "react-router-dom";
 import { useCurrentUser } from "../hooks/useUser";
@@ -18,13 +19,18 @@ function getInitials(fullName: string | undefined | null): string {
 export default function Header({ toggleSidebar }: { toggleSidebar: () => void }) {
  const nav = useNavigate();
  const { user } = useCurrentUser();
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    setImageError(false);
+  }, [user?.profile_picture, user?.full_name]);

  // Tentukan base path settings sesuai role
  const settingsPath =
    user?.role === "intern" ? "/intern/settings" : "/mentor/settings";

  const initials = user?.full_name ? getInitials(user.full_name) : "U";
-  const hasPhoto = !!user?.profile_picture;
+  const hasPhoto = !!user?.profile_picture && !imageError;

  return (
    <header className='sticky top-0 flex w-full justify-between items-center py-4 px-12 bg-white border-b border-gray-300 z-10'>
@@ -54,9 +60,10 @@ export default function Header({ toggleSidebar }: { toggleSidebar: () => void })
        >
          {hasPhoto ? (
            <img
-              src={user!.profile_picture!}
-              alt={user!.full_name}
+              src={user?.profile_picture ?? ""}
+              alt={user?.full_name ?? "Profile"}
              className="w-full h-full object-cover"
+              onError={() => setImageError(true)}
            />
          ) : (
            <div className="w-full h-full bg-[#B30000] flex items-center justify-center">
@@ -166,6 +166,31 @@ const SidebarAdmin = () => {

            <h2 className="text-[#2C5282]">Feedback</h2>
          </div>
+          <div
+            className={`text-container flex flex-row gap-3 p-3 items-center cursor-pointer rounded-2xl ${
+              location.pathname === "/mentor-admin"
+                ? "bg-[#D3DFEA] font-bold"
+                : "hover:bg-[#D3DFEA]"
+            }`}
+            onClick={() => navigate("/mentor-admin")}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="size-8 text-[#2C5282]"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+              />
+            </svg>
+
+            <h2 className="text-[#2C5282]">Mentor</h2>
+          </div>
          <div
            className={`text-container flex flex-row gap-3 p-3 items-center cursor-pointer rounded-2xl ${
              location.pathname === "/faq-list"
@@ -0,0 +1,226 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import NavbarAdmin from "../Layout/NavbarAdmin";
+import SidebarAdmin from "../Layout/SidebarAdmin";
+import { useCreateMentor } from "../hooks/useMentors";
+import type { CreateMentorPayload } from "../services/MentorServices";
+
+const CreateMentorForm = () => {
+  const navigate = useNavigate();
+  const { createMentor, loading, error } = useCreateMentor();
+
+  const [form, setForm] = useState<Omit<CreateMentorPayload, "profile_picture">>({
+    nama_depan: "",
+    nama_belakang: "",
+    full_name: "",
+    email: "",
+    password: "",
+    signature: "",
+    professional_bio: "",
+  });
+
+  const [profilePicture, setProfilePicture] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] ?? null;
+    setProfilePicture(file);
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    } else {
+      setPreview(null);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload: CreateMentorPayload = {
+      ...form,
+      full_name: `${form.nama_depan} ${form.nama_belakang}`.trim(),
+      ...(profilePicture ? { profile_picture: profilePicture } : {}),
+    };
+
+    const result = await createMentor(payload);
+    if (result) {
+      alert("Mentor berhasil dibuat!");
+      navigate("/mentor-admin");
+    }
+  };
+
+  return (
+    <div className="min-h-screen w-full overflow-hidden">
+      <NavbarAdmin />
+
+      <div className="flex flex-row">
+        <SidebarAdmin />
+        <div className="p-10 bg-white flex-col w-full">
+          {/* Header */}
+          <div className="flex flex-row justify-between items-center mb-[40px]">
+            <div>
+              <button
+                className="text-sm text-gray-500 hover:text-gray-800 flex items-center gap-1 mb-2 cursor-pointer"
+                onClick={() => navigate("/mentor-admin")}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="size-4"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+                </svg>
+                Kembali
+              </button>
+              <h2 className="text-[24px] font-semibold">Tambah Mentor</h2>
+            </div>
+          </div>
+
+          {error && (
+            <div className="mb-6 px-4 py-3 bg-red-50 border border-red-200 text-red-600 rounded-xl text-sm">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="max-w-2xl flex flex-col gap-5">
+            {/* Nama Depan */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">
+                Nama Depan <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                name="nama_depan"
+                value={form.nama_depan}
+                onChange={handleChange}
+                required
+                placeholder="Contoh: Budi"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Nama Belakang */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">
+                Nama Belakang <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                name="nama_belakang"
+                value={form.nama_belakang}
+                onChange={handleChange}
+                required
+                placeholder="Contoh: Santoso"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Email */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">
+                Email <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="email"
+                name="email"
+                value={form.email}
+                onChange={handleChange}
+                required
+                placeholder="mentor@example.com"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Password */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">
+                Password <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="password"
+                name="password"
+                value={form.password}
+                onChange={handleChange}
+                required
+                placeholder="Masukkan password"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Signature */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Signature</label>
+              <input
+                type="text"
+                name="signature"
+                value={form.signature}
+                onChange={handleChange}
+                placeholder="Tanda tangan / jabatan"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Professional Bio */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Bio Profesional</label>
+              <textarea
+                name="professional_bio"
+                value={form.professional_bio}
+                onChange={handleChange}
+                rows={4}
+                placeholder="Ceritakan pengalaman dan keahlian mentor..."
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent resize-none"
+              />
+            </div>
+
+            {/* Profile Picture */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Foto Profil</label>
+              {preview && (
+                <img
+                  src={preview}
+                  alt="Preview"
+                  className="w-20 h-20 rounded-full object-cover mb-2 border border-gray-200"
+                />
+              )}
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleFileChange}
+                className="text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-[#1F4A92] file:text-white hover:file:bg-[#677c9f] cursor-pointer"
+              />
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-3 mt-2">
+              <button
+                type="button"
+                onClick={() => navigate("/mentor-admin")}
+                className="px-6 py-3 rounded-xl border border-gray-300 text-gray-600 text-sm font-semibold hover:bg-gray-50 cursor-pointer"
+              >
+                Batal
+              </button>
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-6 py-3 rounded-xl bg-[#1F4A92] hover:bg-[#677c9f] text-white text-sm font-semibold cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+              >
+                {loading ? "Menyimpan..." : "Simpan Mentor"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateMentorForm;
@@ -0,0 +1,272 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import NavbarAdmin from "../Layout/NavbarAdmin";
+import SidebarAdmin from "../Layout/SidebarAdmin";
+import { useMentorDetail, useUpdateMentor } from "../hooks/useMentors";
+import type { UpdateMentorPayload } from "../services/MentorServices";
+
+const EditMentorForm = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const mentorId = id ? parseInt(id, 10) : null;
+
+  const { mentor, loading: fetching, error: fetchError } = useMentorDetail(mentorId);
+  const { updateMentor, loading: updating, error: updateError } = useUpdateMentor();
+
+  const [form, setForm] = useState({
+    nama_depan: "",
+    nama_belakang: "",
+    email: "",
+    password: "",
+    signature: "",
+    professional_bio: "",
+  });
+
+  const [profilePicture, setProfilePicture] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+
+  // Populate form once mentor data is loaded
+  useEffect(() => {
+    if (mentor) {
+      setForm({
+        nama_depan: mentor.nama_depan ?? "",
+        nama_belakang: mentor.nama_belakang ?? "",
+        email: mentor.email ?? "",
+        password: "",
+        signature: mentor.signature ?? "",
+        professional_bio: mentor.professional_bio ?? "",
+      });
+      if (mentor.profile_picture) {
+        setPreview(mentor.profile_picture);
+      }
+    }
+  }, [mentor]);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] ?? null;
+    setProfilePicture(file);
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!mentorId) return;
+
+    const payload: UpdateMentorPayload = {
+      nama_depan: form.nama_depan || undefined,
+      nama_belakang: form.nama_belakang || undefined,
+      email: form.email || undefined,
+      signature: form.signature || undefined,
+      professional_bio: form.professional_bio || undefined,
+      ...(form.password ? { password: form.password } : {}),
+      ...(profilePicture ? { profile_picture: profilePicture } : {}),
+    };
+
+    const result = await updateMentor(mentorId, payload);
+    if (result) {
+      alert("Data mentor berhasil diperbarui!");
+      navigate("/mentor-admin");
+    }
+  };
+
+  if (fetching) {
+    return (
+      <div className="min-h-screen w-full overflow-hidden">
+        <NavbarAdmin />
+        <div className="flex flex-row">
+          <SidebarAdmin />
+          <div className="p-10 w-full flex items-center justify-center">
+            <p className="text-gray-500">Memuat data mentor...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (fetchError || !mentor) {
+    return (
+      <div className="min-h-screen w-full overflow-hidden">
+        <NavbarAdmin />
+        <div className="flex flex-row">
+          <SidebarAdmin />
+          <div className="p-10 w-full flex items-center justify-center">
+            <p className="text-red-500">{fetchError ?? "Mentor tidak ditemukan."}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen w-full overflow-hidden">
+      <NavbarAdmin />
+
+      <div className="flex flex-row">
+        <SidebarAdmin />
+        <div className="p-10 bg-white flex-col w-full">
+          {/* Header */}
+          <div className="flex flex-row justify-between items-center mb-[40px]">
+            <div>
+              <button
+                className="text-sm text-gray-500 hover:text-gray-800 flex items-center gap-1 mb-2 cursor-pointer"
+                onClick={() => navigate("/mentor-admin")}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="size-4"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+                </svg>
+                Kembali
+              </button>
+              <h2 className="text-[24px] font-semibold">Edit Mentor</h2>
+              <p className="text-sm text-gray-500 mt-1">
+                Mengedit data: <span className="font-medium text-gray-700">{mentor.full_name}</span>
+              </p>
+            </div>
+          </div>
+
+          {updateError && (
+            <div className="mb-6 px-4 py-3 bg-red-50 border border-red-200 text-red-600 rounded-xl text-sm">
+              {updateError}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="max-w-2xl flex flex-col gap-5">
+            {/* Nama Depan */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Nama Depan</label>
+              <input
+                type="text"
+                name="nama_depan"
+                value={form.nama_depan}
+                onChange={handleChange}
+                placeholder="Contoh: Budi"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Nama Belakang */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Nama Belakang</label>
+              <input
+                type="text"
+                name="nama_belakang"
+                value={form.nama_belakang}
+                onChange={handleChange}
+                placeholder="Contoh: Santoso"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Email */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Email</label>
+              <input
+                type="email"
+                name="email"
+                value={form.email}
+                onChange={handleChange}
+                placeholder="mentor@example.com"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Password */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">
+                Password{" "}
+                <span className="text-gray-400 font-normal text-xs">(kosongkan jika tidak ingin mengubah)</span>
+              </label>
+              <input
+                type="password"
+                name="password"
+                value={form.password}
+                onChange={handleChange}
+                placeholder="Password baru (opsional)"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Signature */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Signature</label>
+              <input
+                type="text"
+                name="signature"
+                value={form.signature}
+                onChange={handleChange}
+                placeholder="Tanda tangan / jabatan"
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent"
+              />
+            </div>
+
+            {/* Professional Bio */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Bio Profesional</label>
+              <textarea
+                name="professional_bio"
+                value={form.professional_bio}
+                onChange={handleChange}
+                rows={4}
+                placeholder="Ceritakan pengalaman dan keahlian mentor..."
+                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#1F4A92] focus:border-transparent resize-none"
+              />
+            </div>
+
+            {/* Profile Picture */}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-gray-700">Foto Profil</label>
+              {preview && (
+                <img
+                  src={preview}
+                  alt="Preview"
+                  className="w-20 h-20 rounded-full object-cover mb-2 border border-gray-200"
+                />
+              )}
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleFileChange}
+                className="text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-[#1F4A92] file:text-white hover:file:bg-[#677c9f] cursor-pointer"
+              />
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-3 mt-2">
+              <button
+                type="button"
+                onClick={() => navigate("/mentor-admin")}
+                className="px-6 py-3 rounded-xl border border-gray-300 text-gray-600 text-sm font-semibold hover:bg-gray-50 cursor-pointer"
+              >
+                Batal
+              </button>
+              <button
+                type="submit"
+                disabled={updating}
+                className="px-6 py-3 rounded-xl bg-[#1F4A92] hover:bg-[#677c9f] text-white text-sm font-semibold cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+              >
+                {updating ? "Menyimpan..." : "Simpan Perubahan"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditMentorForm;
@@ -0,0 +1,137 @@
+import { useNavigate } from "react-router-dom";
+import NavbarAdmin from "../Layout/NavbarAdmin";
+import SidebarAdmin from "../Layout/SidebarAdmin";
+import { useMentors, useDeleteMentor } from "../hooks/useMentors";
+
+const MentorPage = () => {
+  const navigate = useNavigate();
+  const { mentors, loading, error, refetch } = useMentors();
+  const { deleteMentor, loading: deleting } = useDeleteMentor();
+
+  const handleDelete = async (id: number, name: string) => {
+    const confirmed = confirm(`Apakah Anda yakin ingin menghapus mentor "${name}"?`);
+    if (!confirmed) return;
+
+    const success = await deleteMentor(id);
+    if (success) {
+      alert("Mentor berhasil dihapus!");
+      refetch();
+    } else {
+      alert("Gagal menghapus mentor. Silakan coba lagi.");
+    }
+  };
+
+  return (
+    <div className="min-h-screen w-full overflow-hidden">
+      <NavbarAdmin />
+
+      <div className="flex flex-row">
+        <SidebarAdmin />
+        <div className="p-10 bg-white flex-col flex-wrap w-full">
+          {/* Header */}
+          <div className="flex flex-row justify-between items-center mb-[50px]">
+            <h2 className="text-[24px] font-semibold">Daftar Mentor</h2>
+            <button
+              className="px-[20px] py-[10px] rounded-xl bg-[#1F4A92] hover:bg-[#677c9f] cursor-pointer text-white font-semibold"
+              onClick={() => navigate("/create-mentor")}
+            >
+              Tambah Mentor
+            </button>
+          </div>
+
+          {/* Loading / Error */}
+          {loading && (
+            <p className="text-gray-500 text-center mt-4">Memuat data mentor...</p>
+          )}
+          {error && (
+            <p className="text-red-500 text-center mt-4">{error}</p>
+          )}
+
+          {/* Table */}
+          {!loading && !error && (
+            <div className="overflow-x-auto">
+              <table className="min-w-full">
+                <thead>
+                  <tr className="text-left border-b border-gray-200">
+                    <th className="px-6 py-3 text-sm font-semibold text-gray-600">No</th>
+                    <th className="px-6 py-3 text-sm font-semibold text-gray-600">Nama Lengkap</th>
+                    <th className="px-6 py-3 text-sm font-semibold text-gray-600">Email</th>
+                    <th className="px-6 py-3 text-sm font-semibold text-gray-600">Role</th>
+                    <th className="px-6 py-3 text-sm font-semibold text-gray-600">Aksi</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {mentors.map((mentor, index) => (
+                    <tr key={mentor.id} className="hover:bg-gray-50 border-b border-gray-100">
+                      <td className="px-6 py-4 text-sm text-gray-700">{index + 1}</td>
+                      <td className="px-6 py-4 text-sm text-gray-700">{mentor.full_name}</td>
+                      <td className="px-6 py-4 text-sm text-gray-700">{mentor.email}</td>
+                      <td className="px-6 py-4 text-sm text-gray-700 capitalize">{mentor.role}</td>
+                      <td className="px-6 py-4 flex gap-2">
+                        {/* Tombol Edit */}
+                        <button
+                          className="bg-[#2CAEFF] text-white cursor-pointer p-2 rounded-xl hover:bg-[#1a8fd4] transition-colors"
+                          onClick={() => navigate(`/edit-mentor/${mentor.id}`)}
+                          title="Edit Mentor"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="size-5"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"
+                            />
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M19.5 7.125 18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+                            />
+                          </svg>
+                        </button>
+
+                        {/* Tombol Hapus */}
+                        <button
+                          className="bg-[#E41E1E] text-white cursor-pointer p-2 rounded-xl hover:bg-[#b81414] transition-colors disabled:opacity-50"
+                          onClick={() => handleDelete(mentor.id, mentor.full_name)}
+                          disabled={deleting}
+                          title="Hapus Mentor"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="size-5"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                            />
+                          </svg>
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+
+              {mentors.length === 0 && (
+                <p className="text-gray-500 mt-4 text-center">Belum ada data mentor.</p>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MentorPage;
@@ -17,7 +17,7 @@ const decodeJWT = (token: string) => {
 export default function InternifyLogin() {
    const navigate = useNavigate();
    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
+    const [password, setPassword] = useState("")
    const [showPassword, setShowPassword] = useState(false);

    const { login, loading, error, setError } = useLogin();
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { Check, Download, Info } from "lucide-react";
-import { LuFileSpreadsheet } from "react-icons/lu"; // Alternatif icon task dari react-icons
+import { LuFileSpreadsheet } from "react-icons/lu";
 import { io } from "socket.io-client";
 import * as NotificationService from "../../services/NotificationService";
 import type { UINotification, BackendNotification } from "../../types/notification.types";
@@ -72,10 +72,6 @@ export default function NotificationList() {
    }
  };

-  if (false) {
-    (handleMarkAllRead as any)();
-  }
-
  return (
    <div>
      {/* Header */}
@@ -87,7 +83,7 @@ export default function NotificationList() {
          </p>
        </div>
        <button
-          onClick={markAllRead}
+          onClick={handleMarkAllRead}
          className="flex items-center gap-1.5 self-start sm:self-center px-4 py-2 border border-gray-200 rounded-lg text-xs font-semibold text-gray-700 bg-white hover:bg-gray-50 transition-colors shadow-sm"
        >
          <Check className="w-4 h-4 text-green-600 stroke-[3]" />
@@ -187,13 +183,6 @@ export default function NotificationList() {
          ))}
        </div>

-        {/* OLDER */}
-        {olderNotifs.length > 0 && (
-          <div className="space-y-3 pt-2">
-            <h2 className="text-[10px] font-bold tracking-widest text-gray-400 uppercase">Older</h2>
-            {olderNotifs.map(n => renderNotifCard(n, true))}
-          </div>
-        )}
      </div>
    </div>
  );
@@ -65,6 +65,7 @@ const SertificatePage = () => {
              progress={progress}
              remainingTasks={remainingTasks}
              allTasksDone={allTasksDone}
+              project_id={project?.id}
            />
          )}
        </div>
@@ -1,16 +1,27 @@
 import { Clock, Lock, Award } from "lucide-react";
+import { useClaimCertificate } from "../../../../hooks/useSertificates";

 interface CertificateNotAvailableProps {
  progress: number;
  remainingTasks: number;
  allTasksDone?: boolean;
+  project_id?: number;
 }

 export default function CertificateNotAvailable({
  progress,
  remainingTasks,
  allTasksDone = false,
+  project_id
 }: CertificateNotAvailableProps) {
+
+  const { claim, loading, error } = useClaimCertificate();
+
+  const handleClaim = async () => {
+    if (!project_id) return;
+    await claim(project_id);
+  };
+
  return (
    <div className="bg-box-primary w-full h-full rounded-2xl border border-box-border shadow-sm px-24 py-12 flex flex-col items-center justify-center">
      {/* Icon */}
@@ -59,9 +70,9 @@ export default function CertificateNotAvailable({

          {/* Progress Bar */}
          <div className="w-1/3">
-              <p className="text-xs text-font mt-2">
-                Selesaikan {remainingTasks} tugas lagi untuk membuka akses.
-              </p>
+            <p className="text-xs text-font mt-2">
+              Selesaikan {remainingTasks} tugas lagi untuk membuka akses.
+            </p>
            <div className="flex justify-between items-center mb-2">
              <span className="text-sm font-semibold text-gray-700">Progres Proyek</span>
              <span className="text-sm font-bold text-red-700">{progress}%</span>
@@ -72,8 +83,17 @@ export default function CertificateNotAvailable({
                style={{ width: `${progress}%` }}
              />
            </div>
-
          </div>
+
+          <button
+            onClick={handleClaim}
+            disabled={loading}
+            className="mt-2 px-6 py-2.5 bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors duration-200"
+          >
+            {loading ? "Memproses..." : "Klaim Sertifikat"}
+          </button>
+
+          {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
        </>
      )}
    </div>
@@ -17,7 +17,7 @@ const HomeHeader = () => {
  return (
    <div>
      <div className="flex items-start px-0 mb-5">
-        <h1 className="page-title">Hi, {name || "..."}!</h1>
+        <h1 className="page-title">Hi, {name || "User"}!</h1>
      </div>
    </div>
  );
@@ -1,4 +1,4 @@
-import type { ProjectTask } from "../../../../types/project.types";
+import type { ProjectTask } from "../../../../types/task.types";

 const formatDate = (dateStr: string) =>
  new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
@@ -6,22 +6,24 @@ const formatDate = (dateStr: string) =>
 export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
-
  return (
    <div className="">
      <div className="flex items-center gap-1.5 mb-4 justify-between">
        <span className="font-semibold text-md text-font-shade">Timeline</span>
      </div>
      <ul className="relative pl-4">
-        {tasks.map((task) => {
+        {tasks.map((task, index) => {
          const d = new Date(task.deadline_at);
          d.setHours(0, 0, 0, 0);
          const isToday = d.getTime() === today.getTime();
          const isPast = d < today;
          const active = isToday || isPast;
-
          return (
            <li key={task.id} className="relative mb-6 list-none">
+              {/* Vertical line ke bawah, kecuali item terakhir */}
+              {index < tasks.length - 1 && (
+                <div className="absolute -left-[1.0625rem] top-3 w-px h-full bg-[#ddd]" />
+              )}
              {/* Dot */}
              <div
                className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${
@@ -29,7 +31,7 @@ export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
                } ${isToday ? 'shadow-md' : ''}`}
              />
              <div className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'}`}>
-                {isToday ? 'Hari ini' : formatDate(task.deadline_at)} {/* ← format ISO string */}
+                {isToday ? 'Hari ini' : formatDate(task.deadline_at)}
              </div>
              <div className="text-xs text-[#555] mt-px leading-[1.3]">
                {task.title}
@@ -2,6 +2,7 @@
 import { useNavigate } from "react-router-dom";
 import CertificateProjectCard from "./components/CertificateProjectCard";
 import { useProjects } from "../../../hooks/useProjects";
+
 // ─── Main Page ────────────────────────────────────────────────────────────────
 export default function CertificateList() {
  const navigate = useNavigate();
@@ -11,6 +12,13 @@ export default function CertificateList() {
    navigate(`/mentor/certificates/${slug}`);
  };

+  if (loading){
+    <p>on loading</p>
+  }
+
+  if (error){
+    <p>error: {error}</p>
+  }
  return (
    <div>
      {/* Page Header */}
@@ -3,14 +3,27 @@ import { useState } from "react";
 import { Calendar, Edit } from "lucide-react";
 import EditSubmissionModal from "./components/EditSubmissionTask";
 import { useTaskSubmissions } from "../../../hooks/useTasks";
+import type { ProjectTask } from "../../../types/task.types";

 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');

 export default function MentorProjectsDetailPage() {
  const navigate = useNavigate();
  const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
-  const { task, loading, error } = useTaskSubmissions(taskSlug!, slug);
+  const { task, loading, error, refetch } = useTaskSubmissions(taskSlug!, slug);
  const [openModal, setOpenModal] = useState(false);
+
+  // Di MentorProjectsDetailPage
+  const handleEditSuccess = (updatedTask: ProjectTask) => {
+    if (updatedTask.slug !== taskSlug) {
+      // Slug berubah, navigate ke URL baru
+      navigate(`/mentor/projects/${slug}/${updatedTask.slug}`, { replace: true });
+    } else {
+      // Slug sama, cukup refetch
+      refetch();
+    }
+  };
+
  if (loading) return (
    <div className="space-y-4">
      {[...Array(3)].map((_, i) => (
@@ -152,6 +165,8 @@ export default function MentorProjectsDetailPage() {
        <EditSubmissionModal
          isOpen={openModal}
          onClose={() => setOpenModal(false)}
+          task={task}
+          onSuccess={handleEditSuccess}
        />
      )}
    </div>
@@ -14,19 +14,26 @@ export default function MentorSettingsPage() {
  // File state untuk profile_picture
  const [photoFile, setPhotoFile] = useState<File | null>(null);
  const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  const [imageError, setImageError] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Sync form data ketika user sudah di-fetch
  useEffect(() => {
    if (user) {
      setFormData({
-        fullName: user.full_name || "",
+        fullName:
+          user.full_name ||
+          `${user.nama_depan ?? ""} ${user.nama_belakang ?? ""}`.trim() ||
+          "",
        email: user.email || "",
        bio: user.professional_bio || "",
      });
      if (user.profile_picture) {
        setPhotoPreview(user.profile_picture);
+      } else {
+        setPhotoPreview(null);
      }
+      setImageError(false);
    }
  }, [user]);

@@ -48,6 +55,7 @@ export default function MentorSettingsPage() {
  const handleRemovePhoto = () => {
    setPhotoFile(null);
    setPhotoPreview(null);
+    setImageError(false);
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

@@ -62,6 +70,7 @@ export default function MentorSettingsPage() {
    // Reset file state setelah berhasil save
    if (!errorMsg) {
      setPhotoFile(null);
+      setImageError(false);
    }
  };

@@ -104,8 +113,13 @@ export default function MentorSettingsPage() {
            {/* Avatar dengan badge edit */}
            <div className="relative flex-shrink-0">
              <div className="w-20 h-20 rounded-xl border-2 border-red-100 overflow-hidden bg-gray-100 flex items-center justify-center shadow-sm">
-                {photoPreview ? (
-                  <img src={photoPreview} alt="Profile" className="w-full h-full object-cover" />
+                {photoPreview && !imageError ? (
+                  <img
+                    src={photoPreview}
+                    alt="Profile"
+                    className="w-full h-full object-cover"
+                    onError={() => setImageError(true)}
+                  />
                ) : (
                  <span className="text-3xl font-black text-gray-900">{initialLetter}</span>
                )}
@@ -1,7 +1,7 @@
 // ManageInternsModal.tsx
 import { useRef, useEffect, useState } from "react";
 import { Search, Plus, Trash2 } from "lucide-react";
-import { useMahasiswa } from "../../../../hooks/useInterns";
+import { useMahasiswa } from "../../../../hooks/useUser";
 import { useAssignMember } from '../../../../hooks/useProjects';
 import type { ProjectMember } from '../../../../types/project.types';
 import type { Mahasiswa } from '../../../../types/project.types';
@@ -1,21 +1,44 @@
 import { useRef, useEffect, useState } from "react";
 import { X } from "lucide-react";
 import { LuSave } from "react-icons/lu";
+import { useUpdateTask } from "../../../../hooks/useTasks";
+import type { ProjectTask, SubmissionType, UpdateTaskPayload } from "../../../../types/task.types";

 interface EditTaskModalProps {
  isOpen: boolean;
  onClose: () => void;
+  task: ProjectTask;
+  onSuccess: (updatedTask: ProjectTask) => void;
 }

-export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalProps) {
+export default function EditSubmissionModal({
+  isOpen,
+  onClose,
+  task,
+  onSuccess,
+}: EditTaskModalProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);
+  const { update, loading, error } = useUpdateTask();

-  // Form States
-  const [taskTitle, setTaskTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [deadlineDate, setDeadlineDate] = useState("");
-  const [specificTime, setSpecificTime] = useState("");
-  const [submissionType, setSubmissionType] = useState<"file" | "url">("file");
+  // Form States — diinisialisasi dari props task
+  const [taskTitle, setTaskTitle] = useState(task.title);
+  const [description, setDescription] = useState(task.description);
+  const [deadlineDate, setDeadlineDate] = useState(
+    task.deadline_at ? task.deadline_at.split("T")[0] : ""
+  );
+  const [specificTime, setSpecificTime] = useState(
+    task.deadline_at ? task.deadline_at.split("T")[1]?.slice(0, 5) ?? "" : ""
+  );
+  const [submissionType, setSubmissionType] = useState<SubmissionType>(task.submission_type);
+
+  // Sync form ketika task berubah (misal modal dibuka untuk task berbeda)
+  useEffect(() => {
+    setTaskTitle(task.title);
+    setDescription(task.description);
+    setDeadlineDate(task.deadline_at ? task.deadline_at.split("T")[0] : "");
+    setSpecificTime(task.deadline_at ? task.deadline_at.split("T")[1]?.slice(0, 5) ?? "" : "");
+    setSubmissionType(task.submission_type);
+  }, [task]);

  useEffect(() => {
    const dialog = dialogRef.current;
@@ -41,12 +64,26 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
    };
  }, [isOpen, onClose]);

-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
-    const payload = { taskTitle, description, deadlineDate, specificTime, submissionType };
-    console.log("Saving Task:", payload);
-    alert("Task Saved Successfully!");
-    onClose();
+
+    const payload: UpdateTaskPayload = {};
+
+    if (taskTitle.trim() !== task.title) payload.title = taskTitle.trim();
+    if (description !== task.description) payload.description = description;
+    if (deadlineDate !== task.deadline_at.split("T")[0]) payload.deadline_date = deadlineDate;
+    if (specificTime !== (task.deadline_at.split("T")[1]?.slice(0, 5) ?? "")) payload.specific_time = specificTime;
+    if (submissionType !== task.submission_type) payload.submission_type = submissionType;
+
+    if (Object.keys(payload).length === 0) {
+      onClose();
+      return;
+    }
+    const result = await update(task.id, payload, String(task.id_project));
+    if (result) {
+      onSuccess(result);
+      onClose();
+    }
  };

  return (
@@ -54,7 +91,7 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr

      {/* Header */}
      <div className="dialog-header">
-        <h2 className="text-xl font-bold text-gray-900 tracking-tight">Task</h2>
+        <h2 className="text-xl font-bold text-gray-900 tracking-tight">Edit Task</h2>
        <button
          onClick={onClose}
          className="rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors"
@@ -66,6 +103,13 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
      {/* Form Body */}
      <form onSubmit={handleSubmit} className="p-6 space-y-4 overflow-y-auto flex-1">

+        {/* Error Message */}
+        {error && (
+          <div className="px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-xs text-red-600 font-medium">
+            {error}
+          </div>
+        )}
+
        {/* Title */}
        <div className="space-y-1.5">
          <label className="text-xs font-bold text-gray-700 tracking-wide">Title</label>
@@ -93,8 +137,6 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr

        {/* Deadline & Submission Type Grid */}
        <div className="grid grid-cols-2 gap-4">
-
-          {/* Deadline Date */}
          <div className="space-y-1.5">
            <label className="text-xs font-bold text-gray-700 tracking-wide">Tenggat Waktu</label>
            <div className="relative">
@@ -103,32 +145,42 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
                required
                value={deadlineDate}
                onChange={(e) => setDeadlineDate(e.target.value)}
-                className="w-full p-3  py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none"
+                className="w-full p-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none"
              />
            </div>
          </div>

-          {/* Submission Type Dropdown */}
          <div className="space-y-1.5">
-            <label className="text-xs font-bold text-gray-700 tracking-wide">Tipe Pengumpulan</label>
+            <label className="text-xs font-bold text-gray-700 tracking-wide">Waktu Spesifik</label>
            <div className="relative">
-              <select
-                value={submissionType}
-                onChange={(e) => setSubmissionType(e.target.value as "file" | "url")}
-                className="w-full pl-3 pr-9 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none cursor-pointer"
-              >
-                <option value="file">File</option>
-                <option value="url">URL Link</option>
-              </select>
-              {/* Custom chevron icon */}
-              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                </svg>
-              </span>
+              <input
+                type="time"
+                required
+                value={specificTime}
+                onChange={(e) => setSpecificTime(e.target.value)}
+                className="w-full p-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none"
+              />
            </div>
          </div>
+        </div>

+        <div className="space-y-1.5">
+          <label className="text-xs font-bold text-gray-700 tracking-wide">Tipe Pengumpulan</label>
+          <div className="relative">
+            <select
+              value={submissionType}
+              onChange={(e) => setSubmissionType(e.target.value as SubmissionType)}
+              className="w-full pl-3 pr-9 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none cursor-pointer"
+            >
+              <option value="file_upload">File</option>
+              <option value="url_link">URL Link</option>
+            </select>
+            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+              </svg>
+            </span>
+          </div>
        </div>

        <div className="h-px bg-gray-100" />
@@ -138,16 +190,18 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
          <button
            type="button"
            onClick={onClose}
-            className="px-5 py-2.5 border border-gray-200 rounded-xl text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
+            disabled={loading}
+            className="px-5 py-2.5 border border-gray-200 rounded-xl text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50"
          >
            Batal
          </button>
          <button
            type="submit"
-            className="px-5 py-2.5 bg-[#B30000] hover:bg-[#990000] text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center gap-2"
+            disabled={loading}
+            className="px-5 py-2.5 bg-[#B30000] hover:bg-[#990000] text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
          >
            <LuSave className="w-4 h-4 stroke-[2.5]" />
-            Simpan Tugas
+            {loading ? "Menyimpan..." : "Simpan Tugas"}
          </button>
        </div>

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import * as LucideIcons from 'lucide-react';
 import type { LucideProps } from 'lucide-react';
 import type { Project } from '../../../../types/project.types';
+import { useArchiveProject } from '../../../../hooks/useProjects';

 const getDynamicIcon = (iconName: string) => {
        const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
@@ -14,14 +15,28 @@ const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');

 export default function MentorProjectCard(project: Project) {
  const navigate = useNavigate();
+  const { archive, loading } = useArchiveProject();
+
  const handleCardClick = () => {
    navigate(`/mentor/projects/${toSlug(project.slug)}`)
  };
  const Icon = getDynamicIcon(project.project_icon);

-  const handleDeleteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleDeleteClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
-  }
+
+    const confirmed = window.confirm(`Arsipkan project "${project.project_name}"?`);
+    if (!confirmed) return;
+
+    const result = await archive(project.id);
+
+    if (result) {
+      window.alert("Project berhasil diarsipkan.");
+      window.location.reload();
+    } else {
+      window.alert("Gagal mengarsipkan project.");
+    }
+  };
  return (
    <div
      onClick={handleCardClick}
@@ -50,7 +65,12 @@ export default function MentorProjectCard(project: Project) {

      {/* Footer */}
      <div className="border-t border-gray-300 text-gray-400 flex justify-end p-2 bg-gray-50/50">
-        <button onClick={handleDeleteClick} className="hover:text-red-600 transition-colors">
+        <button
+          onClick={handleDeleteClick}
+          disabled={loading}
+          className="hover:text-red-600 transition-colors disabled:opacity-50"
+          aria-label={`Archive ${project.project_name}`}
+        >
          <Trash2 className="w-4 h-4" />
        </button>
      </div>
@@ -1,22 +0,0 @@
-// hooks/useMahasiswa.ts
-import { useState, useEffect, useCallback } from 'react';
-import type { Mahasiswa } from '../types/project.types';
-import { getMahasiswa } from '../services/MahasiswaService';
-
-export const useMahasiswa = () => {
-  const [mahasiswa, setMahasiswa] = useState<Mahasiswa[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const refetch = useCallback(() => {
-    setLoading(true);
-    getMahasiswa()
-      .then(setMahasiswa)
-      .catch(() => setError('Gagal memuat data mahasiswa.'))
-      .finally(() => setLoading(false));
-  }, []);
-
-  useEffect(() => { refetch(); }, [refetch]);
-
-  return { mahasiswa, loading, error, refetch };
-};
@@ -0,0 +1,123 @@
+import { useState, useEffect, useCallback } from "react";
+import type { MentorData, CreateMentorPayload, UpdateMentorPayload } from "../services/MentorServices";
+import {
+  createMentorService,
+  getMentorsService,
+  getMentorDetailService,
+  updateMentorService,
+  deleteMentorService,
+} from "../services/MentorServices"
+
+// ── GET ALL ──────────────────────────────────────────────────────────────────
+export const useMentors = () => {
+  const [mentors, setMentors] = useState<MentorData[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setMentors(await getMentorsService());
+    } catch {
+      setError("Gagal mengambil data mentor.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetch(); }, [fetch]);
+
+  return { mentors, loading, error, refetch: fetch };
+};
+
+// ── GET DETAIL ───────────────────────────────────────────────────────────────
+export const useMentorDetail = (id: number | null) => {
+  const [mentor, setMentor] = useState<MentorData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch = useCallback(async () => {
+    if (!id) return;
+    setLoading(true);
+    setError(null);
+    try {
+      setMentor(await getMentorDetailService(id));
+    } catch {
+      setError("Gagal mengambil detail mentor.");
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => { fetch(); }, [fetch]);
+
+  return { mentor, loading, error, refetch: fetch };
+};
+
+// ── CREATE ───────────────────────────────────────────────────────────────────
+export const useCreateMentor = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const createMentor = async (payload: CreateMentorPayload): Promise<MentorData | null> => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await createMentorService(payload);
+    } catch {
+      setError("Gagal membuat akun mentor.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { createMentor, loading, error };
+};
+
+// ── UPDATE ───────────────────────────────────────────────────────────────────
+export const useUpdateMentor = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const updateMentor = async (
+    id: number,
+    payload: UpdateMentorPayload
+  ): Promise<MentorData | null> => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await updateMentorService(id, payload);
+    } catch {
+      setError("Gagal memperbarui data mentor.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { updateMentor, loading, error };
+};
+
+// ── DELETE ───────────────────────────────────────────────────────────────────
+export const useDeleteMentor = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const deleteMentor = async (id: number): Promise<boolean> => {
+    setLoading(true);
+    setError(null);
+    try {
+      await deleteMentorService(id);
+      return true;
+    } catch {
+      setError("Gagal menghapus mentor.");
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { deleteMentor, loading, error };
+};
@@ -7,7 +7,6 @@ import {
  getAllCertificates,
  getCertificateDetail,
  getCertificatesByProject,
-  verifyCertificate,
  verifyCertificateByUuid,
  uploadCertificateTemplate,
 } from "../services/CertificateService";
@@ -92,16 +91,6 @@ export const useVerifyCertificate = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

-  const verifyByNo = useCallback(async (certificate_no: string) => {
-    setLoading(true); setError(null);
-    try {
-      const res = await verifyCertificate(certificate_no);
-      setResult(res);
-      return res;
-    } catch { setError("Sertifikat tidak valid atau tidak ditemukan."); return null; }
-    finally { setLoading(false); }
-  }, []);
-
  const verifyByUuid = useCallback(async (uuid: string) => {
    setLoading(true); setError(null);
    try {
@@ -112,7 +101,7 @@ export const useVerifyCertificate = () => {
    finally { setLoading(false); }
  }, []);

-  return { result, loading, error, verifyByNo, verifyByUuid };
+  return { result, loading, error, verifyByUuid };
 };

 // POST /certificate-api/claim
@@ -1,12 +1,16 @@
 // hooks/useUser.ts
 import { useState, useEffect, useCallback } from "react";
 import { loginUser, getProfile, updateProfile } from "../services/UserService";
+import type { Mahasiswa } from '../types/project.types';
+import { getMahasiswa } from '../services/MahasiswaService';

 // ─── Types ────────────────────────────────────────────────────────────────────

 export interface CurrentUser {
  id: number;
  full_name: string;
+  nama_depan: string;
+  nama_belakang: string;
  email: string;
  role: "mentor" | "intern" | "admin";
  professional_bio?: string;
@@ -95,4 +99,24 @@ export const useUpdateProfile = () => {
  };

  return { save, loading, error, successMsg, setSuccessMsg, setError };
+};
+
+
+
+export const useMahasiswa = () => {
+  const [mahasiswa, setMahasiswa] = useState<Mahasiswa[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refetch = useCallback(() => {
+    setLoading(true);
+    getMahasiswa()
+      .then(setMahasiswa)
+      .catch(() => setError('Gagal memuat data mahasiswa.'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { refetch(); }, [refetch]);
+
+  return { mahasiswa, loading, error, refetch };
 };
@@ -36,14 +36,6 @@ export const getCertificatesByProject = async (id_project: number): Promise<Cert
  return res.data.data;
 };

-// GET /certificate-api/verify?certificate_no=... (public)
-export const verifyCertificate = async (certificate_no: string): Promise<CertificateVerifyResult> => {
-  const res = await api.get("/certificate-api/verify", {
-    params: { certificate_no },
-  });
-  return res.data.data;
-};
-
 // GET /certificate-api/verify-uuid/{uuid} (public)
 export const verifyCertificateByUuid = async (uuid: string): Promise<CertificateVerifyResult> => {
  const res = await api.get(`/certificate-api/verify-uuid/${uuid}`);
@@ -0,0 +1,77 @@
+import api from "../lib/api";
+
+export interface MentorData {
+  id: number;
+  nama_depan: string;
+  nama_belakang: string;
+  full_name: string;
+  email: string;
+  role: string;
+  signature: string;
+  profile_picture: string | null;
+  professional_bio: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateMentorPayload {
+  nama_depan: string;
+  nama_belakang: string;
+  full_name: string;
+  email: string;
+  password: string;
+  signature?: string;
+  professional_bio?: string;
+  profile_picture?: File;
+}
+
+export interface UpdateMentorPayload {
+  nama_depan?: string;
+  nama_belakang?: string;
+  email?: string;
+  password?: string;
+  signature?: string;
+  professional_bio?: string;
+  profile_picture?: File;
+}
+
+const toFormData = (payload: CreateMentorPayload | UpdateMentorPayload): FormData => {
+  const form = new FormData();
+  Object.entries(payload).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      form.append(key, value instanceof File ? value : String(value));
+    }
+  });
+  return form;
+};
+
+export const createMentorService = async (payload: CreateMentorPayload): Promise<MentorData> => {
+  const { data } = await api.post("/admin-api/mentors", toFormData(payload), {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+  return data.data;
+};
+
+export const getMentorsService = async (): Promise<MentorData[]> => {
+  const { data } = await api.get("/admin-api/mentors");
+  return data.data;
+};
+
+export const getMentorDetailService = async (id: number): Promise<MentorData> => {
+  const { data } = await api.get(`/admin-api/mentors/${id}`);
+  return data.data;
+};
+
+export const updateMentorService = async (
+  id: number,
+  payload: UpdateMentorPayload
+): Promise<MentorData> => {
+  const { data } = await api.patch(`/admin-api/mentors/${id}`, toFormData(payload), {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+  return data.data;
+};
+
+export const deleteMentorService = async (id: number): Promise<void> => {
+  await api.delete(`/admin-api/mentors/${id}`);
+};
@@ -35,7 +35,6 @@ export const getProjectMembers = async (
  id: string | number
 ): Promise<ProjectMember[]> => {
  const res = await api.get(`/project-api/get/${id}`);
-  console.log(res.data.data.member);
  return res.data.data.members.map((m: any) => ({
    id: m.id_user,
    avatar: m.user.profile_picture ?? null,
@@ -53,8 +52,6 @@ export const getProjectById = async (
 ): Promise<ProjectDetail> => {
  const res = await api.get(`/project-api/get/${id}`);
  const raw = res.data.data;
-  console.log("raw fields:", Object.keys(raw));
-console.log("raw full:", raw);
  return {
    ...raw,
    members: raw.members.map((m: any) => ({
@@ -1,6 +1,7 @@
 // services/UserService.ts
 import api from "../lib/api";
 import type { CurrentUser, UpdateProfilePayload } from "../hooks/useUser";
+import type { Mahasiswa, MahasiswaResponse } from "../types/project.types"

 // POST /auth-api/login
 export const loginUser = async (payload: {
@@ -18,7 +19,6 @@ export const getProfile = async (): Promise<CurrentUser> => {
 };

 // PATCH /auth-api/update-profile
-// Jika payload mengandung profile_picture (File), kirim sebagai multipart/form-data
 export const updateProfile = async (
  payload: UpdateProfilePayload
 ): Promise<CurrentUser> => {
@@ -36,3 +36,8 @@ export const updateProfile = async (
  const res = await api.patch("/auth-api/update-profile", payload);
  return res.data.data;
 };
+
+export const getMahasiswa = async (): Promise<Mahasiswa[]> => {
+  const response = await api.get<MahasiswaResponse>('/mahasiswa-api/get');
+  return response.data.data;
+};