feat: add react-hot-toast for notifications, enhance project detail page, and update task handling

- Added `react-hot-toast` dependency for improved notification handling.
- Introduced `MentorProjectsDetailPage` for detailed project and task views.
- Updated routing to include task-specific paths.
- Enhanced breadcrumb navigation to reflect new project structure.
- Refactored task handling in `MentorTaskCard` and `ProjectTimeline` components.
- Updated mock data to include detailed task submissions and deadlines.
- Improved UI elements for better user experience in project management.

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

@@ -1,34 +1,46 @@
-import type { Task } from "../../../../lib/mockData";
+import type { Task } from "../../../../lib/mockProjects";
+import { useNavigate } from "react-router-dom";
 
 const formatDate = (date: Date) =>
   new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
 
-export default function MentorTaskCard({ task }: { task: Task }) {
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+
+interface MentorTaskCardProps {
+  task: Task;
+  projectName: string;
+}
+
+export default function MentorTaskCard({ task, projectName }: MentorTaskCardProps) {
+  const navigate = useNavigate();
+
+  const handleCardClick = () => {
+    // Pastikan jika projectName belum ter-render, proses navigasi tidak bikin crash
+    if (!projectName || !task?.title) return;
+
+    const projectSlug = toSlug(projectName);
+    const taskSlug = toSlug(task.title);
+    
+    // Rute mutlak menuju target kamu: /mentor/projects/:slug/:taskSlug
+    navigate(`/mentor/projects/${projectSlug}/${taskSlug}`);
+  };
+
   return (
-    <div className="border border-[#eee] rounded-[10px] px-5 py-4 mb-3 bg-white shadow-[0_1px_4px_rgba(0,0,0,0.05)] flex items-start justify-between gap-3">
+    <div
+      className="border border-[#eee] rounded-[10px] px-5 py-4 mb-3 bg-white shadow-lg flex items-start justify-between gap-3 cursor-pointer hover:border-gray-300 transition-colors"
+      onClick={handleCardClick}
+    >
       <div className="flex-1 min-w-0">
-        <div className=" text-[11px] text-[#888] mb-1">
-          Deadline : {formatDate(task.deadline.date)} at {task.deadline.time}
+        <div className="text-[11px] text-[#888] mb-1">
+          Deadline : {task.deadline ? `${formatDate(task.deadline.date)} at ${task.deadline.time}` : '-'}
         </div>
-        <div className=" font-bold text-[15px] text-[#1a1a1a] mb-1">
+        <div className="font-bold text-[15px] text-[#1a1a1a] mb-1">
           {task.title}
         </div>
-        <div className=" text-[13px] text-[#666]">
+        <div className="text-[13px] text-[#666]">
           {task.description}
         </div>
       </div>
-
-      <div className="shrink-0">
-        <span 
-          className={`inline-block font-bold text-xs px-2.5 py-[3px] rounded-md tracking-[0.5px] border ${
-            task.isSubmitted 
-              ? "bg-[#27AE60] text-white border-[#27AE60]" 
-              : "bg-white text-[#1a1a1a] border-gray-400"
-          }`}
-        >
-          {task.submittedCount}/{task.totalInterns}
-        </span>
-      </div>
     </div>
   );
 }