From f63efb0e12a93ea8a49d820429be00602ee991b0 Mon Sep 17 00:00:00 2001
From: "Kemas M. Aryadary Rasyad"
 <112590882+aryadary0706@users.noreply.github.com>
Date: Thu, 25 Jun 2026 00:35:53 +0700
Subject: [PATCH] Implementasi Backend pada login, FAQ, Settings Intern,
 Projects Intern, Home Intern

---
 src/App.tsx                                   | 51 ++++++-----
 src/Layout/Header-internify.tsx               |  2 +-
 src/Pages/NotFound.tsx                        |  0
 src/Pages/internify/Breadcumbs.tsx            |  4 +-
 src/Pages/internify/FAQpage.tsx               | 81 +++++++++--------
 src/Pages/internify/LoginInternify.tsx        | 46 +++++++---
 src/Pages/internify/SettingsPage.tsx          | 90 +++++++++++++++----
 src/Pages/internify/intern/ForumTab.tsx       | 32 +++++--
 src/Pages/internify/intern/HomeInternPage.tsx |  6 +-
 src/Pages/internify/intern/ParticipantTab.tsx | 69 ++++++++++----
 .../internify/intern/ProjectDetailPage.tsx    | 18 ++--
 src/Pages/internify/intern/ProjectsPage.tsx   | 18 +++-
 .../intern/components/HomeCalendar.tsx        | 14 +--
 .../intern/components/HomeHeader.tsx          | 24 +++--
 .../intern/components/HomeProjectList.tsx     | 49 ++++++----
 .../intern/components/ProjectTaskCard.tsx     | 36 ++++----
 .../intern/components/ProjectsCard.tsx        | 79 ++++++++--------
 .../intern/components/SidebarIntern.tsx       | 44 +++++----
 .../intern/components/TaskTimeline.tsx        | 42 ++++++---
 .../{HomePage.tsx => HomeMentorPage.tsx}      |  0
 .../mentor/components/SidebarMentor.tsx       | 28 +++---
 src/Pages/utils/ProtectedRoute.tsx            | 19 ++--
 src/hooks/useProjectDetail.ts                 | 59 ++++++++++++
 src/hooks/useProjects.ts                      | 40 +++++++++
 src/index.css                                 | 11 ++-
 src/{Pages/utils => lib}/api.ts               |  1 -
 src/services/ProjectService.ts                | 29 ++++++
 src/types/project.types.ts                    | 70 +++++++++++++++
 src/types/task.types.ts                       |  0
 29 files changed, 682 insertions(+), 280 deletions(-)
 create mode 100644 src/Pages/NotFound.tsx
 rename src/Pages/internify/mentor/{HomePage.tsx => HomeMentorPage.tsx} (100%)
 create mode 100644 src/hooks/useProjectDetail.ts
 create mode 100644 src/hooks/useProjects.ts
 rename src/{Pages/utils => lib}/api.ts (87%)
 create mode 100644 src/services/ProjectService.ts
 create mode 100644 src/types/project.types.ts
 create mode 100644 src/types/task.types.ts

diff --git a/src/App.tsx b/src/App.tsx
index 35c8ea7..b70fb6f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,7 +33,7 @@ import { InternLayout, MentorLayout } from "./Pages/Internify/layout";
 import ProjectsPage from "./Pages/Internify/intern/ProjectsPage";
 import SertificatePage from "./Pages/Internify/intern/SertificatePage";
 import ProjectDetailPage from "./Pages/Internify/intern/ProjectDetailPage";
-import HomeMentorPage from "./Pages/Internify/mentor/HomePage";
+import HomeMentorPage from "./Pages/Internify/mentor/HomeMentorPage";
 import MentorProjectsPage from "./Pages/Internify/mentor/BaseProjectsPage";
 import MentorCertificatePage from "./Pages/Internify/mentor/CertificatePage";
 import MentorInternPage from "./Pages/Internify/mentor/InternsPage";
@@ -88,30 +88,37 @@ function App() {
 
         <Route path="/login-internify" element={<InternifyLogin />} />
 
-        <Route path="/intern" element={<InternLayout />}>
-          <Route index element={<HomeInternPage />} />
-          <Route path="projects" element={<ProjectsPage />} />
-          <Route path="certificates" element={<SertificatePage />} />
-          <Route path="certificates/all" element={<SertificateList />} />
-          <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 />} />
+        {/* Intern only */}
+        <Route element={<ProtectedRoutes allowedRoles={["intern"]} />}>
+          <Route path="/intern" element={<InternLayout />}>
+            <Route index element={<HomeInternPage />} />
+            <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="faq" element={<FAQPage />} />
+            <Route path="notifications" element={<NotificationList />} />
+            <Route path="settings" element={<SettingsContent />} />
+          </Route>
         </Route>
 
-        <Route path="/mentor" element={<MentorLayout />}>
-          <Route index element={<HomeMentorPage />} />
-          <Route path="projects" element={<MentorProjectsPage />} />
-          <Route path="certificates" element={<MentorCertificatePage />} />
-          <Route path="intern" element={<MentorInternPage />} />
-          <Route path="projects/:slug" element={<MentorDetailProject />} />
-          <Route path="projects/:slug/:taskSlug" element={<MentorProjectsDetailPage />} />
-          <Route path="projects/:slug/:taskSlug/:nameIntern" element={<ViewInternSubmission />}/>
-          <Route path="faq" element={<FAQPage />} />
-          <Route path="notifications" element={<NotificationList />} />
-          <Route path="settings" element={<SettingsPage />} />
+        {/* Mentor only */}
+        <Route element={<ProtectedRoutes allowedRoles={["admin"]} />}>
+          <Route path="/mentor" element={<MentorLayout />}>
+            <Route index element={<HomeMentorPage />} />
+            <Route path="projects" element={<MentorProjectsPage />} />
+            <Route path="certificates" element={<MentorCertificatePage />} />
+            <Route path="intern" element={<MentorInternPage />} />
+            <Route path="projects/:slug" element={<MentorDetailProject />} />
+            <Route path="projects/:slug/:taskSlug" element={<MentorProjectsDetailPage />} />
+            <Route path="projects/:slug/:taskSlug/:nameIntern" element={<ViewInternSubmission />} />
+            <Route path="faq" element={<FAQPage />} />
+            <Route path="notifications" element={<NotificationList />} />
+            <Route path="settings" element={<SettingsPage />} />
+          </Route>
         </Route>
+
       </Routes>
     </Router>
   );
diff --git a/src/Layout/Header-internify.tsx b/src/Layout/Header-internify.tsx
index f17c057..553e2f7 100644
--- a/src/Layout/Header-internify.tsx
+++ b/src/Layout/Header-internify.tsx
@@ -9,7 +9,7 @@ export default function Header({ toggleSidebar }: { toggleSidebar: () => void })
       <div className='flex items-center gap-3'>
         <button 
           onClick={toggleSidebar} 
-          className="p-1 text-gray-600 hover:bg-gray-100 rounded-md md:hidden"
+          className="p-1 text-gray-600 hover:bg-gray-100 rounded-md lg:hidden"
         >
           <Menu className="w-6 h-6" />
         </button>
diff --git a/src/Pages/NotFound.tsx b/src/Pages/NotFound.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/internify/Breadcumbs.tsx b/src/Pages/internify/Breadcumbs.tsx
index 8691960..5416ede 100644
--- a/src/Pages/internify/Breadcumbs.tsx
+++ b/src/Pages/internify/Breadcumbs.tsx
@@ -54,7 +54,7 @@ export default function Breadcrumbs(){
     return true;
   });
   return (
-    <nav className="text-[12px] mb-3">
+    <nav className="text-[15px] mb-3">
       {fixbreadcumbs.map(({ match, breadcrumb }) => {
         const isLast = match.pathname === location.pathname;
 
@@ -63,13 +63,13 @@ export default function Breadcrumbs(){
             {isLast ? (
               <span className="font-bold text-red-800">
                 {breadcrumb}
+                
               </span>
             ) : (
               <>
                 <Link to={match.pathname} className="text-gray-800">
                   {breadcrumb}
                 </Link>
-                {/* Karakter pemisah antar breadcrumb */}
                 <ChevronRight className="w-4 h-4 mx-1.5"/>
               </>
             )}
diff --git a/src/Pages/internify/FAQpage.tsx b/src/Pages/internify/FAQpage.tsx
index f50bd88..c89e238 100644
--- a/src/Pages/internify/FAQpage.tsx
+++ b/src/Pages/internify/FAQpage.tsx
@@ -1,26 +1,34 @@
-const mockFAQData = [
-  {
-    id: 1,
-    question: "How do I generate internship certificates?",
-    answer: "Once an intern has completed all required project milestones and their final evaluation is approved by a manager, go to the 'Manage Certificates' tab. Select the intern's name, click 'Generate Certificate', and the system will automatically populate the official Internify template with their specific details."
-  },
-  {
-    id: 2,
-    question: "What are the technical requirements for interns?",
-    answer: "Internify is a web-based LMS. Interns simply need a modern web browser (Chrome, Firefox, or Safari) and a stable internet connection. Some engineering modules may require local development environments, which are detailed in the specific project onboarding documentation."
-  },
-  {
-    id: 3,
-    question: "How often is the project dashboard updated?",
-    answer: "The dashboard updates in real-time as interns submit tasks or participate in the forum. Weekly progress reports are automatically generated every Friday at 5:00 PM EST and can be exported as PDF files from the Dashboard view."
-  }
-];
+import api from "../../lib/api";
+import { useEffect, useState } from "react";
+
+interface FAQ {
+  id: number;
+  pertanyaan: string;
+  jawaban: string;
+  created_at: string;
+}
 
 export default function FAQPage() {
+  const [faq, setFaq] = useState<FAQ[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    api.get("/faq-api/get")
+      .then((res) => {
+        setFaq(res.data.data); // ambil array dari field "data"
+      })
+      .catch((err) => {
+        console.error("Gagal fetch FAQ:", err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
   return (
     <div>
-      {/* Header Title */}
-      <div className="mb-10 ">
+      <div className="mb-10">
         <h1 className="page-title">FAQ</h1>
         <p className="page-title-desc">
           Quick answers to common questions about the Internify LMS platform.
@@ -28,22 +36,25 @@ export default function FAQPage() {
       </div>
 
       {/* FAQ Lists */}
-      <div className="space-y-8 max-w-auto">
-        {mockFAQData.map((faq) => (
-          <div key={faq.id} className="relative shadow-md group py-5 px-10 rounded-md bg-white">
-            
-            {/* Item Question */}
-            <h2 className="text-[17px] font-bold text-[#8A0000] tracking-tight leading-snug mb-2 border-l-4 border-[#8A0000] pl-3">
-              {faq.question}
-            </h2>
-            
-            {/* Item Answer */}
-            <p className="text-[14px] pl-8 text-[#8A0000] font-light leading-relaxed tracking-normal">
-              {faq.answer}
-            </p>
-          </div>
-        ))}
-      </div>
+      {loading ? (
+        <p className="text-gray-500">Memuat FAQ...</p>
+      ) : (
+        <div className="space-y-8 max-w-auto">
+          {faq.map((item) => (
+            <div key={item.id} className="relative shadow-md group py-5 px-10 rounded-md bg-white">
+              
+              {/* Item Question */}
+              <h2 className="text-[17px] font-bold text-[#8A0000] tracking-tight leading-snug mb-2 border-l-4 border-[#8A0000] pl-3">
+                {item.pertanyaan}
+              </h2>
+
+              <p className="text-[14px] pl-8 text-[#8A0000] font-light leading-relaxed tracking-normal">
+                {item.jawaban}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/Pages/internify/LoginInternify.tsx b/src/Pages/internify/LoginInternify.tsx
index b6930a8..8799e4d 100644
--- a/src/Pages/internify/LoginInternify.tsx
+++ b/src/Pages/internify/LoginInternify.tsx
@@ -2,11 +2,17 @@ import { useState } from "react";
 import logo from "../../assets/logo.png";
 import { useNavigate } from "react-router-dom";
 import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
+import api from "../../lib/api";
 
-const DataUsers = [
-    { "Email": "intern@email.com", "Password": "password123", "role": "intern" },
-    { "Email": "mentor@email.com", "Password": "password123", "role": "mentor" },
-];
+const decodeJWT = (token: string) => {
+  try {
+    const base64 = token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
+    return JSON.parse(atob(padded));
+  } catch {
+    return null;
+  }
+};
 
 export default function InternifyLogin() {
     const navigate = useNavigate();
@@ -14,8 +20,9 @@ export default function InternifyLogin() {
     const [password, setPassword] = useState("");
     const [showPassword, setShowPassword] = useState(false);
     const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
 
-    const handleSignIn = (e: React.FormEvent) => {
+    const handleSignIn = async (e: React.FormEvent) => {
         e.preventDefault();
         setError("");
 
@@ -24,20 +31,30 @@ export default function InternifyLogin() {
             return;
         }
 
-        const user = DataUsers.find(
-            (u) => u.Email.toLowerCase() === email.toLowerCase() && u.Password === password
-        );
+        try {
+            setLoading(true);
+            const response = await api.post("/auth-api/login", { email, password });
 
-        if (user) {
-            if (user.role === "intern") {
+            const { token } = response.data.data;
+            document.cookie = `token=${token}; path=/; SameSite=Strict`;
+            
+            const decoded = decodeJWT(token);
+            const role = decoded?.role;
+            if (role === "intern") {
                 navigate("/intern");
-            } else if (user.role === "mentor") {
+            } else if (role === "admin") {
                 navigate("/mentor");
             } else {
                 setError("Role user tidak dikenali.");
             }
-        } else {
-            setError("Email atau password salah.");
+        } catch (err: any) {
+            if (err.response?.status === 401 || err.response?.status === 400) {
+                setError("Email atau password salah.");
+            } else {
+                setError("Terjadi kesalahan. Coba beberapa saat lagi.");
+            }
+        } finally {
+            setLoading(false);
         }
     };
 
@@ -48,7 +65,7 @@ export default function InternifyLogin() {
             <div className="w-full max-w-[440px] flex flex-col items-center">
                 <div className="text-center mb-6">
                     <div className="flex items-center justify-center gap-2 font-bold text-2xl tracking-tight text-black">
-                        <img src={logo} alt="Logo" className="w-32 h-20" />
+                        <img src={logo} alt="Logo" />
                     </div>
                     <p className="text-[10px] tracking-widest text-yellow-950 font-semibold mt-1 uppercase">
                         HUMIC LMS PORTAL
@@ -112,6 +129,7 @@ export default function InternifyLogin() {
 
                         <button
                             type="submit"
+                            disabled={loading}
                             className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-medium text-sm py-2.5 rounded-lg transition-colors shadow-sm mt-2"
                         >
                             Sign In
diff --git a/src/Pages/internify/SettingsPage.tsx b/src/Pages/internify/SettingsPage.tsx
index 1eab2a1..01284d1 100644
--- a/src/Pages/internify/SettingsPage.tsx
+++ b/src/Pages/internify/SettingsPage.tsx
@@ -1,30 +1,72 @@
-import { useState } from "react";
-
-// Mock Data Profile awal
-const mockProfileData = {
-  fullName: "JonathanKristina",
-  email: "JonathanKristina@gmail.com",
-  bio: "UIUX holic"
-};
+import { useState, useEffect } from "react";
+import api from "../../lib/api";
 
 export default function SettingsContent() {
-  const [formData, setFormData] = useState(mockProfileData);
+  const [formData, setFormData] = useState({
+    fullName: "",
+    email: "",
+    bio: ""
+  });
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [successMsg, setSuccessMsg] = useState("");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await api.patch("/auth-api/update-profile");
+        const data = response.data.data;
+        setFormData({
+          fullName: data.full_name || "",
+          email: data.email || "",
+          bio: data.professional_bio || "",
+        });
+      } catch (err) {
+        console.error("Failed to fetch profile:", err)
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleSaveChanges = (e: React.FormEvent) => {
+  const handleSaveChanges = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Simulasi penyimpanan data sukses
-    alert("Changes saved successfully!");
-    console.log("Saved Data:", formData);
+    setSuccessMsg("");
+    setErrorMsg("");
+    setSaving(true);
+
+    try {
+      await api.patch("/auth-api/update-profile", {
+        full_name: formData.fullName,
+        email: formData.email,
+        professional_bio: formData.bio,
+      });
+      setSuccessMsg("Profile updated successfully!");
+    } catch (err: any) {
+      setErrorMsg(err?.response?.data?.message || "Failed to save changes.");
+    } finally {
+      setSaving(false);
+    }
   };
 
-  // Mendapatkan inisial huruf pertama untuk avatar profile gambar
   const initialLetter = formData.fullName ? formData.fullName.charAt(1).toUpperCase() : "U";
 
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-40 text-sm text-gray-400">
+        Loading profile...
+      </div>
+    );
+  }
+
   return (
     <div className="">
 
@@ -38,7 +80,7 @@ export default function SettingsContent() {
 
       {/* White Card Container */}
       <div className="w-full bg-white rounded-xl border border-gray-100 shadow-lg overflow-hidden">
-        
+
         {/* Card Header */}
         <div className="p-6 border-b border-gray-100">
           <h2 className="text-base font-bold text-gray-900">Profile Information</h2>
@@ -49,7 +91,7 @@ export default function SettingsContent() {
 
         {/* Card Body & Form */}
         <form onSubmit={handleSaveChanges} className="p-6 space-y-6">
-          
+
           {/* Profile Photo Display Row */}
           <div className="flex items-center gap-4 py-2">
             <div className="w-16 h-16 bg-gray-100 border border-gray-200 rounded-xl flex items-center justify-center shadow-sm">
@@ -67,7 +109,7 @@ export default function SettingsContent() {
 
           {/* Grid Inputs (Full Name & Email Address) */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            
+
             {/* Field: Full Name */}
             <div className="space-y-1">
               <label className="text-[10px] font-bold tracking-wider text-gray-700 uppercase block">
@@ -114,13 +156,25 @@ export default function SettingsContent() {
             </p>
           </div>
 
+          {successMsg && (
+            <p className="text-xs text-green-600 bg-green-50 p-2 rounded-md font-medium">
+              {successMsg}
+            </p>
+          )}
+          {errorMsg && (
+            <p className="text-xs text-red-600 bg-red-50 p-2 rounded-md font-medium">
+              {errorMsg}
+            </p>
+          )}
+
           {/* Form Action Footer Row */}
           <div className="flex justify-end pt-2">
             <button
               type="submit"
+              disabled={saving}
               className="px-6 py-2 bg-[#B30000] hover:bg-[#990000] text-white font-bold text-xs rounded-lg shadow-sm transition-colors uppercase tracking-wider"
             >
-              Save Changes
+              {saving ? "Saving..." : "Save Changes"}
             </button>
           </div>
 
diff --git a/src/Pages/internify/intern/ForumTab.tsx b/src/Pages/internify/intern/ForumTab.tsx
index 4ee64c1..1e46951 100644
--- a/src/Pages/internify/intern/ForumTab.tsx
+++ b/src/Pages/internify/intern/ForumTab.tsx
@@ -1,24 +1,44 @@
-import type { Project } from '../../../lib/mockProjects';
+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 type { Project } from '../../../types/project.types';
 
 export default function ForumTab({ project }: { project: Project }) {
+  const { id } = useParams<{id:string}>();
+  const { tasks, loading, error } = useProjectTasks(id ?? "");
   return (
     <div>
       {/* Hero banner */}
-      <HeroProject title={project.name} description={project.description} />
+      <HeroProject title={project.project_name} description={project.description} />
+
+      {/* Loading */}
+      {loading && (
+        <div className="flex flex-col gap-3 mt-5">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="h-24 bg-gray-100 rounded-xl animate-pulse" />
+          ))}
+        </div>
+      )}
+
+      {/* Error */}
+      {error && <p className="text-red-500 text-sm mt-5">{error}</p>}
 
       {/* Timeline + Task list */}
       <div className="flex gap-7 items-start">
         <div className="w-1/5 bg-white rounded-xl p-5 shadow-md shrink-0">
-          <ProjectTimeline tasks={project.tasks} />
+          {/* <ProjectTimeline tasks=tasks /> */}
         </div>
 
         <div className="w-4/5">
-          {project.tasks.map((task, idx) => (
-            <TaskCard key={idx} task={task} projectName={project.name} />
-          ))}
+          {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} />
+              ))
+            )}
         </div>
       </div>
     </div>
diff --git a/src/Pages/internify/intern/HomeInternPage.tsx b/src/Pages/internify/intern/HomeInternPage.tsx
index 082f9ca..8212928 100644
--- a/src/Pages/internify/intern/HomeInternPage.tsx
+++ b/src/Pages/internify/intern/HomeInternPage.tsx
@@ -9,14 +9,14 @@ export default function HomeInternPage()  {
       <HomeHeader />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-2 gap-5">
-          <div className="bg-white border border-gray-200 rounded-xl p-6">
+          <div className="bg-box-primary border border-box-border rounded-xl p-6">
             <HomeProjectList />
           </div>
-          <div className="bg-white border border-gray-200 rounded-xl p-6">
+          <div className="bg-box-primary border border-box-border rounded-xl p-6">
             <TaskTimeline />
           </div>
         </div>
-        <div className="bg-white  rounded-xl">
+        <div className="bg-box-primary  rounded-xl">
           <HomeCalendar />
         </div>
       </div>
diff --git a/src/Pages/internify/intern/ParticipantTab.tsx b/src/Pages/internify/intern/ParticipantTab.tsx
index b7d13dd..c1de1eb 100644
--- a/src/Pages/internify/intern/ParticipantTab.tsx
+++ b/src/Pages/internify/intern/ParticipantTab.tsx
@@ -1,44 +1,75 @@
-import type { Project, Intern } from '../../../lib/mockData';
+import { useParams } from 'react-router-dom';
+import { useProjectInterns } from '../../../hooks/useProjectDetail';
+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 ?? "");
+
   return (
     <div>
       {/* Mentor */}
       <div className="mb-8">
-        <h3 className=" font-bold text-base text-[#1a1a1a] mb-3.5">
-          Mentor
-        </h3>
+        <h3 className="font-bold text-font-shade mb-3.5">Mentor</h3>
         <div className="border-b border-[#eee] pb-4">
           <div className="flex items-center gap-3">
-            <span className=" text-sm text-[#333]">
-              {project.mentor}
-            </span>
+            {project.admin.profile_picture ? (
+              <img
+                src={project.admin.profile_picture}
+                alt={project.admin.full_name}
+                className="w-8 h-8 rounded-full object-cover"
+              />
+            ) : (
+              <div className="w-8 h-8 rounded-full bg-gray-200" />
+            )}
+            <span className="text-sm text-font">{project.admin.full_name}</span>
           </div>
         </div>
       </div>
 
       {/* Members */}
       <div>
-        <h3 className="font-bold text-base text-[#1a1a1a] mb-3.5">
-          Members
-        </h3>
-        {project.interns.map((intern: Intern, idx: number) => (
+        <h3 className="font-bold text-font-shade mb-3.5">Members</h3>
+
+        {loading && (
+          <div className="flex flex-col gap-3">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="h-10 bg-gray-100 rounded animate-pulse" />
+            ))}
+          </div>
+        )}
+
+        {error && <p className="text-red-500 text-sm">{error}</p>}
+
+        {!loading && !error && interns.map((intern, idx) => (
           <div
-            key={idx}
+            key={intern.id}
             className={`flex items-center justify-between py-3 ${
-              idx < project.interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
+              idx < interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
             }`}
           >
             <div className="flex items-center gap-3">
-              <span className=" text-sm text-[#333]">
-                {intern.name}
-              </span>
+              {intern.avatar ? (
+                <img
+                  src={intern.avatar}
+                  alt={intern.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-[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.role}</span>
           </div>
         ))}
+
+        {!loading && !error && interns.length === 0 && (
+          <p className="text-sm text-gray-400">Belum ada members.</p>
+        )}
       </div>
     </div>
   );
diff --git a/src/Pages/internify/intern/ProjectDetailPage.tsx b/src/Pages/internify/intern/ProjectDetailPage.tsx
index 9d21cc0..8f524cf 100644
--- a/src/Pages/internify/intern/ProjectDetailPage.tsx
+++ b/src/Pages/internify/intern/ProjectDetailPage.tsx
@@ -1,24 +1,20 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { mockProjects } from '../../../lib/mockProjects';
+import { useProjectDetail } from '../../../hooks/useProjectDetail';
 import ForumTab from './ForumTab';
 import ParticipantsTab from './ParticipantTab';
 
 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
 
 export default function ProjectDetailPage() {
-  const { slug } = useParams<{ slug: string }>();
+  const { id } = useParams<{ id: string }>(); 
+  const { project, loading, error } = useProjectDetail(id ?? "");
   const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
 
-  const project = mockProjects.find((p) => toSlug(p.name) === slug);
-
-  if (!project) {
-    return (
-      <div className="p-10 text-[#888]">
-        Project tidak ditemukan.
-      </div>
-    );
-  }
+  // Fallback sederhana
+  if (loading) return <p className="p-10 text-gray-400">Memuat project...</p>;
+  if (error)   return <p className="p-10 text-red-500">{error}</p>;
+  if (!project) return <p className="p-10 text-gray-400">Project tidak ditemukan.</p>;
 
   const tabClass = (tab: string) =>
     `pr-0 py-2.5 mr-7 text-sm bg-transparent border-0 cursor-pointer transition-colors duration-150 border-b-2 ${activeTab === tab
diff --git a/src/Pages/internify/intern/ProjectsPage.tsx b/src/Pages/internify/intern/ProjectsPage.tsx
index ebdb018..6ebbfc4 100644
--- a/src/Pages/internify/intern/ProjectsPage.tsx
+++ b/src/Pages/internify/intern/ProjectsPage.tsx
@@ -1,7 +1,19 @@
 import ProjectCard from './components/ProjectsCard'
-import { mockProjects } from '../../../lib/mockData'
+import { useProjects } from '../../../hooks/useProjects';
 
 export default function ProjectsPage() {
+  const { projects, loading, error } = useProjects();
+
+  if (loading) return (
+    <div className="flex flex-col gap-3">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
+      ))}
+    </div>
+  );
+
+   if (error) return <p className="text-danger text-md">{error}</p>;
+
   return (
     <div>
       <div className="flex flex-col gap-1 mb-6">
@@ -10,8 +22,8 @@ export default function ProjectsPage() {
       </div>
 
       {/* Grid card */}
-      <div className="grid grid-cols-1 gap-6 md:gap-4 md:grid-cols-3 lg:grid-cols-4">
-        {mockProjects.map(project => (
+      <div className="grid grid-cols-1 gap-6 md:gap-3 md:grid-cols-4 lg:grid-cols-5">
+        {projects.map(project => (
           <ProjectCard key={project.id} {...project} />
         ))}
       </div>
diff --git a/src/Pages/internify/intern/components/HomeCalendar.tsx b/src/Pages/internify/intern/components/HomeCalendar.tsx
index f629998..f09d578 100644
--- a/src/Pages/internify/intern/components/HomeCalendar.tsx
+++ b/src/Pages/internify/intern/components/HomeCalendar.tsx
@@ -89,13 +89,13 @@ const HomeCalendar = () => {
   }
 
   return (
-    <div className=" px-13 py-5 border border-gray-200 rounded-2xl">
+    <div className=" px-13 py-5 border border-card-outline rounded-2xl">
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-base font-semibold text-gray-800">
+        <h2 className="font-bold text-font">
           {MONTH_NAMES[currentMonth]} {currentYear}
         </h2>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center">
           <button
             onClick={prevMonth}
             className="p-1 rounded hover:bg-gray-100 transition-colors"
@@ -160,11 +160,11 @@ const HomeCalendar = () => {
       </div>
 
       {/* Divider */}
-      <hr className="my-3 border-gray-100" />
+      <hr className="my-3 border-gray-400" />
 
       {/* Upcoming Deadlines */}
       <div>
-        <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-2">
+        <p className="text-[10px] font-semibold text-font uppercase tracking-widest mb-2">
           Upcoming Deadlines
         </p>
         {upcomingDeadlines.length > 0 ? (
@@ -172,12 +172,12 @@ const HomeCalendar = () => {
             {upcomingDeadlines.map((d, i) => (
               <li key={i} className="flex items-center gap-2">
                 <span className="w-2 h-2 rounded-full bg-red-600 flex-shrink-0" />
-                <span className="text-xs text-gray-600">{d.label}</span>
+                <span className="text-xs text-font-shade">{d.label}</span>
               </li>
             ))}
           </ul>
         ) : (
-          <p className="text-[11px] text-gray-400">No upcoming deadlines this month.</p>
+          <p className="text-[11px] text-font-shade">No upcoming deadlines this month.</p>
         )}
       </div>
     </div>
diff --git a/src/Pages/internify/intern/components/HomeHeader.tsx b/src/Pages/internify/intern/components/HomeHeader.tsx
index 97c8483..d709627 100644
--- a/src/Pages/internify/intern/components/HomeHeader.tsx
+++ b/src/Pages/internify/intern/components/HomeHeader.tsx
@@ -1,12 +1,26 @@
+import { useState, useEffect } from "react";
+import api from "../../../../lib/api";
+
 const HomeHeader = () => {
-  const name = "Karina";
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+  api.get("/auth-api/me")
+    .then((res) => {
+      setName(res.data.data.full_name || res.data.data.nama_depan);
+    })
+    .catch((err) => {
+      console.error("Failed to fetch user:", err);
+    });
+}, []);
+
   return (
     <div>
       <div className="flex items-start px-0 mb-5">
-        <h1 className="page-title">Hi, {name}!</h1>
+        <h1 className="page-title">Hi, {name || "..."}!</h1>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default HomeHeader
+export default HomeHeader;
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/HomeProjectList.tsx b/src/Pages/internify/intern/components/HomeProjectList.tsx
index 3f7ca94..ebbdfd2 100644
--- a/src/Pages/internify/intern/components/HomeProjectList.tsx
+++ b/src/Pages/internify/intern/components/HomeProjectList.tsx
@@ -1,31 +1,42 @@
-import { useNavigate } from 'react-router-dom'
-import { mockProjects } from '../../../../lib/mockProjects'
+import { useNavigate } from 'react-router-dom';
+import { useProjects } from '../../../../hooks/useProjects';
 
 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
 
 const HomeProjectList = () => {
   const navigate = useNavigate();
+  const { projects, loading, error } = useProjects();
+
+  if (loading) return (
+    <div className="flex flex-col gap-3">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
+      ))}
+    </div>
+  );
+
+  if (error) return <p className="text-red-500 text-sm">{error}</p>;
+
   return (
     <div>
-      <h2 className="text-lg font-semibold text-gray-800 mb-4">Projects</h2>
+      <h2 className="text-lg font-semibold text-font-shade mb-8">Projects</h2>
       <div className="flex flex-col gap-3">
-        {mockProjects.map((project, index) => {
-          return (
-            <div
-              key={index}
-              onClick={() => navigate(`/intern/projects/${toSlug(project.name)}`)}
-              className="flex items-center gap-4 border border-gray-200 rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
-            >
-              <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-gray-300`}/>
-              <div>
-                <p className="text-sm font-semibold text-gray-800">{project.name}</p>
-              </div>
+        {projects.map((project) => (
+          <div
+            key={project.id}
+            onClick={() => navigate(`/intern/projects/${toSlug(project.project_name)}`)}
+            className="flex items-center gap-4 border border-card-outline rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
+          >
+            <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-red-600" />
+            <div>
+              <p className="text-sm font-semibold text-font-shade">{project.project_name}</p>
+              <p className="text-xs text-gray-400">{project.status}</p>
             </div>
-          )
-        })}
+          </div>
+        ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default HomeProjectList
\ No newline at end of file
+export default HomeProjectList;
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/ProjectTaskCard.tsx b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
index 56a6bf6..64688f0 100644
--- a/src/Pages/internify/intern/components/ProjectTaskCard.tsx
+++ b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
@@ -1,19 +1,20 @@
-import type { Task } from "../../../../lib/mockProjects";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+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', year: 'numeric' });
 
-const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+const formatTime = (dateStr: string) =>
+  new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
 
-export default function TaskCard({ task, projectName }: { task: Task; projectName: string }) {
+export default function TaskCard({ task, projectName }: { task: ProjectTask; projectName: string }) {
   const navigate = useNavigate();
-  const toTaskSlug = (title: string) => title.toLowerCase().replace(/\s+/g, '-');
+  const {id}= useParams<{ id: 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="flex-1 min-w-0">
         <div className=" text-[11px] text-[#888] mb-1">
-          Deadline : {formatDate(task.deadline.date)} at {task.deadline.time}
+          Deadline : {formatDate(task.deadline_at)} at {formatTime(task.deadline_at)}
         </div>
         <div className=" font-bold text-[15px] text-[#1a1a1a] mb-1">
           {task.title}
@@ -22,20 +23,19 @@ export default function TaskCard({ task, projectName }: { task: Task; projectNam
           {task.description}
         </div>
         <div className=" text-[13px] text-[#666]">
-          Tipe Submission : {task.type === 'file' ? "File" : "Link"}
+          Tipe Submission : {task.submission_type === 'file_upload' ? "File" : "Link"}
         </div>
       </div>
 
       <div className="shrink-0">
-        {task.isSubmitted ? (
-          <span className=" inline-block bg-[#27AE60] text-white font-bold text-xs px-3.5 py-[5px] rounded-md tracking-[0.5px]">
-            DONE
-          </span>
-        ) : (
-          <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/${toSlug(projectName)}/${toTaskSlug(task.title)}?type=${task.type}`)}>
-            Add Submission
-          </button>
-        )}
+        <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}`
+          )}
+        >
+          Add Submission
+        </button>
       </div>
     </div>
   );
diff --git a/src/Pages/internify/intern/components/ProjectsCard.tsx b/src/Pages/internify/intern/components/ProjectsCard.tsx
index f028575..c2ce585 100644
--- a/src/Pages/internify/intern/components/ProjectsCard.tsx
+++ b/src/Pages/internify/intern/components/ProjectsCard.tsx
@@ -1,53 +1,56 @@
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom';
+import * as LucideIcons from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
+import type { Project } from '../../../../types/project.types';
 
 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
 
-interface ProjectCardProps {
-  id: number | string
-  name: string
-  mentor: string
-  avatarUrl?: string
-  thumbnailUrl?: string
-  progress: number
-  tasksDone: number
-  tasksTotal: number
-}
+const getDynamicIcon = (iconName: string) => {
+  const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
+  const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[formatted];
+  return Icon ?? LucideIcons.FolderOpen;
+};
 
-const ProjectCard = ({
-  name,
-  mentor,
-  avatarUrl,
-  thumbnailUrl,
-  progress,
-  tasksDone,
-  tasksTotal,
-}: ProjectCardProps) => {
-  const navigate = useNavigate()
+const ProjectCard = (project: Project) => {
+  const navigate = useNavigate();
+  const Icon = getDynamicIcon(project.project_icon);
+
+
+  const tasksDone = -1; 
+  const tasksTotal = project.total_tasks;
 
   return (
-    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col">
+    <div
+      onClick={() => navigate(`/intern/projects/${project.id}`)}
+      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 */}
-      <div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden">
-        {thumbnailUrl && (
-          <img src={thumbnailUrl} alt={name} className="w-full h-full object-cover" />
-        )}
+      <div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden flex items-center justify-center">
+        <Icon className="w-12 h-12 text-white opacity-80" />
       </div>
 
       {/* Content */}
-      <div className="min-h-[180px] max-h-[210px] flex-1 flex flex-col justify-between py-3">
+      <div className="min-h-[180px] max-h-[200px] flex-1 flex flex-col justify-between py-3">
         <div className="px-3 flex flex-col gap-2">
-          <p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">{name}</p>
+          {/* Project Name */}
+          <p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">
+            {project.project_name}
+          </p>
 
           {/* Mentor */}
           <div className="flex items-center gap-2">
             <div className="w-6 h-6 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
-              {avatarUrl ? (
-                <img src={avatarUrl} alt={mentor} className="w-full h-full object-cover" />
+              {project.admin.profile_picture ? (
+                <img
+                  src={project.admin.profile_picture}
+                  alt={project.admin.full_name}
+                  className="w-full h-full object-cover"
+                />
               ) : (
                 <div className="w-full h-full bg-gray-300" />
               )}
             </div>
-            <span className="text-xs text-gray-500 truncate">{mentor}</span>
+            <span className="text-xs text-gray-500 truncate">{project.admin.email}</span>
           </div>
 
           {/* Progress bar */}
@@ -55,7 +58,7 @@ const ProjectCard = ({
             <div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
               <div
                 className="h-full bg-red-600 rounded-full transition-all duration-300"
-                style={{ width: `${progress}%` }}
+                style={{ width: tasksTotal > 0 ? `${(tasksDone / tasksTotal) * 100}%` : '0%' }}
               />
             </div>
             <span className="text-[10px] text-gray-400 text-right">
@@ -63,10 +66,14 @@ const ProjectCard = ({
             </span>
           </div>
         </div>
+
         {/* Button */}
         <div className="flex items-end justify-end px-3 pb-1">
           <button
-            onClick={() => navigate(`/intern/projects/${toSlug(name)}`)}
+            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
@@ -74,7 +81,7 @@ const ProjectCard = ({
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ProjectCard
\ No newline at end of file
+export default ProjectCard;
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/SidebarIntern.tsx b/src/Pages/internify/intern/components/SidebarIntern.tsx
index 4517631..98844c7 100644
--- a/src/Pages/internify/intern/components/SidebarIntern.tsx
+++ b/src/Pages/internify/intern/components/SidebarIntern.tsx
@@ -1,16 +1,18 @@
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight, X } from 'lucide-react';
+import { Award, Settings, HelpCircle, X } from 'lucide-react';
+import { GrHomeRounded } from "react-icons/gr";
+import { MdOutlineAssignment, MdLogout } from "react-icons/md";
 
 const navItems = [
-  { label: "Home", icon: Home, path: "/intern" },
-  { label: "List Projects", icon: FolderKanban, path: "/intern/projects" },
+  { label: "Home", icon: GrHomeRounded, path: "/intern" },
+  { label: "List Projects", icon: MdOutlineAssignment, path: "/intern/projects" },
   { label: "Certificates", icon: Award, path: "/intern/certificates" },
 ];
 
 const prefItems = [
   { label: "Settings", icon: Settings, path: "/intern/settings" },
   { label: "FAQ", icon: HelpCircle, path: "/intern/faq" },
-  { label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
+  { label: "Logout", icon: MdLogout, path: "/login-internify", danger: true, isLogout: true },
 ];
 
 interface SidebarProps {
@@ -24,11 +26,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
 
   const handleNav = (path: string) => {
     navigate(path);
-    closeSidebar(); // Otomatis tutup sidebar setelah klik menu di HP
+    closeSidebar();
+  };
+
+  const handleLogout = () => {
+    document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";
+
+    closeSidebar();
+    navigate("/login-internify", { replace: true });
   };
 
   return (
-    <aside 
+    <aside
       className={`
         bg-white border-r border-gray-300 flex flex-col py-5 px-3 gap-1 overflow-y-auto flex-shrink-0 transition-transform duration-300 ease-in-out
         lg:sticky lg:top-[50px] lg:h-[calc(100vh-73px)] lg:w-[250px] lg:translate-x-0 lg:z-8
@@ -37,7 +46,7 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
       `}
     >
       {/* Brand & Tombol Close untuk Mobile */}
-      <div className="flex items-center justify-between px-2 pb-4">
+      <div className="flex items-center justify-between px-2 pb-10">
         <div className="flex items-center gap-2.5">
           <div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0"></div>
           <div>
@@ -47,33 +56,30 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
         </div>
 
         {/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
-        <button 
-          onClick={closeSidebar} 
+        <button
+          onClick={closeSidebar}
           className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
         >
           <X className="w-5 h-5" />
         </button>
       </div>
 
-      <div className="h-px bg-gray-300 my-1" />
-
       {/* Main nav */}
       <nav className="flex flex-col gap-0.5">
         {navItems.map(({ label, icon: Icon, path }) => {
-          const isActive = location.pathname === path; 
+          const isActive = location.pathname === path;
           return (
             <button
               key={path}
               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-red-50 text-red-600 font-semibold border-l-4 border-red-600"
-                  : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                  ? "bg-base-foreground text-base font-semibold border-l-4 border-base"
+                  : "text-font hover:bg-base-foreground hover:text-base"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
               <span>{label}</span>
-              {isActive && <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />}
             </button>
           );
         })}
@@ -86,18 +92,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
         PREFERENCES
       </p>
       <nav className="flex flex-col gap-0.5">
-        {prefItems.map(({ label, icon: Icon, path, danger }) => {
+        {prefItems.map(({ label, icon: Icon, path, danger, isLogout }) => {
           const isActive = location.pathname === path;
           return (
             <button
               key={path}
-              onClick={() => handleNav(path)}
+              onClick={() => isLogout ? handleLogout() : 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-red-50 text-red-600 font-semibold"
                   : danger
-                    ? "text-gray-400 hover:bg-red-50 hover:text-red-600"
-                    : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                    ? "text-font hover:bg-base-foreground hover:text-base"
+                    : "text-font hover:bg-base-foreground hover:text-base"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
diff --git a/src/Pages/internify/intern/components/TaskTimeline.tsx b/src/Pages/internify/intern/components/TaskTimeline.tsx
index 5947724..446b50e 100644
--- a/src/Pages/internify/intern/components/TaskTimeline.tsx
+++ b/src/Pages/internify/intern/components/TaskTimeline.tsx
@@ -1,36 +1,50 @@
-import { DEADLINES } from "../../../../lib/mockDeadline";
-import type { Deadline } from "../../../../lib/mockDeadline"; 
+import { useInternTasks } from "../../../../hooks/useProjects";
+import type { InternTask } from "../../../../types/project.types";
 
 const TaskTimeline = () => {
+  const { tasks, loading, error } = useInternTasks();
   const today = new Date();
 
-  const isOverdue = (date: Date) => {
-    return date < today;
-  };
+  const isOverdue = (dateStr: string) => new Date(dateStr) < today;
+
+  if (loading) return (
+    <div className="flex flex-col gap-5">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-10 bg-gray-100 rounded animate-pulse" />
+      ))}
+    </div>
+  );
+
+  if (error) return <p className="text-red-500 text-sm">{error}</p>;
 
   return (
     <div>
-      <h2 className="text-base font-semibold text-gray-800 mb-5">Task Timeline</h2>
+      <h2 className="font-semibold text-font-shade mb-5">Task Timeline</h2>
       <div className="relative">
-        <div className="absolute left-1 top-2 bottom-2 w-px bg-gray-200" />
+        <div className="absolute left-1 top-2 bottom-2 w-px bg-gray-300" />
         <ul className="flex flex-col gap-5">
-          {DEADLINES.map((item: Deadline, index: number) => {
-            const overdue = isOverdue(item.date);
+          {tasks.map((item: InternTask) => {
+            const overdue = isOverdue(item.deadline_at);
+            const deadlineDate = new Date(item.deadline_at);
             return (
-              <li key={index} className="flex gap-4 pl-0">
+              <li key={item.id} className="flex gap-4 pl-0">
                 <div className="relative flex-shrink-0 mt-1">
                   <span
                     className={`block w-2 h-2 rounded-full z-10 relative ${
-                      overdue ? "bg-red-700" : "bg-gray-400"
+                      overdue ? "bg-primary" : "bg-gray-500"
                     }`}
                   />
                 </div>
                 <div className="flex flex-col gap-0.5 min-w-0">
                   <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">
-                    {item.date.toLocaleDateString("id-ID")}
+                    {deadlineDate.toLocaleDateString("id-ID")} AT{" "}
+                    {deadlineDate.toLocaleTimeString("id-ID", {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
                   </p>
-                  <p className="text-sm font-semibold text-gray-800">{item.label}</p>
-                  <p className="text-xs text-gray-500">{item.time}</p>
+                  <p className="text-sm font-semibold text-gray-800">{item.title}</p>
+                  <p className="text-xs text-gray-500">{item.description}</p>
                 </div>
               </li>
             );
diff --git a/src/Pages/internify/mentor/HomePage.tsx b/src/Pages/internify/mentor/HomeMentorPage.tsx
similarity index 100%
rename from src/Pages/internify/mentor/HomePage.tsx
rename to src/Pages/internify/mentor/HomeMentorPage.tsx
diff --git a/src/Pages/internify/mentor/components/SidebarMentor.tsx b/src/Pages/internify/mentor/components/SidebarMentor.tsx
index 60f231d..e7034aa 100644
--- a/src/Pages/internify/mentor/components/SidebarMentor.tsx
+++ b/src/Pages/internify/mentor/components/SidebarMentor.tsx
@@ -12,7 +12,7 @@ const navItems = [
 const prefItems = [
   { label: "Settings", icon: Settings, path: "/mentor/settings" },
   { label: "FAQ", icon: HelpCircle, path: "/mentor/faq" },
-  { label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
+  { label: "Logout", icon: LogOut, path: "/login-internify", danger: true, isLogout: true },
 ];
 
 interface SidebarProps {
@@ -29,6 +29,13 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
     closeSidebar();
   };
 
+  const handleLogout = () => {
+    document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";
+
+    closeSidebar();
+    navigate("/login-internify", { replace: true });
+  };
+
   return (
     <aside
       className={`
@@ -39,7 +46,7 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
       `}
     >
       {/* Brand & Tombol Close untuk Mobile */}
-      <div className="flex items-center justify-between px-2 pb-4">
+      <div className="flex items-center justify-between px-2 pb-10">
         <div className="flex items-center gap-2.5">
           <div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0"></div>
           <div>
@@ -56,8 +63,6 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
         </button>
       </div>
 
-      <div className="h-px bg-gray-300 my-1" />
-
       {/* Main nav */}
       <nav className="flex flex-col gap-0.5">
         {navItems.map(({ label, icon: Icon, path }) => {
@@ -67,14 +72,13 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
               key={path}
               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-red-50 text-red-600 font-semibold border-l-4 border-red-600"
-                  : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                ${isActive
+                  ? "bg-base-foreground text-base font-semibold border-l-4 border-base"
+                  : "text-font hover:bg-base-foreground hover:text-base"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
               <span>{label}</span>
-              {isActive && <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />}
             </button>
           );
         })}
@@ -87,18 +91,18 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
         PREFERENCES
       </p>
       <nav className="flex flex-col gap-0.5">
-        {prefItems.map(({ label, icon: Icon, path, danger }) => {
+        {prefItems.map(({ label, icon: Icon, path, danger, isLogout }) => {
           const isActive = location.pathname === path;
           return (
             <button
               key={path}
-              onClick={() => handleNav(path)}
+              onClick={() => isLogout ? handleLogout() : 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-red-50 text-red-600 font-semibold"
                   : danger
-                    ? "text-gray-400 hover:bg-red-50 hover:text-red-600"
-                    : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                    ? "text-font hover:bg-base-foreground hover:text-base"
+                    : "text-font hover:bg-base-foreground hover:text-base"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
diff --git a/src/Pages/utils/ProtectedRoute.tsx b/src/Pages/utils/ProtectedRoute.tsx
index 1f4094f..59c0119 100644
--- a/src/Pages/utils/ProtectedRoute.tsx
+++ b/src/Pages/utils/ProtectedRoute.tsx
@@ -1,13 +1,12 @@
 import { Outlet, Navigate } from "react-router-dom";
 
 interface PrivateRouteProps {
-  allowedRoles?: ("admin" | "intern" | "mentor")[];
+  allowedRoles?: ("intern" | "admin")[];
 }
 
-// Helper function untuk decode payload JWT tanpa library external
 const decodeJWT = (token: string) => {
   try {
-    const base64Url = token.split(".")[1]; // Ambil bagian payload (segmen kedua)
+    const base64Url = token.split(".")[1];
     const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
     const jsonPayload = decodeURIComponent(
       window
@@ -23,31 +22,25 @@ const decodeJWT = (token: string) => {
 };
 
 const ProtectedRoutes = ({ allowedRoles }: PrivateRouteProps) => {
-  // 1. Ambil token dari cookie
   const token = document.cookie
     .split("; ")
     .find((row) => row.startsWith("token="))
     ?.split("=")[1];
 
-  // Jika tidak punya token, tendang ke login admin awal
   if (!token) {
-    return <Navigate to="/login-admin" replace />;
+    return <Navigate to="/login-internify" replace />;
   }
 
-  // 2. Decode token untuk mendapatkan role asli dari Backend
   const decoded = decodeJWT(token);
-  const userRole = decoded?.role as "admin" | "intern" | "mentor" | undefined;
+  const userRole = decoded?.role as"intern" | "admin" | undefined;
 
-  // Jika token corrupt atau tidak bisa di-decode, hanguskan dan tendang ke login
   if (!userRole) {
-    return <Navigate to="/login-admin" replace />;
+    return <Navigate to="/login-internify" replace />;
   }
 
-  // 3. Periksa hak akses role terhadap halaman yang dituju
   if (allowedRoles && !allowedRoles.includes(userRole)) {
     // Jika role tidak diizinkan, kembalikan ke base dashboard masing-masing role
-    if (userRole === "admin") return <Navigate to="/dashboard" replace />;
-    if (userRole === "mentor") return <Navigate to="/mentor" replace />;
+    if (userRole === "admin") return <Navigate to="/mentor" replace />;
     if (userRole === "intern") return <Navigate to="/intern" replace />;
   }
 
diff --git a/src/hooks/useProjectDetail.ts b/src/hooks/useProjectDetail.ts
new file mode 100644
index 0000000..836a819
--- /dev/null
+++ b/src/hooks/useProjectDetail.ts
@@ -0,0 +1,59 @@
+// 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 };
+};
\ No newline at end of file
diff --git a/src/hooks/useProjects.ts b/src/hooks/useProjects.ts
new file mode 100644
index 0000000..f3cec5e
--- /dev/null
+++ b/src/hooks/useProjects.ts
@@ -0,0 +1,40 @@
+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";
+
+export const useProjects = () => {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    getMyProjects()
+      .then(setProjects)
+      .catch(() => setError("Gagal memuat project."))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { projects, loading, error };
+};
+
+export const useInternTasks = () => {
+  const [tasks, setTasks] = useState<InternTask[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    getMyTasks()
+      .then(setTasks)
+      .catch(() => setError("Gagal memuat tasks."))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { tasks, loading, error };
+};
+
diff --git a/src/index.css b/src/index.css
index 01502d2..ae5add1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,16 +16,23 @@
   /* Dasar Warna Gelap */
   --color-background: #fdfdfd;
   --color-foreground: #1e282c;
+  --color-font: #6a7282;
+  --color-font-shade: #393b40;
 
   --color-card: #f3f3f3;
+  --color-card-outline: #a9afbb;
   --color-card-hover: #d5d5d5;
 
-  --color-box-primary: #ebebeb;
+  --color-box-primary: #FFFFFF;
   --color-box-secondary: #f3f4f6 ;
-  --color-box-border: #d8d9db;
+  --color-box-border: #a9afbb;
 
   --color-primary: #ad2b19;
   --color-primary-foreground: #ffffff;
+  --color-primary-hover: #84281c;
+
+  --color-base: #e82222;
+  --color-base-foreground: #fef2f2;
 
   --color-border: #a8a9aa;
 
diff --git a/src/Pages/utils/api.ts b/src/lib/api.ts
similarity index 87%
rename from src/Pages/utils/api.ts
rename to src/lib/api.ts
index 0d7b8be..808fe35 100644
--- a/src/Pages/utils/api.ts
+++ b/src/lib/api.ts
@@ -4,7 +4,6 @@ const api = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
 });
 
-// Otomatis tempel Token Bearer di setiap request ke BE
 api.interceptors.request.use((config) => {
   const token = document.cookie
     .split("; ")
diff --git a/src/services/ProjectService.ts b/src/services/ProjectService.ts
new file mode 100644
index 0000000..6f025c9
--- /dev/null
+++ b/src/services/ProjectService.ts
@@ -0,0 +1,29 @@
+import api from "../lib/api";
+import type { Project, InternTask, Intern, ProjectTask } from "../types/project.types";
+
+export const getMyProjects = async (): Promise<Project[]> => {
+  const res = await api.get("/project-api/my-projects");
+  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 }
+  });
+  return res.data.data;
+};
+
+export const getProjectTasks = async (projectId: string): Promise<ProjectTask[]> => {
+  const res = await api.get(`/task-api/projects/${projectId}/tasks`);
+  return res.data.data;
+};
\ No newline at end of file
diff --git a/src/types/project.types.ts b/src/types/project.types.ts
new file mode 100644
index 0000000..e363e02
--- /dev/null
+++ b/src/types/project.types.ts
@@ -0,0 +1,70 @@
+// Admin/Mentor Projects
+export interface ProjectAdmin {
+  id: number;
+  full_name: string;
+  email: string;
+  profile_picture: string;
+  professional_bio: string;
+}
+
+// Project General
+export interface Project {
+  id: number;
+  project_icon: string;
+  project_name: string;
+  description: string;
+  start_date: string;
+  end_date: string;
+  status: "active" | "inactive" | "completed";
+  admin: ProjectAdmin;
+  total_members: number;
+  total_tasks: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// 
+export interface TaskSubmissionDetails {
+  id: number;
+  file_path: string | null;
+  url_link: string | null;
+  submitted_at: string;
+  updated_at: string;
+}
+
+// Task General: ALL TASK COMBINED
+export interface InternTask {
+  id: number;
+  id_project: number;
+  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;
+}
+
+// Intern
+export interface Intern {
+  id: number;
+  name: string;
+  email: string;
+  projectName: string;
+  role: string;
+  isAssignedByMentor: boolean;
+  avatar: string | null;
+}
+
+//Project Task
+export interface ProjectTask {
+  id: number;
+  id_project: number;
+  title: string;
+  description: string;
+  deadline_at: string;
+  submission_type: "file_upload" | "url_link";
+  created_at: string;
+  updated_at: string;
+}
\ No newline at end of file
diff --git a/src/types/task.types.ts b/src/types/task.types.ts
new file mode 100644
index 0000000..e69de29