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

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;