Added initial implementation for master statistical

src/dashboards/MasterCorporate.tsx

@@ -2,11 +2,17 @@
 import Modal from "@/components/Modal";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import {Group, MasterCorporateUser, Stat, User} from "@/interfaces/user";
+import {
+  Group,
+  MasterCorporateUser,
+  Stat,
+  User,
+  CorporateUser,
+} from "@/interfaces/user";
 import UserList from "@/pages/(admin)/Lists/UserList";
-import {dateSorter} from "@/utils";
+import { dateSorter } from "@/utils";
 import moment from "moment";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import {
   BsArrowLeft,
   BsClipboard2Data,
@@ -20,46 +26,57 @@ import {
   BsEnvelopePaper,
   BsArrowRepeat,
   BsPlus,
+  BsDatabase,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 
-import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
-import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import { MODULE_ARRAY } from "@/utils/moduleUtils";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {groupByExam} from "@/utils/stats";
+import { groupByExam } from "@/utils/stats";
 import IconCard from "./IconCard";
 import GroupList from "@/pages/(admin)/Lists/GroupList";
 import useFilterStore from "@/stores/listFilterStore";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 import useCodes from "@/hooks/useCodes";
 import useAssignments from "@/hooks/useAssignments";
-import {Assignment} from "@/interfaces/results";
+import { Assignment } from "@/interfaces/results";
 import AssignmentView from "./AssignmentView";
 import AssignmentCreator from "./AssignmentCreator";
 import clsx from "clsx";
 import AssignmentCard from "./AssignmentCard";
-
+import MasterStatistical from "./MasterStatistical";
 interface Props {
   user: MasterCorporateUser;
 }
 
-export default function MasterCorporateDashboard({user}: Props) {
+export default function MasterCorporateDashboard({ user }: Props) {
   const [page, setPage] = useState("");
   const [selectedUser, setSelectedUser] = useState<User>();
   const [showModal, setShowModal] = useState(false);
   const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
   const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
 
-	const {stats} = useStats();
+  const { stats } = useStats();
-	const {users, reload} = useUsers();
+  const { users, reload } = useUsers();
-	const {codes} = useCodes(user.id);
+  const { codes } = useCodes(user.id);
-	const {groups} = useGroups(user.id, user.type);
+  const { groups } = useGroups(user.id, user.type);
 
-	const masterCorporateUserGroups = [...new Set(groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants))];
+  const masterCorporateUserGroups = [
-	const corporateUserGroups = [...new Set(groups.flatMap((g) => g.participants))];
+    ...new Set(
+      groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants)
+    ),
+  ];
+  const corporateUserGroups = [
+    ...new Set(groups.flatMap((g) => g.participants)),
+  ];
 
-	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
+  const {
+    assignments,
+    isLoading: isAssignmentsLoading,
+    reload: reloadAssignments,
+  } = useAssignments({ corporate: user.id });
 
   const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
   const router = useRouter();
@@ -68,16 +85,24 @@ export default function MasterCorporateDashboard({user}: Props) {
     setShowModal(!!selectedUser && page === "");
   }, [selectedUser, page]);
 
-	const studentFilter = (user: User) => user.type === "student" && corporateUserGroups.includes(user.id);
+  const studentFilter = (user: User) =>
-	const teacherFilter = (user: User) => user.type === "teacher" && corporateUserGroups.includes(user.id);
+    user.type === "student" && corporateUserGroups.includes(user.id);
+  const teacherFilter = (user: User) =>
+    user.type === "teacher" && corporateUserGroups.includes(user.id);
 
-	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
+  const getStatsByStudent = (user: User) =>
+    stats.filter((s) => s.user === user.id);
 
   const UserDisplay = (displayUser: User) => (
     <div
       onClick={() => setSelectedUser(displayUser)}
-			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
-			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+    >
+      <img
+        src={displayUser.profilePicture}
+        alt={displayUser.name}
+        className="rounded-full w-10 h-10"
+      />
       <div className="flex flex-col gap-1 items-start">
         <span>{displayUser.name}</span>
         <span className="text-sm opacity-75">{displayUser.email}</span>
@@ -87,7 +112,10 @@ export default function MasterCorporateDashboard({user}: Props) {
 
   const StudentsList = () => {
     const filter = (x: User) =>
-			x.type === "student" && (!!selectedUser ? corporateUserGroups.includes(x.id) || false : corporateUserGroups.includes(x.id));
+      x.type === "student" &&
+      (!!selectedUser
+        ? corporateUserGroups.includes(x.id) || false
+        : corporateUserGroups.includes(x.id));
 
     return (
       <UserList
@@ -97,7 +125,8 @@ export default function MasterCorporateDashboard({user}: Props) {
           <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">
+              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>
@@ -110,7 +139,10 @@ export default function MasterCorporateDashboard({user}: Props) {
 
   const TeachersList = () => {
     const filter = (x: User) =>
-			x.type === "teacher" && (!!selectedUser ? corporateUserGroups.includes(x.id) || false : corporateUserGroups.includes(x.id));
+      x.type === "teacher" &&
+      (!!selectedUser
+        ? corporateUserGroups.includes(x.id) || false
+        : corporateUserGroups.includes(x.id));
 
     return (
       <UserList
@@ -120,7 +152,8 @@ export default function MasterCorporateDashboard({user}: Props) {
           <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">
+              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>
@@ -132,7 +165,10 @@ export default function MasterCorporateDashboard({user}: Props) {
   };
 
   const corporateUserFilter = (x: User) =>
-		x.type === "corporate" && (!!selectedUser ? masterCorporateUserGroups.includes(x.id) || false : masterCorporateUserGroups.includes(x.id));
+    x.type === "corporate" &&
+    (!!selectedUser
+      ? masterCorporateUserGroups.includes(x.id) || false
+      : masterCorporateUserGroups.includes(x.id));
 
   const CorporateList = () => {
     return (
@@ -143,7 +179,8 @@ export default function MasterCorporateDashboard({user}: Props) {
           <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">
+              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>
@@ -160,7 +197,8 @@ export default function MasterCorporateDashboard({user}: Props) {
         <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">
+            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>
@@ -174,10 +212,16 @@ export default function MasterCorporateDashboard({user}: Props) {
 
   const AssignmentsPage = () => {
     const activeFilter = (a: Assignment) =>
-			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+      moment(a.endDate).isAfter(moment()) &&
-		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+      moment(a.startDate).isBefore(moment()) &&
+      a.assignees.length > a.results.length;
+    const pastFilter = (a: Assignment) =>
+      (moment(a.endDate).isBefore(moment()) ||
+        a.assignees.length === a.results.length) &&
+      !a.archived;
     const archivedFilter = (a: Assignment) => a.archived;
-		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
+    const futureFilter = (a: Assignment) =>
+      moment(a.startDate).isAfter(moment());
 
     return (
       <>
@@ -192,7 +236,9 @@ export default function MasterCorporateDashboard({user}: Props) {
         />
         <AssignmentCreator
           assignment={selectedAssignment}
-					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+          groups={groups.filter(
+            (x) => x.admin === user.id || x.participants.includes(user.id)
+          )}
           users={users.filter(
             (x) =>
               x.type === "student" &&
@@ -201,7 +247,7 @@ export default function MasterCorporateDashboard({user}: Props) {
                     .filter((g) => g.admin === selectedUser.id)
                     .flatMap((g) => g.participants)
                     .includes(x.id) || false
-								: groups.flatMap((g) => g.participants).includes(x.id)),
+                : groups.flatMap((g) => g.participants).includes(x.id))
           )}
           assigner={user.id}
           isCreating={isCreatingAssignment}
@@ -214,31 +260,47 @@ export default function MasterCorporateDashboard({user}: Props) {
         <div className="w-full flex justify-between items-center">
           <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">
+            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>
           <div
             onClick={reloadAssignments}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+          >
             <span>Reload</span>
-						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+            <BsArrowRepeat
+              className={clsx(
+                "text-xl",
+                isAssignmentsLoading && "animate-spin"
+              )}
+            />
           </div>
         </div>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Active Assignments ({assignments.filter(activeFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             {assignments.filter(activeFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+              <AssignmentCard
+                {...a}
+                onClick={() => setSelectedAssignment(a)}
+                key={a.id}
+              />
             ))}
           </div>
         </section>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Planned Assignments ({assignments.filter(futureFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             <div
               onClick={() => setIsCreatingAssignment(true)}
-							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+              className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
+            >
               <BsPlus className="text-6xl" />
               <span className="text-lg">New Assignment</span>
             </div>
@@ -255,7 +317,9 @@ export default function MasterCorporateDashboard({user}: Props) {
           </div>
         </section>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Past Assignments ({assignments.filter(pastFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             {assignments.filter(pastFilter).map((a) => (
               <AssignmentCard
@@ -270,7 +334,9 @@ export default function MasterCorporateDashboard({user}: Props) {
           </div>
         </section>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Archived Assignments ({assignments.filter(archivedFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             {assignments.filter(archivedFilter).map((a) => (
               <AssignmentCard
@@ -288,6 +354,33 @@ export default function MasterCorporateDashboard({user}: Props) {
     );
   };
 
+  const MasterStatisticalPage = () => {
+    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">Master Statistical</h2>
+        </div>
+        <MasterStatistical
+          users={masterCorporateUserGroups.reduce(
+            (accm: CorporateUser[], id) => {
+              const user = users.find((u) => u.id === id) as CorporateUser;
+              if (user) return [...accm, user];
+              return accm;
+            },
+            []
+          )}
+        />
+      </>
+    );
+  };
+
   const averageLevelCalculator = (studentStats: Stat[]) => {
     const formattedStats = studentStats
       .map((s) => ({
@@ -298,10 +391,15 @@ export default function MasterCorporateDashboard({user}: Props) {
       .filter((f) => !!f.focus);
     const bandScores = formattedStats.map((s) => ({
       module: s.module,
-			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+      level: calculateBandScore(
+        s.score.correct,
+        s.score.total,
+        s.module,
+        s.focus!
+      ),
     }));
 
-		const levels: {[key in Module]: number} = {
+    const levels: { [key in Module]: number } = {
       reading: 0,
       listening: 0,
       writing: 0,
@@ -333,26 +431,46 @@ export default function MasterCorporateDashboard({user}: Props) {
         <IconCard
           Icon={BsClipboard2Data}
           label="Exams Performed"
-					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+          value={
+            stats.filter((s) =>
+              groups.flatMap((g) => g.participants).includes(s.user)
+            ).length
+          }
           color="purple"
         />
         <IconCard
           Icon={BsPaperclip}
           label="Average Level"
-					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+          value={averageLevelCalculator(
+            stats.filter((s) =>
+              groups.flatMap((g) => g.participants).includes(s.user)
+            )
+          ).toFixed(1)}
+          color="purple"
+        />
+        <IconCard
+          onClick={() => setPage("groups")}
+          Icon={BsPeople}
+          label="Groups"
+          value={groups.length}
           color="purple"
         />
-				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
         <IconCard
           Icon={BsPersonCheck}
           label="User Balance"
-					value={`${codes.length}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
+          value={`${codes.length}/${
+            user.corporateInformation?.companyInformation?.userAmount || 0
+          }`}
           color="purple"
         />
         <IconCard
           Icon={BsClock}
           label="Expiration Date"
-					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+          value={
+            user.subscriptionExpirationDate
+              ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
+              : "Unlimited"
+          }
           color="rose"
         />
         <IconCard
@@ -362,15 +480,25 @@ export default function MasterCorporateDashboard({user}: Props) {
           color="purple"
           onClick={() => setPage("corporate")}
         />
+        <IconCard
+          Icon={BsDatabase}
+          label="Master Statistical"
+          // value={masterCorporateUserGroups.length}
+          color="purple"
+          onClick={() => setPage("statistical")}
+        />
         <button
           disabled={isAssignmentsLoading}
           onClick={() => setPage("assignments")}
-					className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+          className="bg-white col-span-2 rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
+        >
           <BsEnvelopePaper className="text-6xl text-mti-purple-light" />
           <span className="flex flex-col gap-1 items-center text-xl">
             <span className="text-lg">Assignments</span>
             <span className="font-semibold text-mti-purple-light">
-							{isAssignmentsLoading ? "Loading..." : assignments.filter((a) => !a.archived).length}
+              {isAssignmentsLoading
+                ? "Loading..."
+                : assignments.filter((a) => !a.archived).length}
             </span>
           </span>
         </button>
@@ -404,7 +532,11 @@ export default function MasterCorporateDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(studentFilter)
-							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+              .sort(
+                (a, b) =>
+                  calculateAverageLevel(b.levels) -
+                  calculateAverageLevel(a.levels)
+              )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
               ))}
@@ -417,7 +549,8 @@ export default function MasterCorporateDashboard({user}: Props) {
               .filter(studentFilter)
               .sort(
                 (a, b) =>
-									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+                  Object.keys(groupByExam(getStatsByStudent(b))).length -
+                  Object.keys(groupByExam(getStatsByStudent(a))).length
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -441,7 +574,8 @@ export default function MasterCorporateDashboard({user}: Props) {
                   if (shouldReload) reload();
                 }}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
                     ? () => {
                         appendUserFilters({
                           id: "view-students",
@@ -451,7 +585,11 @@ export default function MasterCorporateDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -461,7 +599,8 @@ export default function MasterCorporateDashboard({user}: Props) {
                     : undefined
                 }
                 onViewTeachers={
-									selectedUser.type === "corporate" || selectedUser.type === "student"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-teachers",
@@ -471,7 +610,11 @@ export default function MasterCorporateDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -491,6 +634,7 @@ export default function MasterCorporateDashboard({user}: Props) {
       {page === "groups" && <GroupsList />}
       {page === "corporate" && <CorporateList />}
       {page === "assignments" && <AssignmentsPage />}
+      {page === "statistical" && <MasterStatisticalPage />}
       {page === "" && <DefaultDashboard />}
     </>
   );

src/dashboards/MasterStatistical.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { CorporateUser } from "@/interfaces/user";
+import { BsBank } from "react-icons/bs";
+import IconCard from "./IconCard";
+import useAssignmentsCorporates from '@/hooks/useAssignmentCorporates';
+interface Props {
+  users: CorporateUser[];
+}
+const MasterStatistical = (props: Props) => {
+  const { users } = props;
+
+  const usersList = React.useMemo(() => users.map((x) => x.id), [users]);
+
+  const { assignments } = useAssignmentsCorporates({ corporates: usersList });
+
+  console.log('Assignments', assignments);
+  return (
+    <div className="flex flex-wrap gap-2 items-center text-center">
+      <IconCard
+        Icon={BsBank}
+        label="Consolidate"
+        value={0}
+        color="purple"
+        onClick={() => console.log("clicked")}
+      />
+      {users.map((group) => (
+        <IconCard
+          key={group.id}
+          Icon={BsBank}
+          label={group.corporateInformation?.companyInformation?.name}
+          value={0}
+          color="purple"
+          onClick={() => console.log("clicked", group)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default MasterStatistical;

src/hooks/useAssignmentCorporates.tsx

@@ -0,0 +1,34 @@
+import { Assignment } from "@/interfaces/results";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useAssignmentsCorporates({
+  corporates,
+}: {
+  corporates: string[];
+}) {
+  const [assignments, setAssignments] = useState<Assignment[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    if (corporates.length === 0) {
+      setAssignments([]);
+      return;
+    }
+
+    setIsLoading(true);
+    axios
+      .get<Assignment[]>(
+        `/api/assignments/corporate?ids=${corporates.join(",")}`
+      )
+      .then(async (response) => {
+        setAssignments(response.data);
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, [corporates]);
+
+  return { assignments, isLoading, isError, reload: getData };
+}

src/hooks/useAssignments.tsx

@@ -10,7 +10,7 @@ export default function useAssignments({assigner, assignees, corporate}: {assign
 	const getData = () => {
 		setIsLoading(true);
 		axios
-			.get<Assignment[]>(!corporate ? "/api/assignments" : `/api/assignments/corporate?id=${corporate}`)
+			.get<Assignment[]>(!corporate ? "/api/assignments" : `/api/assignments/corporate/${corporate}`)
 			.then(async (response) => {
 				if (assigner) {
 					setAssignments(response.data.filter((a) => a.assigner === assigner));

src/pages/api/assignments/corporate/index.ts

@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  collection,
+  getDocs,
+  query,
+  where,
+  setDoc,
+  doc,
+  getDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { uuidv4 } from "@firebase/util";
+import { Module } from "@/interfaces";
+import { getExams } from "@/utils/exams.be";
+import { Exam, InstructorGender, Variant } from "@/interfaces/exam";
+import { capitalize, flatten, uniqBy } from "lodash";
+import { User } from "@/interfaces/user";
+import moment from "moment";
+import { sendEmail } from "@/email";
+import { getAllAssignersByCorporate } from "@/utils/groups.be";
+import { getAssignmentsByAssigners } from "@/utils/assignments.be";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") return await GET(req, res);
+
+  res.status(404).json({ ok: false });
+}
+
+async function GET(req: NextApiRequest, res: NextApiResponse) {
+  const { ids } = req.query as { ids: string };
+  try {
+    const idsList = ids.split(",");
+
+    const assigners = await Promise.all(idsList.map(getAllAssignersByCorporate));
+    const assignmentList = [...assigners.flat(), ...idsList];
+    const assignments = await getAssignmentsByAssigners(assignmentList);
+    res.status(200).json(assignments);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+}