feat: update project task card to use new task type and improve navigation

fix: update project card to reflect actual tasks done from project data

feat: enhance task form components to accept project ID for submissions

refactor: clean up certificate detail page by removing unused elements

chore: streamline certificate generation page by removing unnecessary navigation

refactor: update certificate list page to use dynamic project data

feat: improve interns management page with API integration and better state handling

feat: add modal for assigning interns to projects with project selection

feat: create a new component for displaying project cards in certificate list

fix: correct import paths in create project dialog component

refactor: enhance project hooks to include task filtering and refetch capabilities

fix: update mock certificate data to reflect correct status

feat: extend certificate types to include new fields for better tracking

feat: add task_done field to project types for improved task management

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

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState } from "react";
 import { X } from "lucide-react";
-import { LuUserPlus, LuMail, LuBriefcase, LuFolderOpen } from "react-icons/lu";
+import { LuUserPlus, LuMail, LuFolderOpen } from "react-icons/lu";
+import { useAssignMember, useProjects } from "../../../../hooks/useProjects";
 
 interface AddInternsModalProps {
   isOpen: boolean;
@@ -12,8 +13,11 @@ export default function AddInternsModal({ isOpen, onClose }: AddInternsModalProp
 
   // Form States
   const [email, setEmail] = useState("");
-  const [position, setPosition] = useState("");
-  const [projectName, setProjectName] = useState("");
+  const [selectedProjectId, setSelectedProjectId] = useState<string>("");
+
+  // Hooks
+  const { assign, loading: assigning, error: assignError } = useAssignMember();
+  const { projects, loading: loadingProjects } = useProjects("active");
 
   useEffect(() => {
     const dialog = dialogRef.current;
@@ -39,11 +43,29 @@ export default function AddInternsModal({ isOpen, onClose }: AddInternsModalProp
     };
   }, [isOpen, onClose]);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  // Reset form saat modal dibuka kembali
+  useEffect(() => {
+    if (isOpen) {
+      setEmail("");
+      setSelectedProjectId("");
+    }
+  }, [isOpen]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const payload = { email, position, projectName };
-    console.log("Adding Intern:", payload);
-    alert("Intern Added Successfully!");
+
+    // Catatan: useAssignMember memerlukan id_user (number), bukan email.
+    // Endpoint /project-api/assign-member menerima { id_project: number, id_user: number }.
+    // Untuk implementasi berbasis email, perlu endpoint tambahan atau lookup user by email.
+    // Saat ini form ini dikomen karena tidak ada lookup email → id_user di service.
+
+    // Contoh penggunaan jika id_user sudah diketahui:
+    // const res = await assign({ id_project: Number(selectedProjectId), id_user: userId });
+    // if (res !== null) {
+    //   onClose();
+    // }
+
+    alert(`Assign intern "${email}" ke project ID ${selectedProjectId} — perlu lookup id_user dari email via backend.`);
     onClose();
   };
 
@@ -69,7 +91,7 @@ export default function AddInternsModal({ isOpen, onClose }: AddInternsModalProp
 
       {/* Form Body */}
       <form onSubmit={handleSubmit} className="bg-gray-100 px-6 py-6 space-y-4 overflow-y-auto flex-1">
-        
+
         {/* Email Address */}
         <div className="space-y-1.5">
           <label className="text-xs font-bold tracking-wide text-foreground">
@@ -90,29 +112,30 @@ export default function AddInternsModal({ isOpen, onClose }: AddInternsModalProp
           </div>
         </div>
 
-        {/* Position */}
+        {/* Project Selection */}
         <div className="space-y-1.5">
           <label className="text-xs font-bold tracking-wide text-foreground">
-            Position
+            Project
           </label>
           <div className="relative">
             <span className="absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none text-border">
-              <LuBriefcase className="w-4 h-4 stroke-[2]" />
+              <LuFolderOpen className="w-4 h-4 stroke-[2]" />
             </span>
             <select
               required
-              value={position}
-              onChange={(e) => setPosition(e.target.value)}
-              className={`w-full pl-10 pr-9 py-2.5 bg-white text-sm font-medium appearance-none cursor-pointer border border-border rounded-radius focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-foreground`}
+              value={selectedProjectId}
+              onChange={(e) => setSelectedProjectId(e.target.value)}
+              disabled={loadingProjects}
+              className="w-full pl-10 pr-9 py-2.5 bg-white text-sm font-medium appearance-none cursor-pointer border border-border rounded-radius focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-foreground disabled:opacity-60"
             >
-              <option value="" disabled>Select position</option>
-              <option value="frontend">Frontend Developer</option>
-              <option value="backend">Backend Developer</option>
-              <option value="fullstack">Fullstack Developer</option>
-              <option value="designer">UI/UX Designer</option>
-              <option value="mobile">Mobile Developer</option>
-              <option value="devops">DevOps Engineer</option>
-              <option value="qa">QA Engineer</option>
+              <option value="" disabled>
+                {loadingProjects ? "Memuat projects..." : "Pilih project"}
+              </option>
+              {projects.map((project) => (
+                <option key={project.id} value={project.id}>
+                  {project.project_name}
+                </option>
+              ))}
             </select>
             <span className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-border">
               <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
@@ -122,33 +145,15 @@ export default function AddInternsModal({ isOpen, onClose }: AddInternsModalProp
           </div>
         </div>
 
-        {/* Project Name */}
-        <div className="space-y-1.5">
-          <label className="text-xs font-bold tracking-wide text-foreground">
-            Project Name
-          </label>
-          <div className="relative">
-            <span className="absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none text-border">
-              <LuFolderOpen className="w-4 h-4 stroke-[2]" />
-            </span>
-            <select
-              required
-              value={projectName}
-              onChange={(e) => setProjectName(e.target.value)}
-              className={`w-full pl-10 pr-9 py-2.5 bg-white text-sm font-medium appearance-none cursor-pointer border border-border rounded-radius focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-foreground`}
-            >
-              <option value="" disabled>Select project assignment</option>
-              <option value="internify">Internify Project</option>
-              <option value="rekrutmen">Rekrutmen Digital Platform</option>
-              <option value="ecommerce">E-Commerce Analytics Dashboard</option>
-            </select>
-            <span className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-border">
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-              </svg>
-            </span>
-          </div>
-        </div>
+        {/* Field Position dikomentari — tidak ada dalam payload assign-member */}
+        {/* <div className="space-y-1.5">
+          <label className="text-xs font-bold tracking-wide text-foreground">Position</label>
+          <select>...</select>
+        </div> */}
+
+        {assignError && (
+          <p className="text-xs text-red-600 font-medium">{assignError}</p>
+        )}
 
         <div className="h-px bg-border/30" />
 
@@ -163,10 +168,11 @@ export default function AddInternsModal({ isOpen, onClose }: AddInternsModalProp
           </button>
           <button
             type="submit"
-            className="flex-1 py-2.5 text-sm font-bold text-white bg-primary hover:bg-danger rounded-radius shadow-md flex items-center justify-center gap-2 transition-colors"
+            disabled={assigning}
+            className="flex-1 py-2.5 text-sm font-bold text-white bg-primary hover:bg-danger rounded-radius shadow-md flex items-center justify-center gap-2 transition-colors disabled:opacity-60"
           >
             <LuUserPlus className="w-4 h-4 stroke-[2.5]" />
-            Add Member
+            {assigning ? "Assigning..." : "Add Member"}
           </button>
         </div>