Did the same to all of the dashboards

src/dashboards/Teacher.tsx

@@ -63,11 +63,12 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 	const [showModal, setShowModal] = useState(false);
 
 	const {data: stats} = useFilterRecordsByUser<Stat[]>();
-	const {users, reload} = useUsers();
 	const {groups} = useGroups({adminAdmins: user.id});
 	const {permissions} = usePermissions(user.id);
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
 
+	const {users: students, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers({type: "student"});
+
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
 	const router = useRouter();
 
@@ -75,25 +76,21 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 
 	const assignmentsUsers = useMemo(
 		() =>
-			users.filter(
-				(x) =>
-					x.type === "student" &&
-					(!!selectedUser
-						? groups
-								.filter((g) => g.admin === selectedUser.id)
-								.flatMap((g) => g.participants)
-								.includes(x.id)
-						: groups.flatMap((g) => g.participants).includes(x.id)),
+			students.filter((x) =>
+				!!selectedUser
+					? groups
+							.filter((g) => g.admin === selectedUser.id)
+							.flatMap((g) => g.participants)
+							.includes(x.id)
+					: groups.flatMap((g) => g.participants).includes(x.id),
 			),
-		[groups, users, selectedUser],
+		[groups, students, selectedUser],
 	);
 
 	useEffect(() => {
 		setShowModal(!!selectedUser && router.asPath === "/#");
 	}, [selectedUser, router.asPath]);
 
-	const studentFilter = (user: User) => user.type === "student";
-
 	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
 	const UserDisplay = (displayUser: User) => (
@@ -131,7 +128,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 	const averageLevelCalculator = (studentStats: Stat[]) => {
 		const formattedStats = studentStats
 			.map((s) => ({
-				focus: users.find((u) => u.id === s.user)?.focus,
+				focus: students.find((u) => u.id === s.user)?.focus,
 				score: s.score,
 				module: s.module,
 			}))
@@ -167,9 +164,10 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 				)}>
 				<IconCard
 					onClick={() => router.push("/#students")}
+					isLoading={isStudentsLoading}
 					Icon={BsPersonFill}
 					label="Students"
-					value={users.filter(studentFilter).length}
+					value={students.length}
 					color="purple"
 				/>
 				<IconCard
@@ -181,6 +179,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 				<IconCard
 					Icon={BsPaperclip}
 					label="Average Level"
+					isLoading={isStudentsLoading}
 					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
 					color="purple"
 				/>
@@ -208,8 +207,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
+						{students
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -219,8 +217,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Highest level students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
+						{students
 							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -230,8 +227,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Highest exam count students</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
+						{students
 							.sort(
 								(a, b) =>
 									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
@@ -255,7 +251,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
-									if (shouldReload) reload();
+									if (shouldReload && selectedUser!.type === "student") reloadStudents();
 								}}
 								onViewStudents={
 									selectedUser.type === "corporate" || selectedUser.type === "teacher"
@@ -306,7 +302,7 @@ export default function TeacherDashboard({user, linkedCorporate}: Props) {
 			{router.asPath === "/#students" && (
 				<UserList
 					user={user}
-					filters={[(x) => x.type === "student"]}
+					type="student"
 					renderHeader={(total) => (
 						<div className="flex flex-col gap-4">
 							<div