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

Refactor internify components and services

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/LoginInternify.tsx
+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();
src/Pages/internify/NotificationList.tsx
+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>
);
src/Pages/internify/intern/InternClaimCert.tsx
+1
View File
@@ -65,6 +65,7 @@ const SertificatePage = () => {
progress={progress}
remainingTasks={remainingTasks}
allTasksDone={allTasksDone}
project_id={project?.id}
/>
)}
</div>
src/Pages/internify/intern/components/CertificateNotAvailable.tsx
+24 -4
View File
@@ -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>
src/Pages/internify/intern/components/HomeHeader.tsx
+1 -1
View File
@@ -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>
);
src/Pages/internify/intern/components/ProjectTimeline.tsx
+7 -5
View File
@@ -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}
src/Pages/internify/mentor/CertificateListPage.tsx
+8
View File
@@ -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 */}
src/Pages/internify/mentor/MentorProjectDetailPage.tsx
+16 -1
View File
@@ -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>
src/Pages/internify/mentor/MentorSettingsPage.tsx
+17 -3
View File
@@ -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>
)}
src/Pages/internify/mentor/components/AddInternsDialog.tsx
+1 -1
View File
@@ -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';
src/Pages/internify/mentor/components/EditSubmissionTask.tsx
+89 -35
View File
@@ -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>
src/Pages/internify/mentor/components/MentorProjectCard.tsx
+23 -3
View File
@@ -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>