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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user