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} />