Updated the expiry date to be based on the expiry date

src/pages/entities/[id]/index.tsx

@@ -2,6 +2,7 @@
 import CardList from "@/components/High/CardList";
 import Layout from "@/components/High/Layout";
 import Select from "@/components/Low/Select";
+import Checkbox from "@/components/Low/Checkbox";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
 import { useListSearch } from "@/hooks/useListSearch";
@@ -27,7 +28,10 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
 import { useEffect, useMemo, useState } from "react";
+import ReactDatePicker from "react-datepicker";
+
 import {
+	BsCheck,
 	BsChevronLeft,
 	BsClockFill,
 	BsEnvelopeFill,
@@ -43,6 +47,15 @@ import {
 } from "react-icons/bs";
 import { toast } from "react-toastify";
 
+const expirationDateColor = (date: Date) => {
+	const momentDate = moment(date);
+	const today = moment(new Date());
+
+	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
+	if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
+	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
+};
+
 export const getServerSideProps = withIronSessionSsr(async ({ req, params }) => {
 	const user = req.session.user as User;
 
@@ -88,6 +101,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 	const [isAdding, setIsAdding] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+	const [expiryDate, setExpiryDate] = useState(entity?.expiryDate)
 
 	const router = useRouter();
 
@@ -99,6 +113,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 	const canRemoveMembers = useEntityPermission(user, entity, "remove_from_entity")
 
 	const canAssignRole = useEntityPermission(user, entity, "assign_to_role")
+	const canPay = useEntityPermission(user, entity, 'pay_entity')
 
 	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
 
@@ -166,6 +181,23 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 			.finally(() => setIsLoading(false));
 	};
 
+	const updateExpiryDate = () => {
+		if (!isAdmin(user)) return;
+
+		setIsLoading(true);
+		axios
+			.patch(`/api/entities/${entity.id}`, { expiryDate })
+			.then(() => {
+				toast.success("The entity has been updated successfully!");
+				router.replace(router.asPath);
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
 	const editLicenses = () => {
 		if (!isAdmin(user)) return;
 
@@ -289,7 +321,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 			<Layout user={user}>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
-						<div className="flex items-end justify-between">
+						<div className="flex items-start justify-between">
 							<div className="flex items-center gap-2">
 								<Link
 									href="/entities"
@@ -298,6 +330,20 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 								</Link>
 								<h2 className="font-bold text-2xl">{entity.label} {isAdmin(user) && `- ${entity.licenses || 0} licenses`}</h2>
 							</div>
+
+							{!isAdmin(user) && canPay && (
+								<Link
+									href="/payment"
+									className={clsx(
+										"p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+										"transition duration-300 ease-in-out",
+										!entity.expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(entity.expiryDate),
+										"bg-white border-mti-gray-platinum",
+									)}>
+									{!entity.expiryDate && "Unlimited"}
+									{entity.expiryDate && moment(entity.expiryDate).format("DD/MM/YYYY")}
+								</Link>
+							)}
 						</div>
 						<div className="flex items-center gap-2">
 							<button
@@ -332,6 +378,61 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 							</button>
 						</div>
 					</div>
+
+					{isAdmin(user) && (
+						<>
+							<Divider />
+
+							<div className="w-full flex justify-between items-center">
+								<div className="flex items-center gap-4 w-full">
+									{!!expiryDate && (
+										<ReactDatePicker
+											className={clsx(
+												"p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"hover:border-mti-purple tooltip",
+												!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
+												"transition duration-300 ease-in-out",
+											)}
+											filterDate={(date) => moment(date).isAfter(new Date())}
+											dateFormat="dd/MM/yyyy"
+											selected={expiryDate ? moment(expiryDate).toDate() : null}
+											onChange={(date) => setExpiryDate(date)}
+										/>
+									)}
+
+									{!expiryDate && (
+										<div
+											className={clsx(
+												"p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"transition duration-300 ease-in-out",
+												!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
+												"bg-white border-mti-gray-platinum",
+											)}
+										>
+											Unlimited
+										</div>
+									)}
+
+									<Checkbox
+										isChecked={!!expiryDate}
+										onChange={(checked: boolean) => setExpiryDate(checked ? entity.expiryDate || new Date() : null)}
+									>
+										Enable expiry date
+									</Checkbox>
+								</div>
+
+
+								<button
+									onClick={updateExpiryDate}
+									disabled={expiryDate === entity.expiryDate}
+									className="flex w-fit text-nowrap items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+									<BsCheck />
+									<span className="text-xs">Apply Change</span>
+								</button>
+							</div>
+						</>
+					)}
+
 					<Divider />
 					<div className="flex items-center justify-between mb-4">
 						<span className="font-semibold text-xl">Members ({users.length})</span>

src/pages/entities/[id]/roles/[role].tsx

@@ -98,7 +98,9 @@ const ENTITY_MANAGEMENT: PermissionLayout[] = [
 	{ label: "Delete Entity Role", key: "delete_entity_role" },
 	{ label: "Download Statistics Report", key: "download_statistics_report" },
 	{ label: "Edit Grading System", key: "edit_grading_system" },
-	{ label: "View Student Performance", key: "view_student_performance" }
+	{ label: "View Student Performance", key: "view_student_performance" },
+	{ label: "Pay for Entity", key: "pay_entity" },
+	{ label: "View Payment Record", key: "view_payment_record" }
 ]
 
 const ASSIGNMENT_MANAGEMENT: PermissionLayout[] = [