test pertama:

- implementasi seluruh backend pada akun intern dan mentor pada bagian lms
- kondisi semua hooks dan types yang dibutuhkan
- Pengujian task, project, dan submission pada mentor dan intern

next progress:
- Implementasi lib eksternal untuk unduh kedalam devices dan kirim sertifikat ke internet (linkedin)
- implementasi proses sertifikat pada mentor untuk melakukan generate sertifikat dengan template dan intern pada projek

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

@@ -59,6 +59,13 @@ export default function CertificateNotAvailable({
             </div>
             <p className="text-xs text-gray-400 mt-2 text-left">Semua tugas telah diselesaikan! Silahkan tunggu untuk mendapatkan sertifikat</p>
           </div>
+          <button
+            onClick={handleClaim}
+            disabled={loading}
+            className="mt-0 px-6 py-2.5 bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors duration-200"
+          >
+            {loading ? "Memproses..." : "Klaim Sertifikat"}
+          </button>
         </>
       ) : (
         <>
@@ -84,15 +91,6 @@ export default function CertificateNotAvailable({
               />
             </div>
           </div>
-
-          <button
-            onClick={handleClaim}
-            disabled={loading}
-            className="mt-2 px-6 py-2.5 bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors duration-200"
-          >
-            {loading ? "Memproses..." : "Klaim Sertifikat"}
-          </button>
-
           {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
         </>
       )}

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

@@ -24,7 +24,7 @@ const HomeProjectList = () => {
         {projects.map((project) => (
           <div
             key={project.id}
-            onClick={() => navigate(`/intern/projects/${toSlug(project.project_name)}`)}
+            onClick={() => navigate(`/intern/projects/${toSlug(project.slug)}`)}
             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" />

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

@@ -7,6 +7,16 @@ const formatDate = (dateStr: string) =>
 const formatTime = (dateStr: string) =>
   new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
 
+const statusStyles: Record<InternTaskItem["submission_status"], string> = {
+  not_submitted: "bg-gray-50 text-gray-700 border-gray-200",
+  submitted: "bg-green-50 text-green-700 border-green-200",
+};
+
+const statusLabels: Record<InternTaskItem["submission_status"], string> = {
+  not_submitted: "Pending",
+  submitted: "Submitted",
+};
+
 export default function TaskCard({ task }: { task: InternTaskItem }) {
   const navigate = useNavigate();
   return (
@@ -29,13 +39,12 @@ export default function TaskCard({ task }: { task: InternTaskItem }) {
         </div>
       </div>
 
-      <div className="block md:hidden h-[10px] bg-gray-600"/>
+      <div className="block md:hidden h-[10px] bg-gray-600" />
 
-      <div className="shrink-0 hidden md:flex items-center">
+      <div className="shrink-0 hidden md:flex items-center border border-card-outline">
         <span
-          className={`font-semibold text-xs px-3.5 py-[5px] rounded-md whitespace-nowrap bg-gray-50`}
-        >
-          {task.submission_status}
+          className={`font-semibold text-xs px-3.5 py-[5px] rounded-md whitespace-nowrap border ${statusStyles[task.submission_status]}`}>
+          {statusLabels[task.submission_status]}
         </span>
       </div>
     </div>