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.
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-29 15:42:48 +07:00
parent 4084ccf1bf
commit da67ad86d8
29 changed files with 1099 additions and 5581 deletions
+2
View File
@@ -23,3 +23,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?
package-lock.json
-5465
View File
File diff suppressed because it is too large Load Diff
+6
View File
@@ -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>
+10 -3
View File
@@ -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">
+25
View File
@@ -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"
+226
View File
@@ -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;
+272
View File
@@ -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;
+137
View File
@@ -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;
+1 -1
View File
@@ -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();
+2 -13
View File
@@ -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 */}
@@ -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!");
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">
@@ -108,19 +150,31 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
</div>
</div>
{/* Submission Type Dropdown */}
<div className="space-y-1.5">
<label className="text-xs font-bold text-gray-700 tracking-wide">Waktu Spesifik</label>
<div className="relative">
<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 "file" | "url")}
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">File</option>
<option value="url">URL Link</option>
<option value="file_upload">File</option>
<option value="url_link">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" />
@@ -129,8 +183,6 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
</div>
</div>
</div>
<div className="h-px bg-gray-100" />
{/* Action Buttons */}
@@ -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>
-22
View File
@@ -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 };
};
+123
View File
@@ -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 };
};
+1 -12
View File
@@ -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
+24
View File
@@ -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;
@@ -96,3 +100,23 @@ 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 };
};
-8
View File
@@ -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}`);
+77
View File
@@ -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}`);
};
-3
View File
@@ -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) => ({
+6 -1
View File
@@ -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;
};
View File