Created a list of payments

src/components/Sidebar.tsx

@@ -1,7 +1,17 @@
 import clsx from "clsx";
 import {IconType} from "react-icons";
 import {MdSpaceDashboard} from "react-icons/md";
-import {BsFileEarmarkText, BsClockHistory, BsPencil, BsGraphUp, BsChevronBarRight, BsChevronBarLeft, BsShieldFill, BsCloudFill} from "react-icons/bs";
+import {
+	BsFileEarmarkText,
+	BsClockHistory,
+	BsPencil,
+	BsGraphUp,
+	BsChevronBarRight,
+	BsChevronBarLeft,
+	BsShieldFill,
+	BsCloudFill,
+	BsCurrencyDollar,
+} from "react-icons/bs";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
 import {FaAward} from "react-icons/fa";
@@ -109,6 +119,16 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
+				{userType === "developer" && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCurrencyDollar}
+						label="Payment Record"
+						path={path}
+						keyPath="/payment-record"
+						isMinimized={isMinimized}
+					/>
+				)}
 			</div>
 			<div className="xl:hidden -xl:flex flex-col gap-3">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />

src/hooks/usePayments.tsx

@@ -0,0 +1,24 @@
+import {Payment} from "@/interfaces/paypal";
+import {Group, User} from "@/interfaces/user";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function usePayments() {
+	const [payments, setPayments] = useState<Payment[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<Payment[]>("/api/payments")
+			.then((response) => {
+				return setPayments(response.data);
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, []);
+
+	return {payments, isLoading, isError, reload: getData};
+}

src/interfaces/paypal.ts

@@ -21,3 +21,14 @@ export interface Package {
 }
 
 export type DurationUnit = "weeks" | "days" | "months" | "years";
+
+export interface Payment {
+	id: string;
+	corporate: string;
+	agent?: string;
+	agentCommission: number;
+	agentValue: number;
+	currency: string;
+	value: number;
+	isPaid: boolean;
+}

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

@@ -131,7 +131,7 @@ export default function ExamList({user}: {user: User}) {
 				{table.getHeaderGroups().map((headerGroup) => (
 					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => (
-							<th className="py-4" key={header.id}>
+							<th className="p-4 text-left" key={header.id}>
 								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 							</th>
 						))}

src/pages/api/groups/[id].ts

@@ -11,9 +11,9 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-	if (req.method === "GET") await get(req, res);
+	if (req.method === "GET") return await get(req, res);
-	if (req.method === "DELETE") await del(req, res);
+	if (req.method === "DELETE") return await del(req, res);
-	if (req.method === "PATCH") await patch(req, res);
+	if (req.method === "PATCH") return await patch(req, res);
 
 	res.status(404).json(undefined);
 }

src/pages/api/payments/[id].ts

@@ -0,0 +1,76 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, getDoc, doc, deleteDoc, setDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Group} from "@/interfaces/user";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return await get(req, res);
+	if (req.method === "DELETE") return await del(req, res);
+	if (req.method === "PATCH") return await patch(req, res);
+
+	res.status(404).json(undefined);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const snapshot = await getDoc(doc(db, "payments", id));
+
+	if (snapshot.exists()) {
+		res.status(200).json({...snapshot.data(), id: snapshot.id});
+	} else {
+		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 snapshot = await getDoc(doc(db, "payments", id));
+
+	const user = req.session.user;
+	if (user.type === "admin" || user.type === "developer") {
+		await deleteDoc(snapshot.ref);
+
+		res.status(200).json({ok: true});
+		return;
+	}
+
+	res.status(403).json({ok: false});
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+	const snapshot = await getDoc(doc(db, "payments", id));
+
+	const user = req.session.user;
+	if (user.type === "admin" || user.type === "developer") {
+		await setDoc(snapshot.ref, req.body, {merge: true});
+
+		return res.status(200).json({ok: true});
+	}
+
+	res.status(403).json({ok: false});
+}

src/pages/api/payments/index.ts

@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, setDoc, doc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Group} from "@/interfaces/user";
+import {Payment} from "@/interfaces/paypal";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	if (req.method === "GET") await get(req, res);
+	if (req.method === "POST") await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	const snapshot = await getDocs(collection(db, "payments"));
+
+	res.status(200).json(
+		snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})),
+	);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	const body = req.body as Payment;
+
+	await setDoc(doc(db, "payments", body.id), body);
+	res.status(200).json({ok: true});
+}

src/pages/payment-record.tsx

@@ -0,0 +1,224 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import useUser from "@/hooks/useUser";
+import {toast, ToastContainer} from "react-toastify";
+import Layout from "@/components/High/Layout";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import usePayments from "@/hooks/usePayments";
+import {Payment} from "@/interfaces/paypal";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {CURRENCIES} from "@/resources/paypal";
+import {BsTrash} from "react-icons/bs";
+import axios from "axios";
+import {useState} from "react";
+import {AgentUser, CorporateUser, User} from "@/interfaces/user";
+import UserCard from "@/components/UserCard";
+import Modal from "@/components/Modal";
+import clsx from "clsx";
+import useUsers from "@/hooks/useUsers";
+import Checkbox from "@/components/Low/Checkbox";
+
+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+	const user = req.session.user;
+
+	if (!user || !user.isVerified) {
+		res.setHeader("location", "/login");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
+	if (shouldRedirectHome(user) || !["admin", "developer"].includes(user.type)) {
+		res.setHeader("location", "/");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
+	return {
+		props: {user: req.session.user},
+	};
+}, sessionOptions);
+
+const columnHelper = createColumnHelper<Payment>();
+
+export default function PaymentRecord() {
+	const [selectedUser, setSelectedUser] = useState<User>();
+
+	const {user} = useUser({redirectTo: "/login"});
+	const {users} = useUsers();
+	const {payments, isLoading, reload} = usePayments();
+
+	const updatePayment = (payment: Payment, key: string, value: any) => {
+		axios
+			.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
+			.then(() => toast.success("Updated the payment"))
+			.finally(reload);
+	};
+
+	const deletePayment = (id: string) => {
+		if (!confirm(`Are you sure you want to delete this payment?`)) return;
+
+		axios
+			.delete(`/api/payments/${id}`)
+			.then(() => toast.success(`Deleted the "${id}" payment`))
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Exam not found!");
+					return;
+				}
+
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this exam!");
+					return;
+				}
+
+				toast.error("Something went wrong, please try again later.");
+			})
+			.finally(reload);
+	};
+
+	const defaultColumns = [
+		columnHelper.accessor("id", {
+			header: "ID",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("corporate", {
+			header: "Corporate",
+			cell: (info) => (
+				<div
+					className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
+					onClick={() => setSelectedUser(users.find((x) => x.id === info.row.original.corporate))}>
+					{(users.find((x) => x.id === info.row.original.corporate) as CorporateUser)?.corporateInformation.companyInformation.name}
+				</div>
+			),
+		}),
+		columnHelper.accessor("value", {
+			header: "Amount",
+			cell: (info) => (
+				<span>
+					{info.getValue()} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
+				</span>
+			),
+		}),
+		columnHelper.accessor("agent", {
+			header: "Country Manager",
+			cell: (info) => (
+				<div
+					className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
+					onClick={() => setSelectedUser(users.find((x) => x.id === info.row.original.agent))}>
+					{(users.find((x) => x.id === info.row.original.agent) as AgentUser)?.name}
+				</div>
+			),
+		}),
+		columnHelper.accessor("agentCommission", {
+			header: "Commission",
+			cell: (info) => <>{info.getValue()}%</>,
+		}),
+		columnHelper.accessor("agentValue", {
+			header: "Commission Value",
+			cell: (info) => (
+				<span>
+					{info.getValue()} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
+				</span>
+			),
+		}),
+		columnHelper.accessor("isPaid", {
+			header: "Paid",
+			cell: (info) => (
+				<Checkbox isChecked={info.getValue()} onChange={(e) => updatePayment(info.row.original, "isPaid", e)}>
+					<span></span>
+				</Checkbox>
+			),
+		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: Payment}}) => {
+				return (
+					<div className="flex gap-4">
+						<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePayment(row.original.id)}>
+							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+					</div>
+				);
+			},
+		},
+	];
+
+	const table = useReactTable({
+		data: payments,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+
+	return (
+		<>
+			<Head>
+				<title>Payment Record | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			{user && (
+				<Layout user={user} className="gap-6">
+					<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
+						<>
+							{selectedUser && (
+								<div className="w-full flex flex-col gap-8">
+									<UserCard
+										loggedInUser={user}
+										onClose={(shouldReload) => {
+											setSelectedUser(undefined);
+											if (shouldReload) reload();
+										}}
+										user={selectedUser}
+									/>
+								</div>
+							)}
+						</>
+					</Modal>
+
+					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+						<thead>
+							{table.getHeaderGroups().map((headerGroup) => (
+								<tr key={headerGroup.id}>
+									{headerGroup.headers.map((header) => (
+										<th className="p-4 text-left" key={header.id}>
+											{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+										</th>
+									))}
+								</tr>
+							))}
+						</thead>
+						<tbody className="px-2">
+							{table.getRowModel().rows.map((row) => (
+								<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}>
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</td>
+									))}
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</Layout>
+			)}
+		</>
+	);
+}