feat: add CertificateForm and CertificateResult components for managing intern certificates

- Implemented CertificateForm for uploading certificate templates and displaying project details.
- Created CertificateResult to show generated certificates with pagination and search functionality.
- Added EligibleInternTable component to display eligible interns and their progress.
- Updated CertificateListPage to reflect changes in project listing styles.
- Enhanced MentorProjectCard with dynamic icon rendering.
- Introduced useProjectInternProgress hook for fetching intern progress data.
- Modified ProjectService to include task details in project responses.
- Updated project types to accommodate new task structures.

src/Pages/internify/intern/InternCertList.tsx

@@ -2,10 +2,19 @@ import { Loader2, AlertCircle } from "lucide-react";
 import { useMyProjects } from "../../../hooks/useProjects";
 import type { Project } from "../../../types/project.types";
 import { useNavigate } from "react-router-dom";
+import * as LucideIcons from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
+
 
 export default function SertificateList() {
     const { projects, loading, error } = useMyProjects();
     const navigate = useNavigate();
+
+    const getDynamicIcon = (iconName: string) => {
+        const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
+        const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[formatted];
+        return Icon ?? LucideIcons.FolderOpen;
+    };
     return (
         <div>
             {/* Header */}
@@ -44,17 +53,16 @@ export default function SertificateList() {
                         <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"
-                            onClick={() => navigate(`/intern/certificates/${item.slug}`)}
+                            onClick={() => navigate(`/intern/certificates/${item.slug}`, { state: { project: item } })}
                         >
                             {/* Thumbnail */}
                             <div className="p-6 pb-0">
                                 <div className="rounded-lg overflow-hidden">
                                     <div className="w-full h-32 bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center">
-                                        <img
-                                            src={item.project_icon}
-                                            alt={item.project_name}
-                                            className="w-16 h-16 object-contain"
-                                        />
+                                        {(() => {
+                                            const Icon = getDynamicIcon(item.project_icon);
+                                            return <Icon className="w-10 h-10 text-white" />;
+                                        })()}
                                     </div>
                                 </div>
                             </div>
@@ -65,15 +73,13 @@ export default function SertificateList() {
                                     {new Date(item.start_date).toLocaleDateString("id-ID", {
                                         year: "numeric",
                                         month: "long",
-                                    })}
-                                    until
-                                    {new Date(item.start_date).toLocaleDateString("id-ID", {
+                                    })} until  {new Date(item.end_date).toLocaleDateString("id-ID", {
                                         year: "numeric",
                                         month: "long",
                                     })}
                                 </p>
                                 <p className="text-sm font-semibold text-gray-800 leading-snug">
-                                    {item.end_date}
+                                    {item.project_name}
                                 </p>
                                 <p className="text-xs text-gray-500 mt-1">
                                     No: <span className="font-bold text-red-600">{item.status}</span>

src/Pages/internify/intern/InternClaimCert.tsx

@@ -1,16 +1,30 @@
 import { useMemo } from "react";
 import { useParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import CertificateAvailable from "./components/CertificateAvailabe";
 import CertificateNotAvailable from "./components/CertificateNotAvailable";
 import SertificateHistory from "./components/CertificateHistory";
 import { useMyCertificates } from "../../../hooks/useSertificates";
 import { useProjectDetail } from "../../../hooks/useProjects";
+import type { Project } from "../../../types/project.types";
 
 const SertificatePage = () => {
   const { slug } = useParams<{ slug: string }>();
-  const { project, loading: projectLoading } = useProjectDetail(slug ?? "");
+  const location = useLocation();
+  const projectFromList = location.state?.project as Project | undefined;
+
+  const { project: projectDetail, loading: projectLoading } = useProjectDetail(slug ?? "");
   const { certificates, loading: certLoading } = useMyCertificates();
 
+  const project = useMemo(() => {
+    if (!projectDetail) return null;
+    return {
+      ...projectDetail,
+      task_done: projectFromList?.task_done ?? 0,
+      total_tasks: projectFromList?.total_tasks ?? projectDetail.total_tasks,
+    };
+  }, [projectDetail, projectFromList]);
+
   const allTasksDone = !projectLoading && !!project && project.task_done >= project.total_tasks;
 
   const alreadyDone = useMemo(() => {
@@ -35,7 +49,7 @@ const SertificatePage = () => {
       </div>
     );
   }
-
+  
   return (
     <div>
       <div className="mb-4 flex flex-col gap-1">

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

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { useMyTasks } from '../../../../hooks/useProjects';
-import api from '../../../../lib/api';
 import { useCurrentUser } from '../../../../hooks/useUser';
 import { useAllMentorTasks } from '../../../../hooks/useTasks';