feat: update dashboard and project components for batch handling and icon management

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

@@ -1,16 +1,9 @@
 import { useNavigate } from 'react-router-dom';
 import { useProjects } from '../../../../hooks/useProjects';
-import * as LucideIcons from 'lucide-react';
-import type { LucideProps } from 'lucide-react';
+import { getProjectIcon } from '../../../../lib/ProjectIcons';
 
 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
 
-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;
-};
-
 const HomeProjectList = () => {
   const navigate = useNavigate();
   const { projects, loading, error } = useProjects();
@@ -27,7 +20,7 @@ const HomeProjectList = () => {
   return (
     <div>
       <h2 className="text-lg font-semibold text-font-shade mb-8">Projects</h2>
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 overflow-y-auto max-h-[190px]">
         {projects.map((project) => (
           <div
             key={project.id}
@@ -36,7 +29,7 @@ const HomeProjectList = () => {
           >
             <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style={{ backgroundColor: project.background_color ?? '#dc2626' }}>
               {(() => {
-                const Icon = getDynamicIcon(project.project_icon);
+                const Icon = getProjectIcon(project.project_icon);
                 return <Icon className="w-5 h-5 text-white" />;
               })()}
             </div>

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

@@ -1,9 +1,9 @@
-import type { ProjectTask } from "../../../../types/task.types";
+import type { InternTaskItem } from "../../../../types/project.types";
 
 const formatDate = (dateStr: string) =>
   new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
 
-export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
+export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] }) {
   const today = new Date();
   today.setHours(0, 0, 0, 0);
   return (

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

@@ -1,17 +1,10 @@
 import { useNavigate } from 'react-router-dom';
-import * as LucideIcons from 'lucide-react';
-import type { LucideProps } from 'lucide-react';
+import { getProjectIcon } from '../../../../lib/ProjectIcons';
 import type { Project } from '../../../../types/project.types';
 
-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;
-};
-
 const ProjectCard = (project: Project) => {
   const navigate = useNavigate();
-  const Icon = getDynamicIcon(project.project_icon);
+  const Icon = getProjectIcon(project.project_icon);
 
 
   const tasksDone = project.task_done; 

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

@@ -20,7 +20,7 @@ const TaskTimeline = () => {
   return (
     <div>
       <h2 className="font-semibold text-font-shade mb-5">Timeline Tugas</h2>
-      <div className="relative">
+      <div className="relative overflow-y-auto max-h-[190px]">
         <ul className="flex flex-col gap-5">
           {tasks.map((item: InternTaskItem, index) => {
             const overdue = isOverdue(item.deadline_at);

src/Pages/internify/mentor/HomeMentorPage.tsx

@@ -11,7 +11,6 @@ const HomeMentorPage = () => {
           <div className="bg-white border border-box-border rounded-xl p-6">
             <HomeMentorProject />
           </div>
-
         </div>
         <div className="bg-white  rounded-xl">
           <HomeCalendar />

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

@@ -35,7 +35,7 @@ const HomeMentorProject = () => {
                     </span>
                 </button>
             </div>
-            <div className="flex flex-col max-h-[210px] overflow-y-auto gap-3 pr-1">
+            <div className="flex flex-col max-h-[160px] overflow-y-auto gap-3 pr-1">
                 {loading && <p className="text-sm text-gray-400 px-5">Memuat...</p>}
                 {error && <p className="text-sm text-red-500 px-5">{error}</p>}
                 {projects.map((project) => (

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

@@ -1,19 +1,12 @@
 import { useState } from 'react';
 import { ClipboardCheck, Trash2, UsersRound } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import * as LucideIcons from 'lucide-react';
-import type { LucideProps } from 'lucide-react';
 import type { Project } from '../../../../types/project.types';
 import { useArchiveProject, useCompleteProject } from '../../../../hooks/useProjects';
 import { customToast } from '../../../utils/showToast';
 import ArchiveProjectDialog from './ArchiveProjectDialog';
 import CompleteProjectDialog from './CompleteProjectDialog';
-
-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;
-};
+import { getProjectIcon } from '../../../../lib/ProjectIcons';
 
 interface MentorProjectCardProps extends Project {
   onArchived?: () => void;
@@ -32,7 +25,7 @@ export default function MentorProjectCard({ onArchived, onCompleted, ...project
     navigate(`/mentor/projects/${project.slug}`);
   };
 
-  const Icon = getDynamicIcon(project.project_icon);
+ const Icon = getProjectIcon(project.project_icon); 
 
   /* ── Archive ─────────────────────────────────────────────── */
   const handleArchiveButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {