feat: update routing parameters, add header component, and refactor project details; enhance breadcrumb labels and task timeline

src/Pages/internify/Breadcumbs.tsx

@@ -6,19 +6,17 @@ const breadcrumbRoutes = [
   // --- AREA INTERN ---
   { path: '/intern', breadcrumb: 'Home' },
   { path: '/intern/projects', breadcrumb: 'Projects' },
-  { path: '/intern/projects/:id', breadcrumb: 'Detail Project' }, // Otomatis handle ID dinamis
+  { path: '/intern/projects/:id', breadcrumb: 'Forum' },
   { path: '/intern/certificates', breadcrumb: 'Certificates' },
-  { path: '/intern/tasks', breadcrumb: 'Tasks' },
-  { path: '/intern/tasks/:id', breadcrumb: 'Detail Task' },
-  { path: '/intern/tasks/:id/submit', breadcrumb: 'Submit Task' },
+  { path: '/intern/projects/:id/submit', breadcrumb: 'Submit Task' },
   { path: '/intern/faq', breadcrumb: 'FAQ' },
   { path: '/intern/notifications', breadcrumb: 'Notifications' },
   { path: '/intern/settings', breadcrumb: 'Settings' },
 
   // --- AREA MENTOR / ADMIN ---
   { path: '/mentor', breadcrumb: 'Home' },
-  { path: '/mentor/projects', breadcrumb: 'Managed Projects' },
-  { path: '/mentor/projects/:id', breadcrumb: 'Project Overview' },
+  { path: '/mentor/projects', breadcrumb: 'List Projects' },
+  { path: '/mentor/projects/:id', breadcrumb: 'Forum' },
   { path: '/mentor/certificates', breadcrumb: 'Approve Certificates' },
   { path: '/mentor/intern', breadcrumb: 'List Intern' },
   { path: '/mentor/faq', breadcrumb: 'FAQ' },

src/Pages/internify/intern/ParticipantTab.tsx

@@ -31,7 +31,7 @@ export default function ParticipantsTab({ project }: { project: Project }) {
           >
             <div className="flex items-center gap-3">
               <span className=" text-sm text-[#333]">
-                {intern.email}
+                {intern.name}
               </span>
             </div>
             <span className=" text-[13px] text-[#555] font-semibold">

src/Pages/internify/intern/ProjectDetailPage.tsx

@@ -1,25 +1,15 @@
 import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { mockProjects } from '../../../lib/mockData';
 import ForumTab from './ForumTab';
 import ParticipantsTab from './ParticipantTab';
-import { ChevronLeft } from 'lucide-react';
 
 // ─── ProjectDetailPage ─────────────────────────────────────────────────────────
 export default function ProjectDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
+  const { slug } = useParams<{ slug: string }>();
   const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
 
-  const handleBack = () => {
-    if (window.history.length > 1) {
-      navigate(-1);
-    } else {
-      navigate('/intern/projects');
-    }
-  };
-
-  const project = mockProjects.find((p) => p.id === Number(id));
+  const project = mockProjects.find((p) => p.name === slug);
 
   if (!project) {
     return (

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

@@ -1,58 +1,44 @@
-import type { TaskTimelineProps } from "../../../../lib/mockDeadline"
-import { defaultTasks } from "../../../../lib/mockDeadline"
+import { DEADLINES } from "../../../../lib/mockDeadline";
+import type { Deadline } from "../../../../lib/mockDeadline"; 
 
-const TaskTimeline = ({ tasks = defaultTasks }: TaskTimelineProps) => {
-const today = new Date()
+const TaskTimeline = () => {
+  const today = new Date();
+
+  const isOverdue = (date: Date) => {
+    return date < today;
+  };
 
-  const isOverdue = (tanggal: string) => {
-    const deadline = new Date(tanggal)
-    return deadline < today
-  }
-  
-  const upcomingIndex = tasks.findIndex(
-    task => new Date(task.tanggal) >= today
-  )
   return (
     <div>
       <h2 className="text-base font-semibold text-gray-800 mb-5">Task Timeline</h2>
-
       <div className="relative">
-        {/* Vertical line */}
-        <div className="absolute left-1.5 top-2 bottom-2 w-px bg-gray-200" />
-
+        <div className="absolute left-1 top-2 bottom-2 w-px bg-gray-200" />
         <ul className="flex flex-col gap-5">
-          {tasks.map((task, index) => {
-            const overdue = isOverdue(task.tanggal)
-            const isRedDot = overdue || index === upcomingIndex
-
+          {DEADLINES.map((item: Deadline, index: number) => {
+            const overdue = isOverdue(item.date);
             return (
               <li key={index} className="flex gap-4 pl-0">
-                {/* Dot */}
                 <div className="relative flex-shrink-0 mt-1">
                   <span
-                    className={`block w-3 h-3 rounded-full border-2 z-10 relative
-                      ${isRedDot
-                        ? 'bg-red-800 '
-                        : 'bg-gray-400'
-                      }`}
+                    className={`block w-2 h-2 rounded-full z-10 relative ${
+                      overdue ? "bg-red-700" : "bg-gray-400"
+                    }`}
                   />
                 </div>
-
-                {/* Content */}
                 <div className="flex flex-col gap-0.5 min-w-0">
                   <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">
-                    {task.tanggal}
+                    {item.date.toLocaleDateString("id-ID")}
                   </p>
-                  <p className="text-sm font-semibold text-gray-800">{task.title}</p>
-                  <p className="text-xs text-gray-500">{task.description}</p>
+                  <p className="text-sm font-semibold text-gray-800">{item.label}</p>
+                  <p className="text-xs text-gray-500">{item.time}</p>
                 </div>
               </li>
-            )
+            );
           })}
         </ul>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default TaskTimeline
+export default TaskTimeline;

src/Pages/internify/layout.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 import { useState } from "react";
-import Header from './mentor/components/Header';
+import Header from '../../Layout/Header-internify';
 import SidebarIntern from './intern/components/SidebarIntern';
 import SidebarMentor from './mentor/components/SidebarMentor';
 import FooterIntern from '../../Layout/Footer-Internify';

src/Pages/internify/mentor/ProjectsPage.tsx

@@ -8,7 +8,7 @@ import TaskTab from './TaskTab';
 
 // ─── ProjectDetailPage ─────────────────────────────────────────────────────────
 export default function ProjectDetailPage() {
-  const { id } = useParams<{ id: string }>();
+  const { slug } = useParams<{ slug: string }>();
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<'forum' | 'participants' | 'Task'>('forum');
 
@@ -20,7 +20,7 @@ export default function ProjectDetailPage() {
     }
   };
 
-  const project = mockProjects.find((p) => p.id === Number(id));
+  const project = mockProjects.find((p) => p.name === slug);
 
   if (!project) {
     return (

src/Pages/internify/mentor/components/Header.tsx

@@ -1,33 +0,0 @@
-import { Bell, Menu } from "lucide-react"
-import humiclogo from "../../../../assets/logo.png";
-import { useNavigate } from "react-router-dom";
-
-export default function Header({ toggleSidebar }: { toggleSidebar: () => void }) {
-  const nav = useNavigate();
-  return (
-    <header className='sticky top-0 flex w-full justify-between items-center py-4 px-12 bg-white border-b border-gray-300 z-10'>
-      <div className='flex items-center gap-3'>
-        {/* Tombol Burger Menu: Hanya muncul di layar < md */}
-        <button 
-          onClick={toggleSidebar} 
-          className="p-1 text-gray-600 hover:bg-gray-100 rounded-md md:hidden"
-        >
-          <Menu className="w-6 h-6" />
-        </button>
-
-        <button onClick={()=>nav('/intern')}>
-          <img src={humiclogo} alt="Humic Logo" className="w-[130px] cursor-pointer" />
-        </button>
-      </div>
-
-      <div className="flex flex-row gap-6 items-center">
-        <button onClick={()=>nav("notifications")}>
-          <Bell className="w-6 h-6 hover:text-red-800"/>
-        </button>
-        <div className="bg-blue-500 rounded-xl w-9 h-9">
-
-        </div>
-      </div>
-    </header>
-  )
-}