feat: add ability to remove team members

## Changes
- Add DELETE /api/v1/auth/users/:userId endpoint (admin + superadmin)
- Add deleteUserById service method with role hierarchy enforcement
- Superadmins can remove admins and regular users
- Admins can only remove regular users
- No one can remove superadmins, demo users, or themselves via this endpoint
- Add "Remove user" button with confirmation dialog on edit user page
- Allow admins to view user details and access the edit user page
- Add i18n strings for remove user button and confirmation dialog

## Access control
- superadmin -> can remove admin, user
- admin -> can remove user only
- admin cannot remove superadmin or other admins (enforced on both backend and frontend)

client/src/Pages/Account/EditUser/index.tsx

@@ -14,9 +14,14 @@ import type { UserRole, User } from "@/Types/User";
 import { useParams } from "react-router-dom";
 import { useTheme } from "@mui/material";
 import { useEditUserForm } from "@/Hooks/useEditUserForm";
-import { useGet, usePatch } from "@/Hooks/UseApi";
+import { useGet, usePatch, useDelete } from "@/Hooks/UseApi";
 import type { EditUserFormData } from "@/Validation/editUser";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { DialogInput } from "@/Components/inputs/Dialog";
+import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/Types/state";
 
 interface RoleOption {
 	id: UserRole;
@@ -29,6 +34,12 @@ const EditUserPage = () => {
 	const { userId } = useParams<{ userId: string }>();
 	const { resolver, defaults } = useEditUserForm();
 	const { patch, loading: isSaving } = usePatch();
+	const { deleteFn, loading: isDeleting } = useDelete();
+	const navigate = useNavigate();
+	const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+	const isAdmin = useIsAdmin();
+	const isSuperAdmin = useIsSuperAdmin();
+	const currentUser = useSelector((state: RootState) => state.auth.user);
 
 	const { data: user, isLoading } = useGet<User>(`/auth/users/${userId}`);
 
@@ -60,6 +71,21 @@ const EditUserPage = () => {
 		setValue("role", newRoles, { shouldValidate: true });
 	};
 
+	const canDeleteUser =
+		isAdmin &&
+		userId !== currentUser?.id &&
+		!user?.role?.includes("superadmin") &&
+		!user?.role?.includes("demo") &&
+		(isSuperAdmin || user?.role?.every((r) => r !== "admin" && r !== "superadmin"));
+
+	const handleDeleteUser = async () => {
+		const result = await deleteFn(`/auth/users/${userId}`);
+		if (result) {
+			setShowDeleteDialog(false);
+			navigate("/account", { state: { tab: "team" } });
+		}
+	};
+
 	const onSubmit = async (data: EditUserFormData) => {
 		await patch(`/auth/users/${userId}`, data);
 	};
@@ -165,17 +191,45 @@ const EditUserPage = () => {
 							</Stack>
 						}
 					/>
-					<Button
-						type="submit"
-						variant="contained"
-						color="primary"
-						loading={isSaving}
-						sx={{ alignSelf: "flex-end", minWidth: 100 }}
+					<Stack
+						direction="row"
+						justifyContent={canDeleteUser ? "space-between" : "flex-end"}
+						width="100%"
 					>
-						{t("common.buttons.save")}
-					</Button>
+						{canDeleteUser && (
+							<Button
+								variant="contained"
+								color="error"
+								onClick={() => setShowDeleteDialog(true)}
+								sx={{ minWidth: 100 }}
+							>
+								{t("pages.editUser.buttons.removeUser")}
+							</Button>
+						)}
+						<Button
+							type="submit"
+							variant="contained"
+							color="primary"
+							loading={isSaving}
+							sx={{ minWidth: 100 }}
+						>
+							{t("common.buttons.save")}
+						</Button>
+					</Stack>
 				</Stack>
 			</form>
+			<DialogInput
+				open={showDeleteDialog}
+				title={t("pages.editUser.dialog.removeUser.title")}
+				content={t("pages.editUser.dialog.removeUser.content", {
+					name: `${user?.firstName} ${user?.lastName}`,
+				})}
+				onCancel={() => setShowDeleteDialog(false)}
+				onConfirm={handleDeleteUser}
+				confirmColor="error"
+				confirmText={t("pages.editUser.buttons.removeUser")}
+				loading={isDeleting}
+			/>
 		</BasePage>
 	);
 };

client/src/Pages/Account/components/TeamTable.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Table } from "@/Components/design-elements";
 import type { Header } from "@/Components/design-elements/Table";
-import { useIsSuperAdmin } from "@/Hooks/useIsAdmin";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import type { User } from "@/Types/User";
 
 interface TeamTableProps {
@@ -13,7 +13,7 @@ interface TeamTableProps {
 export const TeamTable = ({ users }: TeamTableProps) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	const isSuperAdmin = useIsSuperAdmin();
+	const isAdmin = useIsAdmin();
 
 	const headers: Header<User>[] = [
 		{
@@ -45,7 +45,7 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 	];
 
 	const handleRowClick = (row: User) => {
-		if (isSuperAdmin) {
+		if (isAdmin) {
 			navigate(`/account/team/${row.id}`);
 		}
 	};
@@ -54,7 +54,7 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 		<Table
 			headers={headers}
 			data={users}
-			onRowClick={isSuperAdmin ? handleRowClick : undefined}
+			onRowClick={isAdmin ? handleRowClick : undefined}
 		/>
 	);
 };

client/src/locales/en.json

@@ -619,6 +619,15 @@
 					"title": "Roles",
 					"description": "Assign roles to the user. Multiple roles can be selected."
 				}
+			},
+			"buttons": {
+				"removeUser": "Remove user"
+			},
+			"dialog": {
+				"removeUser": {
+					"title": "Remove user",
+					"content": "Are you sure you want to remove {{name}} from your team? This action cannot be undone."
+				}
 			}
 		},
 		"incidents": {

server/src/controllers/authController.ts

@@ -180,6 +180,20 @@ class AuthController {
 		}
 	};
 
+	deleteUserById = async (req: Request, res: Response, next: NextFunction) => {
+		try {
+			getUserByIdParamValidation.parse(req.params);
+			const targetUserId = req.params.userId;
+			await this.userService.deleteUserById(req.user, targetUserId);
+			return res.status(200).json({
+				success: true,
+				msg: "User removed successfully",
+			});
+		} catch (error) {
+			next(error);
+		}
+	};
+
 	getAllUsers = async (req: Request, res: Response, next: NextFunction) => {
 		try {
 			const allUsers = await this.userService.getAllUsers();

server/src/routes/authRoute.ts

@@ -26,9 +26,10 @@ class AuthRoutes {
 
 		this.router.get("/users", verifyJWT, isAllowed(["admin", "superadmin"]), this.authController.getAllUsers);
 		this.router.post("/users", verifyJWT, isAllowed(["superadmin"]), upload.single("profileImage"), this.authController.createUser);
-		this.router.get("/users/:userId", verifyJWT, isAllowed(["superadmin"]), this.authController.getUserById);
+		this.router.get("/users/:userId", verifyJWT, isAllowed(["admin", "superadmin"]), this.authController.getUserById);
 		this.router.patch("/users/:userId", verifyJWT, isAllowed(["superadmin"]), this.authController.editUserById);
 		this.router.patch("/users/:userId/password", verifyJWT, isAllowed(["superadmin"]), this.authController.editUserPasswordById);
+		this.router.delete("/users/:userId", verifyJWT, isAllowed(["admin", "superadmin"]), this.authController.deleteUserById);
 
 		this.router.patch("/user", verifyJWT, upload.single("profileImage"), this.authController.editUser);
 		this.router.delete("/user", verifyJWT, this.authController.deleteUser);

server/src/service/business/userService.ts

@@ -29,6 +29,7 @@ export interface IUserService {
 	validateRecovery(recoveryToken: string): Promise<void>;
 	resetPassword(password: string, recoveryToken: string): Promise<{ user: User; token: string }>;
 	deleteUser(user: User): Promise<void>;
+	deleteUserById(actor: User, targetUserId: string): Promise<void>;
 	getAllUsers(): Promise<User[]>;
 	getUserById(roles: UserRole[], userId: string): Promise<User>;
 	editUserById(userId: string, patch: Partial<User>): Promise<void>;
@@ -357,13 +358,53 @@ export class UserService implements IUserService {
 		await this.usersRepository.deleteById(userId);
 	};
 
+	deleteUserById = async (actor: User, targetUserId: string) => {
+		if (actor.id === targetUserId) {
+			throw new AppError({ message: "Cannot delete your own account from here", service: SERVICE_NAME, method: "deleteUserById", status: 400 });
+		}
+
+		const targetUser = await this.usersRepository.findById(targetUserId);
+
+		if (targetUser.teamId !== actor.teamId) {
+			throw new AppError({ message: "User is not on your team", service: SERVICE_NAME, method: "deleteUserById", status: 403 });
+		}
+
+		if (targetUser.role.includes("demo")) {
+			throw new AppError({ message: "Demo user cannot be deleted", service: SERVICE_NAME, method: "deleteUserById", status: 400 });
+		}
+
+		const actorRoles = actor.role;
+		const targetRoles = targetUser.role;
+
+		// Check actor can manage all of target's roles
+		for (const targetRole of targetRoles) {
+			const canManage = actorRoles.some((actorRole) => canManageRole(actorRole, targetRole));
+			if (!canManage) {
+				throw new AppError({
+					message: "You do not have permission to remove this user",
+					service: SERVICE_NAME,
+					method: "deleteUserById",
+					status: 403,
+				});
+			}
+		}
+
+		await this.usersRepository.deleteById(targetUserId);
+
+		this.logger.info({
+			message: `User ${targetUserId} deleted by ${actor.id}`,
+			service: SERVICE_NAME,
+			method: "deleteUserById",
+		});
+	};
+
 	getAllUsers = async () => {
 		return await this.usersRepository.findAll();
 	};
 
 	getUserById = async (roles: any, userId: any) => {
-		if (!roles.includes("superadmin")) {
-			throw new AppError({ message: "User is not a superadmin", service: SERVICE_NAME, status: 403 });
+		if (!roles.includes("superadmin") && !roles.includes("admin")) {
+			throw new AppError({ message: "Insufficient permissions", service: SERVICE_NAME, status: 403 });
 		}
 		const user = await this.usersRepository.findById(userId);