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">
+        <div className='flex justify-between mb-3.5 '>
-          Members
+          <h3 className="font-bold text-base text-black">
-        </h3>
+            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 ${
+            className={`flex items-center justify-between py-3 ${idx < project.interns.length - 1 ? 'border-b border-gray-300' : ''
-              idx < project.interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
+              }`}
-            }`}
           >
             <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 = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
-    console.log('Trigger modal / halaman tambah tugas');
-  };
 
   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 
+        <button
-          onClick={handleAddTask}
+          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 ${
+              className={`flex items-center justify-between py-4 group ${idx < project.tasks.length - 1 ? 'border-b border-gray-100' : ''
-                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">

src/index.css

@@ -12,6 +12,25 @@
   color: black;
 }
 
+@theme {
+  /* Dasar Warna Gelap */
+  --color-background: #e9e3e3;
+  --color-foreground: #1e282c;
+
+  --color-card: #f3f3f3;
+  --color-card-hover: #d5d5d5;
+
+  --color-primary: #6d180d;
+  --color-primary-foreground: #ffffff;
+
+  --color-border: #a8a9aa;
+
+  --radius: 0.7rem;
+
+  --color-success: #12950d;
+  --color-danger: #c62611;
+}
+
 .container {
   padding-inline: calc(var(--spacing) * 14);
   padding-block: calc(var(--spacing) * 12);
@@ -28,7 +47,11 @@
 }
 
 .box {
-
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
+              0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
 .page-title {
@@ -44,4 +67,74 @@
   font-size: var(--text-sm) /* 0.875rem = 14px */;
   color: var(--color-gray-500);
   margin-top: calc(var(--spacing) * 1)
+}
+
+/* Selector utama untuk elemen dialog */
+dialog.custom-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 2rem);
+  max-width: 540px;
+  max-height: calc(100vh - 4rem);
+  border-radius: 1rem; /* 16px */
+  border: 1px solid #f3f4f6; /* border-gray-100 */
+  background-color: #ffffff;
+  padding: 1.5rem; /* 24px */
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
+  
+  /* Animasi (Masuk) */
+  animation: fadeInZoom 200ms ease-out forwards;
+}
+
+/* Pseudo-element untuk Backdrop (Latar belakang gelap) */
+dialog.custom-dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.4); /* bg-black/40 */
+  backdrop-filter: blur(4px); /* backdrop-blur-sm */
+}
+
+/* Keyframes untuk animasi Tailwind (animate-in fade-in zoom-in-95) */
+@keyframes fadeInZoom {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  
+  /* Padding default untuk layar kecil (px-6 py-4) */
+  padding-left: 1.5rem;   /* 24px */
+  padding-right: 1.5rem;  /* 24px */
+  padding-top: 1rem;      /* 16px */
+  padding-bottom: 1rem;   /* 16px */
+  
+  border-bottom: 1px solid #f3f4f6; /* border-gray-100 */
+}
+
+/* Breakpoint Medium (md:) - Aktif saat lebar layar >= 768px */
+@media (min-width: 768px) {
+  .box {
+    
+  }
+  
+  .dialog-header {
+    /* Perubahan padding untuk layar desktop (md:px-8 md:py-5) */
+    padding-left: 2rem;     /* 32px */
+    padding-right: 2rem;    /* 32px */
+    padding-top: 1.25rem;   /* 20px */
+    padding-bottom: 1.25rem;/* 20px */
+  }
 }