Added the ability to view how many students and teachers an admin has

src/components/UserCard.tsx

@@ -24,7 +24,12 @@ const expirationDateColor = (date: Date) => {
 	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 };
 
-const UserCard = ({onClose, ...user}: User & {onClose: (reload?: boolean) => void}) => {
+const UserCard = ({
+	onClose,
+	onViewStudents,
+	onViewTeachers,
+	...user
+}: User & {onClose: (reload?: boolean) => void; onViewStudents?: () => void; onViewTeachers?: () => void}) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
 	const {stats} = useStats(user.id);
 
@@ -215,13 +220,27 @@ const UserCard = ({onClose, ...user}: User & {onClose: (reload?: boolean) => voi
 				</div>
 			</section>
 
-			<div className="flex gap-4 justify-end mt-4 w-full">
-				<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
-					Close
-				</Button>
-				<Button onClick={updateUser} className="w-full max-w-[200px]">
-					Update
-				</Button>
+			<div className="flex gap-4 justify-between mt-4 w-full">
+				<div className="self-start flex gap-4 justify-start items-center w-full">
+					{onViewStudents && (
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
+							View Students
+						</Button>
+					)}
+					{onViewTeachers && (
+						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
+							View Teachers
+						</Button>
+					)}
+				</div>
+				<div className="self-end flex gap-4 w-full justify-end">
+					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
+						Close
+					</Button>
+					<Button onClick={updateUser} className="w-full max-w-[200px]">
+						Update
+					</Button>
+				</div>
 			</div>
 		</>
 	);