Finished up the modal to create a payment and added the page to the sidebar

src/components/MobileMenu.tsx

@@ -103,6 +103,17 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
 										)}>
 										Record
 									</Link>
+									{["admin", "developer", "agent"].includes(user.type) && (
+										<Link
+											href="/payment-record"
+											className={clsx(
+												"transition ease-in-out duration-300 w-fit",
+												path === "/payment-record" &&
+													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+											)}>
+											Payment Record
+										</Link>
+									)}
 									{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
 										<Link
 											href="/settings"

src/components/Sidebar.tsx

@@ -99,6 +99,16 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				)}
 				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+				{["admin", "developer", "agent"].includes(userType || "") && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCurrencyDollar}
+						label="Payment Record"
+						path={path}
+						keyPath="/payment-record"
+						isMinimized={isMinimized}
+					/>
+				)}
 				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
 					<Nav
 						disabled={disableNavigation}
@@ -119,16 +129,6 @@ 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/interfaces/paypal.ts

@@ -31,4 +31,5 @@ export interface Payment {
 	currency: string;
 	value: number;
 	isPaid: boolean;
+	date: Date;
 }

src/pages/api/payments/index.ts

@@ -6,6 +6,8 @@ import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group} from "@/interfaces/user";
 import {Payment} from "@/interfaces/paypal";
+import {v4} from "uuid";
+import ShortUniqueId from "short-unique-id";
 
 const db = getFirestore(app);
 
@@ -35,6 +37,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 async function post(req: NextApiRequest, res: NextApiResponse) {
 	const body = req.body as Payment;
 
-	await setDoc(doc(db, "payments", body.id), body);
+	const shortUID = new ShortUniqueId();
+	await setDoc(doc(db, "payments", shortUID.randomUUID(8)), body);
 	res.status(200).json({ok: true});
 }

src/pages/payment-record.tsx

@@ -22,6 +22,8 @@ import Checkbox from "@/components/Low/Checkbox";
 import Button from "@/components/Low/Button";
 import Select from "react-select";
 import Input from "@/components/Low/Input";
+import ReactDatePicker from "react-datepicker";
+import moment from "moment";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -55,12 +57,13 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 const columnHelper = createColumnHelper<Payment>();
 
-const PaymentCreator = () => {
+const PaymentCreator = ({onClose, reload}: {onClose: () => void; reload: () => void}) => {
 	const [corporate, setCorporate] = useState<CorporateUser>();
 	const [price, setPrice] = useState<number>(0);
 	const [currency, setCurrency] = useState<string>("EUR");
 	const [commission, setCommission] = useState<number>(0);
 	const [referralAgent, setReferralAgent] = useState<AgentUser>();
+	const [date, setDate] = useState<Date>(new Date());
 
 	const {users} = useUsers();
 
@@ -72,21 +75,43 @@ const PaymentCreator = () => {
 		setReferralAgent(referralAgent as AgentUser | undefined);
 	}, [corporate, users]);
 
+	const submit = () => {
+		axios
+			.post(`/api/payments`, {
+				corporate: corporate?.id,
+				agent: referralAgent?.id,
+				agentCommission: commission,
+				agentValue: (commission / 100) * price,
+				currency,
+				value: price,
+				isPaid: false,
+				date: date.toISOString(),
+			})
+			.then(() => {
+				toast.success("New payment has been created successfully!");
+				reload();
+				onClose();
+			})
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!");
+			});
+	};
+
 	return (
 		<div className="flex flex-col gap-8">
 			<h1 className="text-2xl font-semibold">New Payment</h1>
-			<form className="flex flex-col gap-4">
+			<div className="flex flex-col gap-4">
-				<div className="flex flex-col gap-2">
+				<div className="flex flex-col gap-3">
 					<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
 					<Select
 						className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
 						options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
 							value: user.id,
 							meta: user,
-							label: `${user.corporateInformation.companyInformation.name} - ${user.email}`,
+							label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
 						}))}
 						defaultValue={{value: "undefined", label: "Select an account"}}
-						onChange={(value) => console.log((value as any)?.meta ?? undefined)}
+						onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
 						styles={{
 							control: (styles) => ({
 								...styles,
@@ -105,6 +130,7 @@ const PaymentCreator = () => {
 						}}
 					/>
 				</div>
+
 				<div className="flex flex-col gap-3 w-full">
 					<label className="font-normal text-base text-mti-gray-dim">Price *</label>
 					<div className="w-full grid grid-cols-5 gap-2">
@@ -139,6 +165,7 @@ const PaymentCreator = () => {
 						/>
 					</div>
 				</div>
+
 				<div className="flex gap-4 w-full">
 					<div className="flex flex-col w-full gap-3">
 						<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
@@ -156,6 +183,22 @@ const PaymentCreator = () => {
 						/>
 					</div>
 				</div>
+
+				<div className="flex gap-4">
+					<div className="flex flex-col w-full gap-3">
+						<label className="font-normal text-base text-mti-gray-dim">Date *</label>
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip",
+								"transition duration-300 ease-in-out",
+							)}
+							dateFormat="dd/MM/yyyy"
+							selected={moment(date).toDate()}
+							onChange={(date) => setDate(date ?? new Date())}
+						/>
+					</div>
+
 					<div className="flex flex-col w-full gap-3">
 						<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
 						<Input
@@ -167,7 +210,16 @@ const PaymentCreator = () => {
 							disabled
 						/>
 					</div>
-			</form>
+				</div>
+				<div className="flex w-full justify-end items-center gap-8 mt-4">
+					<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
+						Cancel
+					</Button>
+					<Button className="w-full max-w-[200px]" onClick={submit} disabled={!corporate || !price}>
+						Submit
+					</Button>
+				</div>
+			</div>
 		</div>
 	);
 };
@@ -178,7 +230,7 @@ export default function PaymentRecord() {
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
-	const {payments, isLoading, reload} = usePayments();
+	const {payments, reload} = usePayments();
 
 	const updatePayment = (payment: Payment, key: string, value: any) => {
 		axios
@@ -224,6 +276,10 @@ export default function PaymentRecord() {
 				</div>
 			),
 		}),
+		columnHelper.accessor("date", {
+			header: "Date",
+			cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
+		}),
 		columnHelper.accessor("value", {
 			header: "Amount",
 			cell: (info) => (
@@ -257,7 +313,9 @@ export default function PaymentRecord() {
 		columnHelper.accessor("isPaid", {
 			header: "Paid",
 			cell: (info) => (
-				<Checkbox isChecked={info.getValue()} onChange={(e) => updatePayment(info.row.original, "isPaid", e)}>
+				<Checkbox
+					isChecked={info.getValue()}
+					onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}>
 					<span></span>
 				</Checkbox>
 			),
@@ -268,9 +326,11 @@ export default function PaymentRecord() {
 			cell: ({row}: {row: {original: Payment}}) => {
 				return (
 					<div className="flex gap-4">
+						{user?.type !== "agent" && (
 							<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>
 				);
 			},
@@ -278,7 +338,7 @@ export default function PaymentRecord() {
 	];
 
 	const table = useReactTable({
-		data: payments,
+		data: (user?.type === "agent" ? payments.filter((p) => p.agent === user.id) : payments).sort((a, b) => moment(b.date).diff(moment(a.date))),
 		columns: defaultColumns,
 		getCoreRowModel: getCoreRowModel(),
 	});
@@ -315,14 +375,16 @@ export default function PaymentRecord() {
 					</Modal>
 
 					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
-						<PaymentCreator />
+						<PaymentCreator onClose={() => setIsCreatingPayment(false)} reload={reload} />
 					</Modal>
 
 					<div className="w-full flex flex-end justify-between p-2">
 						<h1 className="text-2xl font-semibold">Payment Record</h1>
+						{(user.type === "developer" || user.type === "admin") && (
 							<Button className="w-full max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
 								New Payment
 							</Button>
+						)}
 					</div>
 					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 						<thead>