From d412c1616f650494a1d6ea47ce157e6377da7d17 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Wed, 15 Nov 2023 11:17:44 +0000
Subject: [PATCH] Updated the expiry date to show as red

---
 src/pages/(admin)/CodeGenerator.tsx  |  8 ++++----
 src/pages/(admin)/ExamLoader.tsx     |  4 ++--
 src/pages/(admin)/Lists/UserList.tsx | 16 +++++++++++++++-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/pages/(admin)/CodeGenerator.tsx b/src/pages/(admin)/CodeGenerator.tsx
index c615f79a..a39202aa 100644
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -59,28 +59,28 @@ export default function CodeGenerator({user}: {user: User}) {
 			{user && (
 				<div className="grid -md:grid-cols-2 md:grid-cols-1 place-items-center 2xl:grid-cols-2 gap-4">
 					<Button
-						className="w-44 2xl:w-48"
+						className="w-44 md:w-48"
 						variant="outline"
 						onClick={() => generateCode("student")}
 						disabled={!PERMISSIONS.generateCode.student.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
 						Student
 					</Button>
 					<Button
-						className="w-44 2xl:w-48"
+						className="w-44 md:w-48"
 						variant="outline"
 						onClick={() => generateCode("teacher")}
 						disabled={!PERMISSIONS.generateCode.teacher.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
 						Teacher
 					</Button>
 					<Button
-						className="w-44 2xl:w-48"
+						className="w-44 md:w-48"
 						variant="outline"
 						onClick={() => generateCode("corporate")}
 						disabled={!PERMISSIONS.generateCode.corporate.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
 						Admin
 					</Button>
 					<Button
-						className="w-44 2xl:w-48"
+						className="w-44 md:w-48"
 						variant="outline"
 						onClick={() => generateCode("owner")}
 						disabled={!PERMISSIONS.generateCode.owner.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
diff --git a/src/pages/(admin)/ExamLoader.tsx b/src/pages/(admin)/ExamLoader.tsx
index c332d3a4..e9482068 100644
--- a/src/pages/(admin)/ExamLoader.tsx
+++ b/src/pages/(admin)/ExamLoader.tsx
@@ -69,8 +69,8 @@ export default function ExamLoader() {
 						</RadioGroup.Option>
 					))}
 				</RadioGroup>
-				<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" className="-md:!w-full md:!w-44 2xl:!w-full" />
-				<Button disabled={!selectedModule || !examId} isLoading={isLoading} className="-md:!w-full md:!w-44 2xl:!w-full">
+				<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" className="w-full" />
+				<Button disabled={!selectedModule || !examId} isLoading={isLoading} className="w-full">
 					Load Exam
 				</Button>
 			</form>
diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx
index 57b271db..94fcdef3 100644
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -28,6 +28,16 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
 	const {users, reload} = useUsers();
 	const {groups} = useGroups(user ? user.id : undefined);
 
+	const expirationDateColor = (date: Date) => {
+		const momentDate = moment(date);
+		const today = moment(new Date());
+
+		if (today.isAfter(momentDate)) return "!text-mti-red-light  font-bold line-through";
+		if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
+		if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
+		if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
+	};
+
 	useEffect(() => {
 		if (user && users) {
 			const filterUsers =
@@ -315,7 +325,11 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
 					<SorterArrow name="expiryDate" />
 				</button>
 			) as any,
-			cell: (info) => (!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")),
+			cell: (info) => (
+				<span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
+					{!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
+				</span>
+			),
 		}),
 		columnHelper.accessor("isVerified", {
 			header: (