Add Inactive Country manager

src/dashboards/Admin.tsx

@@ -148,6 +148,26 @@ export default function AdminDashboard({user}: Props) {
 		</>
 	);
 
+	const InactiveCountryManagerList = () => {
+		const filter = (x: User) => x.type === "agent" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+
+		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">Inactive Country Managers ({users.filter(filter).length})</h2>
+				</div>
+
+				<UserList user={user} filters={[filter]} />
+			</>
+		);
+	}
+
 	const InactiveStudentsList = () => {
 		const filter = (x: User) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
 
@@ -235,6 +255,16 @@ export default function AdminDashboard({user}: Props) {
 					}
 					color="rose"
 				/>
+				<IconCard
+					onClick={() => setPage("inactiveCountryManagers")}
+					Icon={BsPerson}
+					label="Inactive Country Managers"
+					value={
+						users.filter((x) => x.type === "agent" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
+							.length
+					}
+					color="rose"
+				/>
 				<IconCard
 					onClick={() => setPage("inactiveCorporate")}
 					Icon={BsPerson}
@@ -453,7 +483,9 @@ export default function AdminDashboard({user}: Props) {
 			{page === "agents" && <AgentsList />}
 			{page === "inactiveStudents" && <InactiveStudentsList />}
 			{page === "inactiveCorporate" && <InactiveCorporateList />}
+			{page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
 			{page === "" && <DefaultDashboard />}
+			
 		</>
 	);
 }