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

feat: implement profile settings and comprehensive mentor-intern project management system

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-07-10 10:01:25 +07:00
parent 88f457258d
commit 17e3928d35
30 changed files with 302 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/LoginInternify.tsx
+2 -2
View File
@@ -74,7 +74,7 @@ export default function InternifyLogin() {
</span>
<input
type="email"
placeholder="name@company.com"
placeholder="Email Account"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors"
@@ -90,7 +90,7 @@ export default function InternifyLogin() {
</span>
<input
type={showPassword ? "text" : "password"}
placeholder="••••••••"
placeholder="Account Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full pl-10 pr-10 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors"
src/Pages/internify/SettingsPage.tsx
+10 -7
View File
@@ -3,7 +3,7 @@ import { useCurrentUser, useUpdateProfile } from "../../hooks/useUser";
import { customToast } from "../utils/showToast";
import { Pen } from "lucide-react";
export default function MentorSettingsPage() {
export default function SettingsPage() {
const { user, loading: userLoading } = useCurrentUser();
const { save, loading: saving, error: errorMsg, successMsg } = useUpdateProfile();
const isIntern = user?.role === "intern";
@@ -23,9 +23,7 @@ export default function MentorSettingsPage() {
if (user) {
setFormData({
fullName:
user.full_name ||
`${user.nama_depan ?? ""} ${user.nama_belakang ?? ""}`.trim() ||
"",
user.full_name || "",
email: user.email || "",
bio: user.professional_bio || "",
});
@@ -121,7 +119,7 @@ export default function MentorSettingsPage() {
<div className="flex items-center gap-5 py-2">
{/* 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">
<div className="w-16 h-16 rounded-xl border-2 border-red-100 overflow-hidden bg-gray-100 flex items-center justify-center shadow-sm">
{photoPreview && !imageError ? (
<img
src={photoPreview}
@@ -147,7 +145,7 @@ export default function MentorSettingsPage() {
</div>
{/* Info & Action Buttons */}
{!isIntern &&
{!isIntern ? (
<div>
<h3 className="text-sm font-bold text-gray-900 mb-0.5">Profile Photo</h3>
<p className="text-xs text-gray-400 mb-3">
@@ -175,7 +173,12 @@ export default function MentorSettingsPage() {
</button>
</div>
</div>
}
) : (
<div>
<h3 className="text-sm font-bold text-gray-900 mb-0.5">Nama</h3>
<p className="text-base text-gray-700 font-medium">{user?.full_name || formData.fullName || 'User'}</p>
</div>
)}
{/* Hidden file input */}
<input
src/Pages/internify/intern/ForumTab.tsx
+2 -4
View File
@@ -12,19 +12,17 @@ export default function ForumTab({ project }: { project: Project }) {
<HeroProject title={project.project_name} description={project.description} />
{/* Loading skeleton */}
{/* {loading && (
{loading && (
<div className="flex flex-col gap-3 mt-5">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-24 bg-gray-100 rounded-xl animate-pulse" />
))}
</div>
)} */}
)}
{/* Error */}
{error && <p className="text-red-500 text-sm mt-5">{error}</p>}
{/* Timeline + Task list — hanya tampil jika ada task */}
{/* {!loading && tasks.length === 0 ? ( */}
{tasks.length === 0 ? (
<p className="text-md text-font-shade mt-5">Belum ada tugas yang dapat dikerjakan.</p>
) : (
src/Pages/internify/intern/TaskSubmission.tsx
+6
View File
@@ -3,12 +3,16 @@ import { FileText, Info } from "lucide-react";
import TaskFormFile from "./components/TaskForm-file";
import TaskFormLink from "./components/TaskForm-link";
import { useTaskDetail } from "../../../hooks/useTasks";
import { useProjectDetail } from "../../../hooks/useProjects";
export default function TaskSubmission() {
const [searchParams] = useSearchParams();
const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
const submissionType = (searchParams.get("type") ?? "file") as "file_upload" | "url_link";
const { task, loading, error } = useTaskDetail(taskSlug!, slug);
const { project } = useProjectDetail(slug!);
const isProjectActive = project?.status === "active";
const formatDeadline = (dateStr: string) =>
new Date(dateStr).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" });
@@ -53,6 +57,7 @@ export default function TaskSubmission() {
projectId={String(task.project.id)}
deadline={new Date(task.deadline_at)}
initialSubmission={task.my_submission}
isProjectActive={isProjectActive}
/>
) : (
<TaskFormLink
@@ -60,6 +65,7 @@ export default function TaskSubmission() {
projectId={String(task.project.id)}
deadline={new Date(task.deadline_at)}
initialSubmission={task.my_submission}
isProjectActive={isProjectActive}
/>
)}
src/Pages/internify/intern/components/HomeHeader.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const HomeHeader = () => {
useEffect(() => {
api.get("/auth-api/me")
.then((res) => {
setName(res.data.data.full_name || res.data.data.nama_depan);
setName(res.data.data.full_name || (res.data.data.nama_depan + " " + res.data.data.nama_belakang));
})
.catch((err) => {
console.error("Failed to fetch user:", err);
src/Pages/internify/intern/components/ProjectTimeline.tsx
+3 -4
View File
@@ -8,7 +8,7 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
today.setHours(0, 0, 0, 0);
return (
<div className="">
<div className="flex items-center gap-1.5 mb-4 justify-between">
<div className="flex items-center gap-1.5 mb-1 md:mb-4 justify-between">
<span className="font-semibold text-md text-font-shade">Timeline</span>
</div>
<ul className="relative pl-4">
@@ -20,7 +20,6 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
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]" />
)}
@@ -30,10 +29,10 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
active ? 'bg-red' : 'bg-gray-400'
} ${isToday ? 'shadow-md' : ''}`}
/>
<div className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'}`}>
<div className={`text-[11px] font-semibold ${isToday ? 'text-red' : 'text-font'}`}>
{isToday ? 'Hari ini' : formatDate(task.deadline_at)}
</div>
<div className="text-xs text-[#555] mt-px leading-[1.3]">
<div className="text-xs text-font mt-px leading-[1.3]">
{task.title}
</div>
</li>
src/Pages/internify/intern/components/SubmissionStatusTable.tsx
+6 -2
View File
@@ -10,6 +10,7 @@ interface SubmitStatusTableProps {
deadline?: Date;
onEdit: () => void;
onDelete: () => void;
disabled: boolean;
}
function getTimeEarly(submittedAt: Date, deadline: Date): string {
@@ -32,6 +33,7 @@ export default function SubmitStatusTable({
deadline,
onEdit,
onDelete,
disabled = false,
}: SubmitStatusTableProps) {
const [confirmDelete, setConfirmDelete] = useState(false);
@@ -86,13 +88,15 @@ export default function SubmitStatusTable({
<div className="flex gap-2">
<button
onClick={onEdit}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
disabled={disabled}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
>
Edit Submission
</button>
<button
onClick={() => setConfirmDelete(true)}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:text-red-700 hover:bg-red-50 hover:border-red-200 transition-colors"
disabled={disabled}
className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:text-red-700 hover:bg-red-50 hover:border-red-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
>
Delete Submission
</button>
src/Pages/internify/intern/components/TaskForm-file.tsx
+5 -3
View File
@@ -11,9 +11,10 @@ interface TaskFormFileProps {
projectId?: string;
deadline?: Date;
initialSubmission?: TaskSubmissionData | null;
isProjectActive?: boolean;
}
export default function TaskFormFile({ taskId, projectId, deadline, initialSubmission }: TaskFormFileProps) {
export default function TaskFormFile({ taskId, projectId, deadline, initialSubmission, isProjectActive = true }: TaskFormFileProps) {
const { submission, loading, submitFile, updateFile, remove } = useSubmission(taskId, initialSubmission, projectId);
const [files, setFiles] = useState<File[]>([]);
const [isDragActive, setIsDragActive] = useState(false);
@@ -119,6 +120,7 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
deadline={deadline}
onEdit={() => setIsEditing(true)}
onDelete={handleDelete}
disabled={!isProjectActive}
/>
);
}
@@ -188,8 +190,8 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
</button>
)}
<button
type="submit" disabled={loading}
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
type="submit" disabled={loading || !isProjectActive}
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer disabled:cursor-not-allowed disabled:hover:bg-[#990000]"
>
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
src/Pages/internify/intern/components/TaskForm-link.tsx
+6 -3
View File
@@ -11,13 +11,15 @@ interface TaskFormLinkProps {
projectId?: string;
deadline?: Date;
initialSubmission?: TaskSubmissionData | null;
isProjectActive?: boolean;
}
export default function TaskFormLink({
taskId,
projectId,
deadline,
initialSubmission
initialSubmission,
isProjectActive = true,
}: TaskFormLinkProps) {
const { submission, loading, submitLink, updateLink, remove } = useSubmission(taskId, initialSubmission, projectId);
const [inputLink, setInputLink] = useState(initialSubmission?.url_link ?? "");
@@ -88,6 +90,7 @@ export default function TaskFormLink({
deadline={deadline}
onEdit={() => setIsEditing(true)}
onDelete={handleDelete}
disabled={!isProjectActive}
/>
);
}
@@ -115,8 +118,8 @@ export default function TaskFormLink({
</p>
</div>
<button
type="submit" disabled={loading}
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
type="submit" disabled={loading || !isProjectActive}
className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer disabled:cursor-not-allowed disabled:hover:bg-[#990000]"
>
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Submit Task"}
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
src/Pages/internify/mentor/BaseProjectsPage.tsx
+7 -7
View File
@@ -6,7 +6,7 @@ import { useProjectsByRole } from '../../../hooks/useListProjects';
export default function MentorProjectsPage() {
const [isModalOpen, setIsModalOpen] = useState(false);
const { projects, loading, error, refetch } = useProjectsByRole();
const { projects, loading, error, refetch } = useProjectsByRole("active");
const openDialog = () => {
setIsModalOpen(true);
@@ -49,12 +49,12 @@ export default function MentorProjectsPage() {
<div className="flex flex-wrap gap-4 items-stretch">
{projects.map(project => (
<MentorProjectCard
key={project.id}
{...project}
onArchived={refetch}
onCompleted={refetch}
/>
<MentorProjectCard
key={project.id}
{...project}
onArchived={refetch}
onCompleted={refetch}
/>
))}
</div>
src/Pages/internify/mentor/MentorProjectDetailPage.tsx
+5 -4
View File
@@ -4,6 +4,7 @@ import { Calendar, Edit } from "lucide-react";
import EditSubmissionModal from "./components/EditSubmissionTask";
import { useTaskSubmissions } from "../../../hooks/useTasks";
import type { ProjectTask } from "../../../types/task.types";
import { useProjectDetail } from "../../../hooks/useProjects";
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
@@ -12,14 +13,13 @@ export default function MentorProjectsDetailPage() {
const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
const { task, loading, error, refetch } = useTaskSubmissions(taskSlug!, slug);
const [openModal, setOpenModal] = useState(false);
const { project } = useProjectDetail(slug!);
const isProjectActive = project?.status === "active"
// 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();
}
};
@@ -50,8 +50,9 @@ export default function MentorProjectsDetailPage() {
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold text-[#1a1a1a]">{task.title}</h1>
<button
className="flex items-center gap-2 border border-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-all"
className="flex items-center gap-2 border border-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => setOpenModal(true)}
disabled={!isProjectActive}
>
<Edit size={16} />
Edit Task
src/Pages/internify/mentor/ProjectForumTab.tsx
-7
View File
@@ -5,17 +5,13 @@ import { useProjectTasks } from '../../../hooks/useTasks';
import type { Project } from '../../../types/project.types';
export default function MentorForumTab({ project }: { project: Project }) {
// Gunakan project.id dari props — route pakai :slug, bukan :id
const { tasks, loading, error } = useProjectTasks(project.id);
if (error) return <div>Error: {error}</div>;
return (
<div>
{/* Hero banner */}
<HeroProject title={project.project_name} description={project.description} />
{/* Loading skeleton */}
{loading && (
<div className="flex flex-col gap-3 mt-5">
{[...Array(3)].map((_, i) => (
@@ -24,18 +20,15 @@ export default function MentorForumTab({ project }: { project: Project }) {
</div>
)}
{/* Timeline + Task list — hanya tampil jika ada task */}
{!loading && tasks.length === 0 ? (
<p className="text-md text-font-shade mt-5">Belum ada tugas yang dikerjakan.</p>
) : (
!loading && (
<div className="flex flex-col gap-7 md:flex-row md:items-start mt-5">
{/* Kolom kiri: Timeline */}
<div className="w-full md:w-1/5 bg-white rounded-xl p-5 border border-box-border shrink-0">
<ProjectTimeline tasks={tasks} />
</div>
{/* Kolom kanan: Task cards */}
<div className="w-full border-t border-box-border md:border-t-0 pt-4 md:pt-0 md:w-4/5">
{tasks.map((task) => (
<MentorTaskCard key={task.id} task={task} />
src/Pages/internify/mentor/ProjectsInternTab.tsx
+6 -3
View File
@@ -9,6 +9,7 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
const [isModalOpen, setIsModalOpen] = useState(false);
const [members, setMembers] = useState<ProjectMember[]>(project.members);
const { remove, loading } = useRemoveMember();
const isProjectActive = project?.status === "active"
const handleModalClose = (finalMembers: ProjectMember[]) => {
setMembers(finalMembers);
@@ -58,7 +59,9 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
</h3>
<button
onClick={() => setIsModalOpen(true)}
className='bg-gray-300 border border-gray-500 px-2 py-1 rounded-md hover:bg-gray-400 transition-colors'
disabled={!isProjectActive}
className={`border border-gray-500 px-2 py-1 rounded-md transition-colors ${!isProjectActive ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-300 hover:bg-gray-400'
}`}
>
<span className='flex items-center gap-3 text-[11px]'>
<Plus className='w-3 h-3'/>Add
@@ -82,8 +85,8 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
<div>
<button
onClick={() => handleRemove(member.id)}
disabled={loading}
className='flex items-center gap-1 text-[11px] bg-red-600 text-white py-1 px-2 rounded-md disabled:opacity-50 hover:bg-red-700 transition-colors'
disabled={loading || !isProjectActive}
className='flex items-center gap-1 text-[11px] bg-red-600 text-white py-1 px-2 rounded-md disabled:opacity-50 hover:bg-red-700 transition-colors disabled:cursor-not-allowed'
>
<Plus className='w-4 h-4'/>Delete
</button>
src/Pages/internify/mentor/TaskTab.tsx
+13 -7
View File
@@ -1,6 +1,5 @@
import { useProjectTasks, useDeleteTask } from '../../../hooks/useTasks';
import type { ProjectDetail } from '../../../types/project.types';
import type { ProjectTask } from '../../../types/task.types';
import type { InternTaskItem, ProjectDetail } from '../../../types/project.types';
import { ClipboardList, Pencil, Trash2 } from 'lucide-react';
import { useState } from 'react';
import CreateTaskModal from './components/CreateTaskDialog';
@@ -12,9 +11,13 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
const { remove } = useDeleteTask();
const [isModalOpen, setIsModalOpen] = useState(false);
const [editModalOpen, setEditModalOpen] = useState(false);
const [selectedTask, setSelectedTask] = useState<ProjectTask | null>(null);
const [selectedTask, setSelectedTask] = useState<InternTaskItem | null>(null);
const isProjectActive = project?.status === "active"
const handleDeleteTask = async (taskId: number, taskTitle: string) => {
const confirmed = window.confirm(`Yakin ingin menghapus task “${taskTitle}”?`);
if (!confirmed) return;
const handleDeleteTask = async (taskId: number,taskTitle: string) => {
const del = await remove(taskId, String(project.id));
if (del) {
try {
@@ -42,7 +45,8 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
<h2 className="text-3xl font-bold text-slate-800 tracking-tight">Tasks</h2>
<button
onClick={() => setIsModalOpen(true)}
className="bg-[#C0392B] hover:bg-[#A93226] text-white px-6 py-2.5 rounded-full font-bold text-sm transition-colors shadow-sm"
disabled={!isProjectActive}
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Add Task
</button>
@@ -65,13 +69,15 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
<div className="flex items-center gap-4 text-slate-600 shrink-0">
<button
onClick={() => { setSelectedTask(task); setEditModalOpen(true); }}
className="hover:text-blue-600 transition-colors p-1"
disabled={!isProjectActive}
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<Pencil size={20} />
</button>
<button
onClick={() => handleDeleteTask(task.id, task.title)}
className="hover:text-red-600 transition-colors p-1"
disabled={!isProjectActive}
className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<Trash2 size={20} />
</button>
src/Pages/internify/mentor/ViewInternSubmission.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export default function ViewInternSubmission() {
);
return (
<div className="space-y-4">
<div className="pt-8 space-y-4">
{/* Header */}
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6">
<div className="space-y-1">
src/Pages/internify/mentor/components/ArchiveProjectDialog.tsx
+5 -5
View File
@@ -47,8 +47,8 @@ export default function ArchiveProjectDialog({
{/* Header */}
<div className="dialog-header">
<div className="flex items-center gap-2.5 px-3">
<div className="w-9 h-9 rounded-full bg-yellow-100 flex items-center justify-center shrink-0">
<Archive className="w-4 h-4 text-yellow-600" />
<div className="w-9 h-9 rounded-full bg-red-100 flex items-center justify-center shrink-0">
<Archive className="w-4 h-4 text-red-600" />
</div>
<div>
<h2 className="text-base font-bold text-gray-900 tracking-tight">
@@ -74,8 +74,8 @@ export default function ArchiveProjectDialog({
Apakah kamu yakin ingin mengarsipkan project{" "}
<span className="font-semibold text-gray-900">"{projectName}"</span>?
</p>
<div className="bg-yellow-50 border border-yellow-200 rounded-lg px-4 py-3">
<p className="text-xs text-yellow-700 leading-relaxed">
<div className="bg-red-50 border border-red-200 rounded-lg px-4 py-3">
<p className="text-xs text-red-700 leading-relaxed">
<span className="font-bold">Perhatian:</span> Project yang diarsipkan
tidak akan bisa diakses oleh intern dan tidak muncul di daftar aktif.
Kamu masih bisa melihatnya di tab Archived.
@@ -96,7 +96,7 @@ export default function ArchiveProjectDialog({
type="button"
onClick={onConfirm}
disabled={loading}
className="w-full sm:flex-1 py-2.5 bg-yellow-500 hover:bg-yellow-600 disabled:opacity-60 text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center justify-center gap-2"
className="w-full sm:flex-1 py-2.5 bg-red-500 hover:bg-red-600 disabled:opacity-60 text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center justify-center gap-2"
>
<Archive className="w-4 h-4" />
{loading ? "Mengarsipkan..." : "Ya, Arsipkan"}
src/Pages/internify/mentor/components/CreateProjectDialog.tsx
+10 -30
View File
@@ -27,18 +27,6 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
const [showDropdown, setShowDropdown] = useState(false);
const emailSectionRef = useRef<HTMLDivElement>(null);
// Tutup dropdown saat klik di luar area input
const handleClickOutside = useCallback((e: MouseEvent) => {
if (emailSectionRef.current && !emailSectionRef.current.contains(e.target as Node)) {
setShowDropdown(false);
}
}, []);
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [handleClickOutside]);
const projectIcons = PROJECT_ICON_CODES.map((id) => ({
id,
icon: PROJECT_ICON_MAP[id],
@@ -77,11 +65,6 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
}
};
// const handleAddEmailFromForm = (e: React.FormEvent) => {
// e.preventDefault();
// handleAddEmail();
// };
const handleRemoveEmail = (emailToRemove: string) => {
setInvitedEmails(invitedEmails.filter(email => email !== emailToRemove));
};
@@ -171,7 +154,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
placeholder="e.g., Q3 Infrastructure Upgrade"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
className="w-full px-4 py-2.5 bg-white border border-card-outline rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
/>
</div>
@@ -185,7 +168,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
placeholder="Outline the project goals, deliverables, and technical requirements..."
value={projectDescription}
onChange={(e) => setProjectDescription(e.target.value)}
className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium resize-none leading-relaxed"
className="w-full px-4 py-2.5 bg-white border border-card-outline rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium resize-none leading-relaxed"
/>
</div>
@@ -213,12 +196,12 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
}
if (e.key === 'Escape') setShowDropdown(false);
}}
className="w-full pl-10 pr-20 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
className="w-full pl-10 pr-20 py-2.5 bg-white border border-card-outline rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
/>
<button
type="button"
onClick={() => handleAddEmail()}
className="absolute right-2 px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-800 text-[11px] font-bold rounded-md transition-colors tracking-wider uppercase"
className="absolute right-2 px-3 py-1 bg-card hover:bg-card-hover border border-card-outline text-font-shade text-[11px] font-bold rounded-md transition-colors tracking-wider uppercase"
>
ADD
</button>
@@ -226,7 +209,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
{/* Dropdown daftar intern */}
{showDropdown && (
<div className="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-xl shadow-lg max-h-44 overflow-y-auto">
<div className="absolute z-10 mt-1 w-full bg-white border border-card-outline rounded-xl shadow-lg max-h-44 overflow-y-auto">
{loadingInterns ? (
<p className="text-xs text-gray-400 text-center py-3">Memuat data intern...</p>
) : (() => {
@@ -244,13 +227,10 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
key={intern.id}
type="button"
onMouseDown={(e) => { e.preventDefault(); handleAddEmail(intern.email); }}
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors text-left"
className="w-full flex items-center gap-3 px-6 py-2.5 hover:bg-gray-50 transition-colors text-left"
>
<div className="w-7 h-7 rounded-full bg-red-100 text-red-700 flex items-center justify-center text-[10px] font-bold shrink-0">
{intern.full_name.split(' ').slice(0, 2).map((n) => n[0]).join('').toUpperCase()}
</div>
<div className="flex flex-col min-w-0">
<span className="text-xs font-semibold text-gray-800 truncate">{intern.full_name}</span>
<span className="text-[13px] font-semibold text-gray-800 truncate">{intern.full_name}</span>
<span className="text-[11px] text-gray-400 truncate">{intern.email}</span>
</div>
</button>
@@ -294,7 +274,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
required
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="w-full px-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
className="w-full px-3 py-2.5 bg-white border border-card-outline rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
/>
<span className="absolute right-3.5 top-3 text-gray-400 pointer-events-none">
</span>
@@ -312,7 +292,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
required
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="w-full px-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
className="w-full px-3 py-2.5 bg-white border border-card-outline rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
/>
<span className="absolute right-3.5 top-3 text-gray-400 pointer-events-none">
</span>
@@ -329,7 +309,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
<button
type="button"
onClick={onClose}
className="w-full sm:w-[150px] 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"
className="w-full sm:w-[150px] py-2.5 border border-card-outline rounded-xl text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
>
Cancel
</button>
src/Pages/internify/mentor/components/EditTaskDialog.tsx
+3 -2
View File
@@ -1,13 +1,14 @@
import { useRef, useEffect, useState } from "react";
import { X, FileText, Link } from "lucide-react";
import { useUpdateTask } from '../../../../hooks/useTasks';
import type { ProjectTask, SubmissionType } from '../../../../types/task.types';
import type { SubmissionType } from '../../../../types/task.types';
import { customToast } from '../../../utils/showToast';
import type { InternTaskItem } from "../../../../types/project.types";
interface EditTaskModalProps {
isOpen: boolean;
onClose: () => void;
task: ProjectTask;
task: InternTaskItem;
onSuccess: () => void;
}
src/Pages/internify/mentor/components/EligibleInternTable.tsx
+34 -2
View File
@@ -19,6 +19,8 @@ import Avatar from "../../Avatar";
import ProgressBar from "../../ProgressBar";
import { customToast } from "../../../utils/showToast";
import type { Project } from "../../../../types/project.types";
import { previewCertificate } from "../../../utils/Certificates";
import type { Certificate } from "../../../../types/certificate.types";
interface EligibleInternTableProps {
interns: InternSubmissionProgress[];
@@ -72,6 +74,32 @@ export default function EligibleInternTable({
const [generating, setGenerating] = useState(false);
const [generateError, setGenerateError] = useState<string | null>(null);
const handlePreview = (intern: InternSubmissionProgress) => {
if (!project?.certificate_template) {
customToast.error("Template belum ada", "Template sertifikat belum diupload.");
return;
}
const mockCert: Certificate = {
id: intern.id_user,
id_project: project.id,
id_user: intern.id_user,
certificate_no: "PREVIEW",
issued_at: new Date().toISOString(),
uuid: "preview-mode",
user: {
id: intern.id_user,
full_name: intern.full_name,
email: intern.email,
},
project: {
id: project.id,
project_name: project.project_name,
description: project.description,
},
};
previewCertificate(mockCert, project.certificate_template);
};
const [page, setPage] = useState(1);
const totalPages = Math.ceil(interns.length / PER_PAGE);
const paginated = interns.slice((page - 1) * PER_PAGE, page * PER_PAGE);
@@ -113,7 +141,7 @@ export default function EligibleInternTable({
const templateUrl = resolveImageUrl(project.certificate_template!);
const duration = formatDateRange(project.start_date, project.end_date);
await Promise.all(
result.map(async (cert) => {
const verifyUrl = `${window.location.origin}/verify-certificate/${cert.uuid}`;
@@ -253,7 +281,11 @@ export default function EligibleInternTable({
Nag Intern
</button>
) : (
<button className="p-1.5 text-gray-400 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors" title="View">
<button
onClick={() => handlePreview(intern)}
className="p-1.5 text-gray-400 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
title="Preview Certificate"
>
<Eye className="w-4 h-4" />
</button>
)}
src/Pages/internify/mentor/components/HomeMentorProject.tsx
+13 -18
View File
@@ -3,29 +3,23 @@ import { useState } from 'react';
import { Plus } from 'lucide-react';
import CreateProjectModal from './CreateProjectDialog';
import { useProjects } from '../../../../hooks/useProjects';
import * as LucideIcons from 'lucide-react';
import type { LucideProps } from 'lucide-react';
const getDynamicIcon = (iconName: string) => {
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[formatted];
return Icon ?? LucideIcons.FolderOpen;
};
import { getProjectIcon } from '../../../../lib/ProjectIcons';
const HomeMentorProject = () => {
const navigate = useNavigate();
const [isModalOpen, setIsModalOpen] = useState(false);
const { projects, loading, error } = useProjects();
const openDialog = () => {
setIsModalOpen(true);
};
const closeDialog = () => {
setIsModalOpen(false);
};
const { projects, loading, error, refetch } = useProjects();
const openDialog = () => { setIsModalOpen(true) };
const closeDialog = () => { setIsModalOpen(false) };
const handleRefetch = () => {
closeDialog();
refetch();
}
return (
<div className='flex flex-col'>
<div className='flex flex-row justify-between mb-3 px-5 items-center'>
<h2 className="text-lg font-semibold text-gray-800 mb-4">Projects</h2>
<div className='flex flex-row justify-between mb-3 items-center'>
<h2 className="text-lg font-semibold text-gray-800">Projects</h2>
<button
className='bg-card p-1.5 rounded-lg font-bold hover:bg-card-hover border border-card-outline'
onClick={openDialog} >
@@ -46,7 +40,7 @@ const HomeMentorProject = () => {
>
<div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style={{ backgroundColor: project.background_color ?? '#dc2626' }}>
{(() => {
const Icon = getDynamicIcon(project.project_icon);
const Icon = getProjectIcon(project.project_icon);
return <Icon className="w-5 h-5 text-white" />;
})()}
</div>
@@ -60,6 +54,7 @@ const HomeMentorProject = () => {
<CreateProjectModal
isOpen={isModalOpen}
onClose={closeDialog}
onSuccess={handleRefetch}
/>
)}
</div>
src/Pages/internify/mentor/components/InternsTable.tsx
+7 -7
View File
@@ -82,31 +82,31 @@ export default function InternsTable({
<img
src={intern.avatar}
alt={intern.name}
className="w-10 h-10 rounded-full object-cover border border-gray-100 shadow-sm"
className="w-10 h-10 rounded-full object-cover border border-gray-100 shadow-sm hidden md:block"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center border border-gray-100 shadow-sm text-white text-xs font-bold">
<div className=" w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-emerald-500 items-center justify-center border border-gray-100 shadow-sm text-white text-xs font-bold hidden md:flex">
{intern.name.charAt(0)}
</div>
)}
<div>
<h4 className="text-sm font-bold text-gray-900 leading-tight">{intern.name}</h4>
<p className="text-xs text-gray-400 font-medium mt-0.5">{intern.email}</p>
<h4 className="text-xs md:text-sm font-bold text-gray-900 leading-tight">{intern.name}</h4>
<p className="text-[10px] md:text-xs text-gray-400 font-medium mt-0.5">{intern.email}</p>
</div>
</div>
{/* Column 2: Current Project Title & Role Accent */}
<div className="w-1/3">
<h5 className={`text-sm font-semibold leading-tight ${isUnassigned ? "text-gray-500 italic" : "text-gray-900"}`}>
<h5 className={`text-xs md:text-sm font-semibold leading-tight ${isUnassigned ? "text-gray-500 italic" : "text-gray-900"}`}>
{intern.projectName || "Unassigned"}
</h5>
<p className={`text-xs font-bold mt-0.5 ${isUnassigned ? "text-red-500" : "text-red-600"}`}>
<p className={`text-[10px] md:text-xs font-bold mt-0.5 ${isUnassigned ? "text-red-500" : "text-red-600"}`}>
{intern.role}
</p>
</div>
{/* Column 3: Action Buttons Block Right aligned */}
<div className="w-1/6 flex items-center justify-end gap-3.5 pr-2">
<div className="w-1/6 flex flex-col md:flex-row items-center justify-end gap-3.5 pr-2">
{/* Tombol Add: membuka modal assign member untuk intern ini */}
<button
onClick={() => onAssign(intern.id)}
src/Pages/internify/mentor/components/MentorProjectCard.tsx
+3 -3
View File
@@ -119,7 +119,7 @@ export default function MentorProjectCard({ onArchived, onCompleted, ...project
) : project.status === "completed" ? (
<span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full">Completed</span>
) : project.status === "archived" ? (
<span className="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full">Archived</span>
<span className="px-2 py-0.5 bg-red-100 text-red-800 rounded-full">Archived</span>
) : (
<span className="px-2 py-0.5 bg-gray-100 text-gray-800 rounded-full">Inactive</span>
)}
@@ -132,7 +132,7 @@ export default function MentorProjectCard({ onArchived, onCompleted, ...project
<button
onClick={handleCompleteButtonClick}
disabled={completeLoading}
className="p-1 rounded hover:text-green-600 hover:bg-green-50 transition-colors disabled:opacity-50"
className="p-1 rounded hover:text-blue-600 hover:bg-blue-50 transition-colors disabled:opacity-50"
aria-label={`Selesaikan ${project.project_name}`}
title="Selesaikan project"
>
@@ -143,7 +143,7 @@ export default function MentorProjectCard({ onArchived, onCompleted, ...project
<button
onClick={handleArchiveButtonClick}
disabled={archiveLoading}
className="p-1 rounded hover:text-yellow-600 hover:bg-yellow-50 transition-colors disabled:opacity-50"
className="p-1 rounded hover:text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
aria-label={`Arsipkan ${project.project_name}`}
title="Arsipkan project"
>
src/Pages/internify/mentor/components/MentorTaskCard.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { useNavigate, useParams } from "react-router-dom";
import type { ProjectTask } from "../../../../types/task.types";
import type { InternTaskItem } from "../../../../types/project.types";
const formatDate = (date: string) =>
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
@@ -7,7 +7,7 @@ const formatDate = (date: string) =>
const formatTime = (dateStr: string) =>
new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
export default function MentorTaskCard({ task }: {task: ProjectTask}) {
export default function MentorTaskCard({ task }: {task: InternTaskItem}) {
const navigate = useNavigate();
const { slug } = useParams<{ slug: string }>();
src/Pages/internify/mentor/components/StatusSubmissionTable.tsx
-12
View File
@@ -31,8 +31,6 @@ export function StatusBadge({ status }: { status: DisplayStatus }) {
);
}
// StatusTable
interface StatusTableProps {
status: DisplayStatus;
submission: TaskSubmissionData | null;
@@ -46,16 +44,6 @@ export function StatusTable({ status, submission }: StatusTableProps) {
label: "Submission status",
value: <StatusBadge status={status} />,
},
{
label: "Grading status",
value: <span className="text-sm text-gray-400">-</span>,
},
{
label: "Time Remaining",
value: status === "overdue"
? <span className="text-sm text-red-600 font-medium">Overdue</span>
: <span className="text-sm text-gray-400">-</span>,
},
{
label: "Submitted at",
value: submission?.submitted_at