Major updates on Master Statistical

src/dashboards/IconCard.tsx

@@ -1,36 +1,49 @@
 import clsx from "clsx";
-import {IconType} from "react-icons";
+import { IconType } from "react-icons";
 
 interface Props {
-	Icon: IconType;
+  Icon: IconType;
-	label: string;
+  label: string;
-	value?: string | number;
+  value?: string | number;
-	color: "purple" | "rose" | "red" | "green";
+  color: "purple" | "rose" | "red" | "green";
-	tooltip?: string;
+  tooltip?: string;
-	onClick?: () => void;
+  onClick?: () => void;
+  isSelected?: boolean;
 }
 
-export default function IconCard({Icon, label, value, color, tooltip, onClick}: Props) {
+export default function IconCard({
-	const colorClasses: {[key in typeof color]: string} = {
+  Icon,
-		purple: "text-mti-purple-light",
+  label,
-		red: "text-mti-red-light",
+  value,
-		rose: "text-mti-rose-light",
+  color,
-		green: "text-mti-green-light",
+  tooltip,
-	};
+  onClick,
+  isSelected,
+}: Props) {
+  const colorClasses: { [key in typeof color]: string } = {
+    purple: "mti-purple-light",
+    red: "mti-red-light",
+    rose: "mti-rose-light",
+    green: "mti-green-light",
+  };
 
-	return (
+  return (
-		<div
+    <div
-			onClick={onClick}
+      onClick={onClick}
-			className={clsx(
+      className={clsx(
-				"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
+        "bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
-				tooltip && "tooltip tooltip-bottom",
+        tooltip && "tooltip tooltip-bottom",
-			)}
+        isSelected && `border border-solid border-${colorClasses[color]}`
-			data-tip={tooltip}>
+      )}
-			<Icon className={clsx("text-6xl", colorClasses[color])} />
+      data-tip={tooltip}
-			<span className="flex flex-col gap-1 items-center text-xl">
+    >
-				<span className="text-lg">{label}</span>
+      <Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
-				<span className={clsx("font-semibold", colorClasses[color])}>{value}</span>
+      <span className="flex flex-col gap-1 items-center text-xl">
-			</span>
+        <span className="text-lg">{label}</span>
-		</div>
+        <span className={clsx("font-semibold", `text-${colorClasses[color]}`)}>
-	);
+          {value}
+        </span>
+      </span>
+    </div>
+  );
 }

src/dashboards/MasterStatistical.tsx

@@ -5,11 +5,20 @@ 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, AssignmentWithCorporateId } from "@/interfaces/results";
-import { Assignment, AssignmentResult } from "@/interfaces/results";
+import {
+  CellContext,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  HeaderGroup,
+  Table,
+  useReactTable,
+} from "@tanstack/react-table";
+import Checkbox from "@/components/Low/Checkbox";
 
 interface Props {
-  corporateUsers: CorporateUser[];
+  corporateUsers: User[];
   users: User[];
 }
 
@@ -20,11 +29,29 @@ interface TableData {
   submitted: boolean;
   date: moment.Moment;
   assignment: string;
+  corporateId: string;
 }
+
+interface UserCount {
+  userCount: number;
+  maxUserCount: number;
+}
+
 const MasterStatistical = (props: Props) => {
   const { users, corporateUsers } = props;
 
-  const corporates = React.useMemo(() => corporateUsers.map((x) => x.id), [corporateUsers]);
+  const corporateRelevantUsers = React.useMemo(
+    () => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
+    [corporateUsers]
+  );
+
+  const corporates = React.useMemo(
+    () => corporateRelevantUsers.map((x) => x.id),
+    [corporateRelevantUsers]
+  );
+
+  const [selectedCorporates, setSelectedCorporates] =
+    React.useState<string[]>(corporates);
   const [startDate, setStartDate] = React.useState<Date | null>(
     moment("01/01/2023").toDate()
   );
@@ -33,75 +60,249 @@ const MasterStatistical = (props: Props) => {
   );
 
   const { assignments } = useAssignmentsCorporates({
-    corporates,
+    // corporates: [...corporates, "tYU0HTiJdjMsS8SB7XJsUdMMP892"],
+    corporates: selectedCorporates,
     startDate,
     endDate,
   });
 
-
+  const tableResults = React.useMemo(
-  const x = assignments.reduce((accmA: TableData[], a: Assignment) => {
+    () =>
-    const userResults = a.results.reduce((accmB: TableData[], r: AssignmentResult) => {
+      assignments.reduce((accmA: TableData[], a: AssignmentWithCorporateId) => {
-      const userStats = groupBySession(r.stats);
+        const userResults = a.assignees.map((assignee) => {
-      const data = Object.keys(userStats).map((key) => ({
+          const userStats =
-        user: users.find((u) => u.id === r.user)?.name || "",
+            a.results.find((r) => r.user === assignee)?.stats || [];
-        correct: userStats[key].reduce((n, e) => n + e.score.correct, 0),
+          const userName = users.find((u) => u.id === assignee)?.name || "";
-        corporate: users.find((u) => u.id === a.assigner)?.name || "",
+          const corporate = users.find((u) => u.id === a.assigner)?.name || "";
-        submitted: false,
+          const commonData = {
-        date: moment.max(userStats[key].map((e) => moment(e.date))),
+            user: userName,
-        assignment: a.name,
+            corporateId: a.corporateId,
-      }));
+            corporate,
-      return [...accmB, ...data];
+            assignment: a.name,
-    }, []);
+          };
-
+          if (userStats.length === 0) {
-    return [...accmA, ...userResults];
+            return {
-  }, []);
+              ...commonData,
-  return (
+              correct: 0,
-    <div className="flex flex-wrap gap-2 items-center text-center">
+              submitted: false,
-      <IconCard
+              // date: moment(),
-        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
+          return {
-        onClick={() => console.log("clicked")}
+            ...commonData,
-        Icon={BsPersonFill}
+            correct: userStats.reduce((n, e) => n + e.score.correct, 0),
-        label="Consolidate Highest Student"
+            submitted: true,
-        color="purple"
+            date: moment.max(userStats.map((e) => moment(e.date))),
-      />
+          };
-    </div>
+        }) as TableData[];
+
+        return [...accmA, ...userResults];
+      }, []),
+    [assignments, users]
+  );
+
+  const getCorporateScores = (corporateId: string): UserCount => {
+    const corporateAssignmentsUsers = assignments
+      .filter((a) => a.corporateId === corporateId)
+      .reduce((acc, a) => acc + a.assignees.length, 0);
+
+    const corporateResults = tableResults.filter(
+      (r) => r.corporateId === corporateId
+    ).length;
+
+    return {
+      maxUserCount: corporateAssignmentsUsers,
+      userCount: corporateResults,
+    };
+  };
+
+  const corporateScores = corporates.reduce(
+    (accm, id) => ({
+      ...accm,
+      [id]: getCorporateScores(id),
+    }),
+    {}
+  ) as Record<string, UserCount>;
+
+  const consolidateScore = Object.values(corporateScores).reduce(
+    (acc: UserCount, { userCount, maxUserCount }: UserCount) => ({
+      userCount: acc.userCount + userCount,
+      maxUserCount: acc.maxUserCount + maxUserCount,
+    }),
+    { userCount: 0, maxUserCount: 0 }
+  );
+
+  const getConsolidateScoreStr = (data: UserCount) =>
+    `${data.userCount}/${data.maxUserCount}`;
+
+  const columnHelper = createColumnHelper<TableData>();
+
+  const defaultColumns = [
+    columnHelper.accessor("user", {
+      header: "User",
+      id: "user",
+      cell: (info) => {
+        return <span>{info.getValue()}</span>;
+      },
+    }),
+    columnHelper.accessor("corporate", {
+      header: "Corporate",
+      id: "corporate",
+      cell: (info) => {
+        return <span>{info.getValue()}</span>;
+      },
+    }),
+    columnHelper.accessor("assignment", {
+      header: "Assignment",
+      id: "assignment",
+      cell: (info) => {
+        return <span>{info.getValue()}</span>;
+      },
+    }),
+    columnHelper.accessor("submitted", {
+      header: "Submitted",
+      id: "submitted",
+      cell: (info) => {
+        return (
+          <Checkbox isChecked={info.getValue()} disabled onChange={() => {}}>
+            <span></span>
+          </Checkbox>
+        );
+      },
+    }),
+    columnHelper.accessor("correct", {
+      header: "Correct",
+      id: "correct",
+      cell: (info) => {
+        return <span>{info.getValue()}</span>;
+      },
+    }),
+    columnHelper.accessor("date", {
+      header: "Date",
+      id: "date",
+      cell: (info) => {
+        const date = info.getValue();
+        if (date) {
+          return <span>{date.format("DD/MM/YYYY")}</span>;
+        }
+
+        return <span>{""}</span>;
+      },
+    }),
+  ];
+
+  const table = useReactTable({
+    data: tableResults,
+    columns: defaultColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const areAllSelected = selectedCorporates.length === corporates.length;
+  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}
+        />
+        {corporateRelevantUsers.map((group) => {
+          const isSelected = selectedCorporates.includes(group.id);
+          return (
+            <IconCard
+              key={group.id}
+              Icon={BsBank}
+              label={group.corporateInformation?.companyInformation?.name}
+              value={getConsolidateScoreStr(corporateScores[group.id])}
+              color="purple"
+              onClick={() => {
+                if (isSelected) {
+                  setSelectedCorporates(
+                    selectedCorporates.filter((x) => x !== group.id)
+                  );
+                  return;
+                }
+                setSelectedCorporates([...selectedCorporates, group.id]);
+              }}
+              isSelected={isSelected}
+            />
+          );
+        })}
+      </div>
+      <div className="flex gap-3 w-full">
+        <ReactDatePicker
+          dateFormat="dd/MM/yyyy"
+          className="px-4 py-6 w-52 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);
+          }}
+        />
+      </div>
+      <div>
+        <table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th className="p-4 text-left" key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody className="px-2">
+            {table.getRowModel().rows.map((row) => (
+              <tr
+                className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+                key={row.id}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td className="px-4 py-2" key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <IconCard
+          onClick={() => console.log("clicked")}
+          Icon={BsPersonFill}
+          label="Consolidate Highest Student"
+          color="purple"
+        />
+      </div>
+    </>
   );
 };
 

src/hooks/useAssignmentCorporates.tsx

@@ -1,6 +1,5 @@
-import { Assignment } from "@/interfaces/results";
+import { AssignmentWithCorporateId } from "@/interfaces/results";
 import axios from "axios";
-import moment from "moment";
 import { useEffect, useState } from "react";
 
 export default function useAssignmentsCorporates({
@@ -12,7 +11,7 @@ export default function useAssignmentsCorporates({
   startDate: Date | null;
   endDate: Date | null;
 }) {
-  const [assignments, setAssignments] = useState<Assignment[]>([]);
+  const [assignments, setAssignments] = useState<AssignmentWithCorporateId[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
@@ -30,7 +29,7 @@ export default function useAssignmentsCorporates({
     });
 
     axios
-      .get<Assignment[]>(
+      .get<AssignmentWithCorporateId[]>(
         `/api/assignments/corporate?${urlSearchParams.toString()}`
       )
       .then(async (response) => {

src/interfaces/results.ts

@@ -29,3 +29,5 @@ export interface Assignment {
 	archived?: boolean;
 	released?: boolean;
 }
+
+export type AssignmentWithCorporateId = Assignment & { corporateId: string };

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

@@ -5,7 +5,6 @@ import { sessionOptions } from "@/lib/session";
 import { getAllAssignersByCorporate } from "@/utils/groups.be";
 import { getAssignmentsByAssigners } from "@/utils/assignments.be";
 
-
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -20,17 +19,49 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function GET(req: NextApiRequest, res: NextApiResponse) {
-  const { ids, startDate, endDate } = req.query as { ids: string, startDate?: string, endDate?: string };
+  const { ids, startDate, endDate } = req.query as {
+    ids: string;
+    startDate?: string;
+    endDate?: string;
+  };
 
   const startDateParsed = startDate ? new Date(startDate) : undefined;
   const endDateParsed = endDate ? new Date(endDate) : undefined;
   try {
     const idsList = ids.split(",");
 
-    const assigners = await Promise.all(idsList.map(getAllAssignersByCorporate));
+    const assigners = await Promise.all(
-    const assignmentList = [...assigners.flat(), ...idsList];
+      idsList.map(async (id) => {
-    const assignments = await getAssignmentsByAssigners(assignmentList, startDateParsed, endDateParsed);
+        const assigners = await getAllAssignersByCorporate(id);
-    res.status(200).json(assignments);
+        return {
+          corporateId: id,
+          assigners,
+        };
+      })
+    );
+
+    const assignments = await Promise.all(assigners.map(async (data) => {
+      try {
+        const assigners = [...new Set([...data.assigners, data.corporateId])];
+        const assignments = await getAssignmentsByAssigners(
+          assigners,
+          startDateParsed,
+          endDateParsed
+        );
+        return assignments.map((assignment) => ({
+          ...assignment,
+          corporateId: data.corporateId,
+        }));
+      } catch (err) {
+        console.error(err);
+        return [];
+      }
+    }));
+
+    console.log(assignments);
+
+    // const assignments = await getAssignmentsByAssigners(assignmentList, startDateParsed, endDateParsed);
+    res.status(200).json(assignments.flat());
   } catch (err: any) {
     res.status(500).json({ error: err.message });
   }

src/utils/stats.ts

@@ -128,6 +128,7 @@ export const groupBySession = (stats: Stat[]) => groupBy(stats, "session");
 export const groupByDate = (stats: Stat[]) => groupBy(stats, "date");
 export const groupByExam = (stats: Stat[]) => groupBy(stats, "exam");
 export const groupByModule = (stats: Stat[]) => groupBy(stats, "module");
+export const groupByUser = (stats: Stat[]) => groupBy(stats, "user");
 
 export const convertToUserSolutions = (stats: Stat[]): UserSolution[] => {
 	return stats.map((stat) => ({