From f9bb21a961d3f640c18bb6cf0448dedaa21c0b07 Mon Sep 17 00:00:00 2001
From: "Kemas M. Aryadary Rasyad"
 <112590882+aryadary0706@users.noreply.github.com>
Date: Tue, 16 Jun 2026 14:50:31 +0700
Subject: [PATCH] progress: breadcrumbs fixation, submission task fixation and
 add new UI after submitted, Certificates change layout and new page
 (Certificate List)

---
 src/App.tsx                                   |   4 +-
 src/Pages/internify/Breadcumbs.tsx            |  31 ++-
 src/Pages/internify/intern/ForumTab.tsx       |   2 +-
 .../internify/intern/ProjectDetailPage.tsx    |   7 +-
 .../internify/intern/SertificateList.tsx      |  50 +++++
 .../internify/intern/SertificatePage.tsx      |  40 ++--
 src/Pages/internify/intern/TaskSubmission.tsx |  69 +++----
 .../intern/components/CertificateAvailabe.tsx |  59 +-----
 .../intern/components/CertificateHistory.tsx  |  47 +++++
 .../components/CertificateNotAvailable.tsx    |  26 +--
 .../intern/components/HomeProjectList.tsx     |  10 +-
 .../intern/components/ProjectTaskCard.tsx     |  14 +-
 .../intern/components/ProjectsCard.tsx        |   5 +-
 .../intern/components/SidebarIntern.tsx       |   9 +-
 .../intern/components/TaskForm-file.tsx       | 190 ++++++++++++++----
 .../intern/components/TaskForm-link.tsx       |  73 ++++++-
 .../internify/mentor/BaseProjectsPage.tsx     |   2 +-
 src/Pages/internify/mentor/ProjectsPage.tsx   |  29 +--
 .../mentor/components/MentorProjectCard.tsx   |   6 +-
 .../mentor/components/SidebarMentor.tsx       |   9 +-
 src/Pages/internify/page.tsx                  |   2 -
 src/lib/mockProjects.ts                       |  25 ++-
 src/lib/mockSertificates.ts                   |  74 +++++++
 23 files changed, 549 insertions(+), 234 deletions(-)
 create mode 100644 src/Pages/internify/intern/SertificateList.tsx
 create mode 100644 src/Pages/internify/intern/components/CertificateHistory.tsx
 create mode 100644 src/lib/mockSertificates.ts

diff --git a/src/App.tsx b/src/App.tsx
index bdbdd16..df11426 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,6 +43,7 @@ import FAQPage from "./Pages/internify/FAQpage";
 import NotificationList from "./Pages/internify/NotificationList";
 import SettingsContent from "./Pages/internify/SettingsPage";
 import TaskSubmission from "./Pages/internify/intern/TaskSubmission";
+import SertificateList from "./Pages/internify/intern/SertificateList";
 
 function App() {
   return (
@@ -87,8 +88,9 @@ function App() {
           <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/submit" element={<TaskSubmission />} />
+          <Route path="projects/:slug/:TaskSlug" element={<TaskSubmission />} />
           <Route path="faq" element={<FAQPage />} />
           <Route path="notifications" element={<NotificationList />} />
           <Route path="settings" element={<SettingsContent />} />
diff --git a/src/Pages/internify/Breadcumbs.tsx b/src/Pages/internify/Breadcumbs.tsx
index cfcb985..e0320e2 100644
--- a/src/Pages/internify/Breadcumbs.tsx
+++ b/src/Pages/internify/Breadcumbs.tsx
@@ -1,14 +1,31 @@
 import { Link, useLocation } from "react-router-dom";
 import useBreadcrumbs from "use-react-router-breadcrumbs";
 import { ChevronRight } from "lucide-react";
+import { mockProjects } from "../../lib/mockData";
+
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+
+// Dynamic breadcrumb: ubah slug jadi nama project asli
+const ProjectNameBreadcrumb = ({ match }: { match: { params: { slug?: string } } }) => {
+  const slug = match.params.slug;
+  const project = mockProjects.find((p) => toSlug(p.name) === slug);
+  return <>{project ? project.name : slug}</>;
+};
+
+const TaskNameBreadcrumb = ({ match }: { match: { params: { slug?: string; taskSlug?: string } } }) => {
+  const { slug, taskSlug } = match.params;
+  const project = mockProjects.find((p) => toSlug(p.name) === slug);
+  const task = project?.tasks.find((t) => toSlug(t.title) === taskSlug);
+  return <>{task ? task.title : taskSlug}</>;
+};
 
 const breadcrumbRoutes = [
   // --- AREA INTERN ---
   { path: '/intern', breadcrumb: 'Home' },
   { path: '/intern/projects', breadcrumb: 'Projects' },
-  { path: '/intern/projects/:id', breadcrumb: 'Forum' },
+  { path: '/intern/projects/:slug', breadcrumb: ProjectNameBreadcrumb },
   { path: '/intern/certificates', breadcrumb: 'Certificates' },
-  { path: '/intern/projects/:id/submit', breadcrumb: 'Submit Task' },
+  { path: '/intern/projects/:slug/:taskSlug', breadcrumb: TaskNameBreadcrumb  },
   { path: '/intern/faq', breadcrumb: 'FAQ' },
   { path: '/intern/notifications', breadcrumb: 'Notifications' },
   { path: '/intern/settings', breadcrumb: 'Settings' },
@@ -16,7 +33,7 @@ const breadcrumbRoutes = [
   // --- AREA MENTOR / ADMIN ---
   { path: '/mentor', breadcrumb: 'Home' },
   { path: '/mentor/projects', breadcrumb: 'List Projects' },
-  { path: '/mentor/projects/:id', breadcrumb: 'Forum' },
+  { path: '/mentor/projects/:slug', breadcrumb: ProjectNameBreadcrumb },
   { path: '/mentor/certificates', breadcrumb: 'Approve Certificates' },
   { path: '/mentor/intern', breadcrumb: 'List Intern' },
   { path: '/mentor/faq', breadcrumb: 'FAQ' },
@@ -28,7 +45,13 @@ export default function Breadcrumbs(){
   const breadcrumbs = useBreadcrumbs(breadcrumbRoutes);
   const location = useLocation();
 
-  const fixbreadcumbs = breadcrumbs.filter(({match}) => match.pathname !== '/');
+  const rootPaths = ['/intern', '/mentor'];
+  const isOnRootPath = rootPaths.includes(location.pathname);
+  const fixbreadcumbs = breadcrumbs.filter(({ match }) => {
+    if (match.pathname === '/') return false;
+    if (rootPaths.includes(match.pathname) && !isOnRootPath) return false;
+    return true;
+  });
   return (
     <nav className="text-[12px] mb-3">
       {fixbreadcumbs.map(({ match, breadcrumb }) => {
diff --git a/src/Pages/internify/intern/ForumTab.tsx b/src/Pages/internify/intern/ForumTab.tsx
index 67cd5cb..83ad3aa 100644
--- a/src/Pages/internify/intern/ForumTab.tsx
+++ b/src/Pages/internify/intern/ForumTab.tsx
@@ -17,7 +17,7 @@ export default function ForumTab({ project }: { project: Project }) {
 
         <div className="w-4/5">
           {project.tasks.map((task, idx) => (
-            <TaskCard key={idx} task={task} />
+            <TaskCard key={idx} task={task} projectName={project.name} />
           ))}
         </div>
       </div>
diff --git a/src/Pages/internify/intern/ProjectDetailPage.tsx b/src/Pages/internify/intern/ProjectDetailPage.tsx
index ad43772..a2c6187 100644
--- a/src/Pages/internify/intern/ProjectDetailPage.tsx
+++ b/src/Pages/internify/intern/ProjectDetailPage.tsx
@@ -1,15 +1,16 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { mockProjects } from '../../../lib/mockData';
+import { mockProjects } from '../../../lib/mockProjects';
 import ForumTab from './ForumTab';
 import ParticipantsTab from './ParticipantTab';
 
-// ─── ProjectDetailPage ─────────────────────────────────────────────────────────
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+
 export default function ProjectDetailPage() {
   const { slug } = useParams<{ slug: string }>();
   const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
 
-  const project = mockProjects.find((p) => p.name === slug);
+  const project = mockProjects.find((p) => toSlug(p.name) === slug);
 
   if (!project) {
     return (
diff --git a/src/Pages/internify/intern/SertificateList.tsx b/src/Pages/internify/intern/SertificateList.tsx
new file mode 100644
index 0000000..74a7264
--- /dev/null
+++ b/src/Pages/internify/intern/SertificateList.tsx
@@ -0,0 +1,50 @@
+import { Award } from "lucide-react";
+import { history, type CertificateHistory } from "../../../lib/mockSertificates";
+import certificateImg from "../../../assets/certificate.png";
+
+export default function SertificateList() {
+    return (
+        <div>
+            {/* Header */}
+            <div className="mb-6 flex flex-col gap-1">
+                <h1 className="page-title">Certificate History</h1>
+                <p className="page-title-desc">All your earned internship certificates</p>
+            </div>
+
+            {/* Grid */}
+            {history.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-20 text-gray-400">
+                    <Award className="w-12 h-12 mb-3 opacity-40" />
+                    <p className="text-sm">No certificates yet.</p>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+                    {history.map((item: CertificateHistory) => (
+                        <div
+                            key={item.id}
+                            className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow cursor-pointer group"
+                        >
+                            {/* Thumbnail */}
+                            <div className="p-6 pb-0">
+                                <div className="rounded-lg overflow-hidden">
+                                    <img
+                                        src={certificateImg}
+                                        alt={item.title}
+                                        className="w-full h-[160px] object-cover"
+                                    />
+                                </div>
+                            </div>
+
+                            {/* Info */}
+                            <div className="px-4 py-3">
+                                <p className="text-xs text-gray-400 mb-0.5">{item.month}</p>
+                                <p className="text-sm font-semibold text-gray-800 leading-snug">{item.title}</p>
+                                <p className="text-xs text-gray-500 mt-1">Grade: <span className="font-bold text-red-600">{item.grade}</span></p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/SertificatePage.tsx b/src/Pages/internify/intern/SertificatePage.tsx
index 6aff916..004bb47 100644
--- a/src/Pages/internify/intern/SertificatePage.tsx
+++ b/src/Pages/internify/intern/SertificatePage.tsx
@@ -1,33 +1,37 @@
-import { certificateData } from "../../../lib/mockData";
+import { certificateData } from "../../../lib/mockSertificates";
 import CertificateAvailable from "./components/CertificateAvailabe";
 import CertificateNotAvailable from "./components/CertificateNotAvailable";
+import SertificateHistory from "./components/CertificateHistory";
 
 const SertificatePage = () => {
-  const data = certificateData; // ganti isReceived di object atas
+  const data = certificateData;
 
   return (
-    <div className="">
+    <div>
       {/* Header */}
-      <div className="mb-12 flex flex-col gap-1">
-
+      <div className="mb-4 flex flex-col gap-1">
         <h1 className="page-title">Certificates</h1>
         <p className="page-title-desc">View and download internship certificates</p>
       </div>
-
-      {/* Content */}
-      <div>
-        {data.isReceived ? (
-          <CertificateAvailable data={data} />
-        ) : (
-          <CertificateNotAvailable
-            progress={data.projectProgress}
-            remainingTasks={data.remainingTasks}
-          />
-        )}
+      <div className="flex flex-col lg:flex-row gap-6 items-stretch">
+        {/* Kiri: Content */}
+        <div className="w-full lg:w-5/8 flex flex-col">
+          {data.isReceived ? (
+            <CertificateAvailable data={data} />
+          ) : (
+            <CertificateNotAvailable
+              progress={data.projectProgress}
+              remainingTasks={data.remainingTasks}
+            />
+          )}
+        </div>
+        {/* Kanan: History */}
+        <div className="w-full lg:w-3/8 flex-shrink-0">
+          <SertificateHistory />
+        </div>
       </div>
     </div>
   );
 };
 
-
-export default SertificatePage
+export default SertificatePage;
diff --git a/src/Pages/internify/intern/TaskSubmission.tsx b/src/Pages/internify/intern/TaskSubmission.tsx
index 5268b26..737e25f 100644
--- a/src/Pages/internify/intern/TaskSubmission.tsx
+++ b/src/Pages/internify/intern/TaskSubmission.tsx
@@ -1,23 +1,27 @@
-import { useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { ChevronRight, Calendar, FileText, Info } from "lucide-react";
+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, '-');
 
 export default function TaskSubmission() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  
-  // State untuk menentukan jenis input ("file" atau "link")
-  const [submissionType, setSubmissionType] = useState<"file" | "link">("file");
+  const [searchParams] = useSearchParams();
+  const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
 
-  const handleFileSubmit = (file: File) => {
-    console.log(`Submitting File for Task ${id}:`, file.name);
-    alert(`File ${file.name} berhasil dikirim!`);
+  const submissionType = (searchParams.get("type") ?? "file") as "file" | "link";
+
+  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 Task ${id}:`, link);
+    console.log(`Submitting Link for Project ${slug}:`, link);
     alert(`Link berhasil dikirim!`);
   };
 
@@ -27,28 +31,17 @@ export default function TaskSubmission() {
       <div className="w-full bg-white rounded-2xl border border-gray-100 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
         <div className="flex justify-between items-start">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Laporan Tugas 2</h1>
-            <div className="flex items-center gap-1.5 text-xs text-gray-400 font-semibold mt-1.5">
-              <Calendar className="w-3.5 h-3.5 stroke-[2.5]" />
-              <span>Due Oct 25, 2024 at 23:59</span>
-            </div>
-          </div>
-          
-          {/* Switcher Demo Sederhana (Bisa kamu hapus jika tipe datang dari database/routing) */}
-          <div className="flex gap-1 bg-gray-100 p-1 rounded-lg text-xs font-bold">
-            <button 
-              onClick={() => setSubmissionType("file")}
-              className={`px-3 py-1 rounded-md transition-colors ${submissionType === "file" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500"}`}
-            >
-              Mode File
-            </button>
-            <button 
-              onClick={() => setSubmissionType("link")}
-              className={`px-3 py-1 rounded-md transition-colors ${submissionType === "link" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500"}`}
-            >
-              Mode Link
-            </button>
+            <h1 className="text-2xl font-bold text-gray-900 tracking-tight">
+              {task?.title ?? "Submit Task"}
+            </h1>
           </div>
+
+          <span className={`text-xs font-bold px-3 py-1.5 rounded-lg ${submissionType === "file"
+            ? "bg-blue-50 text-blue-700 border border-blue-100"
+            : "bg-purple-50 text-purple-700 border border-purple-100"
+            }`}>
+            {submissionType === "file" ? "📄 File Upload" : "🔗 Link Submission"}
+          </span>
         </div>
       </div>
 
@@ -56,9 +49,7 @@ export default function TaskSubmission() {
       <div className="w-full bg-white rounded-2xl border border-gray-100 p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)] space-y-3">
         <h2 className="text-base font-bold text-gray-800 tracking-tight">Task Description</h2>
         <p className="text-sm text-gray-500 font-medium leading-relaxed">
-          Pada tugas pertama ini, Anda diminta untuk melakukan analisis mendalam terhadap kebutuhan pengguna 
-          untuk sistem "Smart Campus Utility". Analisis ini akan menjadi fondasi bagi perancangan antarmuka pada 
-          fase berikutnya.
+          {task?.description ?? "Kerjakan dan kirimkan tugas sesuai dengan instruksi yang diberikan."}
         </p>
       </div>
 
@@ -69,11 +60,11 @@ export default function TaskSubmission() {
           <h2 className="text-base font-bold text-gray-800 tracking-tight">Submit Task</h2>
         </div>
 
-        {/* Render Komponen secara Kondisional */}
+        {/* Render form sesuai tipe dari query param */}
         {submissionType === "file" ? (
-          <TaskFormFile taskId={id} onSubmitSuccess={handleFileSubmit} />
+          <TaskFormFile taskId={slug} onSubmitSuccess={handleFileSubmit} />
         ) : (
-          <TaskFormLink taskId={id} onSubmitSuccess={handleLinkSubmit} />
+          <TaskFormLink taskId={slug} onSubmitSuccess={handleLinkSubmit} />
         )}
 
         {/* Info Box */}
diff --git a/src/Pages/internify/intern/components/CertificateAvailabe.tsx b/src/Pages/internify/intern/components/CertificateAvailabe.tsx
index 040921a..983f4c3 100644
--- a/src/Pages/internify/intern/components/CertificateAvailabe.tsx
+++ b/src/Pages/internify/intern/components/CertificateAvailabe.tsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
-import { Download, History , Link, Award, Printer } from "lucide-react";
-import { type CertificateData, type CertificateHistory } from "../../../../lib/mockData";
+import { Download, Link, Printer } from "lucide-react";
+import { type CertificateData } from "../../../../lib/mockSertificates";
 import certificateImg from "../../../../assets/certificate.png";
 
 export default function CertificateAvailable({ data }: { data: CertificateData }) {
-  const { certificate, history } = data;
+  const { certificate } = data;
   const [copied, setCopied] = useState(false);
 
   const handleCopyLink = () => {
@@ -14,11 +14,9 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
   };
 
   return (
-    <div className="flex flex-col lg:flex-row gap-6 items-start">
-      {/* LEFT: Certificate Preview + Actions */}
-      <div className="w-full lg:w-4/6 flex flex-col gap-4">
-        {/* Certificate Card */}
-        <div className="flex rounded-xl p-10 mb-3 border border-gray-300 shadow-md items-center justify-center">
+    <div className="flex flex-col gap-4">
+      {/* Certificate Card */}
+        <div className="flex rounded-xl p-5 mb-1 border border-gray-300 shadow-md items-center justify-center">
           <img
             src={certificateImg}
             alt="Certificate"
@@ -68,13 +66,13 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
             <div className="flex flex-col gap-3">
 
               {/* Unduh Sertifikat */}
-              <button className="flex items-center justify-center gap-2 w-full bg-red-700 hover:bg-red-800 active:scale-95 transition-all text-white font-semibold py-3.5 rounded-xl text-sm">
+              <button className="flex items-center justify-center gap-2 w-full bg-red-700 hover:bg-red-800 active:scale-95 transition-all text-white font-semibold py-2 rounded-xl text-sm">
                 <Download className="w-4 h-4" />
                 Unduh Sertifikat (PDF)
               </button>
 
               {/* Bagikan ke LinkedIn */}
-              <button className="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 active:scale-95 transition-all text-white font-semibold py-3.5 rounded-xl text-sm">
+              <button className="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 active:scale-95 transition-all text-white font-semibold py-2 rounded-xl text-sm">
                 Bagikan ke LinkedIn
               </button>
 
@@ -96,47 +94,6 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
             </div>
           </div>
         </div>
-      </div>
-
-      {/* RIGHT: Certificate History */}
-      <div className="w-full lg:w-2/6 flex-shrink-0">
-        <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
-          <div className="flex items-center gap-2 mb-4">
-            <History className="w-5 h-5 text-red-700" />
-            <h3 className="font-semibold text-gray-800 text-lg">Certificate History</h3>
-          </div>
-
-          <div className="space-y-3">
-            {history.map((item: CertificateHistory) => (
-              <div
-                key={item.id}
-                className="flex flex-col gap-3 p-3 bg-white border border-gray-200 shadow-sm rounded-xl hover:bg-gray-50 transition-colors cursor-pointer"
-              >
-                <div className="w-full flex justify-center">
-                  <img
-                    src={certificateImg}
-                    alt="Certificate"
-                    className="rounded-xl h-[200px]"
-                  />
-                </div>
-                <div className="w-full">
-                  <p className="text-xs">{item.month}</p>
-                  <p className="text-sm font-semibold text-gray-800 leading-tight">{item.title}</p>
-                  <p className="text-sm text-gray-500">
-                    Grade: {item.grade}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="w-full my-3 flex justify-end">
-            <button className="text-sm text-red-500 font-semibold hover:underline">
-              See more
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/CertificateHistory.tsx b/src/Pages/internify/intern/components/CertificateHistory.tsx
new file mode 100644
index 0000000..0f0048d
--- /dev/null
+++ b/src/Pages/internify/intern/components/CertificateHistory.tsx
@@ -0,0 +1,47 @@
+import { useNavigate } from "react-router-dom";
+import { History } from "lucide-react";
+import { type CertificateHistory, history as certificateHistory } from "../../../../lib/mockSertificates";
+import certificateImg from "../../../../assets/certificate.png";
+
+export default function SertificateHistory() {
+    const navigate = useNavigate();
+    return (
+        <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
+            <div className="flex items-center gap-2 mb-4">
+                <History className="w-5 h-5 text-red-700" />
+                <h3 className="font-semibold text-gray-800 text-lg">Certificate History</h3>
+            </div>
+
+            <div className="space-y-3">
+                {certificateHistory.slice(0, 2).map((item: CertificateHistory) => (
+                    <div
+                        key={item.id}
+                        className="flex flex-col gap-3 p-3 bg-white border border-gray-200 shadow-sm rounded-xl hover:bg-gray-50 transition-colors cursor-pointer"
+                    >
+                        <div className="w-full flex justify-center">
+                            <img
+                                src={certificateImg}
+                                alt="Certificate"
+                                className="rounded-xl h-[150px] w-[150px] w-full object-cover"
+                            />
+                        </div>
+                        <div className="w-full">
+                            <p className="text-xs text-gray-400">{item.month}</p>
+                            <p className="text-sm font-semibold text-gray-800 leading-tight">{item.title}</p>
+                            <p className="text-sm text-gray-500">Grade: {item.grade}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            <div className="w-full my-3 flex justify-end">
+                <button
+                    onClick={() => navigate('/intern/certificates/all')}
+                    className="text-sm text-red-700 font-semibold hover:underline"
+                >
+                    See more
+                </button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/CertificateNotAvailable.tsx b/src/Pages/internify/intern/components/CertificateNotAvailable.tsx
index 24e15ad..685590d 100644
--- a/src/Pages/internify/intern/components/CertificateNotAvailable.tsx
+++ b/src/Pages/internify/intern/components/CertificateNotAvailable.tsx
@@ -2,33 +2,33 @@ import { Lock, Clock } from "lucide-react";
 
 export default function CertificateNotAvailable({ progress, remainingTasks }: { progress: number; remainingTasks: number }) {
   return (
-    <div className="bg-white w-full rounded-2xl border border-gray-100 shadow-sm py-16 p-23 flex flex-col items-center text-center md:max-w-3/5 mx-auto z-10">
+    <div className="bg-white w-full h-full rounded-2xl border border-gray-100 shadow-sm px-24 flex flex-col items-center justify-center">
       {/* Icon */}
       <div className="relative mb-6">
-        <div className=" w-33 h-33 border-2 border-dashed border-gray-600 rounded-xl flex justify-center items-center">
+        <div className=" w-45 h-45 border-2 border-dashed border-gray-600 rounded-xl flex justify-center items-center">
 
-        <div className="w-20 h-20 flex items-center rounded-lg justify-center bg-gray-300">
-          <Lock className="w-10 h-10 text-red-700" />
-        </div>
-        <div className="absolute -bottom-2 -right-2 w-6 h-6 bg-amber-500 rounded- flex items-center justify-center shadow-md">
-          <Clock className="w-4 h-4 text-yellow-800" />
-        </div>
+          <div className="w-30 h-30 flex items-center rounded-lg justify-center bg-gray-300">
+            <Lock className="w-16 h-16 text-red-700" />
+          </div>
+          <div className="absolute -bottom-2 -right-2 w-7 h-7 bg-amber-500 rounded- flex items-center justify-center shadow-md">
+            <Clock className="w-5 h-5 text-yellow-800" />
+          </div>
         </div>
       </div>
 
-      <h2 className="text-2xl font-bold text-gray-900 mb-3">Sertifikat Belum Tersedia</h2>
-      <p className="text-gray-500 text-sm leading-relaxed mb-6">
-        Anda harus menyelesaikan semua tugas proyek sebelum dapat mengunduh sertifikat kelulusan.
+      <h2 className="text-[37px] font-bold text-gray-900 mb-3">Sertifikat Belum Tersedia</h2>
+      <p className="text-gray-500 text-[17px] mb-6">
+        Anda harus menyelesaikan <span className="font-bold text-red-600">semua tugas proyek</span> sebelum dapat mengunduh sertifikat kelulusan.
         Silakan periksa kembali progres tugas Anda di menu Proyek.
       </p>
 
       {/* Progress Bar */}
-      <div className="w-full">
+      <div className="w-1/3">
         <div className="flex justify-between items-center mb-2">
           <span className="text-sm font-semibold text-gray-700">Progres Proyek</span>
           <span className="text-sm font-bold text-red-700">{progress}%</span>
         </div>
-        <div className="w-full h-2.5 bg-gray-100 rounded-full overflow-hidden">
+        <div className="w-full h-3 bg-gray-100 rounded-full overflow-hidden">
           <div
             className="h-full bg-red-700 rounded-full transition-all duration-700"
             style={{ width: `${progress}%` }}
diff --git a/src/Pages/internify/intern/components/HomeProjectList.tsx b/src/Pages/internify/intern/components/HomeProjectList.tsx
index a094a59..3f7ca94 100644
--- a/src/Pages/internify/intern/components/HomeProjectList.tsx
+++ b/src/Pages/internify/intern/components/HomeProjectList.tsx
@@ -1,5 +1,7 @@
 import { useNavigate } from 'react-router-dom'
-import { mockProjects } from '../../../../lib/mockData'
+import { mockProjects } from '../../../../lib/mockProjects'
+
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
 
 const HomeProjectList = () => {
   const navigate = useNavigate();
@@ -11,14 +13,12 @@ const HomeProjectList = () => {
           return (
             <div
               key={index}
-              onClick={() => navigate(`/intern/projects/${project.id}`)}
+              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>
+              <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>
-                {/* <p className="text-xs text-gray-400">{project.role}</p> */}
               </div>
             </div>
           )
diff --git a/src/Pages/internify/intern/components/ProjectTaskCard.tsx b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
index b611fd9..56a6bf6 100644
--- a/src/Pages/internify/intern/components/ProjectTaskCard.tsx
+++ b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
@@ -1,11 +1,14 @@
-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 TaskCard({ task }: { task: Task }) {
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+
+export default function TaskCard({ task, projectName }: { task: Task; projectName: string }) {
   const navigate = useNavigate();
+  const toTaskSlug = (title: string) => title.toLowerCase().replace(/\s+/g, '-');
   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">
@@ -18,6 +21,9 @@ export default function TaskCard({ task }: { task: Task }) {
         <div className=" text-[13px] text-[#666]">
           {task.description}
         </div>
+        <div className=" text-[13px] text-[#666]">
+          Tipe Submission : {task.type === 'file' ? "File" : "Link"}
+        </div>
       </div>
 
       <div className="shrink-0">
@@ -26,11 +32,11 @@ export default function TaskCard({ task }: { task: Task }) {
             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/tasks/${task.id}/submit`)}>
+          <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>
         )}
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/Pages/internify/intern/components/ProjectsCard.tsx b/src/Pages/internify/intern/components/ProjectsCard.tsx
index d183433..21228e6 100644
--- a/src/Pages/internify/intern/components/ProjectsCard.tsx
+++ b/src/Pages/internify/intern/components/ProjectsCard.tsx
@@ -1,5 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+
 interface ProjectCardProps {
   id: number | string
   name: string
@@ -12,7 +14,6 @@ interface ProjectCardProps {
 }
 
 const ProjectCard = ({
-  id,
   name,
   mentor,
   avatarUrl,
@@ -65,7 +66,7 @@ const ProjectCard = ({
         {/* Button */}
         <div className="flex items-end justify-end px-3 pb-1">
           <button
-            onClick={() => navigate(`/intern/projects/${id}`)}
+            onClick={() => navigate(`/intern/projects/${toSlug(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
diff --git a/src/Pages/internify/intern/components/SidebarIntern.tsx b/src/Pages/internify/intern/components/SidebarIntern.tsx
index abd95d2..a7a148b 100644
--- a/src/Pages/internify/intern/components/SidebarIntern.tsx
+++ b/src/Pages/internify/intern/components/SidebarIntern.tsx
@@ -30,14 +30,9 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
   return (
     <aside 
       className={`
-        /* Struktur Dasar Layout */
         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
-        
-        /* Kondisi Layar Desktop (>= md) */
-        md:sticky md:top-[73px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
-        
-        /* Kondisi Layar Mobile (< md) dan Logika Aktif-nya */
-        fixed top-0 left-0 h-screen w-[270px] z-40 pt-5
+        md:sticky md:top-[50px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
+        fixed top-0 left-0 h-[calc(100vh-50px)] w-[270px] z-40 pt-5
         ${isOpen ? "translate-x-0" : "-translate-x-full"}
       `}
     >
diff --git a/src/Pages/internify/intern/components/TaskForm-file.tsx b/src/Pages/internify/intern/components/TaskForm-file.tsx
index c836807..b845132 100644
--- a/src/Pages/internify/intern/components/TaskForm-file.tsx
+++ b/src/Pages/internify/intern/components/TaskForm-file.tsx
@@ -1,20 +1,20 @@
 import { useState, useRef } from "react";
-import { FileText, UploadCloud } from "lucide-react";
+import { FileText, UploadCloud, Trash2, X, FileUp } from "lucide-react";
 import { LuSendHorizontal } from "react-icons/lu";
 
 interface TaskFormFileProps {
   taskId: string | undefined;
-  onSubmitSuccess: (file: File) => void;
+  onSubmitSuccess: (files: File[]) => void;
 }
 
 export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFileProps) {
-  const [file, setFile] = useState<File | null>(null);
+  const [files, setFiles] = useState<File[]>([]);
   const [isDragActive, setIsDragActive] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
-
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      validateAndSetFile(e.target.files[0]);
+    if (e.target.files && e.target.files.length > 0) {
+      validateAndAddFiles(Array.from(e.target.files));
     }
   };
 
@@ -33,39 +33,138 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
     e.stopPropagation();
     setIsDragActive(false);
 
-    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-      validateAndSetFile(e.dataTransfer.files[0]);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      validateAndAddFiles(Array.from(e.dataTransfer.files));
     }
   };
 
-  const validateAndSetFile = (selectedFile: File) => {
+  const validateAndAddFiles = (selectedFiles: File[]) => {
     const allowedExtensions = ["pdf", "docx", "zip"];
-    const fileExtension = selectedFile.name.split(".").pop()?.toLowerCase();
+    const validFiles: File[] = [];
 
-    if (fileExtension && allowedExtensions.includes(fileExtension)) {
-      if (selectedFile.size <= 10 * 1024 * 1024) {
-        setFile(selectedFile);
+    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.`);
+        }
       } else {
-        alert("Ukuran file melebihi batas maksimal 10MB.");
+        alert(`Format file ${file.name} tidak didukung. Harap gunakan PDF, DOCX, atau ZIP.`);
       }
-    } else {
-      alert("Format file tidak didukung. Harap gunakan PDF, DOCX, atau ZIP.");
+    });
+
+    if (validFiles.length > 0) {
+      setFiles((prev) => [...prev, ...validFiles]);
     }
   };
 
+  const removeFile = (indexToRemove: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setFiles((prev) => prev.filter((_, index) => index !== indexToRemove));
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!file) {
+    if (files.length === 0) {
       alert("Silakan pilih atau jatuhkan berkas tugas Anda terlebih dahulu.");
       return;
     }
-    onSubmitSuccess(file);
+    // Set to local submitted mode
+    setIsSubmitted(true);
+    // Call parent handler
+    onSubmitSuccess(files);
   };
 
+  const handleEditSubmission = () => {
+    setIsSubmitted(false);
+  };
+
+  const handleDeleteSubmission = () => {
+    if (confirm("Are you sure you want to delete this submission?")) {
+      setFiles([]);
+      setIsSubmitted(false);
+    }
+  };
+
+  if (isSubmitted) {
+    return (
+      <div className="border border-gray-200 rounded-xl bg-white shadow-sm overflow-hidden">
+        {/* Header Action */}
+        <div className="flex flex-col sm:flex-row justify-between items-center bg-gray-50/50 p-4 border-b border-gray-200 gap-4 sm:gap-0">
+          <div className="flex items-center gap-2">
+            <FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
+            <h3 className="font-bold text-gray-800 tracking-tight">Submit Status</h3>
+          </div>
+          <div className="flex gap-2 w-full sm:w-auto">
+            <button
+              onClick={handleEditSubmission}
+              className="flex-1 sm:flex-none bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold text-xs py-2 px-4 rounded-lg transition-colors"
+            >
+              Edit Submission
+            </button>
+            <button
+              onClick={handleDeleteSubmission}
+              className="flex-1 sm:flex-none bg-gray-200 hover:bg-red-100 text-gray-800 hover:text-red-700 font-bold text-xs py-2 px-4 rounded-lg transition-colors"
+            >
+              Delete Submission
+            </button>
+          </div>
+        </div>
+
+        {/* Status Table */}
+        <div className="grid grid-cols-1 divide-y divide-gray-100">
+          <div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
+            <div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
+              Submission status
+            </div>
+            <div className="p-4 text-sm font-medium text-gray-800">
+              Submitted for grading
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
+            <div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
+              Grading status
+            </div>
+            <div className="p-4 text-sm font-medium text-gray-800">
+              Not graded
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
+            <div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
+              Time Remaining
+            </div>
+            <div className="p-4 text-sm font-medium text-gray-800">
+              Assignment was submitted [waktu submitted]
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] hover:bg-gray-50/30 transition-colors">
+            <div className="p-4 text-sm font-medium text-gray-500 bg-gray-50 sm:bg-transparent sm:border-r border-gray-100">
+              File submission
+            </div>
+            <div className="p-4 flex flex-col gap-2">
+              {files.map((f, i) => (
+                <div key={i} className="flex items-center gap-2 text-sm font-medium text-gray-800">
+                  <FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
+                  {f.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       <input
         type="file"
+        multiple
         ref={fileInputRef}
         onChange={handleFileChange}
         accept=".pdf,.docx,.zip"
@@ -78,33 +177,38 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
         onDragLeave={handleDrag}
         onDrop={handleDrop}
         onClick={() => fileInputRef.current?.click()}
-        className={`w-full min-h-[180px] border-2 border-dashed rounded-xl flex flex-col items-center justify-center p-6 text-center cursor-pointer transition-all ${
-          isDragActive
-            ? "border-[#B30000] bg-red-50/40"
-            : "border-gray-200 bg-gray-50/50 hover:bg-gray-50 hover:border-gray-300"
-        }`}
+        className={`w-full min-h-[120px] border border-dashed rounded-xl p-4 bg-white cursor-pointer transition-all ${isDragActive ? "border-[#B30000] bg-red-50/40" : "border-gray-200 hover:border-gray-300"
+          }`}
       >
-        {file ? (
-          <div className="space-y-2 pointer-events-none animate-in fade-in duration-200">
-            <div className="w-12 h-12 bg-green-50 text-green-600 rounded-full flex items-center justify-center mx-auto">
-              <FileText className="w-6 h-6 stroke-[2]" />
-            </div>
-            <p className="text-sm font-bold text-gray-800 max-w-md truncate">{file.name}</p>
-            <p className="text-xs text-gray-400">
-              {(file.size / (1024 * 1024)).toFixed(2)} MB • Klik untuk mengganti berkas
-            </p>
+        {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 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"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            ))}
           </div>
         ) : (
-          <div className="space-y-2 pointer-events-none">
-            <UploadCloud className="w-10 h-10 text-gray-400 mx-auto stroke-[1.5]" />
-            <div>
-              <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 mt-1">
-                PDF, DOCX, or ZIP (Max. 10MB)
-              </p>
-            </div>
+          <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-[11px] text-gray-400 font-semibold">PDF, DOCX, or ZIP (Max. 10MB)</p>
           </div>
         )}
       </div>
@@ -113,7 +217,7 @@ export default function TaskFormFile({ taskId, onSubmitSuccess }: TaskFormFilePr
         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"
       >
-        Submit Task
+        Save Changes
         <LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
       </button>
     </form>
diff --git a/src/Pages/internify/intern/components/TaskForm-link.tsx b/src/Pages/internify/intern/components/TaskForm-link.tsx
index dd990cc..9fa00c8 100644
--- a/src/Pages/internify/intern/components/TaskForm-link.tsx
+++ b/src/Pages/internify/intern/components/TaskForm-link.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "lucide-react";
+import { Link, FileText } from "lucide-react";
 import { LuSendHorizontal } from "react-icons/lu";
 
 interface TaskFormLinkProps {
@@ -9,6 +9,7 @@ interface TaskFormLinkProps {
 
 export default function TaskFormLink({ taskId, onSubmitSuccess }: TaskFormLinkProps) {
   const [submissionLink, setSubmissionLink] = useState("");
+  const [isSubmitted, setIsSubmitted] = useState(false);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -16,9 +17,79 @@ export default function TaskFormLink({ taskId, onSubmitSuccess }: TaskFormLinkPr
       alert("Silakan masukkan link tugas Anda terlebih dahulu.");
       return;
     }
+    setIsSubmitted(true); // ini hilang
     onSubmitSuccess(submissionLink);
   };
 
+  const handleEditSubmission = () => {
+    setIsSubmitted(false);
+  };
+
+  const handleDeleteSubmission = () => {
+    if (confirm("Are you sure you want to delete this submission?")) {
+      setSubmissionLink("");
+      setIsSubmitted(false);
+    }
+  };
+
+  if (isSubmitted) {
+    return (
+      <div className="border border-gray-200 rounded-xl bg-white overflow-hidden">
+        {/* Header */}
+        <div className="flex justify-between items-center bg-gray-50 p-4 border-b border-gray-200">
+          <div className="flex items-center gap-2">
+            <FileText className="w-4 h-4 text-red-700 stroke-[2]" />
+            <h3 className="font-bold text-gray-800 text-sm">Submit Status</h3>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={handleEditSubmission}
+              className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold text-xs py-1.5 px-3 rounded-lg transition-colors"
+            >
+              Edit Submission
+            </button>
+            <button
+              onClick={handleDeleteSubmission}
+              className="bg-gray-200 hover:bg-red-100 text-gray-800 hover:text-red-700 font-bold text-xs py-1.5 px-3 rounded-lg transition-colors"
+            >
+              Delete Submission
+            </button>
+          </div>
+        </div>
+
+        {/* Table */}
+        <div className="divide-y divide-gray-100">
+          <div className="grid grid-cols-[1fr_2fr]">
+            <div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Submission status</div>
+            <div className="p-4 text-sm text-gray-800 font-medium">Submitted for grading</div>
+          </div>
+          <div className="grid grid-cols-[1fr_2fr]">
+            <div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Grading status</div>
+            <div className="p-4 text-sm text-gray-800 font-medium">pc: Not graded</div>
+          </div>
+          <div className="grid grid-cols-[1fr_2fr]">
+            <div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Time Remaining</div>
+            <div className="p-4 text-sm text-gray-800 font-medium">pc: Assignment was submitted 2 days 15 hours early</div>
+          </div>
+          <div className="grid grid-cols-[1fr_2fr]">
+            <div className="p-4 text-sm text-gray-500 font-medium bg-gray-50 border-r border-gray-100">Link submission</div>
+            <div className="p-4 text-sm font-medium">
+              <a
+                href={submissionLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline break-all flex items-center gap-1.5"
+              >
+                <Link className="w-3.5 h-3.5 shrink-0" />
+                {submissionLink}
+              </a>
+            </div>
+        </div>
+      </div>
+      </div >
+    );
+  }
+
   return (
     <form onSubmit={handleSubmit} className="space-y-5">
       <div className="space-y-1.5">
diff --git a/src/Pages/internify/mentor/BaseProjectsPage.tsx b/src/Pages/internify/mentor/BaseProjectsPage.tsx
index 029353e..368aa7a 100644
--- a/src/Pages/internify/mentor/BaseProjectsPage.tsx
+++ b/src/Pages/internify/mentor/BaseProjectsPage.tsx
@@ -1,4 +1,4 @@
-import { mockProjects } from '../../../lib/mockData';
+import { mockProjects } from '../../../lib/mockProjects';
 import MentorProjectCard from './components/MentorProjectCard';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
diff --git a/src/Pages/internify/mentor/ProjectsPage.tsx b/src/Pages/internify/mentor/ProjectsPage.tsx
index 5ddd195..2a7b823 100644
--- a/src/Pages/internify/mentor/ProjectsPage.tsx
+++ b/src/Pages/internify/mentor/ProjectsPage.tsx
@@ -1,26 +1,18 @@
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { mockProjects } from '../../../lib/mockData';
-import { ChevronLeft } from 'lucide-react';
+import { mockProjects } from '../../../lib/mockProjects';
 import MentorForumTab from './ProjectForumTab';
 import InternsTab from './ProjectsInternTab';
 import TaskTab from './TaskTab';
 
 // ─── ProjectDetailPage ─────────────────────────────────────────────────────────
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+
 export default function ProjectDetailPage() {
   const { slug } = useParams<{ slug: string }>();
-  const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<'forum' | 'participants' | 'Task'>('forum');
 
-  const handleBack = () => {
-    if (window.history.length > 1) {
-      navigate(-1);
-    } else {
-      navigate('/intern/projects');
-    }
-  };
-
-  const project = mockProjects.find((p) => p.name === slug);
+  const project = mockProjects.find((p) => toSlug(p.name) === slug);
 
   if (!project) {
     return (
@@ -38,18 +30,7 @@ export default function ProjectDetailPage() {
 
   return (
     <div className="bg-gray-50 min-h-screen">
-      <div className="px-24 py-10">
-
-        {/* Back Button */}
-        <button
-          onClick={handleBack}
-          className="flex items-center gap-2 mb-6 text-sm font-medium text-[#666] hover:text-[#C0392B] transition-colors duration-150 group"
-        >
-          <span className='flex flex-row gap-2'>
-            <ChevronLeft width={20} height={20} className="transition-transform duration-150 group-hover:-translate-x-1" />
-            Kembali ke Daftar Project
-          </span>
-        </button>
+      <div className="">
 
         {/* Tabs */}
         <div className="flex mb-4 border-b-1 border-gray-300">
diff --git a/src/Pages/internify/mentor/components/MentorProjectCard.tsx b/src/Pages/internify/mentor/components/MentorProjectCard.tsx
index 3a1a0c5..3707ff3 100644
--- a/src/Pages/internify/mentor/components/MentorProjectCard.tsx
+++ b/src/Pages/internify/mentor/components/MentorProjectCard.tsx
@@ -1,5 +1,5 @@
 import { Trash2, UsersRound } from 'lucide-react'
-import type { Intern } from '../../../../lib/mockData'
+import type { Intern } from '../../../../lib/mockProjects'
 import { useNavigate } from 'react-router-dom'
 
 interface ProjectCardProps {
@@ -9,6 +9,8 @@ interface ProjectCardProps {
   thumbnailUrl?: string
 }
 
+const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+
 export default function MentorProjectCard({
   id,
   name,
@@ -17,7 +19,7 @@ export default function MentorProjectCard({
 }: ProjectCardProps) {
   const navigate = useNavigate();
   const handleCardClick = () => {
-    navigate(`/mentor/projects/${id}`)
+    navigate(`/mentor/projects/${toSlug(name)}`)
   };
 
   const handleDeleteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/src/Pages/internify/mentor/components/SidebarMentor.tsx b/src/Pages/internify/mentor/components/SidebarMentor.tsx
index 0d9f0a4..60f231d 100644
--- a/src/Pages/internify/mentor/components/SidebarMentor.tsx
+++ b/src/Pages/internify/mentor/components/SidebarMentor.tsx
@@ -32,14 +32,9 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
   return (
     <aside
       className={`
-        /* Struktur Dasar Layout */
         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
-        
-        /* Kondisi Layar Desktop (>= md) */
-        md:sticky md:top-[73px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
-        
-        /* Kondisi Layar Mobile (< md) dan Logika Aktif-nya */
-        fixed top-0 left-0 h-screen w-[270px] z-40 pt-5
+        md:sticky md:top-[50px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
+        fixed top-0 left-0 h-[calc(100vh-50px)] w-[270px] z-40 pt-5
         ${isOpen ? "translate-x-0" : "-translate-x-full"}
       `}
     >
diff --git a/src/Pages/internify/page.tsx b/src/Pages/internify/page.tsx
index 775e0f2..b6930a8 100644
--- a/src/Pages/internify/page.tsx
+++ b/src/Pages/internify/page.tsx
@@ -3,8 +3,6 @@ import logo from "../../assets/logo.png";
 import { useNavigate } from "react-router-dom";
 import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
 
-
-// Data user dummy untuk keperluan simulasi navigasi frontend
 const DataUsers = [
     { "Email": "intern@email.com", "Password": "password123", "role": "intern" },
     { "Email": "mentor@email.com", "Password": "password123", "role": "mentor" },
diff --git a/src/lib/mockProjects.ts b/src/lib/mockProjects.ts
index 5b59301..37c2d8c 100644
--- a/src/lib/mockProjects.ts
+++ b/src/lib/mockProjects.ts
@@ -5,6 +5,7 @@ export interface Task {
   title: string;
   description: string;
   deadline: Deadline;
+  type: 'file' | 'link';
   isSubmitted: boolean;
   submittedCount: number;
   totalInterns: number;
@@ -41,15 +42,17 @@ export const mockProjects: Project[] = [
         id: 1,
         title: "Laporan tugas",
         description: "Berisi design ulux, dan user flow dari aplikasi internify",
+        type: 'link',
         deadline: { date: new Date(2026, 4, 1), label: "Laporan tugas – 1 Mei", time: "23:59 PM" },
         submittedCount: 6,
         totalInterns: 6,
-        isSubmitted: true,
+        isSubmitted: false,
       },
       {
         id: 2,
         title: "Laporan tugas 1",
         description: "Berisi design ulux, dan user flow dari aplikasi internify",
+        type: 'file',
         deadline: { date: new Date(2026, 4, 14), label: "Laporan tugas 1 – 14 Mei", time: "23:59 PM" },
         submittedCount: 2,
         totalInterns: 6,
@@ -59,6 +62,7 @@ export const mockProjects: Project[] = [
         id: 3,
         title: "Laporan tugas 2",
         description: "Berisi design ulux, dan user flow dari aplikasi internify",
+        type: 'link',
         deadline: { date: new Date(2026, 4, 28), label: "Laporan tugas 2 – 28 Mei", time: "23:59 PM" },
         submittedCount: 3,
         totalInterns: 6,
@@ -68,6 +72,7 @@ export const mockProjects: Project[] = [
         id: 4,
         title: "Laporan tugas 3",
         description: "Berisi wireframe halaman dashboard aplikasi internify",
+        type: 'file',
         deadline: { date: new Date(2026, 5, 5), label: "Laporan tugas 3 – 5 Jun", time: "23:59 PM" },
         submittedCount: 0,
         totalInterns: 6,
@@ -97,33 +102,37 @@ export const mockProjects: Project[] = [
         id: 1,
         title: "Analisis Kebutuhan Sistem",
         description: "Dokumentasi kebutuhan fungsional dan non-fungsional platform rekrutmen",
+        type: 'file',
         deadline: { date: new Date(2026, 4, 5), label: "Analisis Kebutuhan – 5 Mei", time: "23:59 PM" },
         submittedCount: 6,
         totalInterns: 6,
-        isSubmitted: true,
+        isSubmitted: false,
       },
       {
         id: 2,
         title: "Desain Database Schema",
         description: "Rancangan struktur database untuk kandidat, lowongan, dan proses seleksi",
+        type: 'link',
         deadline: { date: new Date(2026, 4, 10), label: "Desain Database – 10 Mei", time: "23:59 PM" },
         submittedCount: 6,
         totalInterns: 6,
-        isSubmitted: true,
+        isSubmitted: false,
       },
       {
         id: 3,
         title: "Implementasi Auth Module",
         description: "Pengembangan sistem autentikasi dan otorisasi multi-role",
+        type: 'file',
         deadline: { date: new Date(2026, 4, 18), label: "Auth Module – 18 Mei", time: "23:59 PM" },
         submittedCount: 3,
         totalInterns: 6,
-        isSubmitted: true,
+        isSubmitted: false,
       },
       {
         id: 4,
         title: "Modul Posting Lowongan",
         description: "Fitur buat, edit, dan publish lowongan pekerjaan",
+        type: 'link',
         deadline: { date: new Date(2026, 4, 25), label: "Posting Lowongan – 25 Mei", time: "23:59 PM" },
         submittedCount: 0,
         totalInterns: 6,
@@ -154,24 +163,27 @@ export const mockProjects: Project[] = [
         id: 1,
         title: "Setup Pipeline Data",
         description: "Konfigurasi ETL pipeline dari database transaksi ke data warehouse",
+        type: 'link',
         deadline: { date: new Date(2026, 4, 3), label: "Setup Pipeline – 3 Mei", time: "23:59 PM" },
         submittedCount: 6,
         totalInterns: 6,
-        isSubmitted: true,
+        isSubmitted: false,
       },
       {
         id: 2,
         title: "Desain Komponen Chart",
         description: "Pembuatan reusable chart component untuk berbagai tipe visualisasi data",
+        type: 'file',
         deadline: { date: new Date(2026, 4, 12), label: "Komponen Chart – 12 Mei", time: "23:59 PM" },
         submittedCount: 6,
         totalInterns: 6,
-        isSubmitted: true,
+        isSubmitted: false,
       },
       {
         id: 3,
         title: "Dashboard Overview Page",
         description: "Halaman utama dengan ringkasan KPI dan metric utama bisnis",
+        type: 'link',
         deadline: { date: new Date(2026, 4, 20), label: "Overview Page – 20 Mei", time: "23:59 PM" },
         submittedCount: 0,
         totalInterns: 6,
@@ -181,6 +193,7 @@ export const mockProjects: Project[] = [
         id: 4,
         title: "Laporan Penjualan",
         description: "Modul analitik penjualan dengan filter periode dan kategori produk",
+        type: 'file',
         deadline: { date: new Date(2026, 4, 28), label: "Laporan Penjualan – 28 Mei", time: "23:59 PM" },
         submittedCount: 0,
         totalInterns: 6,
diff --git a/src/lib/mockSertificates.ts b/src/lib/mockSertificates.ts
new file mode 100644
index 0000000..c4e8529
--- /dev/null
+++ b/src/lib/mockSertificates.ts
@@ -0,0 +1,74 @@
+export interface Certificate {
+  id: string;
+  issuedDate: string;
+  recipientName: string;
+  programName: string;
+  duration: string;
+  finalScore: number;
+  grade: string;
+  status: string;
+}
+
+export interface CertificateHistory {
+  id: number;
+  month: string;
+  title: string;
+  grade: string;
+}
+
+export interface CertificateData {
+  isReceived: boolean;
+  projectProgress: number;
+  remainingTasks: number;
+  certificate: Certificate;
+}
+
+export const certificateData: CertificateData = {
+  isReceived: true,
+  projectProgress: 90,
+  remainingTasks: 0,
+  certificate: {
+    id: "INF-2024-88392",
+    issuedDate: "24 Oct 2024",
+    recipientName: "JonathanKristina",
+    programName: "Internify Project",
+    duration: "8 Minggu",
+    finalScore: 94,
+    grade: "A",
+    status: "VERIFIED",
+  },
+};
+
+export const history: CertificateHistory[] = [
+  {
+    id: 1,
+    month: "Juni 2023",
+    title: "Web Development Fundamentals",
+    grade: "A+",
+  },
+  {
+    id: 2,
+    month: "Maret 2023",
+    title: "UI/UX Design Essentials",
+    grade: "A",
+  },
+  {
+    id: 3,
+    month: "Juni 2023",
+    title: "Web Development Advanced",
+    grade: "A+",
+  },
+  {
+    id: 4,
+    month: "Maret 2023",
+    title: "UI/UX Design Advanced",
+    grade: "A",
+  }
+]
+
+export const initialHistoryData = [
+  { id: 1, name: "Jonathan Kristina", email: "JonathanKristina@gmail.com", project: "Internify Project", date: "24 Oct 2024", initials: "JK" },
+  { id: 2, name: "Ahmad Faisal", email: "ahmad.faisal@gmail.com", project: "Web Dev Fundamentals", date: "15 Sep 2024", initials: "AF" },
+  { id: 3, name: "Siti Rahma", email: "siti.rahma@gmail.com", project: "UI/UX Essentials", date: "10 Aug 2024", initials: "SR" },
+  { id: 4, name: "David Beckham", email: "david.b@gmail.com", project: "Engineering Intern 101", date: "05 Aug 2024", initials: "DB" },
+];
\ No newline at end of file