Created the possibility to delete a user

src/constants/userPermissions.ts

@@ -8,4 +8,11 @@ export const PERMISSIONS = {
 		owner: ["developer", "owner"],
 		developer: ["developer"],
 	},
+	deleteUser: {
+		student: ["teacher", "admin", "developer", "owner"],
+		teacher: ["admin", "developer", "owner"],
+		admin: ["owner", "developer"],
+		owner: ["developer", "owner"],
+		developer: ["developer"],
+	},
 };

src/pages/(admin)/Lists/UserList.tsx

@@ -1,20 +1,12 @@
 import useUsers from "@/hooks/useUsers";
-import {Type} from "@/interfaces/user";
+import {Type, User} from "@/interfaces/user";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {useState} from "react";
-import {BsCheck} from "react-icons/bs";
+import {BsCheck, BsPerson, BsTrash} from "react-icons/bs";
 
-type TableUser = {
-	id: string;
-	name: string;
-	email: string;
-	type: Type;
-	isVerified: boolean;
-};
-
-const columnHelper = createColumnHelper<TableUser>();
+const columnHelper = createColumnHelper<User>();
 
 export default function UserList() {
 	const {users} = useUsers();
@@ -34,7 +26,7 @@ export default function UserList() {
 			cell: (info) => capitalize(info.getValue()),
 		}),
 		columnHelper.accessor("isVerified", {
-			header: "Verification Status",
+			header: "Verification",
 			cell: (info) => (
 				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
 					<div
@@ -48,6 +40,22 @@ export default function UserList() {
 				</div>
 			),
 		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: User}}) => {
+				return (
+					<div className="flex gap-4">
+						<div data-tip="Change Type" className="cursor-pointer tooltip">
+							<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+						<div data-tip="Delete" className="cursor-pointer tooltip">
+							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+					</div>
+				);
+			},
+		},
 	];
 
 	const table = useReactTable({
@@ -62,7 +70,7 @@ export default function UserList() {
 				{table.getHeaderGroups().map((headerGroup) => (
 					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => (
-							<th className="py-4" key={header.id}>
+							<th className="py-4 px-4 text-left" key={header.id}>
 								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 							</th>
 						))}
@@ -71,9 +79,9 @@ export default function UserList() {
 			</thead>
 			<tbody className="px-2">
 				{table.getRowModel().rows.map((row) => (
-					<tr className="bg-white rounded-lg shadow py-2" key={row.id}>
+					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
 						{row.getVisibleCells().map((cell) => (
-							<td className="px-4 py-2" key={cell.id}>
+							<td className="px-4 py-2 items-center w-fit" key={cell.id}>
 								{flexRender(cell.column.columnDef.cell, cell.getContext())}
 							</td>
 						))}

src/pages/api/user.ts

@@ -1,8 +1,9 @@
+import {PERMISSIONS} from "@/constants/userPermissions";
 import {app} from "@/firebase";
 import {User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import {getAuth} from "firebase/auth";
-import {doc, getDoc, getFirestore} from "firebase/firestore";
+import {deleteDoc, doc, getDoc, getFirestore} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {NextApiRequest, NextApiResponse} from "next";
 
@@ -13,10 +14,46 @@ export default withIronSessionApiRoute(user, sessionOptions);
 
 async function user(req: NextApiRequest, res: NextApiResponse) {
 	if (req.method === "GET") return get(req, res);
+	if (req.method === "DELETE") return del(req, res);
 
 	res.status(404).json(undefined);
 }
 
+async function del(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const docUser = await getDoc(doc(db, "users", req.session.user.id));
+	if (!docUser.exists()) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const user = docUser.data() as User;
+
+	const docTargetUser = await getDoc(doc(db, "users", id));
+	if (!docTargetUser.exists()) {
+		res.status(404).json({ok: false});
+		return;
+	}
+
+	const targetUser = docTargetUser.data() as User;
+
+	const permission = PERMISSIONS.deleteUser[targetUser.type];
+	if (!permission.includes(user.type)) {
+		res.status(403).json({ok: false});
+		return;
+	}
+
+	await deleteDoc(doc(db, "users", id));
+
+	res.json({...user, id: req.session.user.id});
+}
+
 async function get(req: NextApiRequest, res: NextApiResponse) {
 	if (req.session.user) {
 		const docUser = await getDoc(doc(db, "users", req.session.user.id));