From 19f1a59feb3c265c2a637948c40f2868ac7244b0 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Mon, 30 Jun 2025 22:15:39 +0700
Subject: [PATCH] QUDO-273

---
 .../detail/[id]/component/users-card.tsx      | 74 +++++++++++++------
 1 file changed, 51 insertions(+), 23 deletions(-)

diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
index 53c2db0c..71c92924 100644
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
@@ -15,6 +15,7 @@ import { close, loading } from "@/config/swal";
 import { useParams } from "next/navigation";
 import { useToast } from "@/components/ui/use-toast";
 import { stringify } from "querystring";
+import { useRouter } from "@/i18n/routing";
 
 const assigneeOptions = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -26,8 +27,15 @@ const assigneeOptions = [
   },
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
+
+type UserOption = {
+  label: string;
+  value: string;
+};
+
 export default function UsersCard(props: { team: any; fetchData: () => void }) {
   const params = useParams();
+  const router = useRouter();
   const id = params?.id;
   const [openSearch, setOpenSearch] = useState(false);
   const [selectedUsers, setSelectedUsers] = useState<any>([]);
@@ -60,36 +68,56 @@ export default function UsersCard(props: { team: any; fetchData: () => void }) {
   const inviteHandle = () => {
     MySwal.fire({
       title: "Undang Pengguna Ke Kolom Diskusi?",
-      text: "",
       icon: "warning",
       showCancelButton: true,
-      cancelButtonColor: "#d33",
       confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
       confirmButtonText: "Simpan",
-    }).then((result) => {
+    }).then(async (result) => {
       if (result.isConfirmed) {
-        inviteUser();
+        const success = await inviteUser();
+        if (!success) {
+          await MySwal.fire({
+            title: "Gagal mengundang pengguna!",
+            text: "Silakan coba lagi.",
+            icon: "error",
+            confirmButtonText: "OK",
+          });
+        }
       }
     });
   };
 
-  async function inviteUser() {
-    const userId: any = [];
+  async function inviteUser(): Promise<boolean> {
+    try {
+      if (!selectedUsers || selectedUsers.length === 0) {
+        toast({ title: "Pilih user terlebih dahulu" });
+        return false;
+      }
 
-    selectedUsers?.map((user: any) => {
-      userId.push(user.id);
-    });
-    loading();
-    const res = await saveCollaborationTeams(String(id), userId);
+      const userIds = selectedUsers.map((user: any) => user.value);
+      loading();
 
-    if (res?.error) {
-      toast({ title: stringify(res?.message) });
+      const res = await saveCollaborationTeams(String(id), userIds);
+
+      close();
+
+      if (res?.error) {
+        toast({ title: String(res?.message) });
+        return false;
+      }
+
+      toast({ title: "Berhasil menambahkan user" });
+
+      props?.fetchData?.();
+      window.location.reload();
+
+      return true;
+    } catch (e) {
+      close();
+      toast({ title: "Terjadi kesalahan, coba lagi." });
       return false;
     }
-    close();
-
-    toast({ title: "Berhasil menambahkan user" });
-    props.fetchData();
   }
 
   return (
@@ -108,17 +136,17 @@ export default function UsersCard(props: { team: any; fetchData: () => void }) {
       {openSearch && (
         <div className="flex flex-col">
           <Select
-            className="react-select my-2 transition-shadow"
-            classNamePrefix="select"
-            options={allUser}
             isMulti
-            onChange={(selectedOption) => setSelectedUsers(selectedOption)}
+            options={allUser}
+            value={selectedUsers}
+            onChange={(selected) => setSelectedUsers(selected as UserOption[])}
             placeholder="Select users"
           />
+
           {selectedUsers?.length > 0 && (
-            <div className="flex justify-end">
+            <div className="flex justify-end mt-2">
               <Button color="primary" size="sm" onClick={inviteHandle}>
-                Invie
+                Invite
               </Button>
             </div>
           )}