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

intern project and user fix bug and implementation

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-26 04:01:10 +07:00
parent f63efb0e12
commit 2e162bfc1e
28 changed files with 997 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2 -2
View File
@@ -95,8 +95,8 @@ function App() {
<Route path="projects" element={<ProjectsPage />} />
<Route path="certificates" element={<SertificatePage />} />
<Route path="certificates/all" element={<SertificateList />} />
<Route path="projects/:id" element={<ProjectDetailPage />} />
<Route path="projects/:id/tasks/:taskId" element={<TaskSubmission />} />
<Route path="projects/:slug" element={<ProjectDetailPage />} />
<Route path="projects/:slug/:taskSlug" element={<TaskSubmission />} />
<Route path="faq" element={<FAQPage />} />
<Route path="notifications" element={<NotificationList />} />
<Route path="settings" element={<SettingsContent />} />
src/Pages/Landing.tsx
+1 -1
View File
@@ -227,7 +227,7 @@ const Landing = () => {
loading="eager"
decoding="async"
// @ts-ignore
fetchPriority="high"
fetchpriority="high"
className="w-full h-full object-contain rounded-lg"
/>
</div>
src/Pages/internify/intern/ForumTab.tsx
+8 -9
View File
@@ -2,12 +2,12 @@ import { useParams } from 'react-router-dom';
import ProjectTimeline from './components/ProjectTimeline';
import TaskCard from './components/ProjectTaskCard';
import HeroProject from './components/Hero-project';
import { useProjectTasks } from '../../../hooks/useProjectDetail';
import { useProjectTasks } from '../../../hooks/useTasks';
import type { Project } from '../../../types/project.types';
export default function ForumTab({ project }: { project: Project }) {
const { id } = useParams<{id:string}>();
const { tasks, loading, error } = useProjectTasks(id ?? "");
const { slug } = useParams<{ slug: string }>();
const { tasks, loading, error } = useProjectTasks(slug ?? "");
return (
<div>
{/* Hero banner */}
@@ -26,17 +26,16 @@ export default function ForumTab({ project }: { project: Project }) {
{error && <p className="text-red-500 text-sm mt-5">{error}</p>}
{/* Timeline + Task list */}
<div className="flex gap-7 items-start">
<div className="w-1/5 bg-white rounded-xl p-5 shadow-md shrink-0">
{/* <ProjectTimeline tasks=tasks /> */}
<div className="flex flex-col gap-7 md:flex-row md:items-start">
<div className="w-full md:w-1/5 bg-white rounded-xl p-5 border border-box-border shrink-0">
<ProjectTimeline tasks={tasks} />
</div>
<div className="w-4/5">
<div className="w-full border-t border-box-border md:border-t-0 pt-4 md:pt-0 md:w-4/5">
{tasks.length === 0 ? (
<p className="text-sm text-gray-400">Belum ada task.</p>
) : (
tasks.map((task) => (
<TaskCard key={task.id} task={task} projectName={project.project_name} />
<TaskCard key={task.id} task={task} />
))
)}
</div>
src/Pages/internify/intern/ParticipantTab.tsx
+9 -9
View File
@@ -1,17 +1,17 @@
import { useParams } from 'react-router-dom';
import { useProjectInterns } from '../../../hooks/useProjectDetail';
import { } from '../../../hooks/useProjects';
import type { Project } from '../../../types/project.types';
export default function ParticipantsTab({ project }: { project: Project }) {
const { id } = useParams<{ id: string }>();
const { interns, loading, error } = useProjectInterns(id ?? "");
const { slug } = useParams<{ slug: string }>();
const { interns, loading, error } = useProjectInterns(slug ?? "");
return (
<div>
{/* Mentor */}
<div className="mb-8">
<h3 className="font-bold text-font-shade mb-3.5">Mentor</h3>
<div className="border-b border-[#eee] pb-4">
<div className="border-b border-box-border pb-4">
<div className="flex items-center gap-3">
{project.admin.profile_picture ? (
<img
@@ -22,7 +22,7 @@ export default function ParticipantsTab({ project }: { project: Project }) {
) : (
<div className="w-8 h-8 rounded-full bg-gray-200" />
)}
<span className="text-sm text-font">{project.admin.full_name}</span>
<span className="text-md text-font">{project.admin.full_name}</span>
</div>
</div>
</div>
@@ -45,25 +45,25 @@ export default function ParticipantsTab({ project }: { project: Project }) {
<div
key={intern.id}
className={`flex items-center justify-between py-3 ${
idx < interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
idx < interns.length - 1 ? 'border-b border-box-border' : ''
}`}
>
<div className="flex items-center gap-3">
{intern.avatar ? (
<img
src={intern.avatar}
alt={intern.name}
alt={intern.full_name}
className="w-7 h-7 rounded-full object-cover"
/>
) : (
<div className="w-7 h-7 rounded-full bg-gray-200 flex-shrink-0" />
)}
<div className="flex flex-col">
<span className="text-sm text-[#333]">{intern.name}</span>
<span className="text-sm text-[#333]">{intern.full_name}</span>
<span className="text-[11px] text-gray-400">{intern.email}</span>
</div>
</div>
<span className="text-[13px] text-[#555] font-semibold">{intern.role}</span>
<span className="text-[13px] text-[#555] font-semibold">{intern.kelompok_peminatan}</span>
</div>
))}
src/Pages/internify/intern/ProjectDetailPage.tsx
+5 -6
View File
@@ -1,14 +1,13 @@
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useProjectDetail } from '../../../hooks/useProjectDetail';
// import { useProjectDetail } from '../../../hooks/useProjectDetail';
import { useProjectDetail } from '../../../hooks/useProjects';
import ForumTab from './ForumTab';
import ParticipantsTab from './ParticipantTab';
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
export default function ProjectDetailPage() {
const { id } = useParams<{ id: string }>();
const { project, loading, error } = useProjectDetail(id ?? "");
const { slug } = useParams<{ slug: string }>();
const { project, loading, error } = useProjectDetail(slug ?? "");
const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
// Fallback sederhana
@@ -26,7 +25,7 @@ export default function ProjectDetailPage() {
<div>
<div>
{/* Tabs */}
<div className="flex mb-4">
<div className="flex mb-4 border-b border-card-outline">
<button className={tabClass('forum')} onClick={() => setActiveTab('forum')}>
Forum
</button>
src/Pages/internify/intern/ProjectsPage.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
import ProjectCard from './components/ProjectsCard'
import { useProjects } from '../../../hooks/useProjects';
import { useMyProjects } from '../../../hooks/useProjects';
export default function ProjectsPage() {
const { projects, loading, error } = useProjects();
const { projects, loading, error } = useMyProjects();
if (loading) return (
<div className="flex flex-col gap-3">
@@ -22,7 +22,7 @@ export default function ProjectsPage() {
</div>
{/* Grid card */}
<div className="grid grid-cols-1 gap-6 md:gap-3 md:grid-cols-4 lg:grid-cols-5">
<div className="grid grid-cols-1 gap-4 md:gap-3 md:grid-cols-3 lg:grid-cols-5">
{projects.map(project => (
<ProjectCard key={project.id} {...project} />
))}
src/Pages/internify/intern/TaskSubmission.tsx
+37 -40
View File
@@ -2,71 +2,68 @@ import { useParams, useSearchParams } from "react-router-dom";
import { FileText, Info } from "lucide-react";
import TaskFormFile from "./components/TaskForm-file";
import TaskFormLink from "./components/TaskForm-link";
import { mockProjects } from "../../../lib/mockProjects";
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
import { useTaskDetail } from "../../../hooks/useTasks";
export default function TaskSubmission() {
const [searchParams] = useSearchParams();
const { slug, TaskSlug } = useParams<{ slug: string; TaskSlug: string }>();
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 submissionType = (searchParams.get("type") ?? "file") as "file" | "link";
const formatDeadline = (dateStr: string) =>
new Date(dateStr).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" });
const formatTime = (dateStr: string) =>
new Date(dateStr).toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit" });
const project = mockProjects.find((p) => toSlug(p.name) === slug);
const task = project?.tasks.find((t) => toSlug(t.title) === TaskSlug);
const handleFileSubmit = (files: File[]) => {
const fileNames = files.map(f => f.name).join(', ');
console.log(`Submitting Files for Project ${slug}:`, fileNames);
alert(`File ${fileNames} berhasil dikirim!`);
};
const handleLinkSubmit = (link: string) => {
console.log(`Submitting Link for Project ${slug}:`, link);
alert(`Link berhasil dikirim!`);
};
if (loading) return (
<div className="space-y-4">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-32 bg-box-secondary rounded-2xl animate-pulse" />
))}
</div>
);
if (error) return <p className="text-red-500 text-sm">{error}</p>;
if (!task) return null;
return (
<div className="space-y-4">
{/* Header Card */}
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 ">
<div className="flex justify-between items-start">
<div className="space-y-4 mt-7">
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6">
<div className="space-y-2">
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">
{task?.title}
</h1>
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">{task.title}</h1>
<span className="text-sm font-bold text-gray-600">
Due {task?.deadline.label} at {task?.deadline.time}
Due {formatDeadline(task.deadline_at)} at {formatTime(task.deadline_at)}
</span>
</div>
</div>
</div>
{/* Task Description Card */}
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-3">
<h2 className="text-xl text-gray-800 tracking-tight">Task Description</h2>
<p className="text-sm text-foreground font-light leading-relaxed">
{task?.description}
</p>
<p className="text-sm text-foreground font-light leading-relaxed">{task.description}</p>
</div>
{/* Submit Area Card */}
<div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-5">
<div className="flex items-center gap-2 pb-2">
<FileText className="w-4 h-4 text-[#B30000] stroke-[2.5]" />
<h2 className="text-base font-bold text-secondary tracking-tight">Save Changes</h2>
<FileText className="w-4 h-4 text-primary stroke-[2.5]" />
<h2 className="text-font-shade font-bold text-secondary tracking-tight">Submit Task</h2>
</div>
{/* Render form sesuai tipe dari query param */}
{submissionType === "file" ? (
<TaskFormFile onSubmitSuccess={handleFileSubmit} deadline={task?.deadline.date}/>
{submissionType === "file_upload" ? (
<TaskFormFile
taskId={taskSlug!}
deadline={new Date(task.deadline_at)}
initialSubmission={task.my_submission}
/>
) : (
<TaskFormLink onSubmitSuccess={handleLinkSubmit} deadline={task?.deadline.date}/>
<TaskFormLink
taskId={taskSlug!}
deadline={new Date(task.deadline_at)}
initialSubmission={task.my_submission}
/>
)}
{/* Info Box */}
<div className="w-full border border-box-border rounded-lg p-3 flex items-start gap-2.5">
<Info className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" />
<p className="text-[11px] text-gray-400 font-medium leading-relaxed">
<Info className="w-4 h-4 text-font mt-0.5 flex-shrink-0" />
<p className="text-[11px] text-font font-medium leading-relaxed">
Once submitted, your work will be locked for mentor review. You can request a re-submission if needed.
</p>
</div>
src/Pages/internify/intern/components/CertificateAvailabe.tsx
+1 -9
View File
@@ -34,19 +34,11 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
{[
{ label: "Nama Program", value: certificate.programName },
{ label: "Durasi", value: certificate.duration },
{
label: "Nilai Akhir",
value: (
<span className="text-red-600 font-bold">
{certificate.finalScore}/100 ({certificate.grade})
</span>
),
},
{
label: "Status",
value: (
<span className="bg-green-100 text-green-700 text-xs font-bold px-2 py-0.5 rounded-full">
{certificate.status}
VERIFIED
</span>
),
},
src/Pages/internify/intern/components/HomeCalendar.tsx
+8 -3
View File
@@ -1,7 +1,6 @@
import { useState, useEffect } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { DEADLINES } from '../../../../lib/mockDeadline'
import { useMyTasks } from '../../../../hooks/useProjects';
const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
const MONTH_NAMES = [
@@ -18,7 +17,13 @@ function getFirstDayOfMonth(year: number, month: number) {
}
const HomeCalendar = () => {
const [today, setToday] = useState(new Date())
const [today, setToday] = useState(new Date());
const { tasks } = useMyTasks();
const DEADLINES = tasks.map(task => ({
date: new Date(task.deadline_at),
label: task.title,
}));
useEffect(() => {
const interval = setInterval(() => {
src/Pages/internify/intern/components/ProjectTaskCard.tsx
+14 -12
View File
@@ -1,5 +1,5 @@
import { useNavigate, useParams } from "react-router-dom";
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', year: 'numeric' });
@@ -7,32 +7,34 @@ const formatDate = (dateStr: string) =>
const formatTime = (dateStr: string) =>
new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
export default function TaskCard({ task, projectName }: { task: ProjectTask; projectName: string }) {
export default function TaskCard({ task }: { task: ProjectTask }) {
const navigate = useNavigate();
const {id}= useParams<{ id: string }>();
const { slug } = useParams<{ slug: string }>();
return (
<div className="border border-gray-200 rounded-[10px] px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3">
<div
className="border border-card-outline rounded-xl px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3"
onClick={() => navigate(`/intern/projects/${slug}/${task.slug}?type=${task.submission_type}`)}
>
<div className="flex-1 min-w-0">
<div className=" text-[11px] text-[#888] mb-1">
<div className=" text-[11px] text-font mb-1">
Deadline : {formatDate(task.deadline_at)} at {formatTime(task.deadline_at)}
</div>
<div className=" font-bold text-[15px] text-[#1a1a1a] mb-1">
{task.title}
</div>
<div className=" text-[13px] text-[#666]">
<div className=" text-[13px] text-font">
{task.description}
</div>
<div className=" text-[13px] text-[#666]">
<div className=" text-[13px] text-font">
Tipe Submission : {task.submission_type === 'file_upload' ? "File" : "Link"}
</div>
</div>
<div className="shrink-0">
<div className="block md:hidden h-[10px] bg-gray-600"/>
<div className="shrink-0 hidden md:block">
<button
className="bg-white text-[#1a1a1a] border-[1.5px] border-[#d0d0d0] font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[#C0392B] hover:text-[#C0392B]"
onClick={() => navigate(
`/intern/projects/${id}/${task.id}?type=${task.submission_type}`
)}
className="bg-white text-font-shade border-[1.5px] border-card-outline font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150"
>
Add Submission
</button>
src/Pages/internify/intern/components/ProjectTimeline.tsx
+13 -20
View File
@@ -1,42 +1,35 @@
import type { Task } from "../../../../lib/mockProjects";
import { ArrowDownNarrowWide } from "lucide-react";
import type { ProjectTask } from "../../../../types/project.types";
const formatDate = (date: Date) =>
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
const formatDate = (dateStr: string) =>
new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
export default function ProjectTimeline({ tasks }: { tasks: Task[] }) {
export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return (
<div>
<div className="">
<div className="flex items-center gap-1.5 mb-4 justify-between">
<span className="font-semibold text-md text-[#1a1a1a]">
Timeline
</span>
<ArrowDownNarrowWide className="w-5 h-5 text-gray-500"/>
<span className="font-semibold text-md text-font-shade">Timeline</span>
</div>
<ul className="relative pl-4">
{tasks.map((task, idx) => {
const d = new Date(task.deadline.date);
{tasks.map((task) => {
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={idx} className="relative mb-6 list-none">
<li key={task.id} className="relative mb-6 list-none">
{/* Dot */}
<div
className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${active ? 'bg-[#C0392B]' : 'bg-[#ccc]'
className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${
active ? 'bg-[#C0392B]' : 'bg-[#ccc]'
} ${isToday ? 'shadow-md' : ''}`}
/>
<div
className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'
}`}
>
{isToday ? 'Hari ini' : formatDate(task.deadline.date)}
<div className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'}`}>
{isToday ? 'Hari ini' : formatDate(task.deadline_at)} {/* ← format ISO string */}
</div>
<div className="text-xs text-[#555] mt-px leading-[1.3]">
{task.title}
src/Pages/internify/intern/components/ProjectsCard.tsx
+2 -8
View File
@@ -3,8 +3,6 @@ import * as LucideIcons from 'lucide-react';
import type { LucideProps } from 'lucide-react';
import type { Project } from '../../../../types/project.types';
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
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];
@@ -21,7 +19,7 @@ const ProjectCard = (project: Project) => {
return (
<div
onClick={() => navigate(`/intern/projects/${project.id}`)}
onClick={() => navigate(`/intern/projects/${project.slug}`)}
className=" rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col cursor-pointer hover:shadow-md transition-shadow duration-200"
>
{/* Thumbnail */}
@@ -61,7 +59,7 @@ const ProjectCard = (project: Project) => {
style={{ width: tasksTotal > 0 ? `${(tasksDone / tasksTotal) * 100}%` : '0%' }}
/>
</div>
<span className="text-[10px] text-gray-400 text-right">
<span className="text-font text-[12px] font-bold text-right">
{tasksDone}/{tasksTotal}
</span>
</div>
@@ -70,10 +68,6 @@ const ProjectCard = (project: Project) => {
{/* Button */}
<div className="flex items-end justify-end px-3 pb-1">
<button
onClick={(e) => {
e.stopPropagation(); // ← cegah trigger onClick card dua kali
navigate(`/intern/projects/${toSlug(project.project_name)}`);
}}
className="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 px-3 rounded-xl transition-colors"
>
View Project
src/Pages/internify/intern/components/SidebarIntern.tsx
+4 -6
View File
@@ -54,8 +54,6 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
<p className="text-[11px] text-gray-400">LMS Portal</p>
</div>
</div>
{/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
<button
onClick={closeSidebar}
className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
@@ -74,8 +72,8 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
onClick={() => handleNav(path)}
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
${isActive
? "bg-base-foreground text-base font-semibold border-l-4 border-base"
: "text-font hover:bg-base-foreground hover:text-base"
? "bg-red-foreground text-red font-semibold border-l-4 border-base"
: "text-font hover:bg-red-foreground"
}`}
>
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
@@ -102,8 +100,8 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
${isActive
? "bg-red-50 text-red-600 font-semibold"
: danger
? "text-font hover:bg-base-foreground hover:text-base"
: "text-font hover:bg-base-foreground hover:text-base"
? "text-font hover:bg-base-foreground"
: "text-font hover:bg-red-foreground"
}`}
>
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
src/Pages/internify/intern/components/SubmissionStatusTable.tsx
+6 -12
View File
@@ -3,7 +3,7 @@ import { FileText, FileUp, Link } from "lucide-react";
interface SubmitStatusTableProps {
type: "file" | "link";
files?: File[];
filePath?: string | null; // ganti dari files: File[]
link?: string;
submittedAt?: Date;
deadline?: Date;
@@ -25,7 +25,7 @@ function getTimeEarly(submittedAt: Date, deadline: Date): string {
export default function SubmitStatusTable({
type,
files = [],
filePath,
link = "",
submittedAt = new Date(),
deadline,
@@ -120,19 +120,13 @@ export default function SubmitStatusTable({
</div>
<div className="px-4 py-3 flex flex-col gap-2">
{type === "file" ? (
files.map((f, i) => (
<div key={i} className="flex items-center gap-2 text-sm text-gray-800">
<div className="flex items-center gap-2 text-sm text-gray-800">
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
{f.name}
{filePath ? filePath.split("/").pop() : "File submitted"}
</div>
))
) : (
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all"
>
<a href={link} target="_blank" rel="noopener noreferrer"
className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all">
<Link className="w-3.5 h-3.5 shrink-0" />
{link}
</a>
src/Pages/internify/intern/components/TaskForm-file.tsx
+53 -92
View File
@@ -2,106 +2,81 @@ import { useState, useRef } from "react";
import { FileText, UploadCloud, X } from "lucide-react";
import { LuSendHorizontal } from "react-icons/lu";
import SubmitStatusTable from "./SubmissionStatusTable";
import { useSubmission } from "../../../../hooks/useTasks";
import type { TaskSubmissionData } from "../../../../types/task.types";
interface TaskFormFileProps {
onSubmitSuccess: (files: File[]) => void;
taskId: string;
deadline?: Date;
initialSubmission?: TaskSubmissionData | null;
}
export default function TaskFormFile({ onSubmitSuccess, deadline }: TaskFormFileProps) {
export default function TaskFormFile({ taskId, deadline, initialSubmission }: TaskFormFileProps) {
const { submission, loading, submitFile, updateFile, remove } = useSubmission(taskId, initialSubmission);
const [files, setFiles] = useState<File[]>([]);
const [isDragActive, setIsDragActive] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
validateAndAddFiles(Array.from(e.target.files));
}
};
const handleDrag = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
if (e.type === "dragenter" || e.type === "dragover") {
setIsDragActive(true);
} else if (e.type === "dragleave") {
setIsDragActive(false);
}
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragActive(false);
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
validateAndAddFiles(Array.from(e.dataTransfer.files));
}
};
const validateAndAddFiles = (selectedFiles: File[]) => {
const allowedExtensions = ["pdf", "docx", "zip"];
const validFiles: File[] = [];
selectedFiles.forEach((file) => {
const fileExtension = file.name.split(".").pop()?.toLowerCase();
if (fileExtension && allowedExtensions.includes(fileExtension)) {
if (file.size <= 10 * 1024 * 1024) {
validFiles.push(file);
const ext = file.name.split(".").pop()?.toLowerCase();
if (ext && allowedExtensions.includes(ext)) {
if (file.size <= 10 * 1024 * 1024) validFiles.push(file);
else alert(`Ukuran file ${file.name} melebihi 10MB.`);
} else {
alert(`Ukuran file ${file.name} melebihi batas maksimal 10MB.`);
}
} else {
alert(`Format file ${file.name} tidak didukung. Harap gunakan PDF, DOCX, atau ZIP.`);
alert(`Format ${file.name} tidak didukung. Gunakan PDF, DOCX, atau ZIP.`);
}
});
if (validFiles.length > 0) {
setFiles((prev) => [...prev, ...validFiles]);
}
if (validFiles.length > 0) setFiles((prev) => [...prev, ...validFiles]);
};
const removeFile = (indexToRemove: number, e: React.MouseEvent) => {
const handleDrag = (e: React.DragEvent) => {
e.preventDefault(); e.stopPropagation();
setIsDragActive(e.type === "dragenter" || e.type === "dragover");
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault(); e.stopPropagation();
setIsDragActive(false);
if (e.dataTransfer.files.length > 0) validateAndAddFiles(Array.from(e.dataTransfer.files));
};
const removeFile = (index: number, e: React.MouseEvent) => {
e.stopPropagation();
setFiles((prev) => prev.filter((_, index) => index !== indexToRemove));
setFiles((prev) => prev.filter((_, i) => i !== index));
};
const handleSubmit = (e: React.FormEvent) => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (files.length === 0) {
alert("Silakan pilih atau jatuhkan berkas tugas Anda terlebih dahulu.");
return;
}
// Set to local submitted mode
setIsSubmitted(true);
// Call parent handler
onSubmitSuccess(files);
if (files.length === 0) { alert("Pilih file terlebih dahulu."); return; }
const res = isEditing
? await updateFile(submission!.id, files[0])
: await submitFile(files[0]);
if (res) { setIsEditing(false); setFiles([]); }
};
const handleEditSubmission = () => {
setIsSubmitted(false);
const handleDelete = async () => {
if (!confirm("Yakin ingin menghapus submission ini?")) return;
const ok = await remove(submission!.id);
if (ok) { setFiles([]); setIsEditing(false); }
};
const handleDeleteSubmission = () => {
if (confirm("Are you sure you want to delete this submission?")) {
setFiles([]);
setIsSubmitted(false);
}
};
// ganti if (isSubmitted) { return (...) }
if (isSubmitted) {
// Sudah ada submission dan tidak sedang edit → tampilkan status
if (submission && !isEditing) {
return (
<SubmitStatusTable
type="file"
files={files}
submittedAt={new Date()}
deadline={deadline} // opsional, kirim dari parent kalau ada
onEdit={handleEditSubmission}
onDelete={handleDeleteSubmission}
filePath={submission.file_path}
submittedAt={new Date(submission.submitted_at)}
deadline={deadline}
onEdit={() => setIsEditing(true)}
onDelete={handleDelete}
/>
);
}
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
@@ -109,16 +84,13 @@ if (isSubmitted) {
type="file"
multiple
ref={fileInputRef}
onChange={handleFileChange}
onChange={(e) => e.target.files && validateAndAddFiles(Array.from(e.target.files))}
accept=".pdf,.docx,.zip"
className="hidden"
/>
<div
onDragEnter={handleDrag}
onDragOver={handleDrag}
onDragLeave={handleDrag}
onDrop={handleDrop}
onDragEnter={handleDrag} onDragOver={handleDrag}
onDragLeave={handleDrag} onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
className={`w-full min-h-[120px] border border-dashed rounded-xl p-4 bg-box-secondary cursor-pointer transition-all ${isDragActive ? "border-[#B30000] bg-red-50/40" : "border-foreground hover:border-gray-500"
}`}
@@ -126,20 +98,12 @@ if (isSubmitted) {
{files.length > 0 ? (
<div className="space-y-2">
{files.map((file, index) => (
<div
key={index}
className="flex items-center justify-between text-sm font-medium text-gray-800"
onClick={(e) => e.stopPropagation()}
>
<div key={index} className="flex items-center justify-between text-sm font-medium text-gray-800" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-2">
<FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
{file.name}
</div>
<button
type="button"
onClick={(e) => removeFile(index, e)}
className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
>
<button type="button" onClick={(e) => removeFile(index, e)} className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
<X className="w-4 h-4" />
</button>
</div>
@@ -148,19 +112,16 @@ if (isSubmitted) {
) : (
<div className="flex flex-col items-center justify-center h-full space-y-2 pointer-events-none text-center py-6">
<UploadCloud className="w-8 h-8 text-gray-400 mx-auto stroke-[1.5]" />
<p className="text-sm font-bold text-gray-700">
Click to upload <span className="font-medium text-gray-500">or drag & drop</span>
</p>
<p className="text-sm font-bold text-gray-700">Click to upload <span className="font-medium text-gray-500">or drag & drop</span></p>
<p className="text-[11px] text-gray-400 font-semibold">PDF, DOCX, or ZIP (Max. 10MB)</p>
</div>
)}
</div>
<button
type="submit"
className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-bold text-base py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
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"
>
Save Changes
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
</button>
</form>
src/Pages/internify/intern/components/TaskForm-link.tsx
+37 -41
View File
@@ -1,80 +1,76 @@
import { useState } from "react";
import { Link, FileText } from "lucide-react";
import { Link } from "lucide-react";
import { LuSendHorizontal } from "react-icons/lu";
import SubmitStatusTable from "./SubmissionStatusTable";
import { useSubmission } from "../../../../hooks/useTasks";
import type { TaskSubmissionData } from "../../../../types/task.types";
interface TaskFormLinkProps {
onSubmitSuccess: (link: string) => void;
taskId: string;
deadline?: Date;
initialSubmission?: TaskSubmissionData | null;
}
export default function TaskFormLink({ onSubmitSuccess, deadline }: TaskFormLinkProps) {
const [submissionLink, setSubmissionLink] = useState("");
const [isSubmitted, setIsSubmitted] = useState(false);
export default function TaskFormLink({ taskId, deadline, initialSubmission }: TaskFormLinkProps) {
const { submission, loading, submitLink, updateLink, remove } = useSubmission(taskId, initialSubmission);
const [inputLink, setInputLink] = useState(initialSubmission?.url_link ?? "");
const [isEditing, setIsEditing] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!submissionLink.trim()) {
// alert("Silakan masukkan link tugas Anda terlebih dahulu.");
return;
}
setIsSubmitted(true); // ini hilang
onSubmitSuccess(submissionLink);
if (!inputLink.trim()) return;
const res = isEditing
? await updateLink(submission!.id, inputLink)
: await submitLink(inputLink);
if (res) { setIsEditing(false); }
};
const handleEditSubmission = () => {
setIsSubmitted(false);
};
const handleDelete = async () => {
if (!confirm("Yakin ingin menghapus submission ini?")) return;
const ok = await remove(submission!.id);
if (ok) setInputLink("");
};
const handleDeleteSubmission = () => {
if (confirm("Are you sure you want to delete this submission?")) {
setSubmissionLink("");
setIsSubmitted(false);
}
};
if (isSubmitted) {
if (submission && !isEditing) {
return (
<SubmitStatusTable
type="link"
link={submissionLink}
submittedAt={new Date()}
link={submission.url_link ?? ""}
submittedAt={new Date(submission.submitted_at)}
deadline={deadline}
onEdit={handleEditSubmission}
onDelete={handleDeleteSubmission}
onEdit={() => setIsEditing(true)}
onDelete={handleDelete}
/>
);
}
}
return (
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-1.5">
<label className="text-[11px] font-bold text-gray-700 tracking-wide block">
Submission Link (PDF)
<label className="text-[11px] font-bold text-font-shade tracking-wide block">
{isEditing ? "Update Submission Link" : "Submission Link"}
</label>
<div className="relative flex items-center">
<span className="absolute left-3.5 text-gray-400">
<span className="absolute left-3.5 text-font/70">
<Link className="w-4 h-4 stroke-[2]" />
</span>
<input
type="url"
required
type="url" required
placeholder="https://example.com/your-pdf-link"
value={submissionLink}
onChange={(e) => setSubmissionLink(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 bg-gray-50/50 border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-700 focus:outline-none focus:bg-white focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
value={inputLink}
onChange={(e) => setInputLink(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 bg-box-primary/50 border border-box-border rounded-lg text-sm placeholder-font text-font focus:outline-none focus:bg-white focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
/>
</div>
<p className="text-[11px] text-gray-400 font-medium pt-0.5">
<p className="text-[11px] text-font font-medium pt-0.5">
Ensure the link is accessible to the mentor (e.g., Google Drive, Dropbox).
</p>
</div>
<button
type="submit"
className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-bold text-base py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
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"
>
Submit Task
{loading ? "Mengirim..." : isEditing ? "Update Submission" : "Submit Task"}
<LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
</button>
</form>
src/Pages/internify/intern/components/TaskTimeline.tsx
+4 -4
View File
@@ -1,8 +1,8 @@
import { useInternTasks } from "../../../../hooks/useProjects";
import type { InternTask } from "../../../../types/project.types";
import { useMyTasks } from "../../../../hooks/useProjects";
import type { InternTaskItem } from "../../../../types/project.types";
const TaskTimeline = () => {
const { tasks, loading, error } = useInternTasks();
const { tasks, loading, error } = useMyTasks();
const today = new Date();
const isOverdue = (dateStr: string) => new Date(dateStr) < today;
@@ -23,7 +23,7 @@ const TaskTimeline = () => {
<div className="relative">
<div className="absolute left-1 top-2 bottom-2 w-px bg-gray-300" />
<ul className="flex flex-col gap-5">
{tasks.map((item: InternTask) => {
{tasks.map((item: InternTaskItem) => {
const overdue = isOverdue(item.deadline_at);
const deadlineDate = new Date(item.deadline_at);
return (
src/Pages/internify/layout.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ export const InternLayout = () => {
<SidebarIntern isOpen={isSidebarOpen} closeSidebar={closeSidebar} />
{isSidebarOpen && (
<div
className="fixed inset-0 bg-black/20 z-20 md:hidden min-h-screen"
className="fixed inset-0 bg-black/20 z-20 lg:hidden min-h-screen"
onClick={closeSidebar}
/>
)}
@@ -47,7 +47,7 @@ export const MentorLayout = () => {
/>
)}
<main className="container">
<Breadcrumbs/>
{/* <Breadcrumbs/> */}
<Outlet />
</main>
</div>
src/hooks/useProjectDetail.ts
-59
View File
@@ -1,59 +0,0 @@
// hooks/useProjectDetail.ts
/**
* Bagian Detail dari Project: Ketika User sudah masuk ke dalam Project Card
* Komponen yang masuk: IDProject, ParticipantTab, ForumTab, Submissions
*/
import { useEffect, useState } from "react";
import { getProjectById, getProjectInterns, getProjectTasks } from "../services/ProjectService";
import type { Project, Intern, ProjectTask } from "../types/project.types";
export const useProjectDetail = (id: string) => {
const [project, setProject] = useState<Project | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!id) return;
setLoading(true);
getProjectById(id)
.then(setProject)
.catch(() => setError("Gagal memuat detail project."))
.finally(() => setLoading(false));
}, [id]);
return { project, loading, error };
};
export const useProjectInterns = (projectId: string) => {
const [interns, setInterns] = useState<Intern[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!projectId) return;
setLoading(true);
getProjectInterns(projectId)
.then(setInterns)
.catch(() => setError("Gagal memuat participants."))
.finally(() => setLoading(false));
}, [projectId]);
return { interns, loading, error };
};
export const useProjectTasks = (projectId: string) => {
const [tasks, setTasks] = useState<ProjectTask[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!projectId) return;
setLoading(true);
getProjectTasks(projectId)
.then(setTasks)
.catch(() => setError("Gagal memuat tasks."))
.finally(() => setLoading(false));
}, [projectId]);
return { tasks, loading, error };
};
src/hooks/useProjects.ts
+203 -13
View File
@@ -1,34 +1,109 @@
import { useEffect, useState } from "react";
// Projects
import { getMyProjects } from "../services/ProjectService";
import type { Project } from "../types/project.types";
// Tasks
import { getMyTasks } from "../services/ProjectService";
import type { InternTask } from "../types/project.types";
// hooks/useProject.ts
import { useState, useEffect, useCallback } from "react";
import type {
Project,
ProjectDetail,
InternTaskItem,
InternDetail,
CreateProjectPayload,
UpdateProjectPayload,
AssignMemberPayload,
ProjectMember
} from "../types/project.types";
import {
getProjects,
getProjectById,
getMyProjects,
getMyTasks,
getMentorProjects,
getAllInterns,
createProject,
updateProject,
archiveProject,
assignMember,
getProjectMembers
} from "../services/ProjectService";
export const useProjects = () => {
// GET /project-api/get
export const useProjects = (status?: "active" | "completed" | "archived") => {
const [projects, setProjects] = useState<Project[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const refetch = useCallback(() => {
setLoading(true);
getProjects(status)
.then(setProjects)
.catch(() => setError("Gagal memuat projects."))
.finally(() => setLoading(false));
}, [status]);
useEffect(() => { refetch(); }, [refetch]);
return { projects, loading, error, refetch };
};
// GET /project-api/get/{id}
export const useProjectDetail = (id: string) => {
const [project, setProject] = useState<ProjectDetail | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const refetch = useCallback(() => {
if (!id) return;
setLoading(true);
getProjectById(id)
.then(setProject)
.catch(() => setError("Gagal memuat detail project."))
.finally(() => setLoading(false));
}, [id]);
useEffect(() => { refetch(); }, [refetch]);
return { project, loading, error, refetch };
};
//Khusus Ambil Intern dari Project/{id}
export const useProjectInterns = (projectId: string) => {
const [interns, setInterns] = useState<ProjectMember[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!projectId) return;
setLoading(true);
getProjectMembers(projectId)
.then(setInterns)
.catch(() => setError("Gagal memuat participants."))
.finally(() => setLoading(false));
}, [projectId]);
return { interns, loading, error };
};
// GET /project-api/my-projects
export const useMyProjects = () => {
const [projects, setProjects] = useState<ProjectDetail[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
getMyProjects()
.then(setProjects)
.catch(() => setError("Gagal memuat project."))
.catch(() => setError("Gagal memuat my projects."))
.finally(() => setLoading(false));
}, []);
return { projects, loading, error };
};
export const useInternTasks = () => {
const [tasks, setTasks] = useState<InternTask[]>([]);
const [loading, setLoading] = useState(false);
// GET /project-api/my-tasks
export const useMyTasks = () => {
const [tasks, setTasks] = useState<InternTaskItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
getMyTasks()
.then(setTasks)
.catch(() => setError("Gagal memuat tasks."))
@@ -38,3 +113,118 @@ export const useInternTasks = () => {
return { tasks, loading, error };
};
// GET /project-api/mentor-projects
export const useMentorProjects = () => {
const [projects, setProjects] = useState<Project[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
getMentorProjects()
.then(setProjects)
.catch(() => setError("Gagal memuat mentor projects."))
.finally(() => setLoading(false));
}, []);
return { projects, loading, error };
};
// GET /project-api/interns
export const useAllInterns = () => {
const [interns, setInterns] = useState<InternDetail[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
getAllInterns()
.then(setInterns)
.catch(() => setError("Gagal memuat data interns."))
.finally(() => setLoading(false));
}, []);
return { interns, loading, error };
};
// POST /project-api/add
export const useCreateProject = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const create = async (payload: CreateProjectPayload) => {
setLoading(true);
setError(null);
try {
return await createProject(payload);
} catch {
setError("Gagal membuat project.");
return null;
} finally {
setLoading(false);
}
};
return { create, loading, error };
};
// PATCH /project-api/update/{id}
export const useUpdateProject = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const update = async (id: string | number, payload: UpdateProjectPayload) => {
setLoading(true);
setError(null);
try {
return await updateProject(id, payload);
} catch {
setError("Gagal mengupdate project.");
return null;
} finally {
setLoading(false);
}
};
return { update, loading, error };
};
// DELETE /project-api/delete/{id}
export const useArchiveProject = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const archive = async (id: string | number) => {
setLoading(true);
setError(null);
try {
return await archiveProject(id);
} catch {
setError("Gagal mengarsipkan project.");
return null;
} finally {
setLoading(false);
}
};
return { archive, loading, error };
};
// POST /project-api/assign-member
export const useAssignMember = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const assign = async (payload: AssignMemberPayload) => {
setLoading(true);
setError(null);
try {
return await assignMember(payload);
} catch {
setError("Gagal assign member.");
return null;
} finally {
setLoading(false);
}
};
return { assign, loading, error };
};
src/hooks/useTasks.ts
+180
View File
@@ -0,0 +1,180 @@
// hooks/useTasks.ts
import { useState, useEffect, useCallback } from "react";
import type { ProjectTask, ProjectTaskDetail, CreateTaskPayload, UpdateTaskPayload, TaskSubmissionData } from "../types/task.types";
import {
getProjectTasks,
getTaskById,
createTask,
updateTask,
deleteTask,
submitTaskFile,
submitTaskLink,
updateSubmissionFile,
updateSubmissionLink,
deleteSubmission,
} from "../services/TaskService";
// GET /task-api/projects/{id_project}/tasks
export const useProjectTasks = (projectId: string) => {
const [tasks, setTasks] = useState<ProjectTask[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!projectId) return;
setLoading(true);
getProjectTasks(projectId)
.then(setTasks)
.catch(() => setError("Gagal memuat task."))
.finally(() => setLoading(false));
}, [projectId]);
return { tasks, loading, error };
};
// GET /task-api/tasks/{id}
export const useTaskDetail = (taskId: string, projectId?: string) => {
const [task, setTask] = useState<ProjectTaskDetail | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const refetch = useCallback(() => {
if (!taskId) return;
setLoading(true);
getTaskById(taskId, projectId)
.then(setTask)
.catch(() => setError("Gagal memuat detail task."))
.finally(() => setLoading(false));
}, [taskId, projectId]);
useEffect(() => { refetch(); }, [refetch]);
return { task, loading, error, refetch };
};
// POST /task-api/projects/{id_project}/tasks
export const useCreateTask = (projectId: string) => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const create = async (payload: CreateTaskPayload): Promise<ProjectTask | null> => {
setLoading(true);
setError(null);
try {
return await createTask(projectId, payload);
} catch {
setError("Gagal membuat task.");
return null;
} finally {
setLoading(false);
}
};
return { create, loading, error };
};
// PATCH /task-api/tasks/{id}
export const useUpdateTask = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const update = async (
taskId: string | number,
payload: UpdateTaskPayload,
projectId?: string
) => {
setLoading(true);
setError(null);
try {
return await updateTask(taskId, payload, projectId);
} catch {
setError("Gagal mengupdate task.");
return null;
} finally {
setLoading(false);
}
};
return { update, loading, error };
};
// DELETE /task-api/tasks/{id}
export const useDeleteTask = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const remove = async (taskId: string | number, projectId?: string) => {
setLoading(true);
setError(null);
try {
await deleteTask(taskId, projectId);
return true;
} catch {
setError("Gagal menghapus task.");
return false;
} finally {
setLoading(false);
}
};
return { remove, loading, error };
};
// POST + PATCH + DELETE submission — digabung dalam satu hook per task
export const useSubmission = (taskId: string, initialSubmission?: TaskSubmissionData | null, projectId?: string) => {
const [submission, setSubmission] = useState<TaskSubmissionData | null>(initialSubmission ?? null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const submitFile = async (file: File) => {
setLoading(true); setError(null);
try {
const res = await submitTaskFile(taskId, file, projectId);
if (res) setSubmission(res);
return res;
} catch { setError("Gagal submit file."); return null; }
finally { setLoading(false); }
};
const submitLink = async (url: string) => {
setLoading(true); setError(null);
try {
const res = await submitTaskLink(taskId, url, projectId);
if (res) setSubmission(res);
return res;
} catch { setError("Gagal submit link."); return null; }
finally { setLoading(false); }
};
const updateFile = async (submissionId: number, file: File) => {
setLoading(true); setError(null);
try {
const res = await updateSubmissionFile(submissionId, file);
if (res) setSubmission(res);
return res;
} catch { setError("Gagal update submission."); return null; }
finally { setLoading(false); }
};
const updateLink = async (submissionId: number, url: string) => {
setLoading(true); setError(null);
try {
const res = await updateSubmissionLink(submissionId, url);
if (res) setSubmission(res);
return res;
} catch { setError("Gagal update submission."); return null; }
finally { setLoading(false); }
};
const remove = async (submissionId: number) => {
setLoading(true); setError(null);
try {
await deleteSubmission(submissionId);
setSubmission(null);
return true;
} catch { setError("Gagal hapus submission."); return false; }
finally { setLoading(false); }
};
return { submission, submitFile, submitLink, updateFile, updateLink, remove, loading, error };
};
src/index.css
+14 -6
View File
@@ -31,8 +31,8 @@
--color-primary-foreground: #ffffff;
--color-primary-hover: #84281c;
--color-base: #e82222;
--color-base-foreground: #fef2f2;
--color-red: #e82222;
--color-red-foreground: #fef2f2;
--color-border: #a8a9aa;
@@ -43,14 +43,11 @@
}
.container {
flex: 1;
min-width: 0; /* penting! mencegah overflow */
min-width: 0;
padding-inline: calc(var(--spacing) * 14);
padding-block: calc(var(--spacing) * 12);
background-color: var(--color-background);
display: flex;
flex-direction: column;
gap: 13px;
min-height: 100vh;
}
@@ -130,6 +127,12 @@ dialog.custom-dialog::backdrop {
border-bottom: 2px solid #b3b8c0; /* border-gray-100 */
}
@media (max-width: 1024px) {
.container {
padding-inline: calc(var(--spacing) * 16);
}
}
/* Breakpoint Medium (md:) - Aktif saat lebar layar >= 768px */
@media (min-width: 768px) {
.dialog-header {
@@ -139,4 +142,9 @@ dialog.custom-dialog::backdrop {
padding-top: 1.25rem; /* 20px */
padding-bottom: 1.25rem;/* 20px */
}
.container {
padding-inline: calc(var(--spacing) * 14);
padding-block: calc(var(--spacing) * 10);
}
}
src/services/ProjectService.ts
+85 -18
View File
@@ -1,29 +1,96 @@
// services/ProjectService.ts
import api from "../lib/api";
import type { Project, InternTask, Intern, ProjectTask } from "../types/project.types";
import type {
Project,
ProjectDetail,
InternTaskItem,
InternDetail,
CreateProjectPayload,
UpdateProjectPayload,
AssignMemberPayload,
MemberAssignment,
ProjectMember
} from "../types/project.types";
export const getMyProjects = async (): Promise<Project[]> => {
const res = await api.get("/project-api/my-projects");
// POST /project-api/add
export const createProject = async (
payload: CreateProjectPayload
): Promise<ProjectDetail> => {
const res = await api.post("/project-api/add", payload);
return res.data.data;
};
export const getProjectById = async (id: string): Promise<Project> => {
const res = await api.get(`/project-api/get/${id}`);
return res.data.data;
};
export const getMyTasks = async (): Promise<InternTask[]> => {
const res = await api.get("/project-api/my-tasks");
return res.data.data;
};
export const getProjectInterns = async (projectId: string): Promise<Intern[]> => {
const res = await api.get(`/project-api/interns`, {
params: { projectId }
// GET /project-api/get
export const getProjects = async (
status?: "active" | "completed" | "archived"
): Promise<Project[]> => {
const res = await api.get("/project-api/get", {
params: status ? { status } : undefined,
});
return res.data.data;
};
export const getProjectTasks = async (projectId: string): Promise<ProjectTask[]> => {
const res = await api.get(`/task-api/projects/${projectId}/tasks`);
// GET /project-api/get/{id} → ambil members saja
export const getProjectMembers = async (
id: string | number
): Promise<ProjectMember[]> => {
const res = await api.get(`/project-api/get/${id}`);
return res.data.data.members;
};
// GET /project-api/get/{id}
export const getProjectById = async (
id: string | number
): Promise<ProjectDetail> => {
const res = await api.get(`/project-api/get/${id}`);
return res.data.data;
};
// PATCH /project-api/update/{id}
export const updateProject = async (
id: string | number,
payload: UpdateProjectPayload
): Promise<ProjectDetail> => {
const res = await api.patch(`/project-api/update/${id}`, payload);
return res.data.data;
};
// DELETE /project-api/delete/{id} — soft delete (archive)
export const archiveProject = async (
id: string | number
): Promise<ProjectDetail> => {
const res = await api.delete(`/project-api/delete/${id}`);
return res.data.data;
};
// GET /project-api/my-projects (intern only)
export const getMyProjects = async (): Promise<ProjectDetail[]> => {
const res = await api.get("/project-api/my-projects");
return res.data.data;
};
// GET /project-api/my-tasks (intern only)
export const getMyTasks = async (): Promise<InternTaskItem[]> => {
const res = await api.get("/project-api/my-tasks");
return res.data.data;
};
// GET /project-api/mentor-projects (admin/mentor only)
export const getMentorProjects = async (): Promise<Project[]> => {
const res = await api.get("/project-api/mentor-projects");
return res.data.data;
};
// GET /project-api/interns (admin/mentor only)
export const getAllInterns = async (): Promise<InternDetail[]> => {
const res = await api.get("/project-api/interns");
return res.data.data;
};
// POST /project-api/assign-member (admin/mentor only)
export const assignMember = async (
payload: AssignMemberPayload
): Promise<MemberAssignment> => {
const res = await api.post("/project-api/assign-member", payload);
return res.data.data;
};
src/services/TaskService.ts
+108
View File
@@ -0,0 +1,108 @@
// services/TaskService.ts
import api from "../lib/api";
import type {
ProjectTask,
ProjectTaskDetail,
CreateTaskPayload,
UpdateTaskPayload,
TaskSubmissionData,
} from "../types/task.types";
// ── Task ──────────────────────────────────────────────
export const createTask = async (
projectId: string | number,
payload: CreateTaskPayload
): Promise<ProjectTask> => {
const res = await api.post(`/task-api/projects/${projectId}/tasks`, payload);
return res.data.data;
};
export const getProjectTasks = async (
projectId: string | number
): Promise<ProjectTask[]> => {
const res = await api.get(`/task-api/projects/${projectId}/tasks`);
return res.data.data;
};
export const getTaskById = async (
taskId: string | number,
projectId?: string | number
): Promise<ProjectTaskDetail> => {
const res = await api.get(`/task-api/tasks/${taskId}`, {
params: projectId ? { project: projectId } : undefined,
});
return res.data.data;
};
export const updateTask = async (
taskId: string | number,
payload: UpdateTaskPayload,
projectId?: string | number
): Promise<ProjectTask> => {
const res = await api.patch(`/task-api/tasks/${taskId}`, payload, {
params: projectId ? { project: projectId } : undefined,
});
return res.data.data;
};
export const deleteTask = async (
taskId: string | number,
projectId?: string | number
): Promise<void> => {
await api.delete(`/task-api/tasks/${taskId}`, {
params: projectId ? { project: projectId } : undefined,
});
};
// ── Submission ────────────────────────────────────────
export const submitTaskFile = async (
taskId: string | number,
file: File,
projectId?: string | number
): Promise<TaskSubmissionData> => {
const formData = new FormData();
formData.append("submission_file", file);
const res = await api.post(`/task-api/tasks/${taskId}/submissions`, formData, {
params: projectId ? { project: projectId } : undefined,
});
return res.data.data;
};
export const submitTaskLink = async (
taskId: string | number,
url_link: string,
projectId?: string | number
): Promise<TaskSubmissionData> => {
const formData = new FormData();
formData.append("url_link", url_link);
const res = await api.post(`/task-api/tasks/${taskId}/submissions`, formData, {
params: projectId ? { project: projectId } : undefined,
});
return res.data.data;
};
export const updateSubmissionFile = async (
submissionId: number,
file: File
): Promise<TaskSubmissionData> => {
const formData = new FormData();
formData.append("submission_file", file);
const res = await api.patch(`/task-api/submissions/${submissionId}`, formData);
return res.data.data;
};
export const updateSubmissionLink = async (
submissionId: number,
url_link: string
): Promise<TaskSubmissionData> => {
const formData = new FormData();
formData.append("url_link", url_link);
const res = await api.patch(`/task-api/submissions/${submissionId}`, formData);
return res.data.data;
};
export const deleteSubmission = async (submissionId: number): Promise<void> => {
await api.delete(`/task-api/submissions/${submissionId}`);
};
src/services/UserService.ts
View File
src/types/project.types.ts
+75 -25
View File
@@ -1,21 +1,34 @@
// Admin/Mentor Projects
// types/project.types.ts
export type ProjectStatus = "active" | "completed" | "archived";
export type MemberStatus = "active" | "inactive";
export interface ProjectAdmin {
id: number;
full_name: string;
email: string;
profile_picture: string;
professional_bio: string;
profile_picture: string | null;
professional_bio: string | null;
}
// Project General
export interface ProjectMember {
id: number;
id_user: number;
status?: MemberStatus;
created_at?: string;
updated_at?: string;
}
// Response GET /project-api/get dan GET /project-api/get/{id}
export interface Project {
id: number;
slug: string;
project_icon: string;
project_name: string;
description: string;
start_date: string;
end_date: string;
status: "active" | "inactive" | "completed";
status: ProjectStatus;
admin: ProjectAdmin;
total_members: number;
total_tasks: number;
@@ -23,31 +36,35 @@ export interface Project {
updated_at: string;
}
//
export interface TaskSubmissionDetails {
id: number;
file_path: string | null;
url_link: string | null;
submitted_at: string;
updated_at: string;
// Detail project (includes members array)
export interface ProjectDetail extends Project {
members: ProjectMember[];
}
// Task General: ALL TASK COMBINED
export interface InternTask {
// Response GET /project-api/my-tasks
export interface InternTaskItem {
id: number;
slug: string;
id_project: number;
project_slug: string;
project_name: string;
project_icon: string;
title: string;
description: string;
deadline_at: string;
submission_type: "url_link" | "file";
submission_status: "submitted" | "pending" | "late";
submission_details: TaskSubmissionDetails | null;
submission_type: "file_upload" | "url_link";
submission_status: "pending" | "submitted" | "done" | "overdue";
submission_details: {
id: number;
file_path: string | null;
url_link: string | null;
submitted_at: string;
updated_at: string;
} | null;
}
// Intern
export interface Intern {
// Response GET /project-api/interns
export interface InternDetail {
id: number;
name: string;
email: string;
@@ -57,14 +74,47 @@ export interface Intern {
avatar: string | null;
}
//Project Task
export interface ProjectTask {
// Payload POST /project-api/add
export interface CreateProjectPayload {
project_icon: string;
project_name: string;
description: string;
start_date: string; // "YYYY-MM-DD"
end_date: string; // "YYYY-MM-DD"
member_emails?: string[];
}
// Payload PATCH /project-api/update/{id}
export interface UpdateProjectPayload {
project_icon?: string;
project_name?: string;
description?: string;
start_date?: string;
end_date?: string;
status?: ProjectStatus;
}
// Payload POST /project-api/assign-member
export interface AssignMemberPayload {
id_project: number;
id_user: number;
}
// Response assign-member
export interface MemberAssignment {
id: number;
id_project: number;
title: string;
description: string;
deadline_at: string;
submission_type: "file_upload" | "url_link";
id_user: number;
status: MemberStatus;
created_at: string;
updated_at: string;
}
export interface ProjectMember {
id: number;
full_name: string;
email: string;
professional_bio: string | null;
position: string;
kelompok_peminatan: string;
}
src/types/task.types.ts
+69
View File
@@ -0,0 +1,69 @@
// types/task.types.ts
export type SubmissionType = "file_upload" | "url_link";
export type DisplayStatus = "pending" | "submitted" | "done" | "overdue";
export interface ProjectTask {
id: number;
id_project: number;
slug: string;
title: string;
description: string;
deadline_at: string;
submission_type: SubmissionType;
created_at: string;
updated_at: string;
}
export interface TaskSubmissionData {
id: number;
id_task: number;
id_user: number;
file_path: string | null;
url_link: string | null;
submitted_at: string;
updated_at: string;
}
export interface ProjectTaskDetail extends ProjectTask {
project: {
id: number;
project_name: string;
project_icon: string;
};
display_status: DisplayStatus;
my_submission: TaskSubmissionData | null;
}
export interface AdminTaskDetail extends ProjectTask {
project: {
id: number;
project_name: string;
project_icon: string;
};
submission_summary: {
total_members: number;
total_submitted: number;
total_done: number;
total_pending: number;
total_overdue: number;
};
submissions: Array<{
id_user: number;
full_name: string;
file_path: string | null;
url_link: string | null;
submitted_at: string | null;
updated_at: string | null;
}>;
}
export interface CreateTaskPayload {
title: string;
description: string;
deadline_date: string; // "YYYY-MM-DD"
specific_time: string; // "HH:mm"
submission_type: SubmissionType;
}
export interface UpdateTaskPayload extends Partial<CreateTaskPayload> {}
src/types/user.types.ts
View File