fix: show delete confirm dialog when delete project member

frontend/messages/en.json

@@ -285,7 +285,8 @@
     "add_member": "Add member",
     "user_name_or_email": "User name or email",
     "close": "Close",
-    "add": "Add"
+    "add": "Add",
+    "are_you_sure": "Are you sure you want to delete member?"
   },
   "Settings": {
     "project_management": "Project Management",

frontend/messages/ja.json

@@ -284,7 +284,8 @@
     "add_member": "メンバーの追加",
     "user_name_or_email": "ユーザー名またはメールアドレス",
     "close": "閉じる",
-    "add": "追加"
+    "add": "追加",
+    "are_you_sure": "メンバーを削除してもよろしいですか?"
   },
   "Settings": {
     "project_management": "プロジェクト管理",

frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx

@@ -4,11 +4,12 @@ import { useState, useEffect, useContext } from 'react';
 import { Button } from '@nextui-org/react';
 import { Plus } from 'lucide-react';
 import { MemberType, UserType } from '@/types/user';
-import { MembersMessages } from '@/types/members';
+import { MembersMessages } from '@/types/member';
 import { TokenContext } from '@/utils/TokenProvider';
 import MembersTable from './MembersTable';
 import AddMemberDialog from './AddMemberDialog';
 import { fetchProjectMembers, addMember, deleteMember, updateMember } from './membersControl';
+import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 
 type Props = {
   projectId: string;
@@ -48,9 +49,25 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
     setIsDialogOpen(false);
   };
 
-  const handleDeleteMember = async (userDeleted: UserType) => {
+  // delete confirm dialog
-    await deleteMember(context.token.access_token, userDeleted.id, projectId);
+  const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
-    setMembers(members.filter((member) => member.User.id !== userDeleted.id));
+  const [deleteMemberId, setDeleteMemberId] = useState<number | null>(null);
+  const closeDeleteConfirmDialog = () => {
+    setIsDeleteConfirmDialogOpen(false);
+    setDeleteMemberId(null);
+  };
+
+  const onDeleteClick = (memberId: number) => {
+    setDeleteMemberId(memberId);
+    setIsDeleteConfirmDialogOpen(true);
+  };
+
+  const onConfirm = async () => {
+    if (deleteMemberId) {
+      await deleteMember(context.token.access_token, deleteMemberId, projectId);
+      setMembers(members.filter((member) => member.User.id !== deleteMemberId));
+      closeDeleteConfirmDialog();
+    }
   };
 
   const handleChangeRole = async (userEdit: UserType, role: number) => {
@@ -84,7 +101,7 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
         members={members}
         isDisabled={!context.isProjectManager(Number(projectId))}
         onChangeRole={handleChangeRole}
-        onDeleteMember={handleDeleteMember}
+        onDeleteMember={onDeleteClick}
         messages={messages}
       />
 
@@ -95,6 +112,15 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
         onAddMember={handleAddMember}
         messages={messages}
       />
+
+      <DeleteConfirmDialog
+        isOpen={isDeleteConfirmDialogOpen}
+        onCancel={closeDeleteConfirmDialog}
+        onConfirm={onConfirm}
+        closeText={messages.close}
+        confirmText={messages.areYouSure}
+        deleteText={messages.delete}
+      />
     </div>
   );
 }

frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx

@@ -23,7 +23,7 @@ type Props = {
   members: MemberType[];
   isDisabled: boolean;
   onChangeRole: (userEdit: UserType, role: number) => void;
-  onDeleteMember: (userDeleted: UserType) => void;
+  onDeleteMember: (deletedUserId: number) => void;
   messages: SettingsMessages;
 };
 
@@ -92,7 +92,7 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
             isDisabled={isDisabled}
             color="danger"
             variant="light"
-            onClick={() => onDeleteMember(member.User)}
+            onClick={() => onDeleteMember(member.User.id)}
           >
             {messages.deleteMember}
           </Button>

frontend/src/app/[locale]/projects/[projectId]/members/page.tsx

@@ -19,6 +19,7 @@ export default function Page({ params }: { params: { projectId: string; locale:
     userNameOrEmail: t('user_name_or_email'),
     close: t('close'),
     add: t('add'),
+    areYouSure: t('are_you_sure'),
   };
 
   return (

frontend/types/member.ts

@@ -14,4 +14,5 @@ export type MembersMessages = {
   userNameOrEmail: string;
   close: string;
   add: string;
+  areYouSure: string;
 };