Added a screen to display the desired levels for the students of a specific corporate

src/dashboards/Admin.tsx

@@ -25,6 +25,7 @@ import IconCard from "./IconCard";
 import useFilterStore from "@/stores/listFilterStore";
 import { useRouter } from "next/router";
 import usePaymentStatusUsers from "@/hooks/usePaymentStatusUsers";
+import CorporateStudentsLevels from "./CorporateStudentsLevels";
 
 interface Props {
   user: User;
@@ -293,6 +294,26 @@ export default function AdminDashboard({ user }: Props) {
     );
   };
 
+  const CorporateStudentsLevelsHelper = () => {
+    return (
+      <>
+        <div className="flex flex-col gap-4">
+          <div
+            onClick={() => setPage("")}
+            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">
+            Corporate Students Levels
+          </h2>
+        </div>
+        <CorporateStudentsLevels />
+      </>
+    );
+  };
+
   const DefaultDashboard = () => (
     <>
       <section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
@@ -393,6 +414,12 @@ export default function AdminDashboard({ user }: Props) {
           label="Content Management System (CMS)"
           color="green"
         />
+        <IconCard
+          onClick={() => setPage("corporatestudentslevels")}
+          Icon={BsPersonFill}
+          label="Corporate Students Levels"
+          color="purple"
+        />
       </section>
 
       <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
@@ -681,6 +708,7 @@ export default function AdminDashboard({ user }: Props) {
       {page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
       {page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
       {page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
+      {page === "corporatestudentslevels" && <CorporateStudentsLevelsHelper />}
       {page === "" && <DefaultDashboard />}
     </>
   );

src/dashboards/CorporateStudentsLevels.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import useUsers from "@/hooks/useUsers";
+import useGroups from "@/hooks/useGroups";
+import { User } from "@/interfaces/user";
+import Select from "@/components/Low/Select";
+import ProgressBar from "@/components/Low/ProgressBar";
+import {
+  BsBook,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+} from "react-icons/bs";
+import { MODULE_ARRAY } from "@/utils/moduleUtils";
+import { capitalize } from "lodash";
+import { getLevelLabel } from "@/utils/score";
+
+const Card = ({ user }: { user: User }) => {
+  return (
+    <div className="border-mti-gray-platinum flex flex-col h-fit w-full cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
+      <div className="flex flex-col gap-3">
+        <h3 className="text-xl font-semibold">{user.name}</h3>
+      </div>
+      <div className="flex w-full gap-3 flex-wrap">
+        {MODULE_ARRAY.map((module) => {
+          const desiredLevel = user.desiredLevels[module] || 9;
+          const level = user.levels[module] || 0;
+          return (
+            <div
+              className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4 min-w-[250px]"
+              key={module}
+            >
+              <div className="flex items-center gap-2 md:gap-3">
+                <div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+                  {module === "reading" && (
+                    <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "listening" && (
+                    <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "writing" && (
+                    <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "speaking" && (
+                    <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "level" && (
+                    <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                </div>
+                <div className="flex w-full flex-col">
+                  <span className="text-sm font-bold md:font-extrabold w-full">
+                    {capitalize(module)}
+                  </span>
+                  <div className="text-mti-gray-dim text-sm font-normal">
+                    {module === "level" && (
+                      <span>
+                        English Level: {getLevelLabel(level).join(" / ")}
+                      </span>
+                    )}
+                    {module !== "level" && (
+                      <div className="flex flex-col">
+                        <span>Level {level} / Level 9</span>
+                        <span>Desired Level: {desiredLevel}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="md:pl-14">
+                <ProgressBar
+                  color={module}
+                  label=""
+                  mark={Math.round((desiredLevel * 100) / 9)}
+                  markLabel={`Desired Level: ${desiredLevel}`}
+                  percentage={Math.round((level * 100) / 9)}
+                  className="h-2 w-full"
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const CorporateStudentsLevels = () => {
+  const { users } = useUsers();
+  const { groups } = useGroups();
+
+  const corporateUsers = users.filter((u) => u.type === "corporate") as User[];
+  const [corporateId, setCorporateId] = React.useState<string>("");
+  const corporate =
+    corporateUsers.find((u) => u.id === corporateId) || corporateUsers[0];
+
+  const groupsFromCorporate = corporate
+    ? groups.filter((g) => g.admin === corporate.id)
+    : [];
+
+  const groupsParticipants = groupsFromCorporate
+    .flatMap((g) => g.participants)
+    .reduce((accm: User[], p) => {
+      const user = users.find((u) => u.id === p) as User;
+      if (user) {
+        return [...accm, user];
+      }
+      return accm;
+    }, []);
+
+  return (
+    <>
+      <Select
+        options={corporateUsers.map((x: User) => ({
+          value: x.id,
+          label: `${x.name} - ${x.email}`,
+        }))}
+        value={corporate ? { value: corporate.id, label: corporate.name } : null}
+        onChange={(value) => setCorporateId(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,
+          }),
+        }}
+      />
+      {groupsParticipants.map((u) => (
+        <Card user={u} key={u.id} />
+      ))}
+    </>
+  );
+};
+
+export default CorporateStudentsLevels;