feat: user deactivation

apps/client/src/features/workspace/components/members/components/members-action-menu.tsx

@@ -1,19 +1,57 @@
 import { Menu, ActionIcon, Text } from "@mantine/core";
 import React from "react";
-import { IconDots, IconTrash } from "@tabler/icons-react";
+import { IconDots, IconTrash, IconUserOff, IconUserCheck } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
-import { useDeleteWorkspaceMemberMutation } from "@/features/workspace/queries/workspace-query.ts";
+import {
+  useDeleteWorkspaceMemberMutation,
+  useDeactivateWorkspaceMemberMutation,
+  useActivateWorkspaceMemberMutation,
+} from "@/features/workspace/queries/workspace-query.ts";
 import { useTranslation } from "react-i18next";
 import useUserRole from "@/hooks/use-user-role.tsx";
 
 interface Props {
   userId: string;
+  deactivatedAt: Date | null;
 }
-export default function MemberActionMenu({ userId }: Props) {
+export default function MemberActionMenu({ userId, deactivatedAt }: Props) {
   const { t } = useTranslation();
   const deleteWorkspaceMemberMutation = useDeleteWorkspaceMemberMutation();
+  const deactivateMutation = useDeactivateWorkspaceMemberMutation();
+  const activateMutation = useActivateWorkspaceMemberMutation();
   const { isAdmin } = useUserRole();
 
+  const isDeactivated = !!deactivatedAt;
+
+  const onDeactivate = async () => {
+    await deactivateMutation.mutateAsync({ userId });
+  };
+
+  const onActivate = async () => {
+    await activateMutation.mutateAsync({ userId });
+  };
+
+  const openDeactivateModal = () =>
+    modals.openConfirmModal({
+      title: isDeactivated ? t("Activate member") : t("Deactivate member"),
+      children: (
+        <Text size="sm">
+          {isDeactivated
+            ? t("Are you sure you want to activate this workspace member?")
+            : t(
+                "Are you sure you want to deactivate this workspace member? They will no longer be able to access this workspace.",
+              )}
+        </Text>
+      ),
+      centered: true,
+      labels: {
+        confirm: isDeactivated ? t("Activate") : t("Deactivate"),
+        cancel: t("Cancel"),
+      },
+      confirmProps: { color: isDeactivated ? "blue" : "orange" },
+      onConfirm: isDeactivated ? onActivate : onDeactivate,
+    });
+
   const onRevoke = async () => {
     await deleteWorkspaceMemberMutation.mutateAsync({ userId });
   };
@@ -51,6 +89,22 @@ export default function MemberActionMenu({ userId }: Props) {
         </Menu.Target>
 
         <Menu.Dropdown>
+          <Menu.Item
+            onClick={openDeactivateModal}
+            leftSection={
+              isDeactivated ? (
+                <IconUserCheck size={16} />
+              ) : (
+                <IconUserOff size={16} />
+              )
+            }
+            disabled={!isAdmin}
+          >
+            {isDeactivated ? t("Activate member") : t("Deactivate member")}
+          </Menu.Item>
+
+          <Menu.Divider />
+
           <Menu.Item
             c="red"
             onClick={openRevokeModal}

apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx

@@ -85,7 +85,13 @@ export default function WorkspaceMembersTable() {
                     </Group>
                   </Table.Td>
                   <Table.Td>
-                    <Badge variant="light">{t("Active")}</Badge>
+                    {user.deactivatedAt ? (
+                      <Badge variant="light" color="orange">
+                        {t("Deactivated")}
+                      </Badge>
+                    ) : (
+                      <Badge variant="light">{t("Active")}</Badge>
+                    )}
                   </Table.Td>
                   <Table.Td>
                     <RoleSelectMenu
@@ -98,7 +104,12 @@ export default function WorkspaceMembersTable() {
                     />
                   </Table.Td>
                   <Table.Td>
-                    {isAdmin && <MemberActionMenu userId={user.id} />}
+                    {isAdmin && (
+                      <MemberActionMenu
+                        userId={user.id}
+                        deactivatedAt={user.deactivatedAt}
+                      />
+                    )}
                   </Table.Td>
                 </Table.Tr>
               ))

apps/client/src/features/workspace/queries/workspace-query.ts

@@ -17,6 +17,8 @@ import {
   getWorkspacePublicData,
   getAppVersion,
   deleteWorkspaceMember,
+  deactivateWorkspaceMember,
+  activateWorkspaceMember,
 } from "@/features/workspace/services/workspace-service";
 import { IPagination, QueryParams } from "@/lib/types.ts";
 import { notifications } from "@mantine/notifications";
@@ -81,6 +83,52 @@ export function useDeleteWorkspaceMemberMutation() {
   });
 }
 
+export function useDeactivateWorkspaceMemberMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    void,
+    Error,
+    {
+      userId: string;
+    }
+  >({
+    mutationFn: (data) => deactivateWorkspaceMember(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["workspaceMembers"],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
+
+export function useActivateWorkspaceMemberMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    void,
+    Error,
+    {
+      userId: string;
+    }
+  >({
+    mutationFn: (data) => activateWorkspaceMember(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["workspaceMembers"],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
+
 export function useChangeMemberRoleMutation() {
   const queryClient = useQueryClient();
 

apps/client/src/features/workspace/services/workspace-service.ts

@@ -42,6 +42,18 @@ export async function deleteWorkspaceMember(data: {
   await api.post("/workspace/members/delete", data);
 }
 
+export async function deactivateWorkspaceMember(data: {
+  userId: string;
+}): Promise<void> {
+  await api.post("/workspace/members/deactivate", data);
+}
+
+export async function activateWorkspaceMember(data: {
+  userId: string;
+}): Promise<void> {
+  await api.post("/workspace/members/activate", data);
+}
+
 export async function updateWorkspace(data: Partial<IWorkspace>) {
   const req = await api.post<IWorkspace>("/workspace/update", data);
   return req.data;