intern project and user fix bug and implementation

src/App.tsx

@@ -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

@@ -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

@@ -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,19 +26,18 @@ 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} />
-              ))
-            )}
+            <p className="text-sm text-gray-400">Belum ada task.</p>
+          ) : (
+            tasks.map((task) => (
+              <TaskCard key={task.id} task={task} />
+            ))
+          )}
         </div>
       </div>
     </div>

src/Pages/internify/intern/ParticipantTab.tsx

@@ -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

@@ -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

@@ -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

@@ -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-2">
-            <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}
-            </span>
-          </div>
+    <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>
+          <span className="text-sm font-bold text-gray-600">
+            Due {formatDeadline(task.deadline_at)} at {formatTime(task.deadline_at)}
+          </span>
         </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>
+        <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>
       </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>
+        <div className="flex items-center gap-2 pb-2">
+          <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

@@ -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

@@ -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

@@ -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

@@ -1,50 +1,43 @@
-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[] }) {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
+export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
 
-    return (
-        <div>
-            <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"/>
-            </div>
+  return (
+    <div className="">
+      <div className="flex items-center gap-1.5 mb-4 justify-between">
+        <span className="font-semibold text-md text-font-shade">Timeline</span>
+      </div>
+      <ul className="relative pl-4">
+        {tasks.map((task) => {
+          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;
 
-            <ul className="relative pl-4">
-                {tasks.map((task, idx) => {
-                    const d = new Date(task.deadline.date);
-                    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">
-                            {/* Dot */}
-                            <div
-                                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>
-                            <div className="text-xs text-[#555] mt-px leading-[1.3]">
-                                {task.title}
-                            </div>
-                        </li>
-                    );
-                })}
-            </ul>
-        </div>
-    );
+          return (
+            <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]'
+                } ${isToday ? 'shadow-md' : ''}`}
+              />
+              <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}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
 }

src/Pages/internify/intern/components/ProjectsCard.tsx

@@ -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

@@ -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

@@ -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,
@@ -49,16 +49,16 @@ export default function SubmitStatusTable({
       {/* Header */}
       <div className="flex justify-between items-center px-4 py-3 border-b border-box-border">
         <div className="flex items-center gap-2">
-            {confirmDelete ? (
-                <span className="text-xs font-medium text-gray-600">
+          {confirmDelete ? (
+            <span className="text-xs font-medium text-gray-600">
               Are you sure you want to remove your submission?
             </span>
-            ) : (
+          ) : (
             <>
-                <FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
-                <span className="font-bold text-sm text-gray-800">Submit Status</span>
+              <FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
+              <span className="font-bold text-sm text-gray-800">Submit Status</span>
             </>
-            )}
+          )}
         </div>
 
         {confirmDelete ? (
@@ -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">
-                  <FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
-                  {f.name}
-                </div>
-              ))
+              <div className="flex items-center gap-2 text-sm text-gray-800">
+                <FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
+                {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

@@ -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);
-        } else {
-          alert(`Ukuran file ${file.name} melebihi batas maksimal 10MB.`);
-        }
+      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(`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) {
-  return (
-    <SubmitStatusTable
-      type="file"
-      files={files}
-      submittedAt={new Date()}
-      deadline={deadline} // opsional, kirim dari parent kalau ada
-      onEdit={handleEditSubmission}
-      onDelete={handleDeleteSubmission}
-    />
-  );
-}
+  // Sudah ada submission dan tidak sedang edit → tampilkan status
+  if (submission && !isEditing) {
+    return (
+      <SubmitStatusTable
+        type="file"
+        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

@@ -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) {
-  return (
-    <SubmitStatusTable
-      type="link"
-      link={submissionLink}
-      submittedAt={new Date()}
-      deadline={deadline}
-      onEdit={handleEditSubmission}
-      onDelete={handleDeleteSubmission}
-    />
-  );
-}
+  if (submission && !isEditing) {
+    return (
+      <SubmitStatusTable
+        type="link"
+        link={submission.url_link ?? ""}
+        submittedAt={new Date(submission.submitted_at)}
+        deadline={deadline}
+        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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/types/project.types.ts

@@ -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

@@ -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> {}