From 8072cefbe61af97f50b61c75d60e1c18df76799b Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 21 Nov 2023 13:24:07 +0000
Subject: [PATCH] Added the ability to create an agent using the CodeGenerator

---
 src/components/MobileMenu.tsx            |  6 ++--
 src/components/ProfileSummary.tsx        |  3 +-
 src/components/Sidebar.tsx               |  6 ++--
 src/components/UserCard.tsx              | 12 +++----
 src/pages/(admin)/BatchCodeGenerator.tsx | 43 +++++++-----------------
 src/pages/(admin)/CodeGenerator.tsx      | 43 +++++++-----------------
 src/pages/(admin)/Lists/UserList.tsx     |  3 +-
 src/pages/{manage.tsx => settings.tsx}   |  6 ++--
 src/resources/user.ts                    | 10 ++++++
 9 files changed, 55 insertions(+), 77 deletions(-)
 rename src/pages/{manage.tsx => settings.tsx} (90%)
 create mode 100644 src/resources/user.ts

diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 1ce19c68..631624ed 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -105,12 +105,12 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
 									</Link>
 									{user.type !== "student" && (
 										<Link
-											href="/manage"
+											href="/settings"
 											className={clsx(
 												"transition ease-in-out duration-300 w-fit",
-												path === "/manage" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+												path === "/settings" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											Management
+											Settings
 										</Link>
 									)}
 									<Link
diff --git a/src/components/ProfileSummary.tsx b/src/components/ProfileSummary.tsx
index 87f9faba..095b6202 100644
--- a/src/components/ProfileSummary.tsx
+++ b/src/components/ProfileSummary.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import {User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import {calculateAverageLevel} from "@/utils/score";
 import {capitalize} from "lodash";
 import {ReactElement} from "react";
@@ -28,7 +29,7 @@ export default function ProfileSummary({user, items}: Props) {
 				<div className="flex -md:flex-col justify-between w-full gap-8">
 					<div className="flex flex-col gap-2 py-2">
 						<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
-						<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
+						<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
 					</div>
 					<ProgressBar
 						label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 01b1d817..e7268132 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -93,9 +93,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsShieldFill}
-						label="Management"
+						label="Settings"
 						path={path}
-						keyPath="/manage"
+						keyPath="/settings"
 						isMinimized={isMinimized}
 					/>
 				)}
@@ -107,7 +107,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
 				{userType !== "student" && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Management" path={path} keyPath="/manage" isMinimized={true} />
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
 				)}
 			</div>
 
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index 51c97c45..241e09b3 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -17,6 +17,7 @@ import Input from "./Low/Input";
 import ProfileSummary from "./ProfileSummary";
 import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
+import {USER_TYPE_LABELS} from "@/resources/user";
 
 const expirationDateColor = (date: Date) => {
 	const momentDate = moment(date);
@@ -255,12 +256,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 									defaultValue={user.type}
 									onChange={(e) => setType(e.target.value as typeof user.type)}
 									className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-									<option value="student">Student</option>
-									<option value="teacher">Teacher</option>
-									<option value="corporate">Corporate</option>
-									<option value="agent">Country Agent</option>
-									<option value="admin">Admin</option>
-									<option value="developer">Developer</option>
+									{Object.keys(USER_TYPE_LABELS).map((type) => (
+										<option key={type} value={type}>
+											{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+										</option>
+									))}
 								</select>
 							</div>
 						</div>
diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx
index c1d09349..6f314808 100644
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -2,6 +2,7 @@ import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
 import {PERMISSIONS} from "@/constants/userPermissions";
 import {Type, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
@@ -17,6 +18,7 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [expiryDate, setExpiryDate] = useState<Date | null>(null);
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+	const [type, setType] = useState<Type>("student");
 
 	const {openFilePicker, filesContent} = useFilePicker({
 		accept: ".txt",
@@ -108,37 +110,18 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 			)}
 			<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
 			{user && (
-				<div className="grid -md:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 gap-4 place-items-center">
-					<Button
-						className="w-44 2xl:w-48"
-						variant="outline"
-						onClick={() => generateCode("student")}
-						disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.student.includes(user.type)}>
-						Student
-					</Button>
-					<Button
-						className="w-44 2xl:w-48"
-						variant="outline"
-						onClick={() => generateCode("teacher")}
-						disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.teacher.includes(user.type)}>
-						Teacher
-					</Button>
-					<Button
-						className="w-44 2xl:w-48"
-						variant="outline"
-						onClick={() => generateCode("corporate")}
-						disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.corporate.includes(user.type)}>
-						Corporate
-					</Button>
-					<Button
-						className="w-44 2xl:w-48"
-						variant="outline"
-						onClick={() => generateCode("admin")}
-						disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.admin.includes(user.type)}>
-						Admin
-					</Button>
-				</div>
+				<select
+					defaultValue="student"
+					onChange={(e) => setType(e.target.value as typeof user.type)}
+					className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+					{Object.keys(USER_TYPE_LABELS).map((type) => (
+						<option key={type} value={type}>
+							{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+						</option>
+					))}
+				</select>
 			)}
+			<Button onClick={() => generateCode(type)}>Generate & Send</Button>
 		</div>
 	);
 }
diff --git a/src/pages/(admin)/CodeGenerator.tsx b/src/pages/(admin)/CodeGenerator.tsx
index 2b610888..1911d19b 100644
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -2,6 +2,7 @@ import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
 import {PERMISSIONS} from "@/constants/userPermissions";
 import {Type, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
@@ -15,6 +16,7 @@ export default function CodeGenerator({user}: {user: User}) {
 	const [generatedCode, setGeneratedCode] = useState<string>();
 	const [expiryDate, setExpiryDate] = useState<Date | null>(null);
 	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+	const [type, setType] = useState<Type>("student");
 
 	useEffect(() => {
 		if (user && (user.type === "corporate" || user.type === "teacher")) {
@@ -57,36 +59,16 @@ export default function CodeGenerator({user}: {user: User}) {
 		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
 			<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
 			{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 md:w-48"
-						variant="outline"
-						onClick={() => generateCode("student")}
-						disabled={!PERMISSIONS.generateCode.student.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
-						Student
-					</Button>
-					<Button
-						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 md:w-48"
-						variant="outline"
-						onClick={() => generateCode("corporate")}
-						disabled={!PERMISSIONS.generateCode.corporate.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
-						Corporate
-					</Button>
-					<Button
-						className="w-44 md:w-48"
-						variant="outline"
-						onClick={() => generateCode("admin")}
-						disabled={!PERMISSIONS.generateCode.admin.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
-						Admin
-					</Button>
-				</div>
+				<select
+					defaultValue="student"
+					onChange={(e) => setType(e.target.value as typeof user.type)}
+					className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+					{Object.keys(USER_TYPE_LABELS).map((type) => (
+						<option key={type} value={type}>
+							{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+						</option>
+					))}
+				</select>
 			)}
 			{user && (user.type === "developer" || user.type === "admin") && (
 				<>
@@ -111,6 +93,7 @@ export default function CodeGenerator({user}: {user: User}) {
 					)}
 				</>
 			)}
+			<Button onClick={() => generateCode(type)}>Generate</Button>
 			<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
 			<div
 				className={clsx(
diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx
index bef8e264..f1f0b9e2 100644
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -16,6 +16,7 @@ import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
+import {USER_TYPE_LABELS} from "@/resources/user";
 
 const columnHelper = createColumnHelper<User>();
 
@@ -316,7 +317,7 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
 					<SorterArrow name="type" />
 				</button>
 			) as any,
-			cell: (info) => capitalize(info.getValue()),
+			cell: (info) => USER_TYPE_LABELS[info.getValue()],
 		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
diff --git a/src/pages/manage.tsx b/src/pages/settings.tsx
similarity index 90%
rename from src/pages/manage.tsx
rename to src/pages/settings.tsx
index 532c5fb0..12314371 100644
--- a/src/pages/manage.tsx
+++ b/src/pages/settings.tsx
@@ -50,7 +50,7 @@ export default function Admin() {
 	return (
 		<>
 			<Head>
-				<title>Management Panel | EnCoach</title>
+				<title>Settings Panel | EnCoach</title>
 				<meta
 					name="description"
 					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -61,8 +61,8 @@ export default function Admin() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user} className="gap-6">
-					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
-						{user.email === "tiago.ribeiro@ecrop.dev" ? <ExamGenerator /> : <ExamLoader />}
+					<section className="w-full flex -lg:flex-col -xl:gap-2 gap-8 justify-between">
+						<ExamLoader />
 						<CodeGenerator user={user} />
 						<BatchCodeGenerator user={user} />
 					</section>
diff --git a/src/resources/user.ts b/src/resources/user.ts
new file mode 100644
index 00000000..340123bc
--- /dev/null
+++ b/src/resources/user.ts
@@ -0,0 +1,10 @@
+import {Type} from "@/interfaces/user";
+
+export const USER_TYPE_LABELS: {[key in Type]: string} = {
+	student: "Student",
+	teacher: "Teacher",
+	corporate: "Corporate",
+	agent: "Country Manager",
+	admin: "Admin",
+	developer: "Developer",
+};