Used a already set constant instead of creating a new function

src/components/Navbar.tsx

@@ -9,6 +9,7 @@ import moment from "moment";
 import MobileMenu from "./MobileMenu";
 import {useState} from "react";
 import {Type} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 
 interface Props {
 	user: User;
@@ -43,15 +44,6 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 		return today.add(7, "days").isAfter(momentDate);
 	};
 
-	const uppercaseFirstLetter = (string: Type) => string.charAt(0).toUpperCase() + string.slice(1);
-
-	const displayRole = (type: Type) => {
-		switch (type) {
-			case "agent": return 'Country Manager';
-			default: return uppercaseFirstLetter(type);
-		}
-	}
-
 	return (
 		<>
 			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
@@ -79,7 +71,9 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 					)}
 					<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
 						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
-						<span className="text-right -md:hidden">{user.name} | {displayRole(user.type)}</span>
+						<span className="text-right -md:hidden">
+							{user.name} | {USER_TYPE_LABELS[user.type]}
+						</span>
 					</Link>
 					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
 						<BsList className="text-mti-purple-light w-8 h-8" />