apply dialog window and add current css

src/Pages/internify/mentor/ProjectsInternTab.tsx

@@ -1,6 +1,11 @@
+import { useState } from 'react';
 import type { Project, Intern } from '../../../lib/mockData';
+import { Plus } from 'lucide-react';
+import ManageInternsModal from './components/AddInternsDialog';
 
 export default function InternsTab({ project }: { project: Project }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
     <div>
       {/* Mentor */}
@@ -8,7 +13,7 @@ export default function InternsTab({ project }: { project: Project }) {
         <h3 className=" font-bold text-base text-[#1a1a1a] mb-3.5">
           Mentor
         </h3>
-        <div className="border-b border-[#eee] pb-4">
+        <div className="border-b border-gray-300 pb-4">
           <div className="flex items-center gap-3">
             <span className=" text-sm text-[#333]">
               {project.mentor}
@@ -19,15 +24,24 @@ export default function InternsTab({ project }: { project: Project }) {
 
       {/* Members */}
       <div>
-        <h3 className="font-bold text-base text-[#1a1a1a] mb-3.5">
-          Members
-        </h3>
+        <div className='flex justify-between mb-3.5 '>
+          <h3 className="font-bold text-base text-black">
+            Members
+          </h3>
+          <button 
+            onClick={() => setIsModalOpen(true)}
+            className='bg-gray-300 border border-gray-500 px-2 py-1 rounded-xl hover:bg-gray-400 transition-colors'
+          >
+            <span className='flex items-center gap-3 text-[14px]'>
+              <Plus className='w-3 h-3'/>Add
+            </span>
+          </button>
+        </div>
         {project.interns.map((intern: Intern, idx: number) => (
           <div
             key={idx}
-            className={`flex items-center justify-between py-3 ${
-              idx < project.interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
-            }`}
+            className={`flex items-center justify-between py-3 ${idx < project.interns.length - 1 ? 'border-b border-gray-300' : ''
+              }`}
           >
             <div className="flex items-center gap-3">
               <span className=" text-sm text-[#333]">
@@ -40,6 +54,10 @@ export default function InternsTab({ project }: { project: Project }) {
           </div>
         ))}
       </div>
+      {isModalOpen && <ManageInternsModal 
+        isOpen={isModalOpen} 
+        onClose={() => setIsModalOpen(false)} 
+      />}
     </div>
   );
 }

src/Pages/internify/mentor/TaskTab.tsx

@@ -1,11 +1,11 @@
 import type { Project, Task } from '../../../lib/mockData';
 import { ClipboardList, Pencil, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import CreateTaskModal from './components/CreateTaskDialog';
 
 export default function TaskTab({ project }: { project: Project }) {
-  
-  const handleAddTask = () => {
-    console.log('Trigger modal / halaman tambah tugas');
-  };
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleEditTask = (taskTitle: string) => {
     console.log('Edit task:', taskTitle);
@@ -20,9 +20,9 @@ export default function TaskTab({ project }: { project: Project }) {
       {/* Header Section */}
       <div className="flex justify-between items-center mb-6">
         <h2 className="text-3xl font-bold text-slate-800 tracking-tight">Tasks</h2>
-        
-        <button 
-          onClick={handleAddTask}
+
+        <button
+          onClick={() => setIsModalOpen(true)}
           className="bg-[#C0392B] hover:bg-[#A93226] text-white px-6 py-2.5 rounded-full font-bold text-sm transition-colors shadow-sm"
         >
           Add Task
@@ -37,9 +37,8 @@ export default function TaskTab({ project }: { project: Project }) {
           project.tasks.map((task: Task, idx: number) => (
             <div
               key={idx}
-              className={`flex items-center justify-between py-4 group ${
-                idx < project.tasks.length - 1 ? 'border-b border-gray-100' : ''
-              }`}
+              className={`flex items-center justify-between py-4 group ${idx < project.tasks.length - 1 ? 'border-b border-gray-100' : ''
+                }`}
             >
               {/* Task Title & Icon */}
               <div className="flex items-center gap-3 min-w-0">
@@ -51,14 +50,14 @@ export default function TaskTab({ project }: { project: Project }) {
 
               {/* Action Buttons (Edit & Delete) */}
               <div className="flex items-center gap-4 text-slate-600 shrink-0">
-                <button 
+                <button
                   onClick={() => handleEditTask(task.title)}
                   className="hover:text-blue-600 transition-colors p-1"
                   title="Edit Task"
                 >
                   <Pencil size={20} />
                 </button>
-                <button 
+                <button
                   onClick={() => handleDeleteTask(task.title)}
                   className="hover:text-red-600 transition-colors p-1"
                   title="Delete Task"
@@ -74,6 +73,12 @@ export default function TaskTab({ project }: { project: Project }) {
           </div>
         )}
       </div>
+      {isModalOpen &&
+        <CreateTaskModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+        />
+      }
     </div>
   );
 }

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

@@ -47,7 +47,7 @@ export default function ManageInternsModal({ isOpen, onClose }: ManageInternsMod
   return (
     <dialog
       ref={dialogRef}
-      className="fixed inset-0 m-auto flex flex-col w-[calc(100%-2rem)] max-w-[540px] max-h-[calc(100vh-4rem)] rounded-2xl border border-gray-100 bg-white p-6 shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm animate-in fade-in zoom-in-95 duration-200"
+      className="custom-dialog"
     >
       {/* Search Input Area */}
       <div className="relative flex items-center mb-4">

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

@@ -106,10 +106,10 @@ export default function CreateProjectModal({ isOpen, onClose }: CreateProjectMod
   return (
     <dialog
       ref={dialogRef}
-      className="fixed inset-0 m-auto flex flex-col w-[calc(100%-2rem)] max-w-[620px] max-h-[calc(100vh-4rem)] rounded-2xl border border-gray-100 bg-white p-0 shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm animate-in fade-in zoom-in-95 duration-200"
+      className="custom-dialog"
     >
       {/* Header Modal */}
-      <div className="flex items-start justify-between px-6 md:px-8 py-4 md:py-5 border-b border-gray-100">
+      <div className="dialog-header">
         <div>
           <h2 className="text-xl font-bold text-gray-900 tracking-tight">Create New Project</h2>
           <p className="text-xs text-gray-400 font-medium mt-0.5">

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

@@ -51,10 +51,10 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
   return (
     <dialog
       ref={dialogRef}
-      className="fixed inset-0 m-auto flex flex-col w-[calc(100%-2rem)] max-w-[480px] max-h-[calc(100vh-4rem)] rounded-2xl border border-gray-100 bg-white p-0 shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm animate-in fade-in zoom-in-95 duration-200"
+      className="custom-dialog"
     >
       {/* Header Modal */}
-      <div className="flex items-start justify-between px-6 py-5 border-b border-gray-50">
+      <div className="dialog-header">
         <div>
           <h2 className="text-xl font-bold text-[#B30000] tracking-tight">Create New Task</h2>
           <p className="text-xs text-gray-400 font-medium mt-0.5">