Added an initial filter for corporate on records

src/pages/record.tsx

@@ -1,32 +1,42 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {withIronSessionSsr} from "iron-session/next";
+import { withIronSessionSsr } from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {Stat, User} from "@/interfaces/user";
+import { Stat, User } from "@/interfaces/user";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import useStats from "@/hooks/useStats";
-import {convertToUserSolutions, groupByDate} from "@/utils/stats";
+import { convertToUserSolutions, groupByDate } from "@/utils/stats";
 import moment from "moment";
 import useUsers from "@/hooks/useUsers";
 import useExamStore from "@/stores/examStore";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {ToastContainer} from "react-toastify";
+import { ToastContainer } from "react-toastify";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {uniqBy} from "lodash";
+import { uniqBy } from "lodash";
-import {getExamById} from "@/utils/exams";
+import { getExamById } from "@/utils/exams";
-import {sortByModule} from "@/utils/moduleUtils";
+import { sortByModule } from "@/utils/moduleUtils";
 import Layout from "@/components/High/Layout";
 import clsx from "clsx";
-import {calculateBandScore} from "@/utils/score";
+import { calculateBandScore } from "@/utils/score";
-import {BsBook, BsClipboard, BsClock, BsHeadphones, BsMegaphone, BsPen, BsPersonDash, BsPersonFillX, BsXCircle} from "react-icons/bs";
+import {
+  BsBook,
+  BsClipboard,
+  BsClock,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsPersonDash,
+  BsPersonFillX,
+  BsXCircle,
+} from "react-icons/bs";
 import Select from "@/components/Low/Select";
 import useGroups from "@/hooks/useGroups";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import useAssignments from "@/hooks/useAssignments";
-import {uuidv4} from "@firebase/util";
+import { uuidv4 } from "@firebase/util";
-import {usePDFDownload} from "@/hooks/usePDFDownload";
+import { usePDFDownload } from "@/hooks/usePDFDownload";
 import useRecordStore from "@/stores/recordStore";
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
   const user = req.session.user;
 
   if (!user || !user.isVerified) {
@@ -48,20 +58,32 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
   }
 
   return {
-		props: {user: req.session.user},
+    props: { user: req.session.user },
   };
 }, sessionOptions);
 
-export default function History({user}: {user: User}) {
+const defaultSelectableCorporate = {
-	const [statsUserId, setStatsUserId] = useRecordStore((state) => [state.selectedUser, state.setSelectedUser]);
+  value: "",
-	// const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
+  label: "All",
-	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
+};
-	const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">();
-	const {assignments} = useAssignments({});
 
-	const {users} = useUsers();
+export default function History({ user }: { user: User }) {
-	const {stats, isLoading: isStatsLoading} = useStats(statsUserId);
+  const [statsUserId, setStatsUserId] = useRecordStore((state) => [
-	const {groups} = useGroups(user.id);
+    state.selectedUser,
+    state.setSelectedUser,
+  ]);
+  // const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
+  const [groupedStats, setGroupedStats] = useState<{ [key: string]: Stat[] }>();
+  const [filter, setFilter] = useState<
+    "months" | "weeks" | "days" | "assignments"
+  >();
+  const { assignments } = useAssignments({});
+
+  const { users } = useUsers();
+  const { stats, isLoading: isStatsLoading } = useStats(statsUserId);
+  const { groups: allGroups } = useGroups();
+
+  const groups = allGroups.filter((x) => x.admin === user.id);
 
   const setExams = useExamStore((state) => state.setExams);
   const setShowSolutions = useExamStore((state) => state.setShowSolutions);
@@ -84,41 +106,48 @@ export default function History({user}: {user: User}) {
             )
               return false;
             return true;
-					}),
+          })
-				),
+        )
       );
     }
   }, [stats, isStatsLoading]);
 
-	useEffect(() => {
+  //   useEffect(() => {
-		// just set this initially
+  //     // just set this initially
-		if(!statsUserId) setStatsUserId(user.id);
+  //     if (!statsUserId) setStatsUserId(user.id);
-	}, []);
+  //   }, []);
 
   const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => {
     setFilter((prev) => (prev === value ? undefined : value));
   };
 
-	const filterStatsByDate = (stats: {[key: string]: Stat[]}) => {
+  const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
     if (filter && filter !== "assignments") {
       const filterDate = moment()
-				.subtract({[filter as string]: 1})
+        .subtract({ [filter as string]: 1 })
         .format("x");
-			const filteredStats: {[key: string]: Stat[]} = {};
+      const filteredStats: { [key: string]: Stat[] } = {};
 
       Object.keys(stats).forEach((timestamp) => {
-				if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp];
+        if (timestamp >= filterDate)
+          filteredStats[timestamp] = stats[timestamp];
       });
 
       return filteredStats;
     }
 
     if (filter && filter === "assignments") {
-			const filteredStats: {[key: string]: Stat[]} = {};
+      const filteredStats: { [key: string]: Stat[] } = {};
 
       Object.keys(stats).forEach((timestamp) => {
-				if (stats[timestamp].map((s) => s.assignment === undefined).includes(false))
+        if (
-					filteredStats[timestamp] = [...stats[timestamp].filter((s) => !!s.assignment)];
+          stats[timestamp]
+            .map((s) => s.assignment === undefined)
+            .includes(false)
+        )
+          filteredStats[timestamp] = [
+            ...stats[timestamp].filter((s) => !!s.assignment),
+          ];
       });
 
       return filteredStats;
@@ -134,8 +163,12 @@ export default function History({user}: {user: User}) {
     return date.format(formatter);
   };
 
-	const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
+  const aggregateScoresByModule = (
-		const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
+    stats: Stat[]
+  ): { module: Module; total: number; missing: number; correct: number }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
       reading: {
         total: 0,
         correct: 0,
@@ -173,17 +206,28 @@ export default function History({user}: {user: User}) {
 
     return Object.keys(scores)
       .filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({module: x as Module, ...scores[x as Module]}));
+      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
   };
 
   const customContent = (timestamp: string) => {
     if (!groupedStats) return <></>;
 
     const dateStats = groupedStats[timestamp];
-		const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+    const correct = dateStats.reduce(
-		const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+      (accumulator, current) => accumulator + current.score.correct,
-		const aggregatedScores = aggregateScoresByModule(dateStats).filter((x) => x.total > 0);
+      0
-		const assignmentID = dateStats.reduce((_, current) => current.assignment as any, "");
+    );
+    const total = dateStats.reduce(
+      (accumulator, current) => accumulator + current.score.total,
+      0
+    );
+    const aggregatedScores = aggregateScoresByModule(dateStats).filter(
+      (x) => x.total > 0
+    );
+    const assignmentID = dateStats.reduce(
+      (_, current) => current.assignment as any,
+      ""
+    );
     const assignment = assignments.find((a) => a.id === assignmentID);
     const isDisabled = dateStats.some((x) => x.isDisabled);
 
@@ -192,11 +236,11 @@ export default function History({user}: {user: User}) {
       level: calculateBandScore(x.correct, x.total, x.module, user.focus),
     }));
 
-		const {timeSpent, inactivity, session} = dateStats[0];
+    const { timeSpent, inactivity, session } = dateStats[0];
 
     const selectExam = () => {
       const examPromises = uniqBy(dateStats, "exam").map((stat) => {
-				console.log({stat});
+        console.log({ stat });
         return getExamById(stat.module, stat.exam);
       });
 
@@ -212,7 +256,7 @@ export default function History({user}: {user: User}) {
             exams
               .map((x) => x!)
               .sort(sortByModule)
-							.map((x) => x!.module),
+              .map((x) => x!.module)
           );
           router.push("/exercises");
         }
@@ -222,7 +266,7 @@ export default function History({user}: {user: User}) {
     const textColor = clsx(
       correct / total >= 0.7 && "text-mti-purple",
       correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
-			correct / total < 0.3 && "text-mti-rose",
+      correct / total < 0.3 && "text-mti-rose"
     );
 
     const content = (
@@ -232,12 +276,18 @@ export default function History({user}: {user: User}) {
             <span className="font-medium">{formatTimestamp(timestamp)}</span>
             <div className="flex items-center gap-2">
               {!!timeSpent && (
-								<span className="text-sm flex gap-2 items-center tooltip" data-tip="Time Spent">
+                <span
+                  className="text-sm flex gap-2 items-center tooltip"
+                  data-tip="Time Spent"
+                >
                   <BsClock /> {Math.floor(timeSpent / 60)} minutes
                 </span>
               )}
               {!!inactivity && (
-								<span className="text-sm flex gap-2 items-center tooltip" data-tip="Inactivity">
+                <span
+                  className="text-sm flex gap-2 items-center tooltip"
+                  data-tip="Inactivity"
+                >
                   <BsXCircle /> {Math.floor(inactivity / 60)} minutes
                 </span>
               )}
@@ -246,7 +296,12 @@ export default function History({user}: {user: User}) {
           <div className="flex flex-row gap-2">
             <span className={textColor}>
               Level{" "}
-							{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
+              {(
+                aggregatedLevels.reduce(
+                  (accumulator, current) => accumulator + current.level,
+                  0
+                ) / aggregatedLevels.length
+              ).toFixed(1)}
             </span>
             {renderPdfIcon(session, textColor, textColor)}
           </div>
@@ -254,7 +309,7 @@ export default function History({user}: {user: User}) {
 
         <div className="w-full flex flex-col gap-1">
           <div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
-						{aggregatedLevels.map(({module, level}) => (
+            {aggregatedLevels.map(({ module, level }) => (
               <div
                 key={module}
                 className={clsx(
@@ -263,8 +318,9 @@ export default function History({user}: {user: User}) {
                   module === "listening" && "bg-ielts-listening",
                   module === "writing" && "bg-ielts-writing",
                   module === "speaking" && "bg-ielts-speaking",
-									module === "level" && "bg-ielts-level",
+                  module === "level" && "bg-ielts-level"
-								)}>
+                )}
+              >
                 {module === "reading" && <BsBook className="w-4 h-4" />}
                 {module === "listening" && <BsHeadphones className="w-4 h-4" />}
                 {module === "writing" && <BsPen className="w-4 h-4" />}
@@ -277,7 +333,8 @@ export default function History({user}: {user: User}) {
 
           {assignment && (
             <span className="font-light text-sm">
-							Assignment: {assignment.name}, Teacher: {users.find((u) => u.id === assignment.assigner)?.name}
+              Assignment: {assignment.name}, Teacher:{" "}
+              {users.find((u) => u.id === assignment.assigner)?.name}
             </span>
           )}
         </div>
@@ -292,12 +349,15 @@ export default function History({user}: {user: User}) {
             "flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
             isDisabled && "grayscale tooltip",
             correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+            correct / total >= 0.3 &&
-						correct / total < 0.3 && "hover:border-mti-rose",
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
           )}
           onClick={isDisabled ? () => null : selectExam}
           data-tip="This exam is still being evaluated..."
-					role="button">
+          role="button"
+        >
           {content}
         </div>
         <div
@@ -305,18 +365,86 @@ export default function History({user}: {user: User}) {
           className={clsx(
             "flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
             correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+            correct / total >= 0.3 &&
-						correct / total < 0.3 && "hover:border-mti-rose",
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
           )}
           data-tip="Your screen size is too small to view previous exams."
-					role="button">
+          role="button"
+        >
           {content}
         </div>
       </>
     );
   };
 
-	const selectedUser = users.find((x) => x.id === statsUserId) || user;
+  const selectableCorporates = [
+    defaultSelectableCorporate,
+    ...users
+      .filter((x) => x.type === "corporate")
+      .map((x) => ({
+        value: x.id,
+        label: `${x.name} - ${x.email}`,
+      })),
+  ];
+
+  const [selectedCorporate, setSelectedCorporate] = useState<string>(
+    defaultSelectableCorporate.value
+  );
+
+  const getUsersList = (): User[] => {
+    if (selectedCorporate) {
+      // get groups for that corporate
+      const selectedCorporateGroups = allGroups.filter(
+        (x) => x.admin === selectedCorporate
+      );
+
+      // get the teacher ids for that group
+      const selectedCorporateGroupsParticipants =
+        selectedCorporateGroups.flatMap((x) => x.participants);
+
+      //   // search for groups for these teachers
+      //   const teacherGroups = allGroups.filter((x) => {
+      //     return selectedCorporateGroupsParticipants.includes(x.admin);
+      //   });
+
+      //   const usersList = [
+      //     ...selectedCorporateGroupsParticipants,
+      //     ...teacherGroups.flatMap((x) => x.participants),
+      //   ];
+      const userListWithUsers = selectedCorporateGroupsParticipants.map((x) =>
+        users.find((y) => y.id === x)
+      ) as User[];
+      return userListWithUsers.filter((x) => x);
+    }
+
+    return users || [];
+  };
+
+  const corporateFilteredUserList = getUsersList();
+
+  const getSelectedUser = () => {
+    if (selectedCorporate) {
+      const userInCorporate = corporateFilteredUserList.find(
+        (x) => x.id === statsUserId
+      );
+      return userInCorporate || corporateFilteredUserList[0];
+    }
+
+    return users.find((x) => x.id === statsUserId) || user;
+  };
+
+  const selectedUser = getSelectedUser();
+  const selectedUserSelectValue = selectedUser
+    ? {
+        value: selectedUser.id,
+        label: `${selectedUser.name} - ${selectedUser.email}`,
+      }
+    : {
+        value: "",
+        label: "",
+      };
   return (
     <>
       <Head>
@@ -334,36 +462,90 @@ export default function History({user}: {user: User}) {
           <div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
             <div className="xl:w-3/4">
               {(user.type === "developer" || user.type === "admin") && (
+                <>
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    Corporate
+                  </label>
+
                   <Select
-									options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
+                    options={selectableCorporates}
-									value={{value: selectedUser.id, label: `${selectedUser.name} - ${selectedUser.email}`}}
+                    value={selectableCorporates.find(
-									onChange={(value) => setStatsUserId(value?.value)}
+                      (x) => x.value === selectedCorporate
+                    )}
+                    onChange={(value) =>
+                      setSelectedCorporate(value?.value || "")
+                    }
                     styles={{
-										menuPortal: (base) => ({...base, zIndex: 9999}),
+                      menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                       option: (styles, state) => ({
                         ...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                        backgroundColor: state.isFocused
+                          ? "#D5D9F0"
+                          : state.isSelected
+                          ? "#7872BF"
+                          : "white",
+                        color: state.isFocused ? "black" : styles.color,
+                      }),
+                    }}
+                  ></Select>
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    User
+                  </label>
+
+                  <Select
+                    options={corporateFilteredUserList.map((x) => ({
+                      value: x.id,
+                      label: `${x.name} - ${x.email}`,
+                    }))}
+                    value={selectedUserSelectValue}
+                    onChange={(value) => setStatsUserId(value?.value)}
+                    styles={{
+                      menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                      option: (styles, state) => ({
+                        ...styles,
+                        backgroundColor: state.isFocused
+                          ? "#D5D9F0"
+                          : state.isSelected
+                          ? "#7872BF"
+                          : "white",
                         color: state.isFocused ? "black" : styles.color,
                       }),
                     }}
                   />
+                </>
               )}
-							{(user.type === "corporate" || user.type === "teacher") && groups.length > 0 && (
+              {(user.type === "corporate" || user.type === "teacher") &&
+                groups.length > 0 && (
+                  <>
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      User
+                    </label>
+
                     <Select
                       options={users
-										.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
+                        .filter((x) =>
-										.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
+                          groups.flatMap((y) => y.participants).includes(x.id)
-									value={{value: selectedUser.id, label: `${selectedUser.name} - ${selectedUser.email}`}}
+                        )
+                        .map((x) => ({
+                          value: x.id,
+                          label: `${x.name} - ${x.email}`,
+                        }))}
+                      value={selectedUserSelectValue}
                       onChange={(value) => setStatsUserId(value?.value)}
                       styles={{
-										menuPortal: (base) => ({...base, zIndex: 9999}),
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                         option: (styles, state) => ({
                           ...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                            ? "#7872BF"
+                            : "white",
                           color: state.isFocused ? "black" : styles.color,
                         }),
                       }}
                     />
+                  </>
                 )}
             </div>
             <div className="flex gap-4 w-full justify-center xl:justify-end">
@@ -371,49 +553,59 @@ export default function History({user}: {user: User}) {
                 className={clsx(
                   "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
                   "transition duration-300 ease-in-out",
-									filter === "assignments" && "!bg-mti-purple-light !text-white",
+                  filter === "assignments" && "!bg-mti-purple-light !text-white"
                 )}
-								onClick={() => toggleFilter("assignments")}>
+                onClick={() => toggleFilter("assignments")}
+              >
                 Assignments
               </button>
               <button
                 className={clsx(
                   "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
                   "transition duration-300 ease-in-out",
-									filter === "months" && "!bg-mti-purple-light !text-white",
+                  filter === "months" && "!bg-mti-purple-light !text-white"
                 )}
-								onClick={() => toggleFilter("months")}>
+                onClick={() => toggleFilter("months")}
+              >
                 Last month
               </button>
               <button
                 className={clsx(
                   "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
                   "transition duration-300 ease-in-out",
-									filter === "weeks" && "!bg-mti-purple-light !text-white",
+                  filter === "weeks" && "!bg-mti-purple-light !text-white"
                 )}
-								onClick={() => toggleFilter("weeks")}>
+                onClick={() => toggleFilter("weeks")}
+              >
                 Last week
               </button>
               <button
                 className={clsx(
                   "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
                   "transition duration-300 ease-in-out",
-									filter === "days" && "!bg-mti-purple-light !text-white",
+                  filter === "days" && "!bg-mti-purple-light !text-white"
                 )}
-								onClick={() => toggleFilter("days")}>
+                onClick={() => toggleFilter("days")}
+              >
                 Last day
               </button>
             </div>
           </div>
-					{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
+          {groupedStats &&
+            Object.keys(groupedStats).length > 0 &&
+            !isStatsLoading && (
               <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full gap-4 xl:gap-6">
                 {Object.keys(filterStatsByDate(groupedStats))
                   .sort((a, b) => parseInt(b) - parseInt(a))
                   .map(customContent)}
               </div>
             )}
-					{groupedStats && Object.keys(groupedStats).length === 0 && !isStatsLoading && (
+          {groupedStats &&
-						<span className="font-semibold ml-1">No record to display...</span>
+            Object.keys(groupedStats).length === 0 &&
+            !isStatsLoading && (
+              <span className="font-semibold ml-1">
+                No record to display...
+              </span>
             )}
         </Layout>
       )}