Added more information for the Agent User

src/dashboards/Admin.tsx

@@ -7,7 +7,16 @@ import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
 import moment from "moment";
 import {useEffect, useState} from "react";
-import {BsArrowLeft, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPersonFillGear, BsPersonGear, BsPersonLinesFill} from "react-icons/bs";
+import {
+	BsArrowLeft,
+	BsBriefcaseFill,
+	BsGlobeCentralSouthAsia,
+	BsPerson,
+	BsPersonFill,
+	BsPersonFillGear,
+	BsPersonGear,
+	BsPersonLinesFill,
+} from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 import IconCard from "./IconCard";
@@ -95,6 +104,26 @@ export default function AdminDashboard({user}: Props) {
 		);
 	};
 
+	const AgentsList = () => {
+		const filter = (x: User) => x.type === "agent";
+
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Country Managers ({users.filter(filter).length})</h2>
+				</div>
+
+				<UserList user={user} filter={filter} />
+			</>
+		);
+	};
+
 	const CorporateList = () => (
 		<>
 			<div className="flex flex-col gap-4">
@@ -175,6 +204,13 @@ export default function AdminDashboard({user}: Props) {
 					onClick={() => setPage("corporate")}
 					color="purple"
 				/>
+				<IconCard
+					Icon={BsBriefcaseFill}
+					label="Country Managers"
+					value={users.filter((x) => x.type === "agent").length}
+					onClick={() => setPage("agents")}
+					color="purple"
+				/>
 				<IconCard
 					Icon={BsGlobeCentralSouthAsia}
 					label="Countries"
@@ -350,6 +386,7 @@ export default function AdminDashboard({user}: Props) {
 			{page === "students" && <StudentsList />}
 			{page === "teachers" && <TeachersList />}
 			{page === "corporate" && <CorporateList />}
+			{page === "agents" && <AgentsList />}
 			{page === "inactiveStudents" && <InactiveStudentsList />}
 			{page === "inactiveCorporate" && <InactiveCorporateList />}
 			{page === "" && <DefaultDashboard />}