feat(#170): add remove member functionality

src/api/teams/teams.api.ts

@@ -3,10 +3,13 @@ import {
   CreateTeamPayload,
   GetTeamByIdReqDto,
   GetTeamsDto,
+  GetUserRolesParams,
+  RemoveFromTeamParams,
   TeamActivityTimeline,
   TeamCreationCodeVerificationResponse,
   TeamDto,
   TTeamDto,
+  UserRolesDetails,
 } from './teams.type'
 
 export const TeamsApi = {
@@ -68,6 +71,26 @@ export const TeamsApi = {
       return data
     },
   },
+  removeFromTeam: {
+    key: ({ teamId, memberId }: RemoveFromTeamParams) => [
+      'TeamsApi.removeFromTeam',
+      teamId,
+      memberId,
+    ],
+    fn: async ({ teamId, memberId }: RemoveFromTeamParams): Promise<void> => {
+      await apiClient.delete(`/v1/teams/${teamId}/members/${memberId}`)
+    },
+  },
+  getUserRoles: {
+    key: ({ teamId, userId }: GetUserRolesParams) => ['TeamsApi.getUserRoles', teamId, userId],
+    fn: async ({ teamId, userId }: GetUserRolesParams): Promise<UserRolesDetails> => {
+      const { data } = await apiClient.get<UserRolesDetails>(
+        `/v1/teams/${teamId}/users/${userId}/roles`,
+      )
+      return data
+    },
+  },
+
   verifyTeamCreationCode: {
     key: ['TeamsApi.verifyTeamCreationCode'],
     fn: async ({ code }: { code: string }): Promise<TeamCreationCodeVerificationResponse> => {

src/api/teams/teams.enum.ts

@@ -0,0 +1,9 @@
+export enum TeamRoles {
+  OWNER = 'owner',
+  ADMIN = 'admin',
+  MEMBER = 'member',
+}
+
+export enum RolesScope {
+  TEAM = 'TEAM',
+}

src/api/teams/teams.type.ts

@@ -1,3 +1,5 @@
+import type { RolesScope, TeamRoles } from './teams.enum'
+
 export type TTeam = {
   id: string
   name: string
@@ -51,6 +53,8 @@ export enum TeamActivityActions {
   TEAM_CREATED = 'team_created',
   MEMBER_JOINED_TEAM = 'member_joined_team',
   MEMBER_ADDED_TO_TEAM = 'member_added_to_team',
+  MEMBER_REMOVED_FROM_TEAM = 'member_removed_from_team',
+  MEMBER_LEFT_TEAM = 'member_left_team',
 }
 
 export type BaseActivity = {
@@ -101,6 +105,16 @@ export type MemberJoinActivity = BaseActivity & {
   performed_by_name: string
 }
 
+export type RemoveTeamMemberActivity = BaseActivity & {
+  action: TeamActivityActions.MEMBER_REMOVED_FROM_TEAM
+  performed_by_name: string
+}
+
+export type MemberLeftTeamActivity = BaseActivity & {
+  action: TeamActivityActions.MEMBER_LEFT_TEAM
+  performed_by_name: string
+}
+
 export type TeamActivity =
   | TeamCreationActivity
   | TaskAssignActivity
@@ -109,11 +123,37 @@ export type TeamActivity =
   | ReassignExecutorActivity
   | AddMemberActivity
   | MemberJoinActivity
+  | RemoveTeamMemberActivity
+  | MemberLeftTeamActivity
 
 export type TeamActivityTimeline = {
   timeline: TeamActivity[]
 }
 
+export type TeamRole = {
+  role_id: string
+  role_name: TeamRoles
+  scope: RolesScope.TEAM
+  team_id: string
+  assigned_at: string
+}
+
+export type UserRolesDetails = {
+  team_id: string
+  user_id: string
+  roles: readonly TeamRole[]
+}
+
 export type TeamCreationCodeVerificationResponse = {
   message: string
 }
+
+export type RemoveFromTeamParams = {
+  teamId: string
+  memberId: string
+}
+
+export type GetUserRolesParams = {
+  teamId: string
+  userId: string
+}

src/components/teams/leave-team-button.tsx

@@ -0,0 +1,67 @@
+import { TasksApi } from '@/api/tasks/tasks.api'
+import { TeamsApi } from '@/api/teams/teams.api'
+import { Shimmer } from '@/components/common/shimmer'
+import { Button } from '@/components/ui/button'
+import { useAuth } from '@/hooks/useAuth'
+import { LeaveTeamDialog } from '@/modules/teams/components/leave-team-dialog'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useRouter } from '@tanstack/react-router'
+import { LogOut } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+export const LeaveTeamButton = ({ teamId }: { teamId: string }) => {
+  const router = useRouter()
+  const queryClient = useQueryClient()
+  const [showLeaveTeamDialog, setShowLeaveTeamDialog] = useState(false)
+
+  const { isLoading: isAuthLoading, user } = useAuth()
+  const leaveTeamMutation = useMutation({
+    mutationFn: TeamsApi.removeFromTeam.fn,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: TeamsApi.getTeams.key,
+      })
+      queryClient.invalidateQueries({
+        queryKey: TasksApi.getTasks.key({ teamId }),
+      })
+      setShowLeaveTeamDialog(false)
+      toast.success('Successfully left team')
+      router.navigate({
+        to: '/dashboard',
+        search: { status: undefined, tab: undefined, search: undefined },
+      })
+    },
+    onError: () => {
+      toast.error('Failed to leave team')
+    },
+  })
+  if (isAuthLoading) {
+    return <Shimmer />
+  }
+
+  const handleLeaveTeam = () => {
+    if (user?.id) {
+      leaveTeamMutation.mutate({ teamId, memberId: user.id })
+    } else {
+      toast.error('User ID not found')
+    }
+  }
+
+  return (
+    <LeaveTeamDialog
+      title="Leave Team"
+      description="Are you sure you want to leave this team? You will lose access to its tasks and members."
+      buttonText={leaveTeamMutation.isPending ? 'Leaving' : 'Leave Team'}
+      open={showLeaveTeamDialog}
+      onOpenChange={setShowLeaveTeamDialog}
+      onSubmit={handleLeaveTeam}
+      isSubmitting={leaveTeamMutation.isPending}
+    >
+      <Button variant="destructive" size="sm" className="mx-1">
+        <LogOut />
+        Leave Team
+      </Button>
+    </LeaveTeamDialog>
+  )
+}

src/components/teams/team-members.tsx

@@ -1,4 +1,6 @@
+import { TasksApi } from '@/api/tasks/tasks.api'
 import { TeamsApi } from '@/api/teams/teams.api'
+import { TeamRoles } from '@/api/teams/teams.enum'
 import { TTeamUser } from '@/api/teams/teams.type'
 import { Searchbar } from '@/components/common/searchbar'
 import { Shimmer } from '@/components/common/shimmer'
@@ -19,10 +21,13 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
+import { useAuth } from '@/hooks/useAuth'
 import { DateFormats, DateUtil } from '@/lib/date-util'
-import { useQuery } from '@tanstack/react-query'
+import { LeaveTeamDialog } from '@/modules/teams/components/leave-team-dialog'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { MoreVertical } from 'lucide-react'
 import { useMemo, useState } from 'react'
+import { toast } from 'sonner'
 
 const PocLabel = () => {
   return (
@@ -46,13 +51,24 @@ type TeamMembersProps = {
 
 export const TeamMembers = ({ teamId }: TeamMembersProps) => {
   const [searchQuery, setSearchQuery] = useState('')
+  const queryClient = useQueryClient()
+  const { user, isLoading: isAuthLoading } = useAuth()
+  const [activeDialogMemberId, setActiveDialogMemberId] = useState<string | null>(null)
 
   const { data, isLoading } = useQuery({
     queryKey: TeamsApi.getTeamById.key({ teamId, member: true }),
     queryFn: () => TeamsApi.getTeamById.fn({ teamId, member: true }),
   })
+  const userId = user?.id
+  const { data: userRole, isLoading: isUserRoleLoading } = useQuery({
+    queryKey: TeamsApi.getUserRoles.key({ teamId, userId: userId }),
+    queryFn: () => {
+      return TeamsApi.getUserRoles.fn({ teamId, userId })
+    },
+    enabled: !!userId,
+  })
+  const isAdmin = userRole?.roles.find((role) => role.role_name == TeamRoles.ADMIN)
 
-  const isAdmin = true
   const filteredMembers = useMemo(() => {
     if (!searchQuery) {
       return data?.users
@@ -70,6 +86,26 @@ export const TeamMembers = ({ teamId }: TeamMembersProps) => {
     setSearchQuery(searchValue)
   }
 
+  const removeMemberMutation = useMutation({
+    mutationFn: TeamsApi.removeFromTeam.fn,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: TeamsApi.getTeamById.key({ teamId, member: true }),
+      })
+      queryClient.invalidateQueries({
+        queryKey: TeamsApi.getTeams.key,
+      })
+      queryClient.invalidateQueries({
+        queryKey: TasksApi.getTasks.key(),
+      })
+      setActiveDialogMemberId(null)
+      toast.success('User removed Successfully')
+    },
+    onError: () => {
+      toast.error('Failed to remove member')
+    },
+  })
+
   return (
     <div>
       <div className="flex items-center justify-between pb-4">
@@ -96,7 +132,7 @@ export const TeamMembers = ({ teamId }: TeamMembersProps) => {
           </TableHeader>
 
           <TableBody>
-            {isLoading
+            {isLoading || isUserRoleLoading || isAuthLoading
               ? new Array(5).fill(0).map((_, index) => (
                   <TableRow key={index}>
                     <TableCell colSpan={5}>
@@ -137,7 +173,41 @@ export const TeamMembers = ({ teamId }: TeamMembersProps) => {
                           </DropdownMenuTrigger>
                           <DropdownMenuContent>
                             <DropdownMenuItem>Change Role</DropdownMenuItem>
-                            <DropdownMenuItem>Remove from team</DropdownMenuItem>
+                            {member.id !== user?.id &&
+                            member.id !== data?.created_by &&
+                            member.id !== data?.poc_id ? (
+                              <LeaveTeamDialog
+                                title="Remove Member"
+                                description="Are you sure you want to remove this member from the team? They will lose access to all tasks and team information."
+                                buttonText="Remove Member"
+                                open={activeDialogMemberId === member.id}
+                                onOpenChange={(open) => {
+                                  if (open) {
+                                    setActiveDialogMemberId(member.id)
+                                  } else {
+                                    setActiveDialogMemberId(null)
+                                  }
+                                }}
+                                onSubmit={() => {
+                                  removeMemberMutation.mutate({
+                                    teamId,
+                                    memberId: member.id,
+                                  })
+                                }}
+                                isSubmitting={removeMemberMutation.isPending}
+                              >
+                                <DropdownMenuItem
+                                  onSelect={(e) => {
+                                    e.preventDefault()
+                                    setActiveDialogMemberId(member.id)
+                                  }}
+                                >
+                                  Remove from team
+                                </DropdownMenuItem>
+                              </LeaveTeamDialog>
+                            ) : (
+                              <></>
+                            )}
                             <DropdownMenuItem>View Assigned tasks</DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>

src/lib/team-utils.ts

@@ -1,6 +1,15 @@
 import { TeamActivity, TeamActivityActions } from '@/api/teams/teams.type'
 import { TASK_STATUS_TO_TEXT_MAP } from '@/components/todos/todo-status-table'
-import { LucideIcon, Minus, Plus, RefreshCcw, UserPlus, Users, UsersRound } from 'lucide-react'
+import {
+  LucideIcon,
+  Minus,
+  Plus,
+  RefreshCcw,
+  UserMinus,
+  UserPlus,
+  Users,
+  UsersRound,
+} from 'lucide-react'
 import { DateFormats, DateUtil } from './date-util'
 
 type ActivityUIData = {
@@ -66,6 +75,20 @@ export function getActivityUIData(activity: TeamActivity): ActivityUIData | unde
         description: `${activity.performed_by_name} joined team ${activity.team_name}`,
         date,
       }
+    case TeamActivityActions.MEMBER_REMOVED_FROM_TEAM:
+      return {
+        icon: UserMinus,
+        title: 'Member removed from team',
+        description: `${activity.performed_by_name} removed a member from team ${activity.team_name}`,
+        date,
+      }
+    case TeamActivityActions.MEMBER_LEFT_TEAM:
+      return {
+        icon: UserMinus,
+        title: 'Member left team',
+        description: `${activity.performed_by_name} left the team ${activity.team_name}`,
+        date,
+      }
     default:
       return undefined
   }