Updated the MasterCorporate with the improved queries

src/dashboards/MasterCorporate.tsx

@@ -302,33 +302,30 @@ export default function MasterCorporateDashboard({user}: Props) {
 	const [corporateAssignments, setCorporateAssignments] = useState<(Assignment & {corporate?: CorporateUser})[]>([]);
 
 	const {data: stats} = useFilterRecordsByUser<Stat[]>();
-	const {users, reload} = useUsers();
+
+	const {users: students, reload: reloadStudents} = useUsers({type: "student"});
+	const {users: teachers, reload: reloadTeachers} = useUsers({type: "teacher"});
+	const {users: corporates, reload: reloadCorporates} = useUsers({type: "corporate"});
+
 	const {groups} = useGroups({admin: user.id, userType: user.type});
 	const {balance} = useUserBalance();
 
-	const masterCorporateUserGroups = useMemo(
-		() => [...new Set(groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants))],
-		[groups, user.id],
-	);
-
-	const corporateUserGroups = useMemo(() => [...new Set(groups.flatMap((g) => g.participants))], [groups]);
+	const users = useMemo(() => [...students, ...teachers, ...corporates], [corporates, students, teachers]);
 
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
 
 	const assignmentsGroups = useMemo(() => groups.filter((x) => x.admin === user.id || x.participants.includes(user.id)), [groups, user.id]);
 	const assignmentsUsers = useMemo(
 		() =>
-			users.filter(
-				(x) =>
-					(x.type === "student" || x.type === "teacher") &&
-					(!!selectedUser
-						? groups
-								.filter((g) => g.admin === selectedUser.id)
-								.flatMap((g) => g.participants)
-								.includes(x.id) || false
-						: groups.flatMap((g) => g.participants).includes(x.id)),
+			[...students, ...teachers].filter((x) =>
+				!!selectedUser
+					? groups
+							.filter((g) => g.admin === selectedUser.id)
+							.flatMap((g) => g.participants)
+							.includes(x.id) || false
+					: groups.flatMap((g) => g.participants).includes(x.id),
 			),
-		[groups, users, selectedUser],
+		[groups, selectedUser, teachers, students],
 	);
 
 	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
@@ -340,17 +337,16 @@ export default function MasterCorporateDashboard({user}: Props) {
 
 	useEffect(() => {
 		setCorporateAssignments(
-			assignments.filter(activeAssignmentFilter).map((a) => ({
-				...a,
-				corporate: !!users.find((x) => x.id === a.assigner)
-					? getCorporateUser(users.find((x) => x.id === a.assigner)!, users, groups)
-					: undefined,
-			})),
-		);
-	}, [assignments, groups, users]);
+			assignments.filter(activeAssignmentFilter).map((a) => {
+				const assigner = [...teachers, ...corporates].find((x) => x.id === a.assigner);
 
-	const studentFilter = (user: User) => user.type === "student";
-	const teacherFilter = (user: User) => user.type === "teacher";
+				return {
+					...a,
+					corporate: assigner ? getCorporateUser(assigner, [...teachers, ...corporates], groups) : undefined,
+				};
+			}),
+		);
+	}, [assignments, groups, teachers, corporates]);
 	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
 
 	const UserDisplay = (displayUser: User) => (
@@ -386,14 +382,6 @@ export default function MasterCorporateDashboard({user}: Props) {
 	};
 
 	const StudentPerformancePage = () => {
-		const students = users
-			.filter((x) => x.type === "student" && groups.flatMap((g) => g.participants).includes(x.id))
-			.map((u) => ({
-				...u,
-				group: groups.find((x) => x.participants.includes(u.id)),
-				corporate: getCorporateUser(u, users, groups),
-			}));
-
 		return (
 			<>
 				<div className="w-full flex justify-between items-center">
@@ -410,21 +398,11 @@ export default function MasterCorporateDashboard({user}: Props) {
 						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
 					</div>
 				</div>
-				<StudentPerformanceList items={students} stats={stats} users={users} groups={groups} />
+				<StudentPerformanceList items={students} stats={stats} users={corporates} groups={groups} />
 			</>
 		);
 	};
 
-	const masterCorporateUsers = useMemo(
-		() =>
-			masterCorporateUserGroups.reduce((accm: CorporateUser[], id) => {
-				const user = users.find((u) => u.id === id) as CorporateUser;
-				if (user) return [...accm, user];
-				return accm;
-			}, []),
-		[masterCorporateUserGroups, users],
-	);
-
 	const MasterStatisticalPage = () => {
 		return (
 			<>
@@ -437,7 +415,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 					</div>
 					<h2 className="text-2xl font-semibold">Master Statistical</h2>
 				</div>
-				<MasterStatistical users={users} corporateUsers={masterCorporateUsers} />
+				<MasterStatistical users={users} corporateUsers={corporates} />
 			</>
 		);
 	};
@@ -445,20 +423,8 @@ export default function MasterCorporateDashboard({user}: Props) {
 	const DefaultDashboard = () => (
 		<>
 			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
-				<IconCard
-					onClick={() => router.push("/#students")}
-					Icon={BsPersonFill}
-					label="Students"
-					value={users.filter(studentFilter).length}
-					color="purple"
-				/>
-				<IconCard
-					onClick={() => router.push("/#teachers")}
-					Icon={BsPencilSquare}
-					label="Teachers"
-					value={users.filter(teacherFilter).length}
-					color="purple"
-				/>
+				<IconCard onClick={() => router.push("/#students")} Icon={BsPersonFill} label="Students" value={students.length} color="purple" />
+				<IconCard onClick={() => router.push("/#teachers")} Icon={BsPencilSquare} label="Teachers" value={teachers.length} color="purple" />
 				<IconCard
 					Icon={BsClipboard2Data}
 					label="Exams Performed"
@@ -469,7 +435,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 					Icon={BsPaperclip}
 					label="Average Level"
 					value={averageLevelCalculator(
-						users,
+						students,
 						stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)),
 					).toFixed(1)}
 					color="purple"
@@ -487,17 +453,11 @@ export default function MasterCorporateDashboard({user}: Props) {
 					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
 					color="rose"
 				/>
-				<IconCard
-					Icon={BsBank}
-					label="Corporate"
-					value={users.filter(corporateUserFilter).length}
-					color="purple"
-					onClick={() => router.push("/#corporate")}
-				/>
+				<IconCard Icon={BsBank} label="Corporate" value={corporates.length} color="purple" onClick={() => router.push("/#corporate")} />
 				<IconCard
 					Icon={BsPersonFillGear}
 					label="Student Performance"
-					value={users.filter(studentFilter).length}
+					value={students.length}
 					color="purple"
 					onClick={() => router.push("/#studentsPerformance")}
 				/>
@@ -526,8 +486,7 @@ export default function MasterCorporateDashboard({user}: 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} />
@@ -537,8 +496,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
 					<span className="p-4">Latest teachers</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(teacherFilter)
+						{teachers
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -548,8 +506,7 @@ export default function MasterCorporateDashboard({user}: 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} />
@@ -559,8 +516,7 @@ export default function MasterCorporateDashboard({user}: 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,
@@ -589,7 +545,9 @@ export default function MasterCorporateDashboard({user}: Props) {
 								loggedInUser={user}
 								onClose={(shouldReload) => {
 									setSelectedUser(undefined);
-									if (shouldReload) reload();
+									if (shouldReload && selectedUser!.type === "student") reloadStudents();
+									if (shouldReload && selectedUser!.type === "teacher") reloadTeachers();
+									if (shouldReload && selectedUser!.type === "corporate") reloadCorporates();
 								}}
 								onViewStudents={
 									selectedUser.type === "corporate" || selectedUser.type === "teacher"