Merged in ENCOA-183_MasterCorporateGrouping (pull request #96)

ENCOA-183 MasterCorporateGrouping

Approved-by: Tiago Ribeiro

src/dashboards/MasterCorporate.tsx

@@ -55,6 +55,7 @@ import MasterStatistical from "./MasterStatistical";
 import {futureAssignmentFilter, pastAssignmentFilter, archivedAssignmentFilter, activeAssignmentFilter} from "@/utils/assignments";
 import useUserBalance from "@/hooks/useUserBalance";
 import AssignmentsPage from "./views/AssignmentsPage";
+import { group } from "console";
 
 interface Props {
 	user: MasterCorporateUser;
@@ -360,8 +361,14 @@ export default function MasterCorporateDashboard({user}: Props) {
 		</div>
 	);
 
-	const corporateUserFilter = (x: User) => x.type === "corporate";
+	const groupedByNameCorporates = groupBy(corporates, (x: CorporateUser) => x.corporateInformation?.companyInformation?.name || 'N/A');
+	const groupedByNameCorporatesKeys = Object.keys(groupedByNameCorporates);
+	const groupedByNameCorporateIds = groupedByNameCorporatesKeys.reduce((accm, x) => {
+		const corporateUserIds = (groupedByNameCorporates[x] as CorporateUser[]).map((y) => y.id);
+		return { ...accm, [x]: corporateUserIds };
+	}, {});
 
+	console.log("groupedByNameCorporates", groupedByNameCorporates, groupedByNameCorporateIds);
 	const GroupsList = () => {
 		return (
 			<>
@@ -414,7 +421,7 @@ export default function MasterCorporateDashboard({user}: Props) {
 					</div>
 					<h2 className="text-2xl font-semibold">Master Statistical</h2>
 				</div>
-				<MasterStatistical users={users} corporateUsers={corporates} />
+				<MasterStatistical users={users} corporateUsers={groupedByNameCorporateIds} />
 			</>
 		);
 	};
@@ -468,12 +475,20 @@ export default function MasterCorporateDashboard({user}: Props) {
 				/>
 				<IconCard
 					Icon={BsBank}
-					label="Corporate"
+					label="Corporate Accounts"
 					value={corporates.length}
 					isLoading={isCorporatesLoading}
 					color="purple"
 					onClick={() => router.push("/#corporate")}
 				/>
+				<IconCard
+					Icon={BsBank}
+					label="Corporate"
+					value={groupedByNameCorporatesKeys.length}
+					isLoading={isCorporatesLoading}
+					color="purple"
+					// onClick={() => router.push("/#corporate")}
+				/>
 				<IconCard
 					Icon={BsPersonFillGear}
 					isLoading={isStudentsLoading}

src/dashboards/MasterStatistical.tsx

@@ -19,8 +19,14 @@ import { useListSearch } from "@/hooks/useListSearch";
 import axios from "axios";
 import { toast } from "react-toastify";
 import Button from "@/components/Low/Button";
+
+interface GroupedCorporateUsers {
+  // list of user Ids
+  [key: string]: string[];
+}
+
 interface Props {
-  corporateUsers: User[];
+  corporateUsers: GroupedCorporateUsers;
   users: User[];
 }
 
@@ -45,14 +51,14 @@ const searchFilters = [["email"], ["user"], ["userId"]];
 const MasterStatistical = (props: Props) => {
   const { users, corporateUsers } = props;
 
-  const corporateRelevantUsers = React.useMemo(
+  // const corporateRelevantUsers = React.useMemo(
-    () => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
+  //   () => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
-    [corporateUsers]
+  //   [corporateUsers]
-  );
+  // );
 
   const corporates = React.useMemo(
-    () => corporateRelevantUsers.map((x) => x.id),
+    () => Object.values(corporateUsers).flat(),
-    [corporateRelevantUsers]
+    [corporateUsers]
   );
 
   const [selectedCorporates, setSelectedCorporates] =
@@ -126,7 +132,8 @@ const MasterStatistical = (props: Props) => {
     };
   };
 
-  const corporateScores = corporates.reduce(
+  const getCorporatesScoresHash = (data: string[]) =>
+    data.reduce(
       (accm, id) => ({
         ...accm,
         [id]: getCorporateScores(id),
@@ -134,7 +141,8 @@ const MasterStatistical = (props: Props) => {
       {}
     ) as Record<string, UserCount>;
 
-  const consolidateScore = Object.values(corporateScores).reduce(
+  const getConsolidateScore = (data: Record<string, UserCount>) =>
+    Object.values(data).reduce(
       (acc: UserCount, { userCount, maxUserCount }: UserCount) => ({
         userCount: acc.userCount + userCount,
         maxUserCount: acc.maxUserCount + maxUserCount,
@@ -142,6 +150,9 @@ const MasterStatistical = (props: Props) => {
       { userCount: 0, maxUserCount: 0 }
     );
 
+  const corporateScores = getCorporatesScoresHash(corporates);
+  const consolidateScore = getConsolidateScore(corporateScores);
+
   const getConsolidateScoreStr = (data: UserCount) =>
     `${data.userCount}/${data.maxUserCount}`;
 
@@ -286,23 +297,31 @@ const MasterStatistical = (props: Props) => {
           }}
           isSelected={areAllSelected}
         />
-        {corporateRelevantUsers.map((group) => {
+        {Object.keys(corporateUsers).map((corporateName) => {
-          const isSelected = selectedCorporates.includes(group.id);
+          const group = corporateUsers[corporateName];
+          const isSelected = group.every((id) =>
+            selectedCorporates.includes(id)
+          );
+
+          const valueHash = getCorporatesScoresHash(group);
+          const value = getConsolidateScoreStr(getConsolidateScore(valueHash));
           return (
             <IconCard
-              key={group.id}
+              key={corporateName}
               Icon={BsBank}
-              label={group.corporateInformation?.companyInformation?.name}
+              label={corporateName}
-              value={getConsolidateScoreStr(corporateScores[group.id])}
+              value={value}
               color="purple"
               onClick={() => {
                 if (isSelected) {
-                  setSelectedCorporates(
+                  setSelectedCorporates((prev) =>
-                    selectedCorporates.filter((x) => x !== group.id)
+                    prev.filter((x) => !group.includes(x))
                   );
                   return;
                 }
-                setSelectedCorporates([...selectedCorporates, group.id]);
+                setSelectedCorporates((prev) => [
+                  ...new Set([...prev, ...group]),
+                ]);
               }}
               isSelected={isSelected}
             />