Added the ability to create an agent using the CodeGenerator

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

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)}`}

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>
 

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>