ENCOA-200: Added Master Statistical to Corporate

src/dashboards/Corporate.tsx

@@ -26,6 +26,7 @@ import {
 	BsArrowRepeat,
 	BsPlus,
 	BsEnvelopePaper,
+	BsDatabase,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -52,7 +53,7 @@ import {getUserCompanyName} from "@/resources/user";
 import {futureAssignmentFilter, pastAssignmentFilter, archivedAssignmentFilter, activeAssignmentFilter} from "@/utils/assignments";
 import useUserBalance from "@/hooks/useUserBalance";
 import AssignmentsPage from "./views/AssignmentsPage";
-
+import MasterStatistical from "./MasterStatistical";
 interface Props {
 	user: CorporateUser;
 	linkedCorporate?: CorporateUser | MasterCorporateUser;
@@ -278,6 +279,30 @@ export default function CorporateDashboard({user, linkedCorporate}: Props) {
 		return calculateAverageLevel(levels);
 	};
 
+	// this workaround will allow us toreuse the master statistical due to master corporate restraints
+	// while still being able to use the corporate user
+	const groupedByNameCorporateIds = useMemo(() => ({
+		[user.corporateInformation?.companyInformation?.name || user.name]: [user.id],
+	}), [user]);
+
+	const teachersAndStudents = useMemo(() => [...students, ...teachers], [students, teachers]);
+	const MasterStatisticalPage = () => {
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => router.push("/")}
+						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={teachersAndStudents} corporateUsers={groupedByNameCorporateIds} displaySelection={false} />
+			</>
+		);
+	};
+
 	const DefaultDashboard = () => (
 		<>
 			{!!linkedCorporate && (
@@ -336,6 +361,12 @@ export default function CorporateDashboard({user, linkedCorporate}: Props) {
 					color="purple"
 					onClick={() => router.push("/#studentsPerformance")}
 				/>
+				<IconCard
+					Icon={BsDatabase}
+					label="Master Statistical"
+					color="purple"
+					onClick={() => router.push("/#statistical")}
+				/>
 				<button
 					disabled={isAssignmentsLoading}
 					onClick={() => router.push("/#assignments")}
@@ -504,6 +535,7 @@ export default function CorporateDashboard({user, linkedCorporate}: Props) {
 				/>
 			)}
 			{router.asPath === "/#studentsPerformance" && <StudentPerformancePage />}
+			{router.asPath === "/#statistical" && <MasterStatisticalPage />}
 			{router.asPath === "/" && <DefaultDashboard />}
 		</>
 	);

src/dashboards/MasterCorporate.tsx

@@ -500,7 +500,6 @@ export default function MasterCorporateDashboard({user}: Props) {
 				<IconCard
 					Icon={BsDatabase}
 					label="Master Statistical"
-					// value={masterCorporateUserGroups.length}
 					color="purple"
 					onClick={() => router.push("/#statistical")}
 				/>

src/dashboards/MasterStatistical.tsx

@@ -28,6 +28,7 @@ interface GroupedCorporateUsers {
 interface Props {
   corporateUsers: GroupedCorporateUsers;
   users: User[];
+  displaySelection?: boolean;
 }
 
 interface TableData {
@@ -49,7 +50,7 @@ interface UserCount {
 const searchFilters = [["email"], ["user"], ["userId"]];
 
 const MasterStatistical = (props: Props) => {
-  const { users, corporateUsers } = props;
+  const { users, corporateUsers, displaySelection = true } = props;
 
   // const corporateRelevantUsers = React.useMemo(
   //   () => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
@@ -173,13 +174,17 @@ const MasterStatistical = (props: Props) => {
         return <span>{info.getValue()}</span>;
       },
     }),
-    columnHelper.accessor("corporate", {
-      header: "Corporate",
-      id: "corporate",
-      cell: (info) => {
-        return <span>{info.getValue()}</span>;
-      },
-    }),
+    ...(displaySelection
+      ? [
+          columnHelper.accessor("corporate", {
+            header: "Corporate",
+            id: "corporate",
+            cell: (info) => {
+              return <span>{info.getValue()}</span>;
+            },
+          }),
+        ]
+      : []),
     columnHelper.accessor("assignment", {
       header: "Assignment",
       id: "assignment",
@@ -261,6 +266,7 @@ const MasterStatistical = (props: Props) => {
         ...(startDate ? { startDate: startDate.toISOString() } : {}),
         ...(endDate ? { endDate: endDate.toISOString() } : {}),
         searchText,
+        displaySelection,
       });
       toast.success("Report ready!");
       const link = document.createElement("a");
@@ -282,52 +288,56 @@ const MasterStatistical = (props: Props) => {
   const consolidateResults = getStudentsConsolidateScore();
   return (
     <>
-      <div className="flex flex-wrap gap-2 items-center text-center">
-        <IconCard
-          Icon={BsBank}
-          label="Consolidate"
-          value={getConsolidateScoreStr(consolidateScore)}
-          color="purple"
-          onClick={() => {
-            if (areAllSelected) {
-              setSelectedCorporates([]);
-              return;
-            }
-            setSelectedCorporates(corporates);
-          }}
-          isSelected={areAllSelected}
-        />
-        {Object.keys(corporateUsers).map((corporateName) => {
-          const group = corporateUsers[corporateName];
-          const isSelected = group.every((id) =>
-            selectedCorporates.includes(id)
-          );
+      {displaySelection && (
+        <div className="flex flex-wrap gap-2 items-center text-center">
+          <IconCard
+            Icon={BsBank}
+            label="Consolidate"
+            value={getConsolidateScoreStr(consolidateScore)}
+            color="purple"
+            onClick={() => {
+              if (areAllSelected) {
+                setSelectedCorporates([]);
+                return;
+              }
+              setSelectedCorporates(corporates);
+            }}
+            isSelected={areAllSelected}
+          />
+          {Object.keys(corporateUsers).map((corporateName) => {
+            const group = corporateUsers[corporateName];
+            const isSelected = group.every((id) =>
+              selectedCorporates.includes(id)
+            );
 
-          const valueHash = getCorporatesScoresHash(group);
-          const value = getConsolidateScoreStr(getConsolidateScore(valueHash));
-          return (
-            <IconCard
-              key={corporateName}
-              Icon={BsBank}
-              label={corporateName}
-              value={value}
-              color="purple"
-              onClick={() => {
-                if (isSelected) {
-                  setSelectedCorporates((prev) =>
-                    prev.filter((x) => !group.includes(x))
-                  );
-                  return;
-                }
-                setSelectedCorporates((prev) => [
-                  ...new Set([...prev, ...group]),
-                ]);
-              }}
-              isSelected={isSelected}
-            />
-          );
-        })}
-      </div>
+            const valueHash = getCorporatesScoresHash(group);
+            const value = getConsolidateScoreStr(
+              getConsolidateScore(valueHash)
+            );
+            return (
+              <IconCard
+                key={corporateName}
+                Icon={BsBank}
+                label={corporateName}
+                value={value}
+                color="purple"
+                onClick={() => {
+                  if (isSelected) {
+                    setSelectedCorporates((prev) =>
+                      prev.filter((x) => !group.includes(x))
+                    );
+                    return;
+                  }
+                  setSelectedCorporates((prev) => [
+                    ...new Set([...prev, ...group]),
+                  ]);
+                }}
+                isSelected={isSelected}
+              />
+            );
+          })}
+        </div>
+      )}
       <div className="flex gap-3 w-full">
         <div className="flex flex-col gap-3">
           <label className="font-normal text-base text-mti-gray-dim">