Updated Master Statistical

src/dashboards/MasterCorporate.tsx

@@ -625,7 +625,8 @@ export default function MasterCorporateDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Master Statistical</h2>
 				</div>
 				<MasterStatistical
-					users={masterCorporateUserGroups.reduce((accm: CorporateUser[], id) => {
+					users={users}
+					corporateUsers={masterCorporateUserGroups.reduce((accm: CorporateUser[], id) => {
 						const user = users.find((u) => u.id === id) as CorporateUser;
 						if (user) return [...accm, user];
 						return accm;
@@ -694,13 +695,13 @@ export default function MasterCorporateDashboard({user}: Props) {
 					color="purple"
 					onClick={() => setPage("studentsPerformance")}
 				/>
-				{/* <IconCard
+				<IconCard
 					Icon={BsDatabase}
 					label="Master Statistical"
 					// value={masterCorporateUserGroups.length}
 					color="purple"
 					onClick={() => setPage("statistical")}
-				/> */}
+				/>
 				<button
 					disabled={isAssignmentsLoading}
 					onClick={() => setPage("assignments")}

src/dashboards/MasterStatistical.tsx

@@ -1,34 +1,108 @@
 import React from "react";
-import {CorporateUser} from "@/interfaces/user";
-import {BsBank, BsPersonFill} from "react-icons/bs";
+import { CorporateUser, User } from "@/interfaces/user";
+import { BsBank, BsPersonFill } from "react-icons/bs";
 import IconCard from "./IconCard";
 import useAssignmentsCorporates from "@/hooks/useAssignmentCorporates";
+import ReactDatePicker from "react-datepicker";
+import moment from "moment";
+import { groupBySession } from "@/utils/stats";
+import { Assignment, AssignmentResult } from "@/interfaces/results";
+
 interface Props {
-	users: CorporateUser[];
+  corporateUsers: CorporateUser[];
+  users: User[];
+}
+
+interface TableData {
+  user: string;
+  correct: number;
+  corporate: string;
+  submitted: boolean;
+  date: moment.Moment;
+  assignment: string;
 }
 const MasterStatistical = (props: Props) => {
-	const {users} = props;
+  const { users, corporateUsers } = props;
 
-	const usersList = React.useMemo(() => users.map((x) => x.id), [users]);
+  const corporates = React.useMemo(() => corporateUsers.map((x) => x.id), [corporateUsers]);
+  const [startDate, setStartDate] = React.useState<Date | null>(
+    moment("01/01/2023").toDate()
+  );
+  const [endDate, setEndDate] = React.useState<Date | null>(
+    moment().endOf("year").toDate()
+  );
 
-	const {assignments} = useAssignmentsCorporates({corporates: usersList});
+  const { assignments } = useAssignmentsCorporates({
+    corporates,
+    startDate,
+    endDate,
+  });
 
-	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)}
-				/>
-			))}
-			<IconCard onClick={() => console.log("clicked")} Icon={BsPersonFill} label="Consolidate Highest Student" color="purple" />
-		</div>
-	);
+
+  const x = assignments.reduce((accmA: TableData[], a: Assignment) => {
+    const userResults = a.results.reduce((accmB: TableData[], r: AssignmentResult) => {
+      const userStats = groupBySession(r.stats);
+      const data = Object.keys(userStats).map((key) => ({
+        user: users.find((u) => u.id === r.user)?.name || "",
+        correct: userStats[key].reduce((n, e) => n + e.score.correct, 0),
+        corporate: users.find((u) => u.id === a.assigner)?.name || "",
+        submitted: false,
+        date: moment.max(userStats[key].map((e) => moment(e.date))),
+        assignment: a.name,
+      }));
+      return [...accmB, ...data];
+    }, []);
+
+    return [...accmA, ...userResults];
+  }, []);
+  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")}
+      />
+      {corporateUsers.map((group) => (
+        <IconCard
+          key={group.id}
+          Icon={BsBank}
+          label={group.corporateInformation?.companyInformation?.name}
+          value={0}
+          color="purple"
+          onClick={() => console.log("clicked", group)}
+        />
+      ))}
+
+      <ReactDatePicker
+        dateFormat="dd/MM/yyyy"
+        className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
+        selected={startDate}
+        startDate={startDate}
+        endDate={endDate}
+        selectsRange
+        showMonthDropdown
+        onChange={([initialDate, finalDate]: [Date, Date]) => {
+          setStartDate(initialDate ?? moment("01/01/2023").toDate());
+          if (finalDate) {
+            // basicly selecting a final day works as if I'm selecting the first
+            // minute of that day. this way it covers the whole day
+            setEndDate(moment(finalDate).endOf("day").toDate());
+            return;
+          }
+          setEndDate(null);
+        }}
+      />
+
+      <IconCard
+        onClick={() => console.log("clicked")}
+        Icon={BsPersonFill}
+        label="Consolidate Highest Student"
+        color="purple"
+      />
+    </div>
+  );
 };
 
 export default MasterStatistical;