feat: Implement task editing functionality and improve UI components

- Added EditTaskModal component for editing tasks.
- Integrated EditTaskModal into TaskTab for task editing.
- Refactored AddInternsDialog for better UI and functionality.
- Created AddInternsToProjects component for adding interns to projects.
- Enhanced CreateProjectDialog and CreateTaskDialog with improved styling.
- Introduced EditSubmissionTask component for editing submission tasks.
- Added ProtectedRoutes for route protection based on user roles.
- Implemented API utility for handling requests with authorization.
- Removed obsolete InternRoute and MentorRoute files.
- Updated global CSS styles for better responsiveness and aesthetics.

src/Pages/internify/intern/ProjectsPage.tsx

@@ -3,14 +3,14 @@ import { mockProjects } from '../../../lib/mockData'
 
 export default function ProjectsPage() {
   return (
-    <div className="">
+    <div>
       <div className="flex flex-col gap-1 mb-6">
         <span className="page-title">List Projects</span>
         <h1 className="page-title-desc">View assigned projects and track their progress.</h1>
       </div>
 
       {/* Grid card */}
-      <div className="flex flex-wrap gap-4">
+      <div className="grid grid-cols-1 gap-6 md:gap-4 md:grid-cols-3 lg:grid-cols-4">
         {mockProjects.map(project => (
           <ProjectCard key={project.id} {...project} />
         ))}

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

@@ -25,7 +25,7 @@ const ProjectCard = ({
   const navigate = useNavigate()
 
   return (
-    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 w-[230px] flex flex-col">
+    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col">
       {/* Thumbnail */}
       <div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden">
         {thumbnailUrl && (
@@ -36,7 +36,7 @@ const ProjectCard = ({
       {/* Content */}
       <div className="min-h-[180px] max-h-[210px] flex-1 flex flex-col justify-between py-3">
         <div className="px-3 flex flex-col gap-2">
-          <p className="text-sm font-semibold text-gray-800 leading-tight">{name}</p>
+          <p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">{name}</p>
 
           {/* Mentor */}
           <div className="flex items-center gap-2">

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

@@ -31,8 +31,8 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
     <aside 
       className={`
         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
-        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
+        lg:sticky lg:top-[50px] lg:h-[calc(100vh-73px)] lg:w-[250px] lg:translate-x-0 lg:z-8
+        fixed top-0 left-0 h-screen w-[270px] z-40 pt-5
         ${isOpen ? "translate-x-0" : "-translate-x-full"}
       `}
     >
@@ -49,7 +49,7 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
         {/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
         <button 
           onClick={closeSidebar} 
-          className="p-1 text-gray-500 hover:bg-gray-100 rounded-md md:hidden"
+          className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
         >
           <X className="w-5 h-5" />
         </button>