Added new pages and nav with menu

Implemented limit 5 sessions per User

Approved-by: Tiago Ribeiro

package.json

@@ -114,5 +114,6 @@
 		"husky": "^8.0.3",
 		"postcss": "^8.4.21",
 		"tailwindcss": "^3.2.4"
-	}
+	},
+	"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

scripts/updatePrivateFieldExams.js

@@ -0,0 +1,51 @@
+import dotenv from "dotenv";
+dotenv.config();
+import { MongoClient } from "mongodb";
+const uri = process.env.MONGODB_URI || "";
+const options = {
+  maxPoolSize: 10,
+};
+const dbName = process.env.MONGODB_DB; // change this to prod db when needed
+async function migrateData() {
+  const MODULE_ARRAY = ["reading", "listening", "writing", "speaking", "level"];
+  const client = new MongoClient(uri, options);
+
+  try {
+    await client.connect();
+    console.log("Connected to MongoDB");
+    if (!process.env.MONGODB_DB) {
+      throw new Error("Missing env var: MONGODB_DB");
+    }
+    const db = client.db(dbName);
+    for (const string of MODULE_ARRAY) {
+      const collection = db.collection(string);
+      const result = await collection.updateMany(
+        { private: { $exists: false } },
+        { $set: { access: "public" } }
+      );
+      const result2 = await collection.updateMany(
+        { private: true },
+        { $set: { access: "private" }, $unset: { private: "" } }
+      );
+      const result1 = await collection.updateMany(
+        { private: { $exists: true } },
+        { $set: { access: "public" } }
+      );
+      console.log(
+        `Updated ${
+          result.modifiedCount + result1.modifiedCount
+        } documents to "access: public" in ${string}`
+      );
+      console.log(
+        `Updated ${result2.modifiedCount} documents to "access: private" and removed private var in ${string}`
+      );
+    }
+    console.log("Migration completed successfully!");
+  } catch (error) {
+    console.error("Migration failed:", error);
+  } finally {
+    await client.close();
+    console.log("MongoDB connection closed.");
+  }
+}
+//migrateData(); // uncomment to run the migration

src/components/Diagnostic.tsx

@@ -1,17 +1,12 @@
-import {infoButtonStyle} from "@/constants/buttonStyles";
-import {Module} from "@/interfaces";
 import {User} from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
-import {getExam, getExamById} from "@/utils/exams";
+import {getExam} from "@/utils/exams";
 import {MODULE_ARRAY} from "@/utils/moduleUtils";
-import {writingMarking} from "@/utils/score";
-import {Menu} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize} from "lodash";
 import {useRouter} from "next/router";
-import {useEffect, useState} from "react";
+import { useState} from "react";
-import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen, BsQuestionSquare} from "react-icons/bs";
+import { BsQuestionSquare} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Button from "./Low/Button";
 import ModuleLevelSelector from "./Medium/ModuleLevelSelector";

src/components/ExamEditor/Exercises/Blanks/Letters/index.tsx

@@ -13,6 +13,7 @@ import validateBlanks from "../validateBlanks";
 import { toast } from "react-toastify";
 import setEditingAlert from "../../Shared/setEditingAlert";
 import PromptEdit from "../../Shared/PromptEdit";
+import { uuidv4 } from "@firebase/util";
 
 interface Word {
     letter: string;
@@ -72,6 +73,7 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
                 ...local,
                 text: blanksState.text,
                 solutions: Array.from(answers.entries()).map(([id, solution]) => ({
+                    uuid: local.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                     id,
                     solution
                 }))
@@ -145,6 +147,7 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
         setLocal(prev => ({
             ...prev,
             solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
+                uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                 id,
                 solution
             }))
@@ -189,6 +192,7 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
                 ...prev,
                 words: newWords,
                 solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
+                    uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                     id,
                     solution
                 }))
@@ -217,6 +221,7 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
                 ...prev,
                 words: newWords,
                 solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
+                    uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                     id,
                     solution
                 }))
@@ -234,6 +239,7 @@ const FillBlanksLetters: React.FC<{ exercise: FillBlanksExercise; sectionId: num
         setLocal(prev => ({
             ...prev,
             solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
+                uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                 id,
                 solution
             }))

src/components/ExamEditor/Exercises/Blanks/MultipleChoice/index.tsx

@@ -11,6 +11,7 @@ import { toast } from "react-toastify";
 import setEditingAlert from "../../Shared/setEditingAlert";
 import { MdEdit, MdEditOff } from "react-icons/md";
 import MCOption from "./MCOption";
+import { uuidv4 } from "@firebase/util";
 
 
 const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }> = ({ exercise, sectionId }) => {
@@ -69,6 +70,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
                 ...local,
                 text: blanksState.text,
                 solutions: Array.from(answers.entries()).map(([id, solution]) => ({
+                    uuid: local.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                     id,
                     solution
                 }))
@@ -139,6 +141,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
         setLocal(prev => ({
             ...prev,
             solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
+                uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                 id,
                 solution
             }))
@@ -168,6 +171,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
                 ...prev,
                 words: newWords,
                 solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
+                    uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                     id,
                     solution
                 }))
@@ -217,6 +221,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
             ...prev,
             words: (prev.words as FillBlanksMCOption[]).filter(w => w.id !== blankId.toString()),
             solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
+                uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                 id,
                 solution
             }))
@@ -234,6 +239,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
 
                 blanksMissingWords.forEach(blank => {
                     const newMCOption: FillBlanksMCOption = {
+                        uuid: uuidv4(),
                         id: blank.id.toString(),
                         options: {
                             A: 'Option A',
@@ -249,6 +255,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
                     ...prev,
                     words: newWords,
                     solutions: Array.from(answers.entries()).map(([id, solution]) => ({
+                        uuid: prev.solutions.find(sol => sol.id === id)?.uuid || uuidv4(),
                         id,
                         solution
                     }))

src/components/ExamEditor/Exercises/MatchSentences/index.tsx

@@ -18,6 +18,7 @@ import { toast } from 'react-toastify';
 import { DragEndEvent } from '@dnd-kit/core';
 import { handleMatchSentencesReorder } from '@/stores/examEditor/reorder/local';
 import PromptEdit from '../Shared/PromptEdit';
+import { uuidv4 } from '@firebase/util';
 
 const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: number }> = ({ exercise, sectionId }) => {
   const { currentModule, dispatch } = useExamEditorStore();
@@ -98,6 +99,7 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
       sentences: [
         ...local.sentences,
         {
+          uuid: uuidv4(),
           id: newId,
           sentence: "",
           solution: ""

src/components/ExamEditor/Exercises/MultipleChoice/Underline/index.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useState } from "react";
 import { MdAdd } from "react-icons/md";
 import Alert, { AlertItem } from "../../Shared/Alert";
 import PromptEdit from "../../Shared/PromptEdit";
+import { uuidv4 } from "@firebase/util";
 
 
 const UnderlineMultipleChoice: React.FC<{exercise: MultipleChoiceExercise, sectionId: number}> = ({
@@ -57,6 +58,7 @@ const UnderlineMultipleChoice: React.FC<{exercise: MultipleChoiceExercise, secti
                 {
                     prompt: "",
                     solution: "",
+                    uuid: uuidv4(),
                     id: newId,
                     options,
                     variant: "text"

src/components/ExamEditor/Exercises/MultipleChoice/Vanilla/index.tsx

@@ -18,6 +18,7 @@ import SortableQuestion from '../../Shared/SortableQuestion';
 import setEditingAlert from '../../Shared/setEditingAlert';
 import { handleMultipleChoiceReorder } from '@/stores/examEditor/reorder/local';
 import PromptEdit from '../../Shared/PromptEdit';
+import { uuidv4 } from '@firebase/util';
 
 interface MultipleChoiceProps {
     exercise: MultipleChoiceExercise;
@@ -120,6 +121,7 @@ const MultipleChoice: React.FC<MultipleChoiceProps> = ({ exercise, sectionId, op
                 {
                     prompt: "",
                     solution: "",
+                    uuid: uuidv4(),
                     id: newId,
                     options,
                     variant: "text"

src/components/ExamEditor/Exercises/TrueFalse/index.tsx

@@ -16,6 +16,7 @@ import setEditingAlert from '../Shared/setEditingAlert';
 import { DragEndEvent } from '@dnd-kit/core';
 import { handleTrueFalseReorder } from '@/stores/examEditor/reorder/local';
 import PromptEdit from '../Shared/PromptEdit';
+import { uuidv4 } from '@firebase/util';
 
 const TrueFalse: React.FC<{ exercise: TrueFalseExercise, sectionId: number }> = ({ exercise, sectionId }) => {
     const { currentModule, dispatch } = useExamEditorStore();
@@ -50,6 +51,7 @@ const TrueFalse: React.FC<{ exercise: TrueFalseExercise, sectionId: number }> =
                 {
                     prompt: "",
                     solution: undefined,
+                    uuid: uuidv4(),
                     id: newId
                 }
             ]

src/components/ExamEditor/Exercises/WriteBlanks/index.tsx

@@ -22,6 +22,7 @@ import { validateEmptySolutions, validateQuestionText, validateWordCount } from
 import { handleWriteBlanksReorder } from '@/stores/examEditor/reorder/local';
 import { ParsedQuestion, parseText, reconstructText } from './parsing';
 import PromptEdit from '../Shared/PromptEdit';
+import { uuidv4 } from '@firebase/util';
 
 
 const WriteBlanks: React.FC<{ sectionId: number; exercise: WriteBlanksExercise; }> = ({ sectionId, exercise }) => {
@@ -105,6 +106,7 @@ const WriteBlanks: React.FC<{ sectionId: number; exercise: WriteBlanksExercise;
         const newId = (Math.max(...existingIds, 0) + 1).toString();
 
         const newQuestion = {
+            uuid: uuidv4(),
             id: newId,
             questionText: "New question"
         };
@@ -113,6 +115,7 @@ const WriteBlanks: React.FC<{ sectionId: number; exercise: WriteBlanksExercise;
         const updatedText = reconstructText(updatedQuestions);
 
         const updatedSolutions = [...local.solutions, {
+            uuid: uuidv4(),
             id: newId,
             solution: [""]
         }];

src/components/ExamEditor/Exercises/WriteBlanksForm/index.tsx

@@ -17,6 +17,7 @@ import { validateQuestions, validateEmptySolutions, validateWordCount } from "./
 import Header from "../../Shared/Header";
 import BlanksFormEditor from "./BlanksFormEditor";
 import PromptEdit from "../Shared/PromptEdit";
+import { uuidv4 } from "@firebase/util";
 
 
 const WriteBlanksForm: React.FC<{ sectionId: number; exercise: WriteBlanksExercise }> = ({ sectionId, exercise }) => {
@@ -111,6 +112,7 @@ const WriteBlanksForm: React.FC<{ sectionId: number; exercise: WriteBlanksExerci
 
         const newLine = `New question with blank {{${newId}}}`;
         const updatedQuestions = [...parsedQuestions, {
+            uuid: uuidv4(),
             id: newId,
             parts: parseLine(newLine),
             editingPlaceholders: true
@@ -121,6 +123,7 @@ const WriteBlanksForm: React.FC<{ sectionId: number; exercise: WriteBlanksExerci
             .join('\\n') + '\\n';
 
         const updatedSolutions = [...local.solutions, {
+            uuid: uuidv4(),
             id: newId,
             solution: [""]
         }];

src/components/ExamEditor/SettingsEditor/index.tsx

@@ -19,7 +19,7 @@ interface SettingsEditorProps {
     children?: ReactNode;
     canPreview: boolean;
     canSubmit: boolean;
-    submitModule: () => void;
+    submitModule: (requiresApproval: boolean) => void;
     preview: () => void;
 }
 
@@ -148,18 +148,33 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
                     </div>
                 </Dropdown>
                 {children}
-                <div className="flex flex-row justify-between mt-4">
+                <div className="flex flex-col gap-3 mt-4">
                     <button
                         className={clsx(
                             "flex items-center justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300",
                             `bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/30`,
                             "disabled:cursor-not-allowed disabled:text-gray-200"
                         )}
-                        onClick={submitModule}
+                        onClick={() => submitModule(true)}
                         disabled={!canSubmit}
                     >
                         <FaFileUpload className="mr-2" size={18} />
-                        Submit Module as Exam
+                        Submit module as exam for approval
+                    </button>
+                    <button
+                        className={clsx(
+                            "flex items-center justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300",
+                            `bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/30`,
+                            "disabled:cursor-not-allowed disabled:text-gray-200"
+                        )}
+                        onClick={() => {
+                            if (!confirm(`Are you sure you want to skip the approval process for this exam?`)) return;
+                            submitModule(false);
+                        }}
+                        disabled={!canSubmit}
+                    >
+                        <FaFileUpload className="mr-2" size={18} />
+                        Submit module as exam and skip approval process
                     </button>
                     <button
                         className={clsx(
@@ -171,7 +186,7 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
                         disabled={!canPreview}
                     >
                         <FaEye className="mr-2" size={18} />
-                        Preview Module
+                        Preview module
                     </button>
                 </div>
             </div>

src/components/ExamEditor/SettingsEditor/level.tsx

@@ -38,7 +38,7 @@ const LevelSettings: React.FC = () => {
         difficulty,
         sections,
         minTimer,
-        isPrivate,
+        access,
     } = useExamEditorStore(state => state.modules[currentModule]);
 
     const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<LevelSectionSettings>(
@@ -76,7 +76,7 @@ const LevelSettings: React.FC = () => {
         });
     });
 
-    const submitLevel = async () => {
+    const submitLevel = async (requiresApproval: boolean) => {
         if (title === "") {
             toast.error("Enter a title for the exam!");
             return;
@@ -195,12 +195,13 @@ const LevelSettings: React.FC = () => {
                         category: s.settings.category
                     };
                 }).filter(part => part.exercises.length > 0),
-                isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
+                requiresApproval: requiresApproval,
+                isDiagnostic: false,
                 minTimer,
                 module: "level",
                 id: title,
                 difficulty,
-                private: isPrivate,
+                access,
             };
 
             const result = await axios.post('/api/exam/level', exam);
@@ -243,7 +244,7 @@ const LevelSettings: React.FC = () => {
             isDiagnostic: false,
             variant: undefined,
             difficulty,
-            private: isPrivate,
+            access,
         } as LevelExam);
         setExerciseIndex(0);
         setQuestionIndex(0);

src/components/ExamEditor/SettingsEditor/listening/components.tsx

@@ -233,7 +233,7 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
                 setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isAudioContextOpen: isOpen }, false)}
                 contentWrapperClassName={level ? `border border-ielts-listening` : ''}
             >
-                <div className="flex flex-row flex-wrap gap-2 items-center px-2 pb-4">
+                <div className="flex flex-row flex-wrap gap-2 items-center justify-center px-2 pb-4">
                     <div className="flex flex-col flex-grow gap-4 px-2">
                         <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
                         <Input

src/components/ExamEditor/SettingsEditor/listening/index.tsx

@@ -1,15 +1,9 @@
-import Dropdown from "../Shared/SettingsDropdown";
-import ExercisePicker from "../../ExercisePicker";
 import SettingsEditor from "..";
-import GenerateBtn from "../Shared/GenerateBtn";
+import {  ListeningSectionSettings } from "@/stores/examEditor/types";
-import { useCallback, useState } from "react";
-import { generate } from "../Shared/Generate";
-import { Generating, LevelSectionSettings, ListeningSectionSettings } from "@/stores/examEditor/types";
 import Option from "@/interfaces/option";
 import useExamEditorStore from "@/stores/examEditor";
 import useSettingsState from "../../Hooks/useSettingsState";
 import { ListeningExam, ListeningPart } from "@/interfaces/exam";
-import Input from "@/components/Low/Input";
 import openDetachedTab from "@/utils/popout";
 import { useRouter } from "next/router";
 import axios from "axios";
@@ -17,7 +11,6 @@ import { usePersistentExamStore } from "@/stores/exam";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import ListeningComponents from "./components";
-import { getExamById } from "@/utils/exams";
 
 const ListeningSettings: React.FC = () => {
     const router = useRouter();
@@ -27,7 +20,7 @@ const ListeningSettings: React.FC = () => {
         difficulty,
         sections,
         minTimer,
-        isPrivate,
+        access,
         instructionsState
     } = useExamEditorStore(state => state.modules[currentModule]);
 
@@ -65,7 +58,7 @@ const ListeningSettings: React.FC = () => {
         }
     ];
 
-    const submitListening = async () => {
+    const submitListening = async (requiresApproval: boolean) => {
         if (title === "") {
             toast.error("Enter a title for the exam!");
             return;
@@ -138,13 +131,14 @@ const ListeningSettings: React.FC = () => {
                             category: s.settings.category
                         };
                     }),
-                    isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
+                    requiresApproval: requiresApproval,
+                    isDiagnostic: false,
                     minTimer,
                     module: "listening",
                     id: title,
                     variant: sections.length === 4 ? "full" : "partial",
                     difficulty,
-                    private: isPrivate,
+                    access,
                     instructions: instructionsURL
                 };
 
@@ -191,7 +185,7 @@ const ListeningSettings: React.FC = () => {
             isDiagnostic: false,
             variant: sections.length === 4 ? "full" : "partial",
             difficulty,
-            private: isPrivate,
+            access,
             instructions: instructionsState.currentInstructionsURL
         } as ListeningExam);
         setExerciseIndex(0);

src/components/ExamEditor/SettingsEditor/reading/components.tsx

@@ -82,7 +82,7 @@ const ReadingComponents: React.FC<Props> = ({
         disabled={generatePassageDisabled}
       >
         <div
-          className="flex flex-row flex-wrap gap-2 items-center px-2 pb-4 "
+          className="flex flex-row flex-wrap gap-2 items-center justify-center px-2 pb-4 "
         >
           <div className="flex flex-col flex-grow gap-4 px-2">
             <label className="font-normal text-base text-mti-gray-dim">

src/components/ExamEditor/SettingsEditor/reading/index.tsx

@@ -12,138 +12,140 @@ import axios from "axios";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import ReadingComponents from "./components";
-import { getExamById } from "@/utils/exams";
 
 const ReadingSettings: React.FC = () => {
-    const router = useRouter();
+  const router = useRouter();
 
-    const {
+  const {
-        setExam,
+    setExam,
-        setExerciseIndex,
+    setExerciseIndex,
-        setPartIndex,
+    setPartIndex,
-        setQuestionIndex,
+    setQuestionIndex,
-        setBgColor,
+    setBgColor,
-    } = usePersistentExamStore();
+  } = usePersistentExamStore();
 
-    const { currentModule, title } = useExamEditorStore();
+  const { currentModule, title } = useExamEditorStore();
-    const {
+  const { focusedSection, difficulty, sections, minTimer, access, type } =
-        focusedSection,
+    useExamEditorStore((state) => state.modules[currentModule]);
-        difficulty,
-        sections,
-        minTimer,
-        isPrivate,
-        type,
-    } = useExamEditorStore(state => state.modules[currentModule]);
 
-    const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<ReadingSectionSettings>(
+  const { localSettings, updateLocalAndScheduleGlobal } =
-        currentModule,
+    useSettingsState<ReadingSectionSettings>(currentModule, focusedSection);
-        focusedSection
-    );
 
-    const currentSection = sections.find((section) => section.sectionId == focusedSection)?.state as ReadingPart;
+  const currentSection = sections.find(
+    (section) => section.sectionId == focusedSection
+  )?.state as ReadingPart;
 
+  const defaultPresets: Option[] = [
+    {
+      label: "Preset: Reading Passage 1",
+      value:
+        "Welcome to {part} of the {label}. You will read texts relating to everyday topics and situations. These may include advertisements, brochures, manuals, or official documents. Answer questions that test your ability to locate specific information and understand main ideas.",
+    },
+    {
+      label: "Preset: Reading Passage 2",
+      value:
+        "Welcome to {part} of the {label}. You will read texts dealing with general interest topics that may include news articles, company policies, or workplace documents. Answer questions testing your understanding of main ideas, specific details, and the author's views.",
+    },
+    {
+      label: "Preset: Reading Passage 3",
+      value:
+        "Welcome to {part} of the {label}. You will read longer academic texts that may include journal articles, academic essays, or research papers. Answer questions testing your ability to understand complex arguments, identify key points, and follow the development of ideas.",
+    },
+  ];
 
-    const defaultPresets: Option[] = [
+  const canPreviewOrSubmit = sections.some(
-        {
+    (s) =>
-            label: "Preset: Reading Passage 1",
+      (s.state as ReadingPart).exercises &&
-            value: "Welcome to {part} of the {label}. You will read texts relating to everyday topics and situations. These may include advertisements, brochures, manuals, or official documents. Answer questions that test your ability to locate specific information and understand main ideas."
+      (s.state as ReadingPart).exercises.length > 0
-        },
+  );
-        {
-            label: "Preset: Reading Passage 2",
-            value: "Welcome to {part} of the {label}. You will read texts dealing with general interest topics that may include news articles, company policies, or workplace documents. Answer questions testing your understanding of main ideas, specific details, and the author's views."
-        },
-        {
-            label: "Preset: Reading Passage 3",
-            value: "Welcome to {part} of the {label}. You will read longer academic texts that may include journal articles, academic essays, or research papers. Answer questions testing your ability to understand complex arguments, identify key points, and follow the development of ideas."
-        }
-    ];
 
-    const canPreviewOrSubmit = sections.some(
+  const submitReading = (requiresApproval: boolean) => {
-        (s) => (s.state as ReadingPart).exercises && (s.state as ReadingPart).exercises.length > 0
+    if (title === "") {
-    );
+      toast.error("Enter a title for the exam!");
-
+      return;
-    const submitReading = () => {
+    }
-        if (title === "") {
+    const exam: ReadingExam = {
-            toast.error("Enter a title for the exam!");
+      parts: sections.map((s) => {
-            return;
+        const exercise = s.state as ReadingPart;
-        }
+        return {
-        const exam: ReadingExam = {
+          ...exercise,
-            parts: sections.map((s) => {
+          intro: localSettings.currentIntro,
-                const exercise = s.state as ReadingPart;
+          category: localSettings.category,
-                return {
-                    ...exercise,
-                    intro: localSettings.currentIntro,
-                    category: localSettings.category
-                };
-            }),
-            isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
-            minTimer,
-            module: "reading",
-            id: title,
-            variant: sections.length === 3 ? "full" : "partial",
-            difficulty,
-            private: isPrivate,
-            type: type!
         };
+      }),
+      requiresApproval: requiresApproval,
+      isDiagnostic: false,
+      minTimer,
+      module: "reading",
+      id: title,
+      variant: sections.length === 3 ? "full" : "partial",
+      difficulty,
+      access,
+      type: type!,
+    };
 
-        axios.post(`/api/exam/reading`, exam)
+    axios
-            .then((result) => {
+      .post(`/api/exam/reading`, exam)
-                playSound("sent");
+      .then((result) => {
-                // Successfully submitted exam
+        playSound("sent");
-                if (result.status === 200) {
+        // Successfully submitted exam
-                    toast.success(result.data.message);
+        if (result.status === 200) {
-                } else if (result.status === 207) {
+          toast.success(result.data.message);
-                    toast.warning(result.data.message);
+        } else if (result.status === 207) {
-                }
+          toast.warning(result.data.message);
-            })
+        }
-            .catch((error) => {
+      })
-                console.log(error);
+      .catch((error) => {
-                toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
+        console.log(error);
-            })
+        toast.error(
-    }
+          error.response.data.error ||
+            "Something went wrong while submitting, please try again later."
+        );
+      });
+  };
 
-    const preview = () => {
+  const preview = () => {
-        setExam({
+    setExam({
-            parts: sections.map((s) => {
+      parts: sections.map((s) => {
-                const exercises = s.state as ReadingPart;
+        const exercises = s.state as ReadingPart;
-                return {
+        return {
-                    ...exercises,
+          ...exercises,
-                    intro: s.settings.currentIntro,
+          intro: s.settings.currentIntro,
-                    category: s.settings.category
+          category: s.settings.category,
-                };
+        };
-            }),
+      }),
-            minTimer,
+      minTimer,
-            module: "reading",
+      module: "reading",
-            id: title,
+      id: title,
-            isDiagnostic: false,
+      isDiagnostic: false,
-            variant: undefined,
+      variant: undefined,
-            difficulty,
+      difficulty,
-            private: isPrivate,
+      access: access,
-            type: type!
+      type: type!,
-        } as ReadingExam);
+    } as ReadingExam);
-        setExerciseIndex(0);
+    setExerciseIndex(0);
-        setQuestionIndex(0);
+    setQuestionIndex(0);
-        setPartIndex(0);
+    setPartIndex(0);
-        setBgColor("bg-white");
+    setBgColor("bg-white");
-        openDetachedTab("popout?type=Exam&module=reading", router)
+    openDetachedTab("popout?type=Exam&module=reading", router);
-    }
+  };
 
-    return (
+  return (
-        <SettingsEditor
+    <SettingsEditor
-            sectionLabel={`Passage ${focusedSection}`}
+      sectionLabel={`Passage ${focusedSection}`}
-            sectionId={focusedSection}
+      sectionId={focusedSection}
-            module="reading"
+      module="reading"
-            introPresets={[defaultPresets[focusedSection - 1]]}
+      introPresets={[defaultPresets[focusedSection - 1]]}
-            preview={preview}
+      preview={preview}
-            canPreview={canPreviewOrSubmit}
+      canPreview={canPreviewOrSubmit}
-            canSubmit={canPreviewOrSubmit}
+      canSubmit={canPreviewOrSubmit}
-            submitModule={submitReading}
+      submitModule={submitReading}
-        >
+    >
-            <ReadingComponents
+      <ReadingComponents
-                {...{ localSettings, updateLocalAndScheduleGlobal, currentSection }}
+        {...{ localSettings, updateLocalAndScheduleGlobal, currentSection }}
-            />
+      />
-        </SettingsEditor>
+    </SettingsEditor>
-    );
+  );
 };
 
 export default ReadingSettings;

src/components/ExamEditor/SettingsEditor/speaking/index.tsx

@@ -30,7 +30,7 @@ const SpeakingSettings: React.FC = () => {
     } = usePersistentExamStore();
 
     const { title, currentModule } = useExamEditorStore();
-    const { focusedSection, difficulty, sections, minTimer, isPrivate } = useExamEditorStore((store) => store.modules[currentModule])
+    const { focusedSection, difficulty, sections, minTimer, access } = useExamEditorStore((store) => store.modules[currentModule])
 
     const section = sections.find((section) => section.sectionId == focusedSection)?.state;
 
@@ -84,7 +84,7 @@ const SpeakingSettings: React.FC = () => {
         });
     })();
 
-    const submitSpeaking = async () => {
+    const submitSpeaking = async (requiresApproval: boolean) => {
         if (title === "") {
           toast.error("Enter a title for the exam!");
           return;
@@ -181,11 +181,12 @@ const SpeakingSettings: React.FC = () => {
             minTimer,
             module: "speaking",
             id: title,
-            isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
+            requiresApproval: requiresApproval,
+            isDiagnostic: false,
             variant: undefined,
             difficulty,
             instructorGender: "varied",
-            private: isPrivate,
+            access,
           };
       
           const result = await axios.post('/api/exam/speaking', exam);
@@ -238,7 +239,7 @@ const SpeakingSettings: React.FC = () => {
             isDiagnostic: false,
             variant: undefined,
             difficulty,
-            private: isPrivate,
+            access,
         } as SpeakingExam);
         setExerciseIndex(0);
         setQuestionIndex(0);

src/components/ExamEditor/SettingsEditor/writing/index.tsx

@@ -23,7 +23,7 @@ const WritingSettings: React.FC = () => {
     const {
         minTimer,
         difficulty,
-        isPrivate,
+        access,
         sections,
         focusedSection,
         type,
@@ -81,14 +81,14 @@ const WritingSettings: React.FC = () => {
             isDiagnostic: false,
             variant: undefined,
             difficulty,
-            private: isPrivate,
+            access,
             type: type!
         });
         setExerciseIndex(0);
         openDetachedTab("popout?type=Exam&module=writing", router)
     }
 
-    const submitWriting = async () => {
+    const submitWriting = async (requiresApproval: boolean) => {
         if (title === "") {
             toast.error("Enter a title for the exam!");
             return;
@@ -131,10 +131,11 @@ const WritingSettings: React.FC = () => {
                 minTimer,
                 module: "writing",
                 id: title,
-                isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
+                requiresApproval: requiresApproval,
+                isDiagnostic: false,
                 variant: undefined,
                 difficulty,
-                private: isPrivate,
+                access,
                 type: type!
             };
 

src/components/ExamEditor/index.tsx

@@ -1,14 +1,13 @@
 import clsx from "clsx";
 import SectionRenderer from "./SectionRenderer";
-import Checkbox from "../Low/Checkbox";
 import Input from "../Low/Input";
 import Select from "../Low/Select";
-import {capitalize} from "lodash";
+import { capitalize } from "lodash";
-import {Difficulty} from "@/interfaces/exam";
+import { AccessType, ACCESSTYPE, Difficulty } from "@/interfaces/exam";
-import {useCallback, useEffect, useMemo, useState} from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
-import {ModuleState, SectionState} from "@/stores/examEditor/types";
+import { ModuleState, SectionState } from "@/stores/examEditor/types";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
 import useExamEditorStore from "@/stores/examEditor";
 import WritingSettings from "./SettingsEditor/writing";
 import ReadingSettings from "./SettingsEditor/reading";
@@ -16,243 +15,329 @@ import LevelSettings from "./SettingsEditor/level";
 import ListeningSettings from "./SettingsEditor/listening";
 import SpeakingSettings from "./SettingsEditor/speaking";
 import ImportOrStartFromScratch from "./ImportExam/ImportOrFromScratch";
-import {defaultSectionSettings} from "@/stores/examEditor/defaults";
+import { defaultSectionSettings } from "@/stores/examEditor/defaults";
 import Button from "../Low/Button";
 import ResetModule from "./Standalone/ResetModule";
 import ListeningInstructions from "./Standalone/ListeningInstructions";
-import {EntityWithRoles} from "@/interfaces/entity";
+import { EntityWithRoles } from "@/interfaces/entity";
+import Option from "../../interfaces/option";
 
-const DIFFICULTIES: Difficulty[] = ["A1", "A2", "B1", "B2", "C1", "C2"];
+const DIFFICULTIES: Option[] = [
+  { value: "A1", label: "A1" },
+  { value: "A2", label: "A2" },
+  { value: "B1", label: "B1" },
+  { value: "B2", label: "B2" },
+  { value: "C1", label: "C1" },
+  { value: "C2", label: "C2" },
+];
 
-const ExamEditor: React.FC<{levelParts?: number; entitiesAllowEditPrivacy: EntityWithRoles[]}> = ({
+const ModuleSettings: Record<Module, React.ComponentType> = {
-	levelParts = 0,
+  reading: ReadingSettings,
-	entitiesAllowEditPrivacy = [],
+  writing: WritingSettings,
+  speaking: SpeakingSettings,
+  listening: ListeningSettings,
+  level: LevelSettings,
+};
+
+const ExamEditor: React.FC<{
+  levelParts?: number;
+  entitiesAllowEditPrivacy: EntityWithRoles[];
+  entitiesAllowConfExams: EntityWithRoles[];
+  entitiesAllowPublicExams: EntityWithRoles[];
+}> = ({
+  levelParts = 0,
+  entitiesAllowEditPrivacy = [],
+  entitiesAllowConfExams = [],
+  entitiesAllowPublicExams = [],
 }) => {
-	const {currentModule, dispatch} = useExamEditorStore();
+  const { currentModule, dispatch } = useExamEditorStore();
-	const {sections, minTimer, expandedSections, examLabel, isPrivate, difficulty, sectionLabels, importModule} = useExamEditorStore(
+  const {
-		(state) => state.modules[currentModule],
+    sections,
-	);
+    minTimer,
+    expandedSections,
+    examLabel,
+    access,
+    difficulty,
+    sectionLabels,
+    importModule,
+  } = useExamEditorStore((state) => state.modules[currentModule]);
 
-	const [numberOfLevelParts, setNumberOfLevelParts] = useState(levelParts !== 0 ? levelParts : 1);
+  const [numberOfLevelParts, setNumberOfLevelParts] = useState(
-	const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
+    levelParts !== 0 ? levelParts : 1
+  );
+  const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
 
-	// For exam edits
+  // For exam edits
-	useEffect(() => {
+  useEffect(() => {
-		if (levelParts !== 0) {
+    if (levelParts !== 0) {
-			setNumberOfLevelParts(levelParts);
+      setNumberOfLevelParts(levelParts);
-			dispatch({
+      dispatch({
-				type: "UPDATE_MODULE",
+        type: "UPDATE_MODULE",
-				payload: {
+        payload: {
-					updates: {
+          updates: {
-						sectionLabels: Array.from({length: levelParts}).map((_, i) => ({
+            sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
-							id: i + 1,
+              id: i + 1,
-							label: `Part ${i + 1}`,
+              label: `Part ${i + 1}`,
-						})),
+            })),
-					},
+          },
-					module: "level",
+          module: "level",
-				},
+        },
-			});
+      });
-		}
+    }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [levelParts]);
+  }, [levelParts]);
 
-	useEffect(() => {
+  useEffect(() => {
-		const currentSections = sections;
+    const currentSections = sections;
-		const currentLabels = sectionLabels;
+    const currentLabels = sectionLabels;
-		let updatedSections: SectionState[];
+    let updatedSections: SectionState[];
-		let updatedLabels: any;
+    let updatedLabels: any;
-		if ((currentModule === "level" && currentSections.length !== currentLabels.length) || numberOfLevelParts !== currentSections.length) {
+    if (
-			const newSections = [...currentSections];
+      (currentModule === "level" &&
-			const newLabels = [...currentLabels];
+        currentSections.length !== currentLabels.length) ||
-			for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
+      numberOfLevelParts !== currentSections.length
-				if (currentSections.length !== numberOfLevelParts) newSections.push(defaultSectionSettings(currentModule, i + 1));
+    ) {
-				newLabels.push({
+      const newSections = [...currentSections];
-					id: i + 1,
+      const newLabels = [...currentLabels];
-					label: `Part ${i + 1}`,
+      for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
-				});
+        if (currentSections.length !== numberOfLevelParts)
-			}
+          newSections.push(defaultSectionSettings(currentModule, i + 1));
-			updatedSections = newSections;
+        newLabels.push({
-			updatedLabels = newLabels;
+          id: i + 1,
-		} else if (numberOfLevelParts < currentSections.length) {
+          label: `Part ${i + 1}`,
-			updatedSections = currentSections.slice(0, numberOfLevelParts);
+        });
-			updatedLabels = currentLabels.slice(0, numberOfLevelParts);
+      }
-		} else {
+      updatedSections = newSections;
-			return;
+      updatedLabels = newLabels;
-		}
+    } else if (numberOfLevelParts < currentSections.length) {
+      updatedSections = currentSections.slice(0, numberOfLevelParts);
+      updatedLabels = currentLabels.slice(0, numberOfLevelParts);
+    } else {
+      return;
+    }
 
-		const updatedExpandedSections = expandedSections.filter((sectionId) => updatedSections.some((section) => section.sectionId === sectionId));
+    const updatedExpandedSections = expandedSections.filter((sectionId) =>
+      updatedSections.some((section) => section.sectionId === sectionId)
+    );
 
-		dispatch({
+    dispatch({
-			type: "UPDATE_MODULE",
+      type: "UPDATE_MODULE",
-			payload: {
+      payload: {
-				updates: {
+        updates: {
-					sections: updatedSections,
+          sections: updatedSections,
-					sectionLabels: updatedLabels,
+          sectionLabels: updatedLabels,
-					expandedSections: updatedExpandedSections,
+          expandedSections: updatedExpandedSections,
-				},
+        },
-			},
+      },
-		});
+    });
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [numberOfLevelParts]);
+  }, [numberOfLevelParts]);
 
-	const sectionIds = sections.map((section) => section.sectionId);
+  const sectionIds = useMemo(
+    () => sections.map((section) => section.sectionId),
+    [sections]
+  );
 
-	const updateModule = useCallback(
+  const updateModule = useCallback(
-		(updates: Partial<ModuleState>) => {
+    (updates: Partial<ModuleState>) => {
-			dispatch({type: "UPDATE_MODULE", payload: {updates}});
+      dispatch({ type: "UPDATE_MODULE", payload: { updates } });
-		},
+    },
-		[dispatch],
+    [dispatch]
-	);
+  );
 
-	const toggleSection = (sectionId: number) => {
+  const toggleSection = useCallback(
-		if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
+    (sectionId: number) => {
-			toast.error("Include at least one section!");
+      if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
-			return;
+        toast.error("Include at least one section!");
-		}
+        return;
-		dispatch({type: "TOGGLE_SECTION", payload: {sectionId}});
+      }
-	};
+      dispatch({ type: "TOGGLE_SECTION", payload: { sectionId } });
+    },
+    [dispatch, expandedSections, sectionIds]
+  );
 
-	const ModuleSettings: Record<Module, React.ComponentType> = {
+  const Settings = useMemo(
-		reading: ReadingSettings,
+    () => ModuleSettings[currentModule],
-		writing: WritingSettings,
+    [currentModule]
-		speaking: SpeakingSettings,
+  );
-		listening: ListeningSettings,
-		level: LevelSettings,
-	};
 
-	const Settings = ModuleSettings[currentModule];
+  const showImport = useMemo(
-	const showImport = importModule && ["reading", "listening", "level"].includes(currentModule);
+    () =>
+      importModule && ["reading", "listening", "level"].includes(currentModule),
+    [importModule, currentModule]
+  );
 
-	const updateLevelParts = (parts: number) => {
+  const accessTypeOptions = useMemo(() => {
-		setNumberOfLevelParts(parts);
+    let options: Option[] = [{ value: "private", label: "Private" }];
-	};
+    if (entitiesAllowConfExams.length > 0) {
+      options.push({ value: "confidential", label: "Confidential" });
+    }
+    if (entitiesAllowPublicExams.length > 0) {
+      options.push({ value: "public", label: "Public" });
+    }
+    return options;
+  }, [entitiesAllowConfExams.length, entitiesAllowPublicExams.length]);
 
-	return (
+  const updateLevelParts = useCallback((parts: number) => {
-		<>
+    setNumberOfLevelParts(parts);
-			{showImport ? (
+  }, []);
-				<ImportOrStartFromScratch module={currentModule} setNumberOfLevelParts={updateLevelParts} />
+
-			) : (
+  return (
-				<>
+    <>
-					{isResetModuleOpen && (
+      {showImport ? (
-						<ResetModule
+        <ImportOrStartFromScratch
-							module={currentModule}
+          module={currentModule}
-							isOpen={isResetModuleOpen}
+          setNumberOfLevelParts={updateLevelParts}
-							setIsOpen={setIsResetModuleOpen}
+        />
-							setNumberOfLevelParts={setNumberOfLevelParts}
+      ) : (
-						/>
+        <>
-					)}
+          {isResetModuleOpen && (
-					<div className="flex gap-4 w-full items-center -xl:flex-col">
+            <ResetModule
-						<div className="flex flex-row gap-3 w-full">
+              module={currentModule}
-							<div className="flex flex-col gap-3">
+              isOpen={isResetModuleOpen}
-								<label className="font-normal text-base text-mti-gray-dim">Timer</label>
+              setIsOpen={setIsResetModuleOpen}
-								<Input
+              setNumberOfLevelParts={setNumberOfLevelParts}
-									type="number"
+            />
-									name="minTimer"
+          )}
-									onChange={(e) =>
+          <div
-										updateModule({
+            className={clsx(
-											minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
+              "flex gap-4 w-full",
-										})
+              sectionLabels.length > 3 ? "-2xl:flex-col" : "-xl:flex-col"
-									}
+            )}
-									value={minTimer}
+          >
-									className="max-w-[300px]"
+            <div className="flex flex-row gap-3">
-								/>
+              <div className="flex flex-col gap-3 ">
-							</div>
+                <label className="font-normal text-base text-mti-gray-dim">
-							<div className="flex flex-col gap-3 flex-grow">
+                  Timer
-								<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+                </label>
-								<Select
+                <Input
-									isMulti={true}
+                  type="number"
-									options={DIFFICULTIES.map((x) => ({
+                  name="minTimer"
-										value: x,
+                  onChange={(e) =>
-										label: capitalize(x),
+                    updateModule({
-									}))}
+                      minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
-									onChange={(values) => {
+                    })
-										const selectedDifficulties = values ? values.map((v) => v.value as Difficulty) : [];
+                  }
-										updateModule({difficulty: selectedDifficulties});
+                  value={minTimer}
-									}}
+                  className="max-w-[125px] min-w-[100px] w-min"
-									value={
+                />
-										difficulty
+              </div>
-											? difficulty.map((d) => ({
+              <div className="flex flex-col gap-3 ">
-													value: d,
+                <label className="font-normal text-base text-mti-gray-dim">
-													label: capitalize(d),
+                  Difficulty
-											  }))
+                </label>
-											: null
+                <Select
-									}
+                  isMulti={true}
-								/>
+                  options={DIFFICULTIES}
-							</div>
+                  onChange={(values) => {
-						</div>
+                    const selectedDifficulties = values
-						{sectionLabels.length != 0 && currentModule !== "level" ? (
+                      ? values.map((v) => v.value as Difficulty)
-							<div className="flex flex-col gap-3 -xl:w-full">
+                      : [];
-								<label className="font-normal text-base text-mti-gray-dim">{sectionLabels[0].label.split(" ")[0]}</label>
+                    updateModule({ difficulty: selectedDifficulties });
-								<div className="flex flex-row gap-8">
+                  }}
-									{sectionLabels.map(({id, label}) => (
+                  value={
-										<span
+                    difficulty
-											key={id}
+                      ? (Array.isArray(difficulty)
-											className={clsx(
+                          ? difficulty
-												"px-6 py-4 w-48 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                          : [difficulty]
-												"transition duration-300 ease-in-out",
+                        ).map((d) => ({
-												sectionIds.includes(id)
+                          value: d,
-													? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
+                          label: capitalize(d),
-													: "bg-white border-mti-gray-platinum",
+                        }))
-											)}
+                      : null
-											onClick={() => toggleSection(id)}>
+                  }
-											{label}
+                />
-										</span>
+              </div>
-									))}
+            </div>
-								</div>
+            {sectionLabels.length != 0 && currentModule !== "level" ? (
-							</div>
+              <div className="flex flex-col gap-3 -xl:w-full">
-						) : (
+                <label className="font-normal text-base text-mti-gray-dim">
-							<div className="flex flex-col gap-3 w-1/3">
+                  {sectionLabels[0].label.split(" ")[0]}
-								<label className="font-normal text-base text-mti-gray-dim">Number of Parts</label>
+                </label>
-								<Input
+                <div className="flex flex-row gap-3">
-									type="number"
+                  {sectionLabels.map(({ id, label }) => (
-									name="Number of Parts"
+                    <span
-									min={1}
+                      key={id}
-									onChange={(v) => setNumberOfLevelParts(parseInt(v))}
+                      className={clsx(
-									value={numberOfLevelParts}
+                        "px-6 py-4 w-40 2xl:w-48 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-								/>
+                        "transition duration-300 ease-in-out",
-							</div>
+                        sectionIds.includes(id)
-						)}
+                          ? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
-						<div className="flex flex-col gap-3 w-fit h-fit">
+                          : "bg-white border-mti-gray-platinum"
-							<div className="h-6" />
+                      )}
-							<Checkbox
+                      onClick={() => toggleSection(id)}
-								isChecked={isPrivate}
+                    >
-								onChange={(checked) => updateModule({isPrivate: checked})}
+                      {label}
-								disabled={entitiesAllowEditPrivacy.length === 0}>
+                    </span>
-								Privacy (Only available for Assignments)
+                  ))}
-							</Checkbox>
+                </div>
-						</div>
+              </div>
-					</div>
+            ) : (
-					<div className="flex flex-row gap-3 w-full">
+              <div className="flex flex-col gap-3 w-1/3">
-						<div className="flex flex-col gap-3 flex-grow">
+                <label className="font-normal text-base text-mti-gray-dim">
-							<label className="font-normal text-base text-mti-gray-dim">Exam Label *</label>
+                  Number of Parts
-							<Input
+                </label>
-								type="text"
+                <Input
-								placeholder="Exam Label"
+                  type="number"
-								name="label"
+                  name="Number of Parts"
-								onChange={(text) => updateModule({examLabel: text})}
+                  min={1}
-								roundness="xl"
+                  onChange={(v) => setNumberOfLevelParts(parseInt(v))}
-								value={examLabel}
+                  value={numberOfLevelParts}
-								required
+                />
-							/>
+              </div>
-						</div>
+            )}
-						{currentModule === "listening" && <ListeningInstructions />}
+            <div className="max-w-[200px] w-full">
-						<Button
+              <Select
-							onClick={() => setIsResetModuleOpen(true)}
+                label="Access Type"
-							customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
+                disabled={
-							className={`text-white self-end`}>
+                  accessTypeOptions.length === 0 ||
-							Reset Module
+                  entitiesAllowEditPrivacy.length === 0
-						</Button>
+                }
-					</div>
+                options={accessTypeOptions}
-					<div className="flex flex-row gap-8 -2xl:flex-col">
+                onChange={(value) => {
-						<Settings />
+                  if (value?.value) {
-						<div className="flex-grow max-w-[66%] -2xl:max-w-full">
+                    updateModule({ access: value.value! as AccessType });
-							<SectionRenderer />
+                  }
-						</div>
+                }}
-					</div>
+                value={{ value: access, label: capitalize(access) }}
-				</>
+              />
-			)}
+            </div>
-		</>
+          </div>
-	);
+
+          <div className="flex flex-row gap-3 w-full">
+            <div className="flex flex-col gap-3 flex-grow">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Exam Label *
+              </label>
+              <Input
+                type="text"
+                placeholder="Exam Label"
+                name="label"
+                onChange={(text) => updateModule({ examLabel: text })}
+                roundness="xl"
+                value={examLabel}
+                required
+              />
+            </div>
+            {currentModule === "listening" && <ListeningInstructions />}
+            <Button
+              onClick={() => setIsResetModuleOpen(true)}
+              customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
+              className={`text-white self-end`}
+            >
+              Reset Module
+            </Button>
+          </div>
+          <div className="flex flex-row gap-8 -xl:flex-col">
+            <Settings />
+            <div className="flex-grow max-w-[66%] -2xl:max-w-full">
+              <SectionRenderer />
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
 };
 
 export default ExamEditor;

src/components/High/Table.tsx

@@ -9,7 +9,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { BsArrowDown, BsArrowUp } from "react-icons/bs";
 import Button from "../Low/Button";
 
@@ -149,10 +149,16 @@ export default function Table<T>({
           ))}
         </tbody>
       </table>
-      {isLoading && (
+      {isLoading ? (
         <div className="min-h-screen flex justify-center items-start">
           <span className="loading loading-infinity w-32" />
         </div>
+      ) : (
+        rows.length === 0 && (
+          <div className="w-full flex justify-center items-start">
+            <span className="text-xl text-gray-500">No data found...</span>
+          </div>
+        )
       )}
     </div>
   );

src/components/List.tsx

@@ -1,9 +1,7 @@
 import {useListSearch} from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
-import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
 import clsx from "clsx";
-import {useMemo, useState} from "react";
-import Button from "./Low/Button";
 
 const SIZE = 25;
 

src/components/Medium/RecordFilter.tsx

@@ -3,8 +3,6 @@ import { checkAccess } from "@/utils/permissions";
 import Select from "../Low/Select";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
-import useUsers from "@/hooks/useUsers";
-import useGroups from "@/hooks/useGroups";
 import useRecordStore from "@/stores/recordStore";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { mapBy } from "@/utils";
@@ -44,13 +42,13 @@ const RecordFilter: React.FC<Props> = ({
 
   const [entity, setEntity] = useState<string>();
 
-  const [, setStatsUserId] = useRecordStore((state) => [
+  const [selectedUser, setStatsUserId] = useRecordStore((state) => [
     state.selectedUser,
     state.setSelectedUser,
   ]);
 
-	const entitiesToSearch = useMemo(() => {
+  const entitiesToSearch = useMemo(() => {
-	if(entity) return entity
+    if (entity) return entity;
     if (isAdmin) return undefined;
     return mapBy(entities, "id");
   }, [entities, entity, isAdmin]);
@@ -68,7 +66,15 @@ const RecordFilter: React.FC<Props> = ({
     entities,
     "view_student_record"
   );
-  
+
+  const selectedUserValue = useMemo(
+    () =>
+      users.find((u) => u.id === selectedUser) || {
+        value: user.id,
+        label: `${user.name} - ${user.email}`,
+      },
+    [selectedUser, user, users]
+  );
 
   useEffect(() => setStatsUserId(user.id), [setStatsUserId, user.id]);
 
@@ -118,10 +124,7 @@ const RecordFilter: React.FC<Props> = ({
                   loadOptions={loadOptions}
                   onMenuScrollToBottom={onScrollLoadMoreOptions}
                   options={users}
-                  defaultValue={{
+                  defaultValue={selectedUserValue}
-                    value: user.id,
-                    label: `${user.name} - ${user.email}`,
-                  }}
                   onChange={(value) => setStatsUserId(value?.value!)}
                   styles={{
                     menuPortal: (base) => ({ ...base, zIndex: 9999 }),

src/components/Medium/StatGridItem.tsx

@@ -12,7 +12,6 @@ import { useRouter } from "next/router";
 import { uniqBy } from "lodash";
 import { sortByModule } from "@/utils/moduleUtils";
 import { getExamById } from "@/utils/exams";
-import { Exam, UserSolution } from "@/interfaces/exam";
 import ModuleBadge from "../ModuleBadge";
 import useExamStore from "@/stores/exam";
 import { findBy } from "@/utils";

src/components/Sidebar.tsx

@@ -12,6 +12,10 @@ import {
   BsCurrencyDollar,
   BsClipboardData,
   BsPeople,
+  BsChevronDown,
+  BsChevronUp,
+  BsChatText,
+  BsCardText,
 } from "react-icons/bs";
 import { GoWorkflow } from "react-icons/go";
 import { CiDumbbell } from "react-icons/ci";
@@ -31,7 +35,7 @@ import {
   useAllowedEntities,
   useAllowedEntitiesSomePermissions,
 } from "@/hooks/useEntityPermissions";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { PermissionType } from "../interfaces/permissions";
 
 interface Props {
@@ -52,6 +56,7 @@ interface NavProps {
   disabled?: boolean;
   isMinimized?: boolean;
   badge?: number;
+  children?: React.ReactNode;
 }
 
 const Nav = ({
@@ -62,34 +67,71 @@ const Nav = ({
   disabled = false,
   isMinimized = false,
   badge,
+  children,
 }: NavProps) => {
+  const [open, setOpen] = useState(false);
   return (
-    <Link
+    <div
-      href={!disabled ? keyPath : ""}
       className={clsx(
-        "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
+        "flex flex-col gap-2 transition-all duration-300 ease-in-out",
-        "transition-all duration-300 ease-in-out relative",
+        open && !isMinimized && "bg-white rounded-xl"
-        disabled
-          ? "hover:bg-mti-gray-dim cursor-not-allowed"
-          : "hover:bg-mti-purple-light cursor-pointer",
-        path.startsWith(keyPath) && "bg-mti-purple-light text-white",
-        isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]"
       )}
     >
-      <Icon size={24} />
+      <Link
-      {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+        href={!disabled ? keyPath : ""}
-      {!!badge && badge > 0 && (
+        className={clsx(
-        <div
+          "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
-          className={clsx(
+          "transition-all duration-300 ease-in-out relative",
-            "bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
+          disabled
-            "transition ease-in-out duration-300",
+            ? "hover:bg-mti-gray-dim cursor-not-allowed"
-            isMinimized && "absolute right-0 top-0"
+            : "hover:bg-mti-purple-light cursor-pointer",
-          )}
+          path.startsWith(keyPath) && "bg-mti-purple-light text-white",
-        >
+          isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]"
-          {badge}
+        )}
-        </div>
+      >
-      )}
+        <Icon size={24} />
-    </Link>
+        {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+        {!!badge && badge > 0 && (
+          <div
+            className={clsx(
+              "bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
+              "transition ease-in-out duration-300",
+              isMinimized && "absolute right-0 top-0"
+            )}
+          >
+            {badge}
+          </div>
+        )}
+        {children && (
+          <button
+            className="flex items-center gap-4 rounded-full p-4 absolute right-0"
+            onClick={(e) => {
+              setOpen((prev) => !prev);
+              e.preventDefault();
+            }}
+          >
+            {open ? (
+              <BsChevronUp
+                size={24}
+                className={clsx(
+                  isMinimized && "hidden",
+                  "transition ease-in-out duration-300"
+                )}
+              />
+            ) : (
+              <BsChevronDown
+                size={24}
+                className={clsx(
+                  isMinimized && "hidden",
+                  "transition ease-in-out duration-300"
+                )}
+              />
+            )}
+          </button>
+        )}
+      </Link>
+      {open || isMinimized ? children : null}
+    </div>
   );
 };
 
@@ -121,12 +163,12 @@ export default function Sidebar({
     entities,
     "view_statistics"
   );
+
   const entitiesAllowPaymentRecord = useAllowedEntities(
     user,
     entities,
     "view_payment_record"
   );
-
   const entitiesAllowGeneration = useAllowedEntitiesSomePermissions(
     user,
     entities,
@@ -148,7 +190,7 @@ export default function Sidebar({
         viewTickets: true,
         viewClassrooms: true,
         viewSettings: true,
-        viewPaymentRecord: true,
+        viewPaymentRecords: true,
         viewGeneration: true,
         viewApprovalWorkflows: true,
       };
@@ -160,7 +202,7 @@ export default function Sidebar({
       viewTickets: false,
       viewClassrooms: false,
       viewSettings: false,
-      viewPaymentRecord: false,
+      viewPaymentRecords: false,
       viewGeneration: false,
       viewApprovalWorkflows: false,
     };
@@ -235,7 +277,7 @@ export default function Sidebar({
       ) &&
       entitiesAllowPaymentRecord.length > 0
     ) {
-      sidebarPermissions["viewPaymentRecord"] = true;
+      sidebarPermissions["viewPaymentRecords"] = true;
     }
     return sidebarPermissions;
   }, [
@@ -325,7 +367,24 @@ export default function Sidebar({
             path={path}
             keyPath="/training"
             isMinimized={isMinimized}
-          />
+          >
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsChatText}
+              label="Vocabulary"
+              path={path}
+              keyPath="/training/vocabulary"
+              isMinimized={isMinimized}
+            />
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsCardText}
+              label="Grammar"
+              path={path}
+              keyPath="/training/grammar"
+              isMinimized={isMinimized}
+            />
+          </Nav>
         )}
         {sidebarPermissions["viewPaymentRecords"] && (
           <Nav
@@ -378,7 +437,6 @@ export default function Sidebar({
             isMinimized={isMinimized}
           />
         )}
-
       </div>
       <div className="-xl:flex flex-col gap-3 xl:hidden">
         <Nav
@@ -425,6 +483,33 @@ export default function Sidebar({
             path={path}
             keyPath="/training"
             isMinimized
+          >
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsChatText}
+              label="Vocabulary"
+              path={path}
+              keyPath="/training/vocabulary"
+              isMinimized
+            />
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsCardText}
+              label="Grammar"
+              path={path}
+              keyPath="/training/grammar"
+              isMinimized
+            />
+          </Nav>
+        )}
+        {sidebarPermissions["viewPaymentRecords"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCurrencyDollar}
+            label="Payment Record"
+            path={path}
+            keyPath="/payment-record"
+            isMinimized
           />
         )}
         {sidebarPermissions["viewSettings"] && (
@@ -459,7 +544,7 @@ export default function Sidebar({
         )}
       </div>
 
-      <div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
+      <div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8 ">
         <div
           role="button"
           tabIndex={1}
@@ -483,7 +568,7 @@ export default function Sidebar({
           tabIndex={1}
           onClick={focusMode ? () => {} : logout}
           className={clsx(
-            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out -xl:px-4",
             isMinimized ? "w-fit" : "w-full min-w-[250px] px-8"
           )}
         >

src/hooks/useApprovalWorkflows.tsx

@@ -2,7 +2,7 @@ import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 
-export default function useApprovalWorkflows() {
+export default function useApprovalWorkflows(entitiesString?: string) {
   const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
@@ -10,7 +10,7 @@ export default function useApprovalWorkflows() {
   const getData = useCallback(() => {
     setIsLoading(true);
     axios
-      .get<ApprovalWorkflow[]>(`/api/approval-workflows`)
+      .get<ApprovalWorkflow[]>(`/api/approval-workflows`, {params: { entityIds: entitiesString }})
       .then((response) => setWorkflows(response.data))
       .catch((error) => {
         setIsError(true);

src/hooks/useExams.tsx

@@ -1,21 +1,21 @@
-import {Exam} from "@/interfaces/exam";
+import { Exam } from "@/interfaces/exam";
 import axios from "axios";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 
 export default function useExams() {
-	const [exams, setExams] = useState<Exam[]>([]);
+  const [exams, setExams] = useState<Exam[]>([]);
-	const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
-	const [isError, setIsError] = useState(false);
+  const [isError, setIsError] = useState(false);
 
-	const getData = () => {
+  const getData = () => {
-		setIsLoading(true);
+    setIsLoading(true);
-		axios
+    axios
-			.get<Exam[]>("/api/exam")
+      .get<Exam[]>(`/api/exam`)
-			.then((response) => setExams(response.data))
+      .then((response) => setExams(response.data))
-			.finally(() => setIsLoading(false));
+      .finally(() => setIsLoading(false));
-	};
+  };
 
-	useEffect(getData, []);
+  useEffect(getData, []);
 
-	return {exams, isLoading, isError, reload: getData};
+  return { exams, isLoading, isError, reload: getData };
 }

src/hooks/usePagination.tsx

@@ -1,60 +1,138 @@
 import Button from "@/components/Low/Button";
-import {useMemo, useState} from "react";
+import { useEffect, useMemo, useState } from "react";
-import {BiChevronLeft} from "react-icons/bi";
+import {
-import {BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight} from "react-icons/bs";
+  BsChevronDoubleLeft,
+  BsChevronDoubleRight,
+  BsChevronLeft,
+  BsChevronRight,
+} from "react-icons/bs";
+import Select from "../components/Low/Select";
 
 export default function usePagination<T>(list: T[], size = 25) {
-	const [page, setPage] = useState(0);
+  const [page, setPage] = useState(0);
+  const [itemsPerPage, setItemsPerPage] = useState(size);
 
-	const items = useMemo(() => list.slice(page * size, (page + 1) * size), [page, size, list]);
+  const items = useMemo(
+    () => list.slice(page * itemsPerPage, (page + 1) * itemsPerPage),
+    [list, page, itemsPerPage]
+  );
+  useEffect(() => {
+    if (page * itemsPerPage >= list.length) setPage(0);
+  }, [items, itemsPerPage, list.length, page]);
 
-	const render = () => (
+  const itemsPerPageOptions = [25, 50, 100, 200];
-		<div className="w-full flex gap-2 justify-between items-center">
-			<div className="flex items-center gap-4 w-fit">
-				<Button className="w-[200px] h-fit" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
-					Previous Page
-				</Button>
-			</div>
-			<div className="flex items-center gap-4 w-fit">
-				<span className="opacity-80">
-					{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
-				</span>
-				<Button className="w-[200px]" disabled={(page + 1) * size >= list.length} onClick={() => setPage((prev) => prev + 1)}>
-					Next Page
-				</Button>
-			</div>
-		</div>
-	);
 
-	const renderMinimal = () => (
+  const render = () => (
-		<div className="flex gap-4 items-center">
+    <div className="w-full flex gap-2 justify-between items-center">
-			<div className="flex gap-2 items-center">
+      <div className="flex items-center gap-4 w-fit">
-				<button disabled={page === 0} onClick={() => setPage(0)} className="disabled:opacity-60 disabled:cursor-not-allowed">
+        <Button
-					<BsChevronDoubleLeft />
+          className="w-[200px] h-fit"
-				</button>
+          disabled={page === 0}
-				<button disabled={page === 0} onClick={() => setPage((prev) => prev - 1)} className="disabled:opacity-60 disabled:cursor-not-allowed">
+          onClick={() => setPage((prev) => prev - 1)}
-					<BsChevronLeft />
+        >
-				</button>
+          Previous Page
-			</div>
+        </Button>
-			<span className="opacity-80 w-32 text-center">
+      </div>
-				{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
+      <div className="flex items-center gap-4 w-fit">
-			</span>
+        <div className="flex flex-row items-center gap-1 w-56">
-			<div className="flex gap-2 items-center">
+          <Select
-				<button
+            value={{
-					disabled={(page + 1) * size >= list.length}
+              value: itemsPerPage.toString(),
-					onClick={() => setPage((prev) => prev + 1)}
+              label: itemsPerPage.toString(),
-					className="disabled:opacity-60 disabled:cursor-not-allowed">
+            }}
-					<BsChevronRight />
+            onChange={(value) =>
-				</button>
+              setItemsPerPage(parseInt(value!.value ?? "25"))
-				<button
+            }
-					disabled={(page + 1) * size >= list.length}
+            options={itemsPerPageOptions.map((size) => ({
-					onClick={() => setPage(Math.floor(list.length / size))}
+              label: size.toString(),
-					className="disabled:opacity-60 disabled:cursor-not-allowed">
+              value: size.toString(),
-					<BsChevronDoubleRight />
+            }))}
-				</button>
+            isClearable={false}
-			</div>
+            styles={{
-		</div>
+              control: (styles) => ({ ...styles, width: "100px" }),
-	);
+              container: (styles) => ({ ...styles, width: "100px" }),
+            }}
+          />
+          <span className="opacity-80 w-32 text-center">
+            {page * itemsPerPage + 1} -{" "}
+            {itemsPerPage * (page + 1) > list.length
+              ? list.length
+              : itemsPerPage * (page + 1)}
+            {list.length}
+          </span>
+        </div>
+        <Button
+          className="w-[200px]"
+          disabled={(page + 1) * itemsPerPage >= list.length}
+          onClick={() => setPage((prev) => prev + 1)}
+        >
+          Next Page
+        </Button>
+      </div>
+    </div>
+  );
 
-	return {page, items, setPage, render, renderMinimal};
+  const renderMinimal = () => (
+    <div className="flex gap-4 items-center">
+      <div className="flex gap-2 items-center">
+        <button
+          disabled={page === 0}
+          onClick={() => setPage(0)}
+          className="disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          <BsChevronDoubleLeft />
+        </button>
+        <button
+          disabled={page === 0}
+          onClick={() => setPage((prev) => prev - 1)}
+          className="disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          <BsChevronLeft />
+        </button>
+      </div>
+      <div className="flex flex-row items-center gap-1 w-56">
+        <Select
+          value={{
+            value: itemsPerPage.toString(),
+            label: itemsPerPage.toString(),
+          }}
+          onChange={(value) => setItemsPerPage(parseInt(value!.value ?? "25"))}
+          options={itemsPerPageOptions.map((size) => ({
+            label: size.toString(),
+            value: size.toString(),
+          }))}
+          isClearable={false}
+          styles={{
+            control: (styles) => ({ ...styles, width: "100px" }),
+            container: (styles) => ({ ...styles, width: "100px" }),
+          }}
+        />
+        <span className="opacity-80 w-32 text-center">
+          {page * itemsPerPage + 1} -{" "}
+          {itemsPerPage * (page + 1) > list.length
+            ? list.length
+            : itemsPerPage * (page + 1)}
+          / {list.length}
+        </span>
+      </div>
+      <div className="flex gap-2 items-center">
+        <button
+          disabled={(page + 1) * itemsPerPage >= list.length}
+          onClick={() => setPage((prev) => prev + 1)}
+          className="disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          <BsChevronRight />
+        </button>
+        <button
+          disabled={(page + 1) * itemsPerPage >= list.length}
+          onClick={() => setPage(Math.floor(list.length / itemsPerPage))}
+          className="disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          <BsChevronDoubleRight />
+        </button>
+      </div>
+    </div>
+  );
+
+  return { page, items, setPage, render, renderMinimal };
 }

src/interfaces/exam.ts

@@ -1,4 +1,3 @@
-import instructions from "@/pages/api/exam/media/instructions";
 import { Module } from ".";
 
 export type Exam = ReadingExam | ListeningExam | WritingExam | SpeakingExam | LevelExam;
@@ -10,6 +9,9 @@ export type Difficulty = BasicDifficulty | CEFRLevels;
 // Left easy, medium and hard to support older exam versions
 export type BasicDifficulty = "easy" | "medium" | "hard";
 export type CEFRLevels = "A1" | "A2" | "B1" | "B2" | "C1" | "C2";
+export const ACCESSTYPE = ["public", "private", "confidential"] as const;
+export type AccessType = typeof ACCESSTYPE[number];
+
 
 
 export interface ExamBase {
@@ -24,8 +26,10 @@ export interface ExamBase {
 	shuffle?: boolean;
 	createdBy?: string; // option as it has been added later
 	createdAt?: string; // option as it has been added later
-	private?: boolean;
+	access: AccessType;
 	label?: string;
+	requiresApproval?: boolean;
+	approved?: boolean;
 }
 export interface ReadingExam extends ExamBase {
 	module: "reading";
@@ -238,6 +242,7 @@ export interface InteractiveSpeakingExercise extends Section {
 }
 
 export interface FillBlanksMCOption {
+	uuid: string; // added later to fulfill the need for an immutable identifier.
 	id: string;
 	options: {
 		A: string;
@@ -255,6 +260,7 @@ export interface FillBlanksExercise {
 	text: string; // *EXAMPLE: "They tried to {{1}} burning"
 	allowRepetition?: boolean;
 	solutions: {
+		uuid: string; // added later to fulfill the need for an immutable identifier.
 		id: string; // *EXAMPLE: "1"
 		solution: string; // *EXAMPLE: "preserve"
 	}[];
@@ -278,6 +284,7 @@ export interface TrueFalseExercise {
 }
 
 export interface TrueFalseQuestion {
+	uuid: string; // added later to fulfill the need for an immutable identifier.
 	id: string; // *EXAMPLE: "1"
 	prompt: string; // *EXAMPLE: "What does her briefcase look like?"
 	solution: "true" | "false" | "not_given" | undefined; // *EXAMPLE: "True"
@@ -290,6 +297,7 @@ export interface WriteBlanksExercise {
 	id: string;
 	text: string; // *EXAMPLE: "The Government plans to give ${{14}}"
 	solutions: {
+		uuid: string; // added later to fulfill the need for an immutable identifier.
 		id: string; // *EXAMPLE: "14"
 		solution: string[]; // *EXAMPLE: ["Prescott"] - All possible solutions (case sensitive)
 	}[];
@@ -316,12 +324,14 @@ export interface MatchSentencesExercise {
 }
 
 export interface MatchSentenceExerciseSentence {
+	uuid: string; // added later to fulfill the need for an immutable identifier.
 	id: string;
 	sentence: string;
 	solution: string;
 }
 
 export interface MatchSentenceExerciseOption {
+	uuid: string; // added later to fulfill the need for an immutable identifier.
 	id: string;
 	sentence: string;
 }
@@ -343,6 +353,7 @@ export interface MultipleChoiceExercise {
 
 export interface MultipleChoiceQuestion {
 	variant: "image" | "text";
+	uuid: string; // added later to fulfill the need for an immutable identifier.
 	id: string; // *EXAMPLE: "1"
 	prompt: string; // *EXAMPLE: "What does her briefcase look like?"
 	solution: string; // *EXAMPLE: "A"

src/lib/createWorkflowsOnExamCreation.ts

@@ -1,7 +1,10 @@
 import { Module } from "@/interfaces";
 import { getApprovalWorkflowByFormIntaker, createApprovalWorkflow } from "@/utils/approval.workflows.be";
+import client from "@/lib/mongodb";
 
-export async function createApprovalWorkflowsOnExamCreation(examAuthor: string, examEntities: string[], examId: string, examModule: string) {
+const db = client.db(process.env.MONGODB_DB);
+
+/* export async function createApprovalWorkflowsOnExamCreation(examAuthor: string, examEntities: string[], examId: string, examModule: string) {
     const results = await Promise.all(
         examEntities.map(async (entity) => {
             const configuredWorkflow = await getApprovalWorkflowByFormIntaker(entity, examAuthor);
@@ -27,6 +30,53 @@ export async function createApprovalWorkflowsOnExamCreation(examAuthor: string,
     const successCount = results.filter((r) => r.created).length;
     const totalCount = examEntities.length;
 
+    return {
+        successCount,
+        totalCount,
+    };
+} */
+
+// TEMPORARY BEHAVIOUR! ONLY THE FIRST CONFIGURED WORKFLOW FOUND IS STARTED
+export async function createApprovalWorkflowOnExamCreation(examAuthor: string, examEntities: string[], examId: string, examModule: string) {
+    let successCount = 0;
+    let totalCount = 0;
+
+    for (const entity of examEntities) {
+        const configuredWorkflow = await getApprovalWorkflowByFormIntaker(entity, examAuthor);
+
+        if (!configuredWorkflow) {
+            continue;
+        }
+
+        totalCount = 1; // a workflow was found
+
+        configuredWorkflow.modules.push(examModule as Module);
+        configuredWorkflow.name = examId;
+        configuredWorkflow.examId = examId;
+        configuredWorkflow.entityId = entity;
+        configuredWorkflow.startDate = Date.now();
+        configuredWorkflow.steps[0].completed = true;
+        configuredWorkflow.steps[0].completedBy = examAuthor;
+        configuredWorkflow.steps[0].completedDate = Date.now();
+
+        try {
+            await createApprovalWorkflow("active-workflows", configuredWorkflow);
+            successCount = 1;
+            break; // Stop after the first success
+        } catch (error: any) {
+            break;
+        }
+    }
+
+    // commented because they asked for every exam to stay confidential
+    /* if (totalCount === 0) { // current behaviour: if no workflow was found skip approval process
+		await db.collection(examModule).updateOne(
+			{ id: examId },
+			{ $set: { id: examId, access: "private" }},
+			{ upsert: true }
+		);
+    } */
+
     return {
         successCount,
         totalCount,

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -1,7 +1,5 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import { PERMISSIONS } from "@/constants/userPermissions";
-import useUsers from "@/hooks/useUsers";
 import { Type, User } from "@/interfaces/user";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import axios from "axios";
@@ -15,444 +13,587 @@ import ShortUniqueId from "short-unique-id";
 import { useFilePicker } from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
-import { BsFileEarmarkEaselFill, BsQuestionCircleFill } from "react-icons/bs";
 import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import { PermissionType } from "@/interfaces/permissions";
-import usePermissions from "@/hooks/usePermissions";
 import { EntityWithRoles } from "@/interfaces/entity";
 import Select from "@/components/Low/Select";
-import CodeGenImportSummary, { ExcelCodegenDuplicatesMap } from "@/components/ImportSummaries/Codegen";
+import CodeGenImportSummary, {
+  ExcelCodegenDuplicatesMap,
+} from "@/components/ImportSummaries/Codegen";
 import { FaFileDownload } from "react-icons/fa";
 import { IoInformationCircleOutline } from "react-icons/io5";
 import { HiOutlineDocumentText } from "react-icons/hi";
 import CodegenTable from "@/components/Tables/CodeGenTable";
 
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
+);
 
 const USER_TYPE_PERMISSIONS: {
-	[key in Type]: { perm: PermissionType | undefined; list: Type[] };
+  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
 } = {
-	student: {
+  student: {
-		perm: "createCodeStudent",
+    perm: "createCodeStudent",
-		list: [],
+    list: [],
-	},
+  },
-	teacher: {
+  teacher: {
-		perm: "createCodeTeacher",
+    perm: "createCodeTeacher",
-		list: [],
+    list: [],
-	},
+  },
-	agent: {
+  agent: {
-		perm: "createCodeCountryManager",
+    perm: "createCodeCountryManager",
-		list: ["student", "teacher", "corporate", "mastercorporate"],
+    list: ["student", "teacher", "corporate", "mastercorporate"],
-	},
+  },
-	corporate: {
+  corporate: {
-		perm: "createCodeCorporate",
+    perm: "createCodeCorporate",
-		list: ["student", "teacher"],
+    list: ["student", "teacher"],
-	},
+  },
-	mastercorporate: {
+  mastercorporate: {
-		perm: undefined,
+    perm: undefined,
-		list: ["student", "teacher", "corporate"],
+    list: ["student", "teacher", "corporate"],
-	},
+  },
-	admin: {
+  admin: {
-		perm: "createCodeAdmin",
+    perm: "createCodeAdmin",
-		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+    list: [
-	},
+      "student",
-	developer: {
+      "teacher",
-		perm: undefined,
+      "agent",
-		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+      "corporate",
-	},
+      "admin",
+      "mastercorporate",
+    ],
+  },
+  developer: {
+    perm: undefined,
+    list: [
+      "student",
+      "teacher",
+      "agent",
+      "corporate",
+      "admin",
+      "developer",
+      "mastercorporate",
+    ],
+  },
 };
 
 interface Props {
-	user: User;
+  user: User;
-	users: User[];
+  users: User[];
-	permissions: PermissionType[];
+  permissions: PermissionType[];
-	entities: EntityWithRoles[]
+  entities: EntityWithRoles[];
-	onFinish: () => void;
+  onFinish: () => void;
 }
 
-export default function BatchCodeGenerator({ user, users, entities = [], permissions, onFinish }: Props) {
+export default function BatchCodeGenerator({
-	const [infos, setInfos] = useState<{ email: string; name: string; passport_id: string }[]>([]);
+  user,
-	const [isLoading, setIsLoading] = useState(false);
+  users,
-	const [expiryDate, setExpiryDate] = useState<Date | null>(
+  entities = [],
-		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
+  permissions,
-	);
+  onFinish,
-	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+}: Props) {
-	const [type, setType] = useState<Type>("student");
+  const [infos, setInfos] = useState<
-	const [showHelp, setShowHelp] = useState(false);
+    { email: string; name: string; passport_id: string }[]
-	const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
+  >([]);
-	const [parsedExcel, setParsedExcel] = useState<{ rows?: any[]; errors?: any[] }>({ rows: undefined, errors: undefined });
+  const [isLoading, setIsLoading] = useState(false);
-	const [duplicatedRows, setDuplicatedRows] = useState<{ duplicates: ExcelCodegenDuplicatesMap, count: number }>();
+  const [expiryDate, setExpiryDate] = useState<Date | null>(
+    user?.subscriptionExpirationDate
+      ? moment(user.subscriptionExpirationDate).toDate()
+      : null
+  );
+  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+  const [type, setType] = useState<Type>("student");
+  const [showHelp, setShowHelp] = useState(false);
+  const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
+  const [parsedExcel, setParsedExcel] = useState<{
+    rows?: any[];
+    errors?: any[];
+  }>({ rows: undefined, errors: undefined });
+  const [duplicatedRows, setDuplicatedRows] = useState<{
+    duplicates: ExcelCodegenDuplicatesMap;
+    count: number;
+  }>();
 
-	const { openFilePicker, filesContent, clear } = useFilePicker({
+  const { openFilePicker, filesContent, clear } = useFilePicker({
-		accept: ".xlsx",
+    accept: ".xlsx",
-		multiple: false,
+    multiple: false,
-		readAs: "ArrayBuffer",
+    readAs: "ArrayBuffer",
-	});
+  });
 
-	useEffect(() => {
+  useEffect(() => {
-		if (!isExpiryDateEnabled) setExpiryDate(null);
+    if (!isExpiryDateEnabled) setExpiryDate(null);
-	}, [isExpiryDateEnabled]);
+  }, [isExpiryDateEnabled]);
 
-	const schema = {
+  const schema = {
-		'First Name': {
+    "First Name": {
-			prop: 'firstName',
+      prop: "firstName",
-			type: String,
+      type: String,
-			required: true,
+      required: true,
-			validate: (value: string) => {
+      validate: (value: string) => {
-				if (!value || value.trim() === '') {
+        if (!value || value.trim() === "") {
-					throw new Error('First Name cannot be empty')
+          throw new Error("First Name cannot be empty");
-				}
+        }
-				return true
+        return true;
-			}
+      },
-		},
+    },
-		'Last Name': {
+    "Last Name": {
-			prop: 'lastName',
+      prop: "lastName",
-			type: String,
+      type: String,
-			required: true,
+      required: true,
-			validate: (value: string) => {
+      validate: (value: string) => {
-				if (!value || value.trim() === '') {
+        if (!value || value.trim() === "") {
-					throw new Error('Last Name cannot be empty')
+          throw new Error("Last Name cannot be empty");
-				}
+        }
-				return true
+        return true;
-			}
+      },
-		},
+    },
-		'Passport/National ID': {
+    "Passport/National ID": {
-			prop: 'passport_id',
+      prop: "passport_id",
-			type: String,
+      type: String,
-			required: true,
+      required: true,
-			validate: (value: string) => {
+      validate: (value: string) => {
-				if (!value || value.trim() === '') {
+        if (!value || value.trim() === "") {
-					throw new Error('Passport/National ID cannot be empty')
+          throw new Error("Passport/National ID cannot be empty");
-				}
+        }
-				return true
+        return true;
-			}
+      },
-		},
+    },
-		'E-mail': {
+    "E-mail": {
-			prop: 'email',
+      prop: "email",
-			required: true,
+      required: true,
-			type: (value: any) => {
+      type: (value: any) => {
-				if (!value || value.trim() === '') {
+        if (!value || value.trim() === "") {
-					throw new Error('Email cannot be empty')
+          throw new Error("Email cannot be empty");
-				}
+        }
-				if (!EMAIL_REGEX.test(value.trim())) {
+        if (!EMAIL_REGEX.test(value.trim())) {
-					throw new Error('Invalid Email')
+          throw new Error("Invalid Email");
-				}
+        }
-				return value
+        return value;
-			}
+      },
-		}
+    },
-	}
+  };
 
-	useEffect(() => {
+  useEffect(() => {
-		if (filesContent.length > 0) {
+    if (filesContent.length > 0) {
-			const file = filesContent[0];
+      const file = filesContent[0];
-			readXlsxFile(
+      readXlsxFile(file.content, { schema, ignoreEmptyRows: false }).then(
-				file.content, { schema, ignoreEmptyRows: false })
+        (data) => {
-				.then((data) => {
+          setParsedExcel(data);
-					setParsedExcel(data)
+        }
-				});
+      );
-		}
+    }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filesContent]);
+  }, [filesContent]);
 
-	useEffect(() => {
+  useEffect(() => {
-		if (parsedExcel.rows) {
+    if (parsedExcel.rows) {
-			const duplicates: ExcelCodegenDuplicatesMap = {
+      const duplicates: ExcelCodegenDuplicatesMap = {
-				email: new Map(),
+        email: new Map(),
-				passport_id: new Map(),
+        passport_id: new Map(),
-			};
+      };
-			const duplicateValues = new Set<string>();
+      const duplicateValues = new Set<string>();
-			const duplicateRowIndices = new Set<number>();
+      const duplicateRowIndices = new Set<number>();
 
-			const errorRowIndices = new Set(
+      const errorRowIndices = new Set(
-				parsedExcel.errors?.map(error => error.row) || []
+        parsedExcel.errors?.map((error) => error.row) || []
-			);
+      );
 
-			parsedExcel.rows.forEach((row, index) => {
+      parsedExcel.rows.forEach((row, index) => {
-				if (!errorRowIndices.has(index + 2)) {
+        if (!errorRowIndices.has(index + 2)) {
-					(Object.keys(duplicates) as Array<keyof ExcelCodegenDuplicatesMap>).forEach(field => {
+          (
-						if (row !== null) {
+            Object.keys(duplicates) as Array<keyof ExcelCodegenDuplicatesMap>
-							const value = row[field];
+          ).forEach((field) => {
-							if (value) {
+            if (row !== null) {
-								if (!duplicates[field].has(value)) {
+              const value = row[field];
-									duplicates[field].set(value, [index + 2]);
+              if (value) {
-								} else {
+                if (!duplicates[field].has(value)) {
-									const existingRows = duplicates[field].get(value);
+                  duplicates[field].set(value, [index + 2]);
-									if (existingRows) {
+                } else {
-										existingRows.push(index + 2);
+                  const existingRows = duplicates[field].get(value);
-										duplicateValues.add(value);
+                  if (existingRows) {
-										existingRows.forEach(rowNum => duplicateRowIndices.add(rowNum));
+                    existingRows.push(index + 2);
-									}
+                    duplicateValues.add(value);
-								}
+                    existingRows.forEach((rowNum) =>
-							}
+                      duplicateRowIndices.add(rowNum)
-						}
+                    );
-					});
+                  }
-				}
+                }
-			});
+              }
+            }
+          });
+        }
+      });
 
-			const info = parsedExcel.rows
+      const info = parsedExcel.rows
-				.map((row, index) => {
+        .map((row, index) => {
-					if (errorRowIndices.has(index + 2) || duplicateRowIndices.has(index + 2) || row === null) {
+          if (
-						return undefined;
+            errorRowIndices.has(index + 2) ||
-					}
+            duplicateRowIndices.has(index + 2) ||
-					const { firstName, lastName, studentID, passport_id, email, phone, group, country } = row;
+            row === null
-					if (!email || !EMAIL_REGEX.test(email.toString().trim())) {
+          ) {
-						return undefined;
+            return undefined;
-					}
+          }
+          const {
+            firstName,
+            lastName,
+            studentID,
+            passport_id,
+            email,
+            phone,
+            group,
+            country,
+          } = row;
+          if (!email || !EMAIL_REGEX.test(email.toString().trim())) {
+            return undefined;
+          }
 
-					return {
+          return {
-						email: email.toString().trim().toLowerCase(),
+            email: email.toString().trim().toLowerCase(),
-						name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
+            name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
-						passport_id: passport_id?.toString().trim() || undefined,
+            passport_id: passport_id?.toString().trim() || undefined,
-					};
+          };
-				}).filter((x) => !!x) as typeof infos;
+        })
+        .filter((x) => !!x) as typeof infos;
 
-			setInfos(info);
+      setInfos(info);
-		}
+    }
-	}, [entity, parsedExcel, type]);
+  }, [entity, parsedExcel, type]);
 
-	const generateAndInvite = async () => {
+  const generateAndInvite = async () => {
-		const newUsers = infos.filter((x) => !users.map((u) => u.email).includes(x.email));
+    const newUsers = infos.filter(
-		const existingUsers = infos
+      (x) => !users.map((u) => u.email).includes(x.email)
-			.filter((x) => users.map((u) => u.email).includes(x.email))
+    );
-			.map((i) => users.find((u) => u.email === i.email))
+    const existingUsers = infos
-			.filter((x) => !!x && x.type === "student") as User[];
+      .filter((x) => users.map((u) => u.email).includes(x.email))
+      .map((i) => users.find((u) => u.email === i.email))
+      .filter((x) => !!x && x.type === "student") as User[];
 
-		const newUsersSentence = newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
+    const newUsersSentence =
-		const existingUsersSentence = existingUsers.length > 0 ? `invite ${existingUsers.length} registered student(s)` : undefined;
+      newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
-		if (
+    const existingUsersSentence =
-			!confirm(
+      existingUsers.length > 0
-				`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`,
+        ? `invite ${existingUsers.length} registered student(s)`
-			)
+        : undefined;
-		)
+    if (
-			return;
+      !confirm(
+        `You are about to ${[newUsersSentence, existingUsersSentence]
+          .filter((x) => !!x)
+          .join(" and ")}, are you sure you want to continue?`
+      )
+    )
+      return;
 
-		setIsLoading(true);
+    setIsLoading(true);
-		Promise.all(existingUsers.map(async (u) => await axios.post(`/api/invites`, { to: u.id, from: user.id })))
+    Promise.all(
-			.then(() => toast.success(`Successfully invited ${existingUsers.length} registered student(s)!`))
+      existingUsers.map(
-			.finally(() => {
+        async (u) =>
-				if (newUsers.length === 0) setIsLoading(false);
+          await axios.post(`/api/invites`, { to: u.id, from: user.id })
-			});
+      )
+    )
+      .then(() =>
+        toast.success(
+          `Successfully invited ${existingUsers.length} registered student(s)!`
+        )
+      )
+      .finally(() => {
+        if (newUsers.length === 0) setIsLoading(false);
+      });
 
-		if (newUsers.length > 0) generateCode(type, newUsers);
+    if (newUsers.length > 0) generateCode(type, newUsers);
-		setInfos([]);
+    setInfos([]);
-	};
+  };
 
-	const generateCode = (type: Type, informations: typeof infos) => {
+  const generateCode = (type: Type, informations: typeof infos) => {
-		const uid = new ShortUniqueId();
+    const uid = new ShortUniqueId();
-		const codes = informations.map(() => uid.randomUUID(6));
+    const codes = informations.map(() => uid.randomUUID(6));
 
-		setIsLoading(true);
+    setIsLoading(true);
-		axios
+    axios
-			.post<{ ok: boolean; valid?: number; reason?: string }>("/api/code", {
+      .post<{ ok: boolean; valid?: number; reason?: string }>("/api/code", {
-				type,
+        type,
-				codes,
+        codes,
-				infos: informations.map((info, index) => ({ ...info, code: codes[index] })),
+        infos: informations.map((info, index) => ({
-				expiryDate,
+          ...info,
-				entity
+          code: codes[index],
-			})
+        })),
-			.then(({ data, status }) => {
+        expiryDate,
-				if (data.ok) {
+        entity,
-					toast.success(
+      })
-						`Successfully generated${data.valid ? ` ${data.valid}/${informations.length}` : ""} ${capitalize(
+      .then(({ data, status }) => {
-							type,
+        if (data.ok) {
-						)} codes and they have been notified by e-mail!`,
+          toast.success(
-						{ toastId: "success" },
+            `Successfully generated${
-					);
+              data.valid ? ` ${data.valid}/${informations.length}` : ""
+            } ${capitalize(type)} codes and they have been notified by e-mail!`,
+            { toastId: "success" }
+          );
 
-					onFinish();
+          onFinish();
-					return;
+          return;
-				}
+        }
 
-				if (status === 403) {
+        if (status === 403) {
-					toast.error(data.reason, { toastId: "forbidden" });
+          toast.error(data.reason, { toastId: "forbidden" });
-				}
+        }
-			})
+      })
-			.catch(({ response: { status, data } }) => {
+      .catch(({ response: { status, data } }) => {
-				if (status === 403) {
+        if (status === 403) {
-					toast.error(data.reason, { toastId: "forbidden" });
+          toast.error(data.reason, { toastId: "forbidden" });
-					return;
+          return;
-				}
+        }
 
-				toast.error(`Something went wrong, please try again later!`, {
+        toast.error(`Something went wrong, please try again later!`, {
-					toastId: "error",
+          toastId: "error",
-				});
+        });
-			})
+      })
-			.finally(() => {
+      .finally(() => {
-				setIsLoading(false);
+        setIsLoading(false);
-				return clear();
+        return clear();
-			});
+      });
-	};
+  };
 
-	const handleTemplateDownload = () => {
+  const handleTemplateDownload = () => {
-		const fileName = "BatchCodeTemplate.xlsx";
+    const fileName = "BatchCodeTemplate.xlsx";
-		const url = `https://firebasestorage.googleapis.com/v0/b/encoach-staging.appspot.com/o/import_templates%2F${fileName}?alt=media&token=b771a535-bf95-4060-889c-a086df65d480`;
+    const url = `https://firebasestorage.googleapis.com/v0/b/encoach-staging.appspot.com/o/import_templates%2F${fileName}?alt=media&token=b771a535-bf95-4060-889c-a086df65d480`;
 
-		const link = document.createElement('a');
+    const link = document.createElement("a");
-		link.href = url;
+    link.href = url;
 
-		link.download = fileName;
+    link.download = fileName;
 
-		document.body.appendChild(link);
+    document.body.appendChild(link);
-		link.click();
+    link.click();
-		document.body.removeChild(link);
+    document.body.removeChild(link);
-	};
+  };
 
-	return (
+  return (
-		<>
+    <>
-			<Modal isOpen={showHelp} onClose={() => setShowHelp(false)}>
+      <Modal isOpen={showHelp} onClose={() => setShowHelp(false)}>
-				<>
+        <>
-					<div className="flex font-bold text-xl justify-center text-gray-700"><span>Excel File Format</span></div>
+          <div className="flex font-bold text-xl justify-center text-gray-700">
-					<div className="mt-4 flex flex-col gap-4">
+            <span>Excel File Format</span>
-						<div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
+          </div>
-							<div className="flex items-center gap-2">
+          <div className="mt-4 flex flex-col gap-4">
-								<HiOutlineDocumentText className={`w-5 h-5 text-mti-purple-light`} />
+            <div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
-								<h2 className="text-lg font-semibold">
+              <div className="flex items-center gap-2">
-									The uploaded document must:
+                <HiOutlineDocumentText
-								</h2>
+                  className={`w-5 h-5 text-mti-purple-light`}
-							</div>
+                />
-							<ul className="flex flex-col pl-10 gap-2">
+                <h2 className="text-lg font-semibold">
-								<li className="text-gray-700 list-disc">
+                  The uploaded document must:
-									be an Excel .xlsx document.
+                </h2>
-								</li>
+              </div>
-								<li className="text-gray-700 list-disc">
+              <ul className="flex flex-col pl-10 gap-2">
-									only have a single spreadsheet with the following <b>exact same name</b> columns:
+                <li className="text-gray-700 list-disc">
-									<div className="py-4 pr-4">
+                  be an Excel .xlsx document.
-										<table className="w-full bg-white">
+                </li>
-											<thead>
+                <li className="text-gray-700 list-disc">
-												<tr>
+                  only have a single spreadsheet with the following{" "}
-													<th className="border border-neutral-200 px-2 py-1">First Name</th>
+                  <b>exact same name</b> columns:
-													<th className="border border-neutral-200 px-2 py-1">Last Name</th>
+                  <div className="py-4 pr-4">
-													<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
+                    <table className="w-full bg-white">
-													<th className="border border-neutral-200 px-2 py-1">E-mail</th>
+                      <thead>
-												</tr>
+                        <tr>
-											</thead>
+                          <th className="border border-neutral-200 px-2 py-1">
-										</table>
+                            First Name
-									</div>
+                          </th>
-								</li>
+                          <th className="border border-neutral-200 px-2 py-1">
-							</ul>
+                            Last Name
-						</div>
+                          </th>
-						<div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
+                          <th className="border border-neutral-200 px-2 py-1">
-							<div className="flex items-center gap-2">
+                            Passport/National ID
-								<IoInformationCircleOutline className={`w-5 h-5 text-mti-purple-light`} />
+                          </th>
-								<h2 className="text-lg font-semibold">
+                          <th className="border border-neutral-200 px-2 py-1">
-									Note that:
+                            E-mail
-								</h2>
+                          </th>
-							</div>
+                        </tr>
-							<ul className="flex flex-col pl-10 gap-2">
+                      </thead>
-								<li className="text-gray-700 list-disc">
+                    </table>
-									all incorrect e-mails will be ignored.
+                  </div>
-								</li>
+                </li>
-								<li className="text-gray-700 list-disc">
+              </ul>
-									all already registered e-mails will be ignored.
+            </div>
-								</li>
+            <div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
-								<li className="text-gray-700 list-disc">
+              <div className="flex items-center gap-2">
-									all rows which contain duplicate values in the columns: &quot;Passport/National ID&quot;, &quot;E-mail&quot;, will be ignored.
+                <IoInformationCircleOutline
-								</li>
+                  className={`w-5 h-5 text-mti-purple-light`}
-								<li className="text-gray-700 list-disc">
+                />
-									all of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.
+                <h2 className="text-lg font-semibold">Note that:</h2>
-								</li>
+              </div>
-							</ul>
+              <ul className="flex flex-col pl-10 gap-2">
-						</div>
+                <li className="text-gray-700 list-disc">
-						<div className="bg-gray-100 rounded-lg p-4">
+                  all incorrect e-mails will be ignored.
-							<p className="text-gray-600">
+                </li>
-								{`The downloadable template is an example of a file that can be imported. Your document doesn't need to be a carbon copy of the template - it can have different styling but it must adhere to the previous requirements.`}
+                <li className="text-gray-700 list-disc">
-							</p>
+                  all already registered e-mails will be ignored.
-						</div>
+                </li>
-						<div className="w-full flex justify-between mt-6 gap-8">
+                <li className="text-gray-700 list-disc">
-							<Button color="purple" onClick={() => setShowHelp(false)} variant="outline" className="self-end w-full bg-white">
+                  all rows which contain duplicate values in the columns:
-								Close
+                  &quot;Passport/National ID&quot;, &quot;E-mail&quot;, will be
-							</Button>
+                  ignored.
+                </li>
+                <li className="text-gray-700 list-disc">
+                  all of the e-mails in the file will receive an e-mail to join
+                  EnCoach with the role selected below.
+                </li>
+              </ul>
+            </div>
+            <div className="bg-gray-100 rounded-lg p-4">
+              <p className="text-gray-600">
+                {`The downloadable template is an example of a file that can be imported. Your document doesn't need to be a carbon copy of the template - it can have different styling but it must adhere to the previous requirements.`}
+              </p>
+            </div>
+            <div className="w-full flex justify-between mt-6 gap-8">
+              <Button
+                color="purple"
+                onClick={() => setShowHelp(false)}
+                variant="outline"
+                className="self-end w-full bg-white"
+              >
+                Close
+              </Button>
 
-							<Button color="purple" onClick={handleTemplateDownload} variant="solid" className="self-end w-full">
+              <Button
-								<div className="flex items-center gap-2">
+                color="purple"
-									<FaFileDownload size={24} />
+                onClick={handleTemplateDownload}
-									Download Template
+                variant="solid"
-								</div>
+                className="self-end w-full"
-							</Button>
+              >
-						</div>
+                <div className="flex items-center gap-2">
-					</div>
+                  <FaFileDownload size={24} />
-				</>
+                  Download Template
-			</Modal>
+                </div>
-			<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
+              </Button>
-				<div className="flex items-end justify-between">
+            </div>
-					<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
+          </div>
-					<button
+        </>
-						onClick={() => setShowHelp(true)}
+      </Modal>
-						className="tooltip cursor-pointer p-1.5 hover:bg-gray-200 rounded-full transition-colors duration-200"
+      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
-						data-tip="Excel File Format"
+        <div className="flex items-end justify-between">
-					>
+          <label className="text-mti-gray-dim text-base font-normal">
-						<IoInformationCircleOutline size={24} />
+            Choose an Excel file
-					</button>
+          </label>
-				</div>
+          <button
-				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+            onClick={() => setShowHelp(true)}
-					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+            className="tooltip cursor-pointer p-1.5 hover:bg-gray-200 rounded-full transition-colors duration-200"
-				</Button>
+            data-tip="Excel File Format"
-				{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+          >
-					<>
+            <IoInformationCircleOutline size={24} />
-						<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+          </button>
-							<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+        </div>
-							<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
+        <Button
-								Enabled
+          onClick={openFilePicker}
-							</Checkbox>
+          isLoading={isLoading}
-						</div>
+          disabled={isLoading}
-						{isExpiryDateEnabled && (
+        >
-							<ReactDatePicker
+          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
-								className={clsx(
+        </Button>
-									"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+        {user &&
-									"hover:border-mti-purple tooltip",
+          checkAccess(user, [
-									"transition duration-300 ease-in-out",
+            "developer",
-								)}
+            "admin",
-								filterDate={(date) =>
+            "corporate",
-									moment(date).isAfter(new Date()) &&
+            "mastercorporate",
-									(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
+          ]) && (
-								}
+            <>
-								dateFormat="dd/MM/yyyy"
+              <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-								selected={expiryDate}
+                <label className="text-mti-gray-dim text-base font-normal">
-								onChange={(date) => setExpiryDate(date)}
+                  Expiry Date
-							/>
+                </label>
-						)}
+                <Checkbox
-					</>
+                  isChecked={isExpiryDateEnabled}
-				)}
+                  onChange={setIsExpiryDateEnabled}
-				<div className={clsx("flex flex-col gap-4")}>
+                  disabled={!!user.subscriptionExpirationDate}
-					<label className="font-normal text-base text-mti-gray-dim">Entity</label>
+                >
-					<Select
+                  Enabled
-						defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
+                </Checkbox>
-						options={entities.map((e) => ({ value: e.id, label: e.label }))}
+              </div>
-						onChange={(e) => setEntity(e?.value || undefined)}
+              {isExpiryDateEnabled && (
-						isClearable={checkAccess(user, ["admin", "developer"])}
+                <ReactDatePicker
-					/>
+                  className={clsx(
-				</div>
+                    "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-				<label className="text-mti-gray-dim text-base font-normal">Select the type of user they should be</label>
+                    "hover:border-mti-purple tooltip",
-				{user && (
+                    "transition duration-300 ease-in-out"
-					<select
+                  )}
-						defaultValue="student"
+                  filterDate={(date) =>
-						onChange={(e) => setType(e.target.value as typeof user.type)}
+                    moment(date).isAfter(new Date()) &&
-						className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none">
+                    (user.subscriptionExpirationDate
-						{Object.keys(USER_TYPE_LABELS)
+                      ? moment(date).isBefore(user.subscriptionExpirationDate)
-							.filter((x) => {
+                      : true)
-								const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
+                  }
-								return checkAccess(user, getTypesOfUser(list), permissions, perm);
+                  dateFormat="dd/MM/yyyy"
-							})
+                  selected={expiryDate}
-							.map((type) => (
+                  onChange={(date) => setExpiryDate(date)}
-								<option key={type} value={type}>
+                />
-									{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+              )}
-								</option>
+            </>
-							))}
+          )}
-					</select>
+        <div className={clsx("flex flex-col gap-4")}>
-				)}
+          <label className="font-normal text-base text-mti-gray-dim">
-				{infos.length > 0 && <CodeGenImportSummary infos={infos} parsedExcel={parsedExcel} duplicateRows={duplicatedRows}/>}
+            Entity
-				{infos.length !== 0 && (
+          </label>
-					<div className="flex w-full flex-col gap-4">
+          <Select
-						<span className="text-mti-gray-dim text-base font-normal">Codes will be sent to:</span>
+            defaultValue={{
-						<CodegenTable infos={infos} />
+              value: (entities || [])[0]?.id,
-					</div>
+              label: (entities || [])[0]?.label,
-				)}
+            }}
-				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "createCodes") && (
+            options={entities.map((e) => ({ value: e.id, label: e.label }))}
-					<Button onClick={generateAndInvite} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}>
+            onChange={(e) => setEntity(e?.value || undefined)}
-						Generate & Send
+            isClearable={checkAccess(user, ["admin", "developer"])}
-					</Button>
+          />
-				)}
+        </div>
-			</div>
+        <label className="text-mti-gray-dim text-base font-normal">
-		</>
+          Select the type of user they should be
-	);
+        </label>
+        {user && (
+          <select
+            defaultValue="student"
+            onChange={(e) => setType(e.target.value as typeof user.type)}
+            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
+          >
+            {Object.keys(USER_TYPE_LABELS).reduce((acc, x) => {
+              const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
+              if (checkAccess(user, getTypesOfUser(list), permissions, perm))
+                acc.push(
+                  <option key={type} value={type}>
+                    {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+                  </option>
+                );
+              return acc;
+            }, [] as JSX.Element[])}
+          </select>
+        )}
+        {infos.length > 0 && (
+          <CodeGenImportSummary
+            infos={infos}
+            parsedExcel={parsedExcel}
+            duplicateRows={duplicatedRows}
+          />
+        )}
+        {infos.length !== 0 && (
+          <div className="flex w-full flex-col gap-4">
+            <span className="text-mti-gray-dim text-base font-normal">
+              Codes will be sent to:
+            </span>
+            <CodegenTable infos={infos} />
+          </div>
+        )}
+        {checkAccess(
+          user,
+          ["developer", "admin", "corporate", "mastercorporate"],
+          permissions,
+          "createCodes"
+        ) && (
+          <Button
+            onClick={generateAndInvite}
+            disabled={
+              infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
+            }
+          >
+            Generate & Send
+          </Button>
+        )}
+      </div>
+    </>
+  );
 }

src/pages/(admin)/CodeGenerator.tsx

@@ -1,6 +1,5 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import { PERMISSIONS } from "@/constants/userPermissions";
 import { Type, User } from "@/interfaces/user";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import axios from "axios";
@@ -13,173 +12,225 @@ import { toast } from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import { PermissionType } from "@/interfaces/permissions";
-import usePermissions from "@/hooks/usePermissions";
 import { EntityWithRoles } from "@/interfaces/entity";
 import Select from "@/components/Low/Select";
-import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 
 const USER_TYPE_PERMISSIONS: {
-	[key in Type]: { perm: PermissionType | undefined; list: Type[] };
+  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
 } = {
-	student: {
+  student: {
-		perm: "createCodeStudent",
+    perm: "createCodeStudent",
-		list: [],
+    list: [],
-	},
+  },
-	teacher: {
+  teacher: {
-		perm: "createCodeTeacher",
+    perm: "createCodeTeacher",
-		list: [],
+    list: [],
-	},
+  },
-	agent: {
+  agent: {
-		perm: "createCodeCountryManager",
+    perm: "createCodeCountryManager",
-		list: ["student", "teacher", "corporate", "mastercorporate"],
+    list: ["student", "teacher", "corporate", "mastercorporate"],
-	},
+  },
-	corporate: {
+  corporate: {
-		perm: "createCodeCorporate",
+    perm: "createCodeCorporate",
-		list: ["student", "teacher"],
+    list: ["student", "teacher"],
-	},
+  },
-	mastercorporate: {
+  mastercorporate: {
-		perm: undefined,
+    perm: undefined,
-		list: ["student", "teacher", "corporate"],
+    list: ["student", "teacher", "corporate"],
-	},
+  },
-	admin: {
+  admin: {
-		perm: "createCodeAdmin",
+    perm: "createCodeAdmin",
-		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+    list: [
-	},
+      "student",
-	developer: {
+      "teacher",
-		perm: undefined,
+      "agent",
-		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+      "corporate",
-	},
+      "admin",
+      "mastercorporate",
+    ],
+  },
+  developer: {
+    perm: undefined,
+    list: [
+      "student",
+      "teacher",
+      "agent",
+      "corporate",
+      "admin",
+      "developer",
+      "mastercorporate",
+    ],
+  },
 };
 
 interface Props {
-	user: User;
+  user: User;
-	permissions: PermissionType[];
+  permissions: PermissionType[];
-	entities: EntityWithRoles[]
+  entities: EntityWithRoles[];
-	onFinish: () => void;
+  onFinish: () => void;
 }
 
-export default function CodeGenerator({ user, entities = [], permissions, onFinish }: Props) {
+export default function CodeGenerator({
-	const [generatedCode, setGeneratedCode] = useState<string>();
+  user,
+  entities = [],
+  permissions,
+  onFinish,
+}: Props) {
+  const [generatedCode, setGeneratedCode] = useState<string>();
 
-	const [expiryDate, setExpiryDate] = useState<Date | null>(
+  const [expiryDate, setExpiryDate] = useState<Date | null>(
-		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
+    user?.subscriptionExpirationDate
-	);
+      ? moment(user.subscriptionExpirationDate).toDate()
-	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+      : null
-	const [type, setType] = useState<Type>("student");
+  );
-	const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
+  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+  const [type, setType] = useState<Type>("student");
+  const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
 
-	useEffect(() => {
+  useEffect(() => {
-		if (!isExpiryDateEnabled) setExpiryDate(null);
+    if (!isExpiryDateEnabled) setExpiryDate(null);
-	}, [isExpiryDateEnabled]);
+  }, [isExpiryDateEnabled]);
 
-	const generateCode = (type: Type) => {
+  const generateCode = (type: Type) => {
-		const uid = new ShortUniqueId();
+    const uid = new ShortUniqueId();
-		const code = uid.randomUUID(6);
+    const code = uid.randomUUID(6);
 
-		axios
+    axios
-			.post("/api/code", { type, codes: [code], expiryDate, entity })
+      .post("/api/code", { type, codes: [code], expiryDate, entity })
-			.then(({ data, status }) => {
+      .then(({ data, status }) => {
-				if (data.ok) {
+        if (data.ok) {
-					toast.success(`Successfully generated a ${capitalize(type)} code!`, {
+          toast.success(`Successfully generated a ${capitalize(type)} code!`, {
-						toastId: "success",
+            toastId: "success",
-					});
+          });
-					setGeneratedCode(code);
+          setGeneratedCode(code);
-					return;
+          return;
-				}
+        }
 
-				if (status === 403) {
+        if (status === 403) {
-					toast.error(data.reason, { toastId: "forbidden" });
+          toast.error(data.reason, { toastId: "forbidden" });
-				}
+        }
-			})
+      })
-			.catch(({ response: { status, data } }) => {
+      .catch(({ response: { status, data } }) => {
-				if (status === 403) {
+        if (status === 403) {
-					toast.error(data.reason, { toastId: "forbidden" });
+          toast.error(data.reason, { toastId: "forbidden" });
-					return;
+          return;
-				}
+        }
 
-				toast.error(`Something went wrong, please try again later!`, {
+        toast.error(`Something went wrong, please try again later!`, {
-					toastId: "error",
+          toastId: "error",
-				});
+        });
-			});
+      });
-	};
+  };
 
-	return (
+  return (
-		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+    <div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-			<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
+      <label className="font-normal text-base text-mti-gray-dim">
-			<div className={clsx("flex flex-col gap-4")}>
+        User Code Generator
-				<label className="font-normal text-base text-mti-gray-dim">Entity</label>
+      </label>
-				<Select
+      <div className={clsx("flex flex-col gap-4")}>
-					defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
+        <label className="font-normal text-base text-mti-gray-dim">
-					options={entities.map((e) => ({ value: e.id, label: e.label }))}
+          Entity
-					onChange={(e) => setEntity(e?.value || undefined)}
+        </label>
-					isClearable={checkAccess(user, ["admin", "developer"])}
+        <Select
-				/>
+          defaultValue={{
-			</div>
+            value: (entities || [])[0]?.id,
+            label: (entities || [])[0]?.label,
+          }}
+          options={entities.map((e) => ({ value: e.id, label: e.label }))}
+          onChange={(e) => setEntity(e?.value || undefined)}
+          isClearable={checkAccess(user, ["admin", "developer"])}
+        />
+      </div>
 
-			<div className={clsx("flex flex-col gap-4")}>
+      <div className={clsx("flex flex-col gap-4")}>
-				<label className="font-normal text-base text-mti-gray-dim">Type</label>
+        <label className="font-normal text-base text-mti-gray-dim">Type</label>
-				<select
+        <select
-					defaultValue="student"
+          defaultValue="student"
-					onChange={(e) => setType(e.target.value as typeof user.type)}
+          onChange={(e) => setType(e.target.value as typeof user.type)}
-					className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+          className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white"
-					{Object.keys(USER_TYPE_LABELS)
+        >
-						.filter((x) => {
+          {Object.keys(USER_TYPE_LABELS).reduce<string[]>((acc, x) => {
-							const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
+            const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
-							return checkAccess(user, getTypesOfUser(list), permissions, perm);
+            if (checkAccess(user, getTypesOfUser(list), permissions, perm))
-						})
+              acc.push(x);
-						.map((type) => (
+            return acc;
-							<option key={type} value={type}>
+          }, [])}
-								{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+        </select>
-							</option>
+      </div>
-						))}
-				</select>
-			</div>
 
-			{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+      {checkAccess(user, [
-				<>
+        "developer",
-					<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+        "admin",
-						<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+        "corporate",
-						<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled} disabled={!!user.subscriptionExpirationDate}>
+        "mastercorporate",
-							Enabled
+      ]) && (
-						</Checkbox>
+        <>
-					</div>
+          <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-					{isExpiryDateEnabled && (
+            <label className="text-mti-gray-dim text-base font-normal">
-						<ReactDatePicker
+              Expiry Date
-							className={clsx(
+            </label>
-								"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+            <Checkbox
-								"hover:border-mti-purple tooltip",
+              isChecked={isExpiryDateEnabled}
-								"transition duration-300 ease-in-out",
+              onChange={setIsExpiryDateEnabled}
-							)}
+              disabled={!!user.subscriptionExpirationDate}
-							filterDate={(date) =>
+            >
-								moment(date).isAfter(new Date()) &&
+              Enabled
-								(user.subscriptionExpirationDate ? moment(date).isBefore(user.subscriptionExpirationDate) : true)
+            </Checkbox>
-							}
+          </div>
-							dateFormat="dd/MM/yyyy"
+          {isExpiryDateEnabled && (
-							selected={expiryDate}
+            <ReactDatePicker
-							onChange={(date) => setExpiryDate(date)}
+              className={clsx(
-						/>
+                "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-					)}
+                "hover:border-mti-purple tooltip",
-				</>
+                "transition duration-300 ease-in-out"
-			)}
+              )}
-			{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "createCodes") && (
+              filterDate={(date) =>
-				<Button onClick={() => generateCode(type)} disabled={isExpiryDateEnabled ? !expiryDate : false}>
+                moment(date).isAfter(new Date()) &&
-					Generate
+                (user.subscriptionExpirationDate
-				</Button>
+                  ? moment(date).isBefore(user.subscriptionExpirationDate)
-			)}
+                  : true)
-			<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
+              }
-			<div
+              dateFormat="dd/MM/yyyy"
-				className={clsx(
+              selected={expiryDate}
-					"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+              onChange={(date) => setExpiryDate(date)}
-					"hover:border-mti-purple tooltip",
+            />
-					"transition duration-300 ease-in-out",
+          )}
-				)}
+        </>
-				data-tip="Click to copy"
+      )}
-				onClick={() => {
+      {checkAccess(
-					if (generatedCode) navigator.clipboard.writeText(generatedCode);
+        user,
-				}}>
+        ["developer", "admin", "corporate", "mastercorporate"],
-				{generatedCode}
+        permissions,
-			</div>
+        "createCodes"
-			{generatedCode && <span className="text-sm text-mti-gray-dim font-light">Give this code to the user to complete their registration</span>}
+      ) && (
-		</div>
+        <Button
-	);
+          onClick={() => generateCode(type)}
+          disabled={isExpiryDateEnabled ? !expiryDate : false}
+        >
+          Generate
+        </Button>
+      )}
+      <label className="font-normal text-base text-mti-gray-dim">
+        Generated Code:
+      </label>
+      <div
+        className={clsx(
+          "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+          "hover:border-mti-purple tooltip",
+          "transition duration-300 ease-in-out"
+        )}
+        data-tip="Click to copy"
+        onClick={() => {
+          if (generatedCode) navigator.clipboard.writeText(generatedCode);
+        }}
+      >
+        {generatedCode}
+      </div>
+      {generatedCode && (
+        <span className="text-sm text-mti-gray-dim font-light">
+          Give this code to the user to complete their registration
+        </span>
+      )}
+    </div>
+  );
 }

src/pages/(admin)/CorporateGradingSystem.tsx

@@ -265,7 +265,7 @@ export default function CorporateGradingSystem({
         <>
           <Separator />
           <label className="font-normal text-base text-mti-gray-dim">
-            Apply this grading system to other entities
+            Copy this grading system to other entities
           </label>
           <Select
             options={entities.map((e) => ({ value: e.id, label: e.label }))}
@@ -282,7 +282,7 @@ export default function CorporateGradingSystem({
             disabled={isLoading || otherEntities.length === 0}
             variant="outline"
           >
-            Apply to {otherEntities.length} other entities
+            Copy to {otherEntities.length} other entities
           </Button>
           <Separator />
         </>
@@ -326,7 +326,7 @@ export default function CorporateGradingSystem({
         disabled={isLoading}
         className="mt-8"
       >
-        Save Grading System
+        Save Changes to entities
       </Button>
     </div>
   );

src/pages/(admin)/Lists/BatchCreateUser.tsx

@@ -1,6 +1,5 @@
 import Button from "@/components/Low/Button";
 import axios from "axios";
-import { capitalize, uniqBy } from "lodash";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useFilePicker } from "use-file-picker";

src/pages/(admin)/Lists/CodeList.tsx

@@ -15,170 +15,210 @@ import { findBy, mapBy } from "@/utils";
 import useEntitiesCodes from "@/hooks/useEntitiesCodes";
 import Table from "@/components/High/Table";
 
-type TableData = Code & { entity?: EntityWithRoles, creator?: User }
+type TableData = Code & { entity?: EntityWithRoles; creator?: User };
 const columnHelper = createColumnHelper<TableData>();
 
-export default function CodeList({ user, entities, canDeleteCodes }
+export default function CodeList({
-	: { user: User, entities: EntityWithRoles[], canDeleteCodes?: boolean }) {
+  user,
-	const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
+  entities,
+  canDeleteCodes,
+}: {
+  user: User;
+  entities: EntityWithRoles[];
+  canDeleteCodes?: boolean;
+}) {
+  const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
 
-	const entityIDs = useMemo(() => mapBy(entities, 'id'), [entities])
+  const entityIDs = useMemo(() => mapBy(entities, "id"), [entities]);
 
-	const { users } = useUsers();
+  const { users } = useUsers();
-	const { codes, reload } = useEntitiesCodes(isAdmin(user) ? undefined : entityIDs)
+  const { codes, reload, isLoading } = useEntitiesCodes(
+    isAdmin(user) ? undefined : entityIDs
+  );
 
-	const data: TableData[] = useMemo(() => codes.map((code) => ({
+  const data: TableData[] = useMemo(
-		...code,
+    () =>
-		entity: findBy(entities, 'id', code.entity),
+      codes.map((code) => ({
-		creator: findBy(users, 'id', code.creator)
+        ...code,
-	})) as TableData[], [codes, entities, users])
+        entity: findBy(entities, "id", code.entity),
+        creator: findBy(users, "id", code.creator),
+      })) as TableData[],
+    [codes, entities, users]
+  );
 
-	const toggleCode = (id: string) => {
+  const toggleCode = (id: string) => {
-		setSelectedCodes((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+    setSelectedCodes((prev) =>
-	};
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  };
 
-	// const toggleAllCodes = (checked: boolean) => {
+  // const toggleAllCodes = (checked: boolean) => {
-	// 	if (checked) return setSelectedCodes(visibleRows.filter((x) => !x.userId).map((x) => x.code));
+  // 	if (checked) return setSelectedCodes(visibleRows.filter((x) => !x.userId).map((x) => x.code));
 
-	// 	return setSelectedCodes([]);
+  // 	return setSelectedCodes([]);
-	// };
+  // };
 
-	const deleteCodes = async (codes: string[]) => {
+  const deleteCodes = async (codes: string[]) => {
-		if (!canDeleteCodes) return
+    if (!canDeleteCodes) return;
-		if (!confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)) return;
+    if (
+      !confirm(`Are you sure you want to delete these ${codes.length} code(s)?`)
+    )
+      return;
 
-		const params = new URLSearchParams();
+    const params = new URLSearchParams();
-		codes.forEach((code) => params.append("code", code));
+    codes.forEach((code) => params.append("code", code));
 
-		axios
+    axios
-			.delete(`/api/code?${params.toString()}`)
+      .delete(`/api/code?${params.toString()}`)
-			.then(() => {
+      .then(() => {
-				toast.success(`Deleted the codes!`);
+        toast.success(`Deleted the codes!`);
-				setSelectedCodes([]);
+        setSelectedCodes([]);
-			})
+      })
-			.catch((reason) => {
+      .catch((reason) => {
-				if (reason.response.status === 404) {
+        if (reason.response.status === 404) {
-					toast.error("Code not found!");
+          toast.error("Code not found!");
-					return;
+          return;
-				}
+        }
 
-				if (reason.response.status === 403) {
+        if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete this code!");
+          toast.error("You do not have permission to delete this code!");
-					return;
+          return;
-				}
+        }
 
-				toast.error("Something went wrong, please try again later.");
+        toast.error("Something went wrong, please try again later.");
-			})
+      })
-			.finally(reload);
+      .finally(reload);
-	};
+  };
 
-	const deleteCode = async (code: Code) => {
+  const deleteCode = async (code: Code) => {
-		if (!canDeleteCodes) return
+    if (!canDeleteCodes) return;
-		if (!confirm(`Are you sure you want to delete this "${code.code}" code?`)) return;
+    if (!confirm(`Are you sure you want to delete this "${code.code}" code?`))
+      return;
 
-		axios
+    axios
-			.delete(`/api/code/${code.code}`)
+      .delete(`/api/code/${code.code}`)
-			.then(() => toast.success(`Deleted the "${code.code}" exam`))
+      .then(() => toast.success(`Deleted the "${code.code}" exam`))
-			.catch((reason) => {
+      .catch((reason) => {
-				if (reason.response.status === 404) {
+        if (reason.response.status === 404) {
-					toast.error("Code not found!");
+          toast.error("Code not found!");
-					return;
+          return;
-				}
+        }
 
-				if (reason.response.status === 403) {
+        if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete this code!");
+          toast.error("You do not have permission to delete this code!");
-					return;
+          return;
-				}
+        }
 
-				toast.error("Something went wrong, please try again later.");
+        toast.error("Something went wrong, please try again later.");
-			})
+      })
-			.finally(reload);
+      .finally(reload);
-	};
+  };
 
-	const defaultColumns = [
+  const defaultColumns = [
-		columnHelper.accessor("code", {
+    columnHelper.accessor("code", {
-			id: "codeCheckbox",
+      id: "codeCheckbox",
-			enableSorting: false,
+      enableSorting: false,
-			header: () => (""),
+      header: () => "",
-			cell: (info) =>
+      cell: (info) =>
-				!info.row.original.userId ? (
+        !info.row.original.userId ? (
-					<Checkbox isChecked={selectedCodes.includes(info.getValue())} onChange={() => toggleCode(info.getValue())}>
+          <Checkbox
-						{""}
+            isChecked={selectedCodes.includes(info.getValue())}
-					</Checkbox>
+            onChange={() => toggleCode(info.getValue())}
-				) : null,
+          >
-		}),
+            {""}
-		columnHelper.accessor("code", {
+          </Checkbox>
-			header: "Code",
+        ) : null,
-			cell: (info) => info.getValue(),
+    }),
-		}),
+    columnHelper.accessor("code", {
-		columnHelper.accessor("creationDate", {
+      header: "Code",
-			header: "Creation Date",
+      cell: (info) => info.getValue(),
-			cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A"),
+    }),
-		}),
+    columnHelper.accessor("creationDate", {
-		columnHelper.accessor("email", {
+      header: "Creation Date",
-			header: "E-mail",
+      cell: (info) =>
-			cell: (info) => info.getValue() || "N/A",
+        info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : "N/A",
-		}),
+    }),
-		columnHelper.accessor("creator", {
+    columnHelper.accessor("email", {
-			header: "Creator",
+      header: "E-mail",
-			cell: (info) => info.getValue() ? `${info.getValue().name} (${USER_TYPE_LABELS[info.getValue().type]})` : "N/A",
+      cell: (info) => info.getValue() || "N/A",
-		}),
+    }),
-		columnHelper.accessor("entity", {
+    columnHelper.accessor("creator", {
-			header: "Entity",
+      header: "Creator",
-			cell: (info) => info.getValue()?.label || "N/A",
+      cell: (info) =>
-		}),
+        info.getValue()
-		columnHelper.accessor("userId", {
+          ? `${info.getValue().name} (${
-			header: "Availability",
+              USER_TYPE_LABELS[info.getValue().type]
-			cell: (info) =>
+            })`
-				info.getValue() ? (
+          : "N/A",
-					<span className="flex gap-1 items-center text-mti-green">
+    }),
-						<div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
+    columnHelper.accessor("entity", {
-					</span>
+      header: "Entity",
-				) : (
+      cell: (info) => info.getValue()?.label || "N/A",
-					<span className="flex gap-1 items-center text-mti-red">
+    }),
-						<div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
+    columnHelper.accessor("userId", {
-					</span>
+      header: "Availability",
-				),
+      cell: (info) =>
-		}),
+        info.getValue() ? (
-		{
+          <span className="flex gap-1 items-center text-mti-green">
-			header: "",
+            <div className="w-2 h-2 rounded-full bg-mti-green" /> In Use
-			id: "actions",
+          </span>
-			cell: ({ row }: { row: { original: Code } }) => {
+        ) : (
-				return (
+          <span className="flex gap-1 items-center text-mti-red">
-					<div className="flex gap-4">
+            <div className="w-2 h-2 rounded-full bg-mti-red" /> Unused
-						{canDeleteCodes && !row.original.userId && (
+          </span>
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteCode(row.original)}>
+        ),
-								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+    }),
-							</div>
+    {
-						)}
+      header: "",
-					</div>
+      id: "actions",
-				);
+      cell: ({ row }: { row: { original: Code } }) => {
-			},
+        return (
-		},
+          <div className="flex gap-4">
-	];
+            {canDeleteCodes && !row.original.userId && (
+              <div
+                data-tip="Delete"
+                className="cursor-pointer tooltip"
+                onClick={() => deleteCode(row.original)}
+              >
+                <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
 
-	return (
+  return (
-		<>
+    <>
-			<div className="flex items-center justify-between pb-4 pt-1">
+      <div className="flex items-center justify-between pb-4 pt-1">
-				{canDeleteCodes && (
+        {canDeleteCodes && (
-					<div className="flex gap-4 items-center w-full justify-end">
+          <div className="flex gap-4 items-center w-full justify-end">
-						<span>{selectedCodes.length} code(s) selected</span>
+            <span>{selectedCodes.length} code(s) selected</span>
-						<Button
+            <Button
-							disabled={selectedCodes.length === 0}
+              disabled={selectedCodes.length === 0}
-							variant="outline"
+              variant="outline"
-							color="red"
+              color="red"
-							className="!py-1 px-10"
+              className="!py-1 px-10"
-							onClick={() => deleteCodes(selectedCodes)}>
+              onClick={() => deleteCodes(selectedCodes)}
-							Delete
+            >
-						</Button>
+              Delete
-					</div>
+            </Button>
-				)}
+          </div>
-			</div>
+        )}
-			<Table<TableData>
+      </div>
-				data={data}
+      <Table<TableData>
-				columns={defaultColumns}
+        data={data}
-				searchFields={[["code"], ["email"], ["entity", "label"], ["creator", "name"], ['creator', 'type']]}
+        columns={defaultColumns}
-			/>
+        isLoading={isLoading}
-		</>
+        searchFields={[
-	);
+          ["code"],
+          ["email"],
+          ["entity", "label"],
+          ["creator", "name"],
+          ["creator", "type"],
+        ]}
+      />
+    </>
+  );
 }

src/pages/(admin)/Lists/ExamList.tsx

@@ -1,287 +1,394 @@
-import {useMemo, useState} from "react";
+import { useMemo, useState } from "react";
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useExams from "@/hooks/useExams";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {Exam} from "@/interfaces/exam";
+import { Exam } from "@/interfaces/exam";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
-import {getExamById} from "@/utils/exams";
+import { getExamById } from "@/utils/exams";
-import {countExercises} from "@/utils/moduleUtils";
+import { countExercises } from "@/utils/moduleUtils";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
-import {capitalize, uniq} from "lodash";
+import { capitalize } from "lodash";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {BsBan, BsCheck, BsCircle, BsPencil, BsTrash, BsUpload, BsX} from "react-icons/bs";
+import { BsPencil, BsTrash, BsUpload } from "react-icons/bs";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
-import {useListSearch} from "@/hooks/useListSearch";
+import { useListSearch } from "@/hooks/useListSearch";
 import Modal from "@/components/Modal";
-import {checkAccess} from "@/utils/permissions";
+import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import useGroups from "@/hooks/useGroups";
 import Button from "@/components/Low/Button";
-import {EntityWithRoles} from "@/interfaces/entity";
+import { EntityWithRoles } from "@/interfaces/entity";
-import {BiEdit} from "react-icons/bi";
+import { BiEdit } from "react-icons/bi";
-import {findBy, mapBy} from "@/utils";
+import { findBy, mapBy } from "@/utils";
-import {getUserName} from "@/utils/users";
 
 const searchFields = [["module"], ["id"], ["createdBy"]];
 
-const CLASSES: {[key in Module]: string} = {
+const CLASSES: { [key in Module]: string } = {
-	reading: "text-ielts-reading",
+  reading: "text-ielts-reading",
-	listening: "text-ielts-listening",
+  listening: "text-ielts-listening",
-	speaking: "text-ielts-speaking",
+  speaking: "text-ielts-speaking",
-	writing: "text-ielts-writing",
+  writing: "text-ielts-writing",
-	level: "text-ielts-level",
+  level: "text-ielts-level",
 };
-
 const columnHelper = createColumnHelper<Exam>();
 
-export default function ExamList({user, entities}: {user: User; entities: EntityWithRoles[]}) {
+export default function ExamList({
-	const [selectedExam, setSelectedExam] = useState<Exam>();
+  user,
+  entities,
+}: {
+  user: User;
+  entities: EntityWithRoles[];
+}) {
+  const [selectedExam, setSelectedExam] = useState<Exam>();
 
-	const {exams, reload} = useExams();
+  const canViewConfidentialEntities = useMemo(
-	const {users} = useUsers();
+    () =>
+      mapBy(
+        findAllowedEntities(user, entities, "view_confidential_exams"),
+        "id"
+      ),
+    [user, entities]
+  );
 
-	const filteredExams = useMemo(
+  const { exams, reload, isLoading } = useExams();
-		() =>
+  const { users } = useUsers();
-			exams.filter((e) => {
+  // Pass this permission filter to the backend later
-				if (!e.private) return true;
+  const filteredExams = useMemo(
-				return (e.entities || []).some((ent) => mapBy(user.entities, "id").includes(ent));
+    () =>
-			}),
+      ["admin", "developer"].includes(user?.type)
-		[exams, user?.entities],
+        ? exams
-	);
+        : exams.filter((item) => {
+            if (
+              item.access === "confidential" &&
+              !canViewConfidentialEntities.find((x) =>
+                (item.entities ?? []).includes(x)
+              )
+            )
+              return false;
+            return true;
+          }),
+    [canViewConfidentialEntities, exams, user?.type]
+  );
 
-	const parsedExams = useMemo(() => {
+  const parsedExams = useMemo(() => {
-		return filteredExams.map((exam) => {
+    return filteredExams.map((exam) => {
-			if (exam.createdBy) {
+      if (exam.createdBy) {
-				const user = users.find((u) => u.id === exam.createdBy);
+        const user = users.find((u) => u.id === exam.createdBy);
-				if (!user) return exam;
+        if (!user) return exam;
 
-				return {
+        return {
-					...exam,
+          ...exam,
-					createdBy: user.type === "developer" ? "system" : user.name,
+          createdBy: user.type === "developer" ? "system" : user.name,
-				};
+        };
-			}
+      }
 
-			return exam;
+      return exam;
-		});
+    });
-	}, [filteredExams, users]);
+  }, [filteredExams, users]);
 
-	const {rows: filteredRows, renderSearch} = useListSearch<Exam>(searchFields, parsedExams);
+  const { rows: filteredRows, renderSearch } = useListSearch<Exam>(
+    searchFields,
+    parsedExams
+  );
 
-	const dispatch = useExamStore((state) => state.dispatch);
+  const dispatch = useExamStore((state) => state.dispatch);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const loadExam = async (module: Module, examId: string) => {
+  const loadExam = async (module: Module, examId: string) => {
-		const exam = await getExamById(module, examId.trim());
+    const exam = await getExamById(module, examId.trim());
-		if (!exam) {
+    if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
+      toast.error(
-				toastId: "invalid-exam-id",
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
-			});
+        {
+          toastId: "invalid-exam-id",
+        }
+      );
 
-			return;
+      return;
-		}
+    }
-		dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}});
+    dispatch({
+      type: "INIT_EXAM",
+      payload: { exams: [exam], modules: [module] },
+    });
 
-		router.push("/exam");
+    router.push("/exam");
-	};
+  };
 
-	const privatizeExam = async (exam: Exam) => {
+  /* 
-		if (!confirm(`Are you sure you want to make this ${capitalize(exam.module)} exam ${exam.private ? "public" : "private"}?`)) return;
+  const privatizeExam = async (exam: Exam) => {
+    if (
+      !confirm(
+        `Are you sure you want to make this ${capitalize(exam.module)} exam ${
+          exam.access
+        }?`
+      )
+    )
+      return;
 
-		axios
+    axios
-			.patch(`/api/exam/${exam.module}/${exam.id}`, {private: !exam.private})
+      .patch(`/api/exam/${exam.module}/${exam.id}`, { private: !exam.private })
-			.then(() => toast.success(`Updated the "${exam.id}" exam`))
+      .then(() => toast.success(`Updated the "${exam.id}" exam`))
-			.catch((reason) => {
+      .catch((reason) => {
-				if (reason.response.status === 404) {
+        if (reason.response.status === 404) {
-					toast.error("Exam not found!");
+          toast.error("Exam not found!");
-					return;
+          return;
-				}
+        }
 
-				if (reason.response.status === 403) {
+        if (reason.response.status === 403) {
-					toast.error("You do not have permission to update this exam!");
+          toast.error("You do not have permission to update this exam!");
-					return;
+          return;
-				}
+        }
 
-				toast.error("Something went wrong, please try again later.");
+        toast.error("Something went wrong, please try again later.");
-			})
+      })
-			.finally(reload);
+      .finally(reload);
-	};
+  }; 
+  */
 
-	const deleteExam = async (exam: Exam) => {
+  const deleteExam = async (exam: Exam) => {
-		if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
+    if (
+      !confirm(
+        `Are you sure you want to delete this ${capitalize(exam.module)} exam?`
+      )
+    )
+      return;
 
-		axios
+    axios
-			.delete(`/api/exam/${exam.module}/${exam.id}`)
+      .delete(`/api/exam/${exam.module}/${exam.id}`)
-			.then(() => toast.success(`Deleted the "${exam.id}" exam`))
+      .then(() => toast.success(`Deleted the "${exam.id}" exam`))
-			.catch((reason) => {
+      .catch((reason) => {
-				if (reason.response.status === 404) {
+        if (reason.response.status === 404) {
-					toast.error("Exam not found!");
+          toast.error("Exam not found!");
-					return;
+          return;
-				}
+        }
 
-				if (reason.response.status === 403) {
+        if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete this exam!");
+          toast.error("You do not have permission to delete this exam!");
-					return;
+          return;
-				}
+        }
 
-				toast.error("Something went wrong, please try again later.");
+        toast.error("Something went wrong, please try again later.");
-			})
+      })
-			.finally(reload);
+      .finally(reload);
-	};
+  };
 
-	const getTotalExercises = (exam: Exam) => {
+  const getTotalExercises = (exam: Exam) => {
-		if (exam.module === "reading" || exam.module === "listening" || exam.module === "level") {
+    if (
-			return countExercises(exam.parts.flatMap((x) => x.exercises));
+      exam.module === "reading" ||
-		}
+      exam.module === "listening" ||
+      exam.module === "level"
+    ) {
+      return countExercises((exam.parts ?? []).flatMap((x) => x.exercises));
+    }
 
-		return countExercises(exam.exercises);
+    return countExercises(exam.exercises);
-	};
+  };
 
-	const defaultColumns = [
+  const defaultColumns = [
-		columnHelper.accessor("id", {
+    columnHelper.accessor("id", {
-			header: "ID",
+      header: "ID",
-			cell: (info) => info.getValue(),
+      cell: (info) => info.getValue(),
-		}),
+    }),
-		columnHelper.accessor("module", {
+    columnHelper.accessor("module", {
-			header: "Module",
+      header: "Module",
-			cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
+      cell: (info) => (
-		}),
+        <span className={CLASSES[info.getValue()]}>
-		columnHelper.accessor((x) => getTotalExercises(x), {
+          {capitalize(info.getValue())}
-			header: "Exercises",
+        </span>
-			cell: (info) => info.getValue(),
+      ),
-		}),
+    }),
-		columnHelper.accessor("minTimer", {
+    columnHelper.accessor((x) => getTotalExercises(x), {
-			header: "Timer",
+      header: "Exercises",
-			cell: (info) => <>{info.getValue()} minute(s)</>,
+      cell: (info) => info.getValue(),
-		}),
+    }),
-		columnHelper.accessor("private", {
+    columnHelper.accessor("minTimer", {
-			header: "Private",
+      header: "Timer",
-			cell: (info) => <span className="w-full flex items-center justify-center">{!info.getValue() ? <BsX /> : <BsCheck />}</span>,
+      cell: (info) => <>{info.getValue()} minute(s)</>,
-		}),
+    }),
-		columnHelper.accessor("createdAt", {
+    columnHelper.accessor("access", {
-			header: "Created At",
+      header: "Access",
-			cell: (info) => {
+      cell: (info) => <span>{capitalize(info.getValue())}</span>,
-				const value = info.getValue();
+    }),
-				if (value) {
+    columnHelper.accessor("createdAt", {
-					return new Date(value).toLocaleDateString();
+      header: "Created At",
-				}
+      cell: (info) => {
+        const value = info.getValue();
+        if (value) {
+          return new Date(value).toLocaleDateString();
+        }
 
-				return null;
+        return null;
-			},
+      },
-		}),
+    }),
-		columnHelper.accessor("createdBy", {
+    columnHelper.accessor("createdBy", {
-			header: "Created By",
+      header: "Created By",
-			cell: (info) => (!info.getValue() ? "System" : findBy(users, "id", info.getValue())?.name || "N/A"),
+      cell: (info) =>
-		}),
+        !info.getValue()
-		{
+          ? "System"
-			header: "",
+          : findBy(users, "id", info.getValue())?.name || "N/A",
-			id: "actions",
+    }),
-			cell: ({row}: {row: {original: Exam}}) => {
+    {
-				return (
+      header: "",
-					<div className="flex gap-4">
+      id: "actions",
-						{(row.original.owners?.includes(user.id) || checkAccess(user, ["admin", "developer"])) && (
+      cell: ({ row }: { row: { original: Exam } }) => {
-							<>
+        return (
-								<button
+          <div className="flex gap-4">
-									data-tip={row.original.private ? "Set as public" : "Set as private"}
+            {(row.original.owners?.includes(user.id) ||
-									onClick={async () => await privatizeExam(row.original)}
+              checkAccess(user, ["admin", "developer"])) && (
-									className="cursor-pointer tooltip">
+              <>
-									{row.original.private ? <BsCircle /> : <BsBan />}
+                {checkAccess(user, [
-								</button>
+                  "admin",
-								{checkAccess(user, ["admin", "developer", "mastercorporate"]) && (
+                  "developer",
-									<button data-tip="Edit exam" onClick={() => setSelectedExam(row.original)} className="cursor-pointer tooltip">
+                  "mastercorporate",
-										<BsPencil />
+                ]) && (
-									</button>
+                  <button
-								)}
+                    data-tip="Edit exam"
-							</>
+                    onClick={() => setSelectedExam(row.original)}
-						)}
+                    className="cursor-pointer tooltip"
-						<button
+                  >
-							data-tip="Load exam"
+                    <BsPencil />
-							className="cursor-pointer tooltip"
+                  </button>
-							onClick={async () => await loadExam(row.original.module, row.original.id)}>
+                )}
-							<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+              </>
-						</button>
+            )}
-						{PERMISSIONS.examManagement.delete.includes(user.type) && (
+            <button
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteExam(row.original)}>
+              data-tip="Load exam"
-								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+              className="cursor-pointer tooltip"
-							</div>
+              onClick={async () =>
-						)}
+                await loadExam(row.original.module, row.original.id)
-					</div>
+              }
-				);
+            >
-			},
+              <BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-		},
+            </button>
-	];
+            {PERMISSIONS.examManagement.delete.includes(user.type) && (
+              <div
+                data-tip="Delete"
+                className="cursor-pointer tooltip"
+                onClick={() => deleteExam(row.original)}
+              >
+                <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
 
-	const table = useReactTable({
+  const table = useReactTable({
-		data: filteredRows,
+    data: filteredRows,
-		columns: defaultColumns,
+    columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
+    getCoreRowModel: getCoreRowModel(),
-	});
+  });
 
-	const handleExamEdit = () => {
+  const handleExamEdit = () => {
-		router.push(`/generation?id=${selectedExam!.id}&module=${selectedExam!.module}`);
+    router.push(
-	};
+      `/generation?id=${selectedExam!.id}&module=${selectedExam!.module}`
+    );
+  };
 
-	return (
+  return (
-		<div className="flex flex-col gap-4 w-full h-full">
+    <div className="flex flex-col gap-4 w-full h-full">
-			{renderSearch()}
+      {renderSearch()}
-			<Modal isOpen={!!selectedExam} onClose={() => setSelectedExam(undefined)} maxWidth="max-w-xl">
+      <Modal
-				{!!selectedExam ? (
+        isOpen={!!selectedExam}
-					<>
+        onClose={() => setSelectedExam(undefined)}
-						<div className="p-6">
+        maxWidth="max-w-xl"
-							<div className="mb-6">
+      >
-								<div className="flex items-center gap-2 mb-4">
+        {!!selectedExam ? (
-									<BiEdit className="w-5 h-5 text-gray-600" />
+          <>
-									<span className="text-gray-600 font-medium">Ready to Edit</span>
+            <div className="p-6">
-								</div>
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-4">
+                  <BiEdit className="w-5 h-5 text-gray-600" />
+                  <span className="text-gray-600 font-medium">
+                    Ready to Edit
+                  </span>
+                </div>
 
-								<div className="bg-gray-50 rounded-lg p-4 mb-3">
+                <div className="bg-gray-50 rounded-lg p-4 mb-3">
-									<p className="font-medium mb-1">Exam ID: {selectedExam.id}</p>
+                  <p className="font-medium mb-1">Exam ID: {selectedExam.id}</p>
-								</div>
+                </div>
 
-								<p className="text-gray-500 text-sm">Click &apos;Next&apos; to proceed to the exam editor.</p>
+                <p className="text-gray-500 text-sm">
-							</div>
+                  Click &apos;Next&apos; to proceed to the exam editor.
+                </p>
+              </div>
 
-							<div className="flex justify-between gap-4 mt-8">
+              <div className="flex justify-between gap-4 mt-8">
-								<Button color="purple" variant="outline" onClick={() => setSelectedExam(undefined)} className="w-32">
+                <Button
-									Cancel
+                  color="purple"
-								</Button>
+                  variant="outline"
-								<Button color="purple" onClick={handleExamEdit} className="w-32 text-white flex items-center justify-center gap-2">
+                  onClick={() => setSelectedExam(undefined)}
-									Proceed
+                  className="w-32"
-								</Button>
+                >
-							</div>
+                  Cancel
-						</div>
+                </Button>
-						{/*<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />*/}
+                <Button
-					</>
+                  color="purple"
-				) : (
+                  onClick={handleExamEdit}
-					<div />
+                  className="w-32 text-white flex items-center justify-center gap-2"
-				)}
+                >
-			</Modal>
+                  Proceed
-			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+                </Button>
-				<thead>
+              </div>
-					{table.getHeaderGroups().map((headerGroup) => (
+            </div>
-						<tr key={headerGroup.id}>
+            {/*<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />*/}
-							{headerGroup.headers.map((header) => (
+          </>
-								<th className="p-4 text-left" key={header.id}>
+        ) : (
-									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+          <div />
-								</th>
+        )}
-							))}
+      </Modal>
-						</tr>
+      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-					))}
+        <thead>
-				</thead>
+          {table.getHeaderGroups().map((headerGroup) => (
-				<tbody className="px-2">
+            <tr key={headerGroup.id}>
-					{table.getRowModel().rows.map((row) => (
+              {headerGroup.headers.map((header) => (
-						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+                <th className="p-4 text-left" key={header.id}>
-							{row.getVisibleCells().map((cell) => (
+                  {header.isPlaceholder
-								<td className="px-4 py-2" key={cell.id}>
+                    ? null
-									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    : flexRender(
-								</td>
+                        header.column.columnDef.header,
-							))}
+                        header.getContext()
-						</tr>
+                      )}
-					))}
+                </th>
-				</tbody>
+              ))}
-			</table>
+            </tr>
-		</div>
+          ))}
-	);
+        </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>
+      {isLoading ? (
+        <div className="min-h-screen flex justify-center items-start">
+          <span className="loading loading-infinity w-32" />
+        </div>
+      ) : (
+        filteredRows.length === 0 && (
+          <div className="w-full flex justify-center items-start">
+            <span className="text-xl text-gray-500">No data found...</span>
+          </div>
+        )
+      )}
+    </div>
+  );
 }

src/pages/(admin)/Lists/GroupList.tsx

@@ -1,31 +1,30 @@
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
-import useGroups from "@/hooks/useGroups";
+import { Group, User } from "@/interfaces/user";
-import useUsers from "@/hooks/useUsers";
+import { createColumnHelper } from "@tanstack/react-table";
-import { CorporateUser, Group, User } from "@/interfaces/user";
-import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
-import { capitalize, uniq } from "lodash";
+import { uniq } from "lodash";
 import { useEffect, useMemo, useState } from "react";
 import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
 import Select from "react-select";
 import { toast } from "react-toastify";
 import readXlsxFile from "read-excel-file";
 import { useFilePicker } from "use-file-picker";
-import { getUserCorporate } from "@/utils/groups";
+import { USER_TYPE_LABELS } from "@/resources/user";
-import { isAgentUser, isCorporateUser, USER_TYPE_LABELS } from "@/resources/user";
 import { checkAccess } from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";
-import { useListSearch } from "@/hooks/useListSearch";
 import Table from "@/components/High/Table";
 import useEntitiesGroups from "@/hooks/useEntitiesGroups";
 import useEntitiesUsers from "@/hooks/useEntitiesUsers";
 import { WithEntity } from "@/interfaces/entity";
+
 const searchFields = [["name"]];
 
 const columnHelper = createColumnHelper<WithEntity<Group>>();
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
+);
 
 interface CreateDialogProps {
   user: User;
@@ -35,9 +34,13 @@ interface CreateDialogProps {
 }
 
 const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
-  const [name, setName] = useState<string | undefined>(group?.name || undefined);
+  const [name, setName] = useState<string | undefined>(
+    group?.name || undefined
+  );
   const [admin, setAdmin] = useState<string>(group?.admin || user.id);
-  const [participants, setParticipants] = useState<string[]>(group?.participants || []);
+  const [participants, setParticipants] = useState<string[]>(
+    group?.participants || []
+  );
   const [isLoading, setIsLoading] = useState(false);
 
   const { openFilePicker, filesContent, clear } = useFilePicker({
@@ -47,9 +50,14 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
   });
 
   const availableUsers = useMemo(() => {
-    if (user?.type === "teacher") return users.filter((x) => ["student"].includes(x.type));
+    if (user?.type === "teacher")
-    if (user?.type === "corporate") return users.filter((x) => ["teacher", "student"].includes(x.type));
+      return users.filter((x) => ["student"].includes(x.type));
-    if (user?.type === "mastercorporate") return users.filter((x) => ["corporate", "teacher", "student"].includes(x.type));
+    if (user?.type === "corporate")
+      return users.filter((x) => ["teacher", "student"].includes(x.type));
+    if (user?.type === "mastercorporate")
+      return users.filter((x) =>
+        ["corporate", "teacher", "student"].includes(x.type)
+      );
 
     return users;
   }, [user, users]);
@@ -64,9 +72,12 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
           rows
             .map((row) => {
               const [email] = row as string[];
-              return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
+              return EMAIL_REGEX.test(email) &&
+                !users.map((u) => u.email).includes(email)
+                ? email.toString().trim()
+                : undefined;
             })
-            .filter((x) => !!x),
+            .filter((x) => !!x)
         );
 
         if (emails.length === 0) {
@@ -76,12 +87,17 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
           return;
         }
 
-        const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+        const emailUsers = [...new Set(emails)]
+          .map((x) => users.find((y) => y.email.toLowerCase() === x))
+          .filter((x) => x !== undefined);
         const filteredUsers = emailUsers.filter(
           (x) =>
-            ((user.type === "developer" || user.type === "admin" || user.type === "corporate" || user.type === "mastercorporate") &&
+            ((user.type === "developer" ||
+              user.type === "admin" ||
+              user.type === "corporate" ||
+              user.type === "mastercorporate") &&
               (x?.type === "student" || x?.type === "teacher")) ||
-            (user.type === "teacher" && x?.type === "student"),
+            (user.type === "teacher" && x?.type === "student")
         );
 
         setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
@@ -89,7 +105,7 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
           user.type !== "teacher"
             ? "Added all teachers and students found in the file you've provided!"
             : "Added all students found in the file you've provided!",
-          { toastId: "upload-success" },
+          { toastId: "upload-success" }
         );
         setIsLoading(false);
       });
@@ -100,15 +116,27 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
   const submit = () => {
     setIsLoading(true);
 
-    if (name !== group?.name && (name?.trim() === "Students" || name?.trim() === "Teachers" || name?.trim() === "Corporate")) {
+    if (
-      toast.error("That group name is reserved and cannot be used, please enter another one.");
+      name !== group?.name &&
+      (name?.trim() === "Students" ||
+        name?.trim() === "Teachers" ||
+        name?.trim() === "Corporate")
+    ) {
+      toast.error(
+        "That group name is reserved and cannot be used, please enter another one."
+      );
       setIsLoading(false);
       return;
     }
 
-    (group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", { name, admin, participants })
+    (group ? axios.patch : axios.post)(
+      group ? `/api/groups/${group.id}` : "/api/groups",
+      { name, admin, participants }
+    )
       .then(() => {
-        toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+        toast.success(
+          `Group "${name}" ${group ? "edited" : "created"} successfully`
+        );
         return true;
       })
       .catch(() => {
@@ -121,30 +149,58 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
       });
   };
 
+  const userOptions = useMemo(
+    () =>
+      availableUsers.map((x) => ({
+        value: x.id,
+        label: `${x.email} - ${x.name}`,
+      })),
+    [availableUsers]
+  );
+
+  const value = useMemo(
+    () =>
+      participants.map((x) => ({
+        value: x,
+        label: `${users.find((y) => y.id === x)?.email} - ${
+          users.find((y) => y.id === x)?.name
+        }`,
+      })),
+    [participants, users]
+  );
+  
+
   return (
     <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
       <div className="flex flex-col gap-8">
-        <Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
+        <Input
+          name="name"
+          type="text"
+          label="Name"
+          defaultValue={name}
+          onChange={setName}
+          required
+          disabled={group?.disableEditing}
+        />
         <div className="flex w-full flex-col gap-3">
           <div className="flex items-center gap-2">
-            <label className="text-mti-gray-dim text-base font-normal">Participants</label>
+            <label className="text-mti-gray-dim text-base font-normal">
-            <div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
+              Participants
+            </label>
+            <div
+              className="tooltip"
+              data-tip="The Excel file should only include a column with the desired e-mails."
+            >
               <BsQuestionCircleFill />
             </div>
           </div>
           <div className="flex w-full gap-8">
             <Select
               className="w-full"
-              value={participants.map((x) => ({
+              value={value}
-                value: x,
-                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-              }))}
               placeholder="Participants..."
-              defaultValue={participants.map((x) => ({
+              defaultValue={value}
-                value: x,
+              options={userOptions}
-                label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-              }))}
-              options={availableUsers.map((x) => ({ value: x.id, label: `${x.email} - ${x.name}` }))}
               onChange={(value) => setParticipants(value.map((x) => x.value))}
               isMulti
               isSearchable
@@ -160,18 +216,36 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
               }}
             />
             {user.type !== "teacher" && (
-              <Button className="w-full max-w-[300px] h-fit" onClick={openFilePicker} isLoading={isLoading} variant="outline">
+              <Button
-                {filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
+                className="w-full max-w-[300px] h-fit"
+                onClick={openFilePicker}
+                isLoading={isLoading}
+                variant="outline"
+              >
+                {filesContent.length === 0
+                  ? "Upload participants Excel file"
+                  : filesContent[0].name}
               </Button>
             )}
           </div>
         </div>
       </div>
       <div className="mt-8 flex w-full items-center justify-end gap-8">
-        <Button variant="outline" color="red" className="w-full max-w-[200px]" isLoading={isLoading} onClick={onClose}>
+        <Button
+          variant="outline"
+          color="red"
+          className="w-full max-w-[200px]"
+          isLoading={isLoading}
+          onClick={onClose}
+        >
           Cancel
         </Button>
-        <Button className="w-full max-w-[200px]" onClick={submit} isLoading={isLoading} disabled={!name}>
+        <Button
+          className="w-full max-w-[200px]"
+          onClick={submit}
+          isLoading={isLoading}
+          disabled={!name}
+        >
           Submit
         </Button>
       </div>
@@ -182,7 +256,8 @@ const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
 export default function GroupList({ user }: { user: User }) {
   const [isCreating, setIsCreating] = useState(false);
   const [editingGroup, setEditingGroup] = useState<Group>();
-  const [viewingAllParticipants, setViewingAllParticipants] = useState<string>();
+  const [viewingAllParticipants, setViewingAllParticipants] =
+    useState<string>();
 
   const { permissions } = usePermissions(user?.id || "");
 
@@ -211,7 +286,14 @@ export default function GroupList({ user }: { user: User }) {
     columnHelper.accessor("admin", {
       header: "Admin",
       cell: (info) => (
-        <div className="tooltip" data-tip={USER_TYPE_LABELS[users.find((x) => x.id === info.getValue())?.type || "student"]}>
+        <div
+          className="tooltip"
+          data-tip={
+            USER_TYPE_LABELS[
+              users.find((x) => x.id === info.getValue())?.type || "student"
+            ]
+          }
+        >
           {users.find((x) => x.id === info.getValue())?.name}
         </div>
       ),
@@ -226,23 +308,30 @@ export default function GroupList({ user }: { user: User }) {
         <span>
           {info
             .getValue()
-            .slice(0, viewingAllParticipants === info.row.original.id ? undefined : 5)
+            .slice(
+              0,
+              viewingAllParticipants === info.row.original.id ? undefined : 5
+            )
             .map((x) => users.find((y) => y.id === x)?.name)
             .join(", ")}
-          {info.getValue().length > 5 && viewingAllParticipants !== info.row.original.id && (
+          {info.getValue().length > 5 &&
-            <button
+            viewingAllParticipants !== info.row.original.id && (
-              className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+              <button
-              onClick={() => setViewingAllParticipants(info.row.original.id)}>
+                className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
-              , View More
+                onClick={() => setViewingAllParticipants(info.row.original.id)}
-            </button>
+              >
-          )}
+                , View More
-          {info.getValue().length > 5 && viewingAllParticipants === info.row.original.id && (
+              </button>
-            <button
+            )}
-              className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+          {info.getValue().length > 5 &&
-              onClick={() => setViewingAllParticipants(undefined)}>
+            viewingAllParticipants === info.row.original.id && (
-              , View Less
+              <button
-            </button>
+                className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
-          )}
+                onClick={() => setViewingAllParticipants(undefined)}
+              >
+                , View Less
+              </button>
+            )}
         </span>
       ),
     }),
@@ -252,20 +341,34 @@ export default function GroupList({ user }: { user: User }) {
       cell: ({ row }: { row: { original: Group } }) => {
         return (
           <>
-            {user && (checkAccess(user, ["developer", "admin"]) || user.id === row.original.admin) && (
+            {user &&
-              <div className="flex gap-2">
+              (checkAccess(user, ["developer", "admin"]) ||
-                {(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "editGroup") && (
+                user.id === row.original.admin) && (
-                  <div data-tip="Edit" className="tooltip cursor-pointer" onClick={() => setEditingGroup(row.original)}>
+                <div className="flex gap-2">
-                    <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                  {(!row.original.disableEditing ||
-                  </div>
+                    checkAccess(user, ["developer", "admin"]),
-                )}
+                  "editGroup") && (
-                {(!row.original.disableEditing || checkAccess(user, ["developer", "admin"]), "deleteGroup") && (
+                    <div
-                  <div data-tip="Delete" className="tooltip cursor-pointer" onClick={() => deleteGroup(row.original)}>
+                      data-tip="Edit"
-                    <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                      className="tooltip cursor-pointer"
-                  </div>
+                      onClick={() => setEditingGroup(row.original)}
-                )}
+                    >
-              </div>
+                      <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
-            )}
+                    </div>
+                  )}
+                  {(!row.original.disableEditing ||
+                    checkAccess(user, ["developer", "admin"]),
+                  "deleteGroup") && (
+                    <div
+                      data-tip="Delete"
+                      className="tooltip cursor-pointer"
+                      onClick={() => deleteGroup(row.original)}
+                    >
+                      <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
+                    </div>
+                  )}
+                </div>
+              )}
           </>
         );
       },
@@ -280,7 +383,11 @@ export default function GroupList({ user }: { user: User }) {
 
   return (
     <div className="h-full w-full rounded-xl flex flex-col gap-4">
-      <Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+      <Modal
+        isOpen={isCreating || !!editingGroup}
+        onClose={closeModal}
+        title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}
+      >
         <CreatePanel
           group={editingGroup}
           user={user}
@@ -288,12 +395,22 @@ export default function GroupList({ user }: { user: User }) {
           users={users}
         />
       </Modal>
-      <Table data={groups} columns={defaultColumns} searchFields={searchFields} />
+      <Table
+        data={groups}
+        columns={defaultColumns}
+        searchFields={searchFields}
+      />
 
-      {checkAccess(user, ["teacher", "corporate", "mastercorporate", "admin", "developer"], permissions, "createGroup") && (
+      {checkAccess(
+        user,
+        ["teacher", "corporate", "mastercorporate", "admin", "developer"],
+        permissions,
+        "createGroup"
+      ) && (
         <button
           onClick={() => setIsCreating(true)}
-          className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out">
+          className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out"
+        >
           New Group
         </button>
       )}

src/pages/(admin)/Lists/PackageList.tsx

@@ -1,256 +1,341 @@
 import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
 import usePackages from "@/hooks/usePackages";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {Package} from "@/interfaces/paypal";
+import { Package } from "@/interfaces/paypal";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
-import {capitalize} from "lodash";
+import { capitalize } from "lodash";
-import {useState} from "react";
+import { useCallback, useMemo, useState } from "react";
-import {BsPencil, BsTrash} from "react-icons/bs";
+import { BsPencil, BsTrash } from "react-icons/bs";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import Select from "react-select";
-import {CURRENCIES} from "@/resources/paypal";
+import { CURRENCIES } from "@/resources/paypal";
 import Button from "@/components/Low/Button";
 
-const CLASSES: {[key in Module]: string} = {
+const CLASSES: { [key in Module]: string } = {
-	reading: "text-ielts-reading",
+  reading: "text-ielts-reading",
-	listening: "text-ielts-listening",
+  listening: "text-ielts-listening",
-	speaking: "text-ielts-speaking",
+  speaking: "text-ielts-speaking",
-	writing: "text-ielts-writing",
+  writing: "text-ielts-writing",
-	level: "text-ielts-level",
+  level: "text-ielts-level",
 };
 
 const columnHelper = createColumnHelper<Package>();
 
 type DurationUnit = "days" | "weeks" | "months" | "years";
 
-function PackageCreator({pack, onClose}: {pack?: Package; onClose: () => void}) {
+const currencyOptions = CURRENCIES.map(({ label, currency }) => ({
-	const [duration, setDuration] = useState(pack?.duration || 1);
+  value: currency,
-	const [unit, setUnit] = useState<DurationUnit>(pack?.duration_unit || "months");
+  label,
+}));
 
-	const [price, setPrice] = useState(pack?.price || 0);
+function PackageCreator({
-	const [currency, setCurrency] = useState<string>(pack?.currency || "OMR");
+  pack,
+  onClose,
+}: {
+  pack?: Package;
+  onClose: () => void;
+}) {
+  const [duration, setDuration] = useState(pack?.duration || 1);
+  const [unit, setUnit] = useState<DurationUnit>(
+    pack?.duration_unit || "months"
+  );
 
-	const submit = () => {
+  const [price, setPrice] = useState(pack?.price || 0);
-		(pack ? axios.patch : axios.post)(pack ? `/api/packages/${pack.id}` : "/api/packages", {
+  const [currency, setCurrency] = useState<string>(pack?.currency || "OMR");
-			duration,
-			duration_unit: unit,
-			price,
-			currency,
-		})
-			.then(() => {
-				toast.success("New payment has been created successfully!");
-				onClose();
-			})
-			.catch(() => {
-				toast.error("Something went wrong, please try again later!");
-			});
-	};
 
-	return (
+  const submit = useCallback(() => {
-		<div className="flex flex-col gap-8 py-8">
+    (pack ? axios.patch : axios.post)(
-			<div className="flex flex-col gap-3">
+      pack ? `/api/packages/${pack.id}` : "/api/packages",
-				<label className="font-normal text-base text-mti-gray-dim">Price *</label>
+      {
-				<div className="flex gap-4 items-center">
+        duration,
-					<Input defaultValue={price} name="price" type="number" onChange={(e) => setPrice(parseInt(e))} />
+        duration_unit: unit,
+        price,
+        currency,
+      }
+    )
+      .then(() => {
+        toast.success("New payment has been created successfully!");
+        onClose();
+      })
+      .catch(() => {
+        toast.error("Something went wrong, please try again later!");
+      });
+  }, [duration, unit, price, currency, pack, onClose]);
 
-					<Select
+  const currencyDefaultValue = useMemo(() => {
-						className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+    return {
-						options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
+      value: currency || "EUR",
-						defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
+      label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
-						onChange={(value) => setCurrency(value?.value || "EUR")}
+    };
-						value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
+  }, [currency]);
-						menuPortalTarget={document?.body}
+
-						styles={{
+  return (
-							menuPortal: (base) => ({...base, zIndex: 9999}),
+    <div className="flex flex-col gap-8 py-8">
-							control: (styles) => ({
+      <div className="flex flex-col gap-3">
-								...styles,
+        <label className="font-normal text-base text-mti-gray-dim">
-								paddingLeft: "4px",
+          Price *
-								border: "none",
+        </label>
-								outline: "none",
+        <div className="flex gap-4 items-center">
-								":focus": {
+          <Input
-									outline: "none",
+            defaultValue={price}
-								},
+            name="price"
-							}),
+            type="number"
-							option: (styles, state) => ({
+            onChange={(e) => setPrice(parseInt(e))}
-								...styles,
+          />
-								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+
-								color: state.isFocused ? "black" : styles.color,
+          <Select
-							}),
+            className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-						}}
+            options={currencyOptions}
-					/>
+            defaultValue={currencyDefaultValue}
-				</div>
+            onChange={(value) => setCurrency(value?.value || "EUR")}
-			</div>
+            value={currencyDefaultValue}
-			<div className="flex flex-col gap-3">
+            menuPortalTarget={document?.body}
-				<label className="font-normal text-base text-mti-gray-dim">Duration *</label>
+            styles={{
-				<div className="flex gap-4 items-center">
+              menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-					<Input defaultValue={duration} name="duration" type="number" onChange={(e) => setDuration(parseInt(e))} />
+              control: (styles) => ({
-					<Select
+                ...styles,
-						className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+                paddingLeft: "4px",
-						options={[
+                border: "none",
-							{value: "days", label: "Days"},
+                outline: "none",
-							{value: "weeks", label: "Weeks"},
+                ":focus": {
-							{value: "months", label: "Months"},
+                  outline: "none",
-							{value: "years", label: "Years"},
+                },
-						]}
+              }),
-						defaultValue={{value: "months", label: "Months"}}
+              option: (styles, state) => ({
-						onChange={(value) => setUnit((value?.value as DurationUnit) || "months")}
+                ...styles,
-						value={{value: unit, label: capitalize(unit)}}
+                backgroundColor: state.isFocused
-						menuPortalTarget={document?.body}
+                  ? "#D5D9F0"
-						styles={{
+                  : state.isSelected
-							menuPortal: (base) => ({...base, zIndex: 9999}),
+                  ? "#7872BF"
-							control: (styles) => ({
+                  : "white",
-								...styles,
+                color: state.isFocused ? "black" : styles.color,
-								paddingLeft: "4px",
+              }),
-								border: "none",
+            }}
-								outline: "none",
+          />
-								":focus": {
+        </div>
-									outline: "none",
+      </div>
-								},
+      <div className="flex flex-col gap-3">
-							}),
+        <label className="font-normal text-base text-mti-gray-dim">
-							option: (styles, state) => ({
+          Duration *
-								...styles,
+        </label>
-								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+        <div className="flex gap-4 items-center">
-								color: state.isFocused ? "black" : styles.color,
+          <Input
-							}),
+            defaultValue={duration}
-						}}
+            name="duration"
-					/>
+            type="number"
-				</div>
+            onChange={(e) => setDuration(parseInt(e))}
-			</div>
+          />
-			<div className="flex w-full justify-end items-center gap-8 mt-8">
+          <Select
-				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
+            className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-					Cancel
+            options={[
-				</Button>
+              { value: "days", label: "Days" },
-				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!duration || !price}>
+              { value: "weeks", label: "Weeks" },
-					Submit
+              { value: "months", label: "Months" },
-				</Button>
+              { value: "years", label: "Years" },
-			</div>
+            ]}
-		</div>
+            defaultValue={{ value: "months", label: "Months" }}
-	);
+            onChange={(value) =>
+              setUnit((value?.value as DurationUnit) || "months")
+            }
+            value={{ value: unit, label: capitalize(unit) }}
+            menuPortalTarget={document?.body}
+            styles={{
+              menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+              control: (styles) => ({
+                ...styles,
+                paddingLeft: "4px",
+                border: "none",
+                outline: "none",
+                ":focus": {
+                  outline: "none",
+                },
+              }),
+              option: (styles, state) => ({
+                ...styles,
+                backgroundColor: state.isFocused
+                  ? "#D5D9F0"
+                  : state.isSelected
+                  ? "#7872BF"
+                  : "white",
+                color: state.isFocused ? "black" : styles.color,
+              }),
+            }}
+          />
+        </div>
+      </div>
+      <div className="flex w-full justify-end items-center gap-8 mt-8">
+        <Button
+          variant="outline"
+          color="red"
+          className="w-full max-w-[200px]"
+          onClick={onClose}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="w-full max-w-[200px]"
+          onClick={submit}
+          disabled={!duration || !price}
+        >
+          Submit
+        </Button>
+      </div>
+    </div>
+  );
 }
 
-export default function PackageList({user}: {user: User}) {
+export default function PackageList({ user }: { user: User }) {
-	const [isCreating, setIsCreating] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
-	const [editingPackage, setEditingPackage] = useState<Package>();
+  const [editingPackage, setEditingPackage] = useState<Package>();
 
-	const {packages, reload} = usePackages();
+  const { packages, reload } = usePackages();
 
-	const deletePackage = async (pack: Package) => {
+  const deletePackage = useCallback(
-		if (!confirm(`Are you sure you want to delete this package?`)) return;
+    async (pack: Package) => {
+      if (!confirm(`Are you sure you want to delete this package?`)) return;
 
-		axios
+      axios
-			.delete(`/api/packages/${pack.id}`)
+        .delete(`/api/packages/${pack.id}`)
-			.then(() => toast.success(`Deleted the "${pack.id}" exam`))
+        .then(() => toast.success(`Deleted the "${pack.id}" exam`))
-			.catch((reason) => {
+        .catch((reason) => {
-				if (reason.response.status === 404) {
+          if (reason.response.status === 404) {
-					toast.error("Package not found!");
+            toast.error("Package not found!");
-					return;
+            return;
-				}
+          }
 
-				if (reason.response.status === 403) {
+          if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete this exam!");
+            toast.error("You do not have permission to delete this exam!");
-					return;
+            return;
-				}
+          }
 
-				toast.error("Something went wrong, please try again later.");
+          toast.error("Something went wrong, please try again later.");
-			})
+        })
-			.finally(reload);
+        .finally(reload);
-	};
+    },
+    [reload]
+  );
 
-	const defaultColumns = [
+  const defaultColumns = useMemo(
-		columnHelper.accessor("id", {
+    () => [
-			header: "ID",
+      columnHelper.accessor("id", {
-			cell: (info) => info.getValue(),
+        header: "ID",
-		}),
+        cell: (info) => info.getValue(),
-		columnHelper.accessor("duration", {
+      }),
-			header: "Duration",
+      columnHelper.accessor("duration", {
-			cell: (info) => (
+        header: "Duration",
-				<span>
+        cell: (info) => (
-					{info.getValue()} {info.row.original.duration_unit}
+          <span>
-				</span>
+            {info.getValue()} {info.row.original.duration_unit}
-			),
+          </span>
-		}),
+        ),
-		columnHelper.accessor("price", {
+      }),
-			header: "Price",
+      columnHelper.accessor("price", {
-			cell: (info) => (
+        header: "Price",
-				<span>
+        cell: (info) => (
-					{info.getValue()} {info.row.original.currency}
+          <span>
-				</span>
+            {info.getValue()} {info.row.original.currency}
-			),
+          </span>
-		}),
+        ),
-		{
+      }),
-			header: "",
+      {
-			id: "actions",
+        header: "",
-			cell: ({row}: {row: {original: Package}}) => {
+        id: "actions",
-				return (
+        cell: ({ row }: { row: { original: Package } }) => {
-					<div className="flex gap-4">
+          return (
-						{["developer", "admin"].includes(user.type) && (
+            <div className="flex gap-4">
-							<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingPackage(row.original)}>
+              {["developer", "admin"].includes(user?.type) && (
-								<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                <div
-							</div>
+                  data-tip="Edit"
-						)}
+                  className="cursor-pointer tooltip"
-						{["developer", "admin"].includes(user.type) && (
+                  onClick={() => setEditingPackage(row.original)}
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePackage(row.original)}>
+                >
-								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                  <BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-							</div>
+                </div>
-						)}
+              )}
-					</div>
+              {["developer", "admin"].includes(user?.type) && (
-				);
+                <div
-			},
+                  data-tip="Delete"
-		},
+                  className="cursor-pointer tooltip"
-	];
+                  onClick={() => deletePackage(row.original)}
+                >
+                  <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                </div>
+              )}
+            </div>
+          );
+        },
+      },
+    ],
+    [deletePackage, user]
+  );
 
-	const table = useReactTable({
+  const table = useReactTable({
-		data: packages,
+    data: packages,
-		columns: defaultColumns,
+    columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
+    getCoreRowModel: getCoreRowModel(),
-	});
+  });
 
-	const closeModal = () => {
+  const closeModal = useCallback(() => {
-		setIsCreating(false);
+    setIsCreating(false);
-		setEditingPackage(undefined);
+    setEditingPackage(undefined);
-		reload();
+    reload();
-	};
+  }, [reload]);
 
-	return (
+  return (
-		<div className="w-full h-full rounded-xl">
+    <div className="w-full h-full rounded-xl">
-			<Modal
+      <Modal
-				isOpen={isCreating || !!editingPackage}
+        isOpen={isCreating || !!editingPackage}
-				onClose={closeModal}
+        onClose={closeModal}
-				title={editingPackage ? `Editing ${editingPackage.id}` : "New Package"}>
+        title={editingPackage ? `Editing ${editingPackage.id}` : "New Package"}
-				<PackageCreator onClose={closeModal} pack={editingPackage} />
+      >
-			</Modal>
+        <PackageCreator onClose={closeModal} pack={editingPackage} />
-			<table className="bg-mti-purple-ultralight/40 w-full">
+      </Modal>
-				<thead>
+      <table className="bg-mti-purple-ultralight/40 w-full">
-					{table.getHeaderGroups().map((headerGroup) => (
+        <thead>
-						<tr key={headerGroup.id}>
+          {table.getHeaderGroups().map((headerGroup) => (
-							{headerGroup.headers.map((header) => (
+            <tr key={headerGroup.id}>
-								<th className="p-4 text-left" key={header.id}>
+              {headerGroup.headers.map((header) => (
-									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                <th className="p-4 text-left" key={header.id}>
-								</th>
+                  {header.isPlaceholder
-							))}
+                    ? null
-						</tr>
+                    : flexRender(
-					))}
+                        header.column.columnDef.header,
-				</thead>
+                        header.getContext()
-				<tbody className="px-2">
+                      )}
-					{table.getRowModel().rows.map((row) => (
+                </th>
-						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+              ))}
-							{row.getVisibleCells().map((cell) => (
+            </tr>
-								<td className="px-4 py-2" key={cell.id}>
+          ))}
-									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </thead>
-								</td>
+        <tbody className="px-2">
-							))}
+          {table.getRowModel().rows.map((row) => (
-						</tr>
+            <tr
-					))}
+              className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-				</tbody>
+              key={row.id}
-			</table>
+            >
-			<button
+              {row.getVisibleCells().map((cell) => (
-				onClick={() => setIsCreating(true)}
+                <td className="px-4 py-2" key={cell.id}>
-				className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-				New Package
+                </td>
-			</button>
+              ))}
-		</div>
+            </tr>
-	);
+          ))}
+        </tbody>
+      </table>
+      <button
+        onClick={() => setIsCreating(true)}
+        className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white"
+      >
+        New Package
+      </button>
+    </div>
+  );
 }

src/pages/(admin)/Lists/StudentPerformanceList.tsx

@@ -1,111 +1,158 @@
 /* eslint-disable @next/next/no-img-element */
-import {Stat, StudentUser, User} from "@/interfaces/user";
+import { Stat, StudentUser, User } from "@/interfaces/user";
-import {useState} from "react";
+import { useState } from "react";
-import {averageLevelCalculator} from "@/utils/score";
+import { averageLevelCalculator } from "@/utils/score";
-import {groupByExam} from "@/utils/stats";
+import { groupByExam } from "@/utils/stats";
-import {createColumnHelper} from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
 import Checkbox from "@/components/Low/Checkbox";
-import List from "@/components/List";
 import Table from "@/components/High/Table";
 
-type StudentPerformanceItem = StudentUser & {entitiesLabel: string; group: string};
+type StudentPerformanceItem = StudentUser & {
+  entitiesLabel: string;
+  group: string;
+  userStats: Stat[];
+};
 
-const StudentPerformanceList = ({items = [], stats}: {items: StudentPerformanceItem[]; stats: Stat[]}) => {
+const StudentPerformanceList = ({
-	const [isShowingAmount, setIsShowingAmount] = useState(false);
+  items = [],
+}: {
+  items: StudentPerformanceItem[];
+}) => {
+  const [isShowingAmount, setIsShowingAmount] = useState(false);
 
-	const columnHelper = createColumnHelper<StudentPerformanceItem>();
+  const columnHelper = createColumnHelper<StudentPerformanceItem>();
 
-	const columns = [
+  const columns = [
-		columnHelper.accessor("name", {
+    columnHelper.accessor("name", {
-			header: "Student Name",
+      header: "Student Name",
-			cell: (info) => info.getValue(),
+      cell: (info) => info.getValue(),
-		}),
+    }),
-		columnHelper.accessor("email", {
+    columnHelper.accessor("email", {
-			header: "E-mail",
+      header: "E-mail",
-			cell: (info) => info.getValue(),
+      cell: (info) => info.getValue(),
-		}),
+    }),
-		columnHelper.accessor("studentID", {
+    columnHelper.accessor("studentID", {
-			header: "ID",
+      header: "ID",
-			cell: (info) => info.getValue() || "N/A",
+      cell: (info) => info.getValue() || "N/A",
-		}),
+    }),
-		columnHelper.accessor("group", {
+    columnHelper.accessor("group", {
-			header: "Group",
+      header: "Group",
-			cell: (info) => info.getValue(),
+      cell: (info) => info.getValue(),
-		}),
+    }),
-		columnHelper.accessor("entitiesLabel", {
+    columnHelper.accessor("entitiesLabel", {
-			header: "Entities",
+      header: "Entities",
-			cell: (info) => info.getValue() || "N/A",
+      cell: (info) => info.getValue() || "N/A",
-		}),
+    }),
-		columnHelper.accessor("levels.reading", {
+    columnHelper.accessor("levels.reading", {
-			header: "Reading",
+      header: "Reading",
-			cell: (info) =>
+      cell: (info) =>
-				!isShowingAmount
+        !isShowingAmount
-					? info.getValue() || 0
+          ? info.getValue() || 0
-					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
+          : `${
-		}),
+              Object.keys(
-		columnHelper.accessor("levels.listening", {
+                groupByExam(
-			header: "Listening",
+                  info.row.original.userStats.filter(
-			cell: (info) =>
+                    (x) => x.module === "reading"
-				!isShowingAmount
+                  )
-					? info.getValue() || 0
+                )
-					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
+              ).length
-		}),
+            } exams`,
-		columnHelper.accessor("levels.writing", {
+    }),
-			header: "Writing",
+    columnHelper.accessor("levels.listening", {
-			cell: (info) =>
+      header: "Listening",
-				!isShowingAmount
+      cell: (info) =>
-					? info.getValue() || 0
+        !isShowingAmount
-					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
+          ? info.getValue() || 0
-		}),
+          : `${
-		columnHelper.accessor("levels.speaking", {
+              Object.keys(
-			header: "Speaking",
+                groupByExam(
-			cell: (info) =>
+                  info.row.original.userStats.filter(
-				!isShowingAmount
+                    (x) => x.module === "listening"
-					? info.getValue() || 0
+                  )
-					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
+                )
-		}),
+              ).length
-		columnHelper.accessor("levels.level", {
+            } exams`,
-			header: "Level",
+    }),
-			cell: (info) =>
+    columnHelper.accessor("levels.writing", {
-				!isShowingAmount
+      header: "Writing",
-					? info.getValue() || 0
+      cell: (info) =>
-					: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
+        !isShowingAmount
-		}),
+          ? info.getValue() || 0
-		columnHelper.accessor("levels", {
+          : `${
-			id: "overall_level",
+              Object.keys(
-			header: "Overall",
+                groupByExam(
-			cell: (info) =>
+                  info.row.original.userStats.filter(
-				!isShowingAmount
+                    (x) => x.module === "writing"
-					? averageLevelCalculator(
+                  )
-							items,
+                )
-							stats.filter((x) => x.user === info.row.original.id),
+              ).length
-					  ).toFixed(1)
+            } exams`,
-					: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
+    }),
-		}),
+    columnHelper.accessor("levels.speaking", {
-	];
+      header: "Speaking",
+      cell: (info) =>
+        !isShowingAmount
+          ? info.getValue() || 0
+          : `${
+              Object.keys(
+                groupByExam(
+                  info.row.original.userStats.filter(
+                    (x) => x.module === "speaking"
+                  )
+                )
+              ).length
+            } exams`,
+    }),
+    columnHelper.accessor("levels.level", {
+      header: "Level",
+      cell: (info) =>
+        !isShowingAmount
+          ? info.getValue() || 0
+          : `${
+              Object.keys(
+                groupByExam(
+                  info.row.original.userStats.filter(
+                    (x) => x.module === "level"
+                  )
+                )
+              ).length
+            } exams`,
+    }),
+    columnHelper.accessor("userStats", {
+      id: "overall_level",
+      header: "Overall",
+      cell: (info) =>
+        !isShowingAmount
+          ? averageLevelCalculator(
+              info.row.original.focus,
+              info.getValue()
+            ).toFixed(1)
+          : `${Object.keys(groupByExam(info.getValue())).length} exams`,
+    }),
+  ];
 
-	return (
+  return (
-		<div className="flex flex-col gap-4 w-full h-full">
+    <div className="flex flex-col gap-4 w-full h-full">
-			<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
+      <Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
-				Show Utilization
+        Show Utilization
-			</Checkbox>
+      </Checkbox>
-			<Table<StudentPerformanceItem>
+      <Table<StudentPerformanceItem>
-				data={items.sort(
+        data={items.sort(
-					(a, b) =>
+          (a, b) =>
-						averageLevelCalculator(
+            averageLevelCalculator(b.focus, b.userStats) -
-							items,
+            averageLevelCalculator(a.focus, a.userStats)
-							stats.filter((x) => x.user === b.id),
+        )}
-						) -
+        columns={columns}
-						averageLevelCalculator(
+        searchFields={[
-							items,
+          ["name"],
-							stats.filter((x) => x.user === a.id),
+          ["email"],
-						),
+          ["studentID"],
-				)}
+          ["entitiesLabel"],
-				columns={columns}
+          ["group"],
-				searchFields={[["name"], ["email"], ["studentID"], ["entitiesLabel"], ["group"]]}
+        ]}
-			/>
+      />
-		</div>
+    </div>
-	);
+  );
 };
 
 export default StudentPerformanceList;

src/pages/(admin)/Lists/UserList.tsx

@@ -5,7 +5,7 @@ import axios from "axios";
 import clsx from "clsx";
 import { capitalize } from "lodash";
 import moment from "moment";
-import { useEffect, useMemo, useState } from "react";
+import {  useMemo, useState } from "react";
 import {
   BsCheck,
   BsCheckCircle,
@@ -22,8 +22,6 @@ import useFilterStore from "@/stores/listFilterStore";
 import { useRouter } from "next/router";
 import { mapBy } from "@/utils";
 import { exportListToExcel } from "@/utils/users";
-import usePermissions from "@/hooks/usePermissions";
-import useUserBalance from "@/hooks/useUserBalance";
 import useEntitiesUsers from "@/hooks/useEntitiesUsers";
 import { WithLabeledEntities } from "@/interfaces/entity";
 import Table from "@/components/High/Table";
@@ -494,21 +492,19 @@ export default function UserList({
     },
   ];
 
-  const downloadExcel = (rows: WithLabeledEntities<User>[]) => {
+  const downloadExcel = async (rows: WithLabeledEntities<User>[]) => {
     if (entitiesDownloadUsers.length === 0)
       return toast.error("You are not allowed to download the user list.");
 
-    const allowedRows = rows.filter((r) =>
+    const allowedRows = rows;
-      mapBy(r.entities, "id").some((e) =>
+    const csv = await exportListToExcel(allowedRows);
-        mapBy(entitiesDownloadUsers, "id").includes(e)
-      )
-    );
-    const csv = exportListToExcel(allowedRows);
 
     const element = document.createElement("a");
-    const file = new Blob([csv], { type: "text/csv" });
+    const file = new Blob([csv], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
     element.href = URL.createObjectURL(file);
-    element.download = "users.csv";
+    element.download = "users.xlsx";
     document.body.appendChild(element);
     element.click();
     document.body.removeChild(element);

src/pages/(admin)/Lists/index.tsx

@@ -4,7 +4,6 @@ import clsx from "clsx";
 import CodeList from "./CodeList";
 import DiscountList from "./DiscountList";
 import ExamList from "./ExamList";
-import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
 import { checkAccess } from "@/utils/permissions";

src/pages/(admin)/UserCreator.tsx

@@ -1,24 +1,17 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import { PERMISSIONS } from "@/constants/userPermissions";
+import { Type, User } from "@/interfaces/user";
-import { CorporateUser, TeacherUser, Type, User } from "@/interfaces/user";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
 import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
 import { toast } from "react-toastify";
-import ShortUniqueId from "short-unique-id";
 import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import { PermissionType } from "@/interfaces/permissions";
-import usePermissions from "@/hooks/usePermissions";
 import Input from "@/components/Low/Input";
 import CountrySelect from "@/components/Low/CountrySelect";
-import useGroups from "@/hooks/useGroups";
-import useUsers from "@/hooks/useUsers";
-import { getUserName } from "@/utils/users";
 import Select from "@/components/Low/Select";
 import { EntityWithRoles } from "@/interfaces/entity";
 import useEntitiesGroups from "@/hooks/useEntitiesGroups";
@@ -48,23 +41,44 @@ const USER_TYPE_PERMISSIONS: {
   },
   admin: {
     perm: "createCodeAdmin",
-    list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+    list: [
+      "student",
+      "teacher",
+      "agent",
+      "corporate",
+      "admin",
+      "mastercorporate",
+    ],
   },
   developer: {
     perm: undefined,
-    list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+    list: [
+      "student",
+      "teacher",
+      "agent",
+      "corporate",
+      "admin",
+      "developer",
+      "mastercorporate",
+    ],
   },
 };
 
 interface Props {
   user: User;
   users: User[];
-  entities: EntityWithRoles[]
+  entities: EntityWithRoles[];
   permissions: PermissionType[];
   onFinish: () => void;
 }
 
-export default function UserCreator({ user, users, entities = [], permissions, onFinish }: Props) {
+export default function UserCreator({
+  user,
+  users,
+  entities = [],
+  permissions,
+  onFinish,
+}: Props) {
   const [name, setName] = useState<string>();
   const [email, setEmail] = useState<string>();
   const [phone, setPhone] = useState<string>();
@@ -75,13 +89,15 @@ export default function UserCreator({ user, users, entities = [], permissions, o
   const [password, setPassword] = useState<string>();
   const [confirmPassword, setConfirmPassword] = useState<string>();
   const [expiryDate, setExpiryDate] = useState<Date | null>(
-    user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
+    user?.subscriptionExpirationDate
+      ? moment(user?.subscriptionExpirationDate).toDate()
+      : null
   );
   const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [type, setType] = useState<Type>("student");
   const [position, setPosition] = useState<string>();
-  const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
+  const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
 
   const { groups } = useEntitiesGroups();
 
@@ -90,11 +106,16 @@ export default function UserCreator({ user, users, entities = [], permissions, o
   }, [isExpiryDateEnabled]);
 
   const createUser = () => {
-    if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
+    if (!name || name.trim().length === 0)
-    if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
+      return toast.error("Please enter a valid name!");
-    if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
+    if (!email || email.trim().length === 0)
-    if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
+      return toast.error("Please enter a valid e-mail address!");
-    if (password !== confirmPassword) return toast.error("The passwords do not match!");
+    if (users.map((x) => x.email).includes(email.trim()))
+      return toast.error("That e-mail is already in use!");
+    if (!password || password.trim().length < 6)
+      return toast.error("Please enter a valid password!");
+    if (password !== confirmPassword)
+      return toast.error("The passwords do not match!");
 
     setIsLoading(true);
 
@@ -128,8 +149,12 @@ export default function UserCreator({ user, users, entities = [], permissions, o
         setStudentID("");
         setCountry(user?.demographicInformation?.country);
         setGroup(null);
-        setEntity((entities || [])[0]?.id || undefined)
+        setEntity((entities || [])[0]?.id || undefined);
-        setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
+        setExpiryDate(
+          user?.subscriptionExpirationDate
+            ? moment(user?.subscriptionExpirationDate).toDate()
+            : null
+        );
         setIsExpiryDateEnabled(true);
         setType("student");
         setPosition(undefined);
@@ -145,10 +170,34 @@ export default function UserCreator({ user, users, entities = [], permissions, o
   return (
     <div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
       <div className="grid grid-cols-2 gap-4">
-        <Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
+        <Input
-        <Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
+          required
+          label="Name"
+          value={name}
+          onChange={setName}
+          type="text"
+          name="name"
+          placeholder="Name"
+        />
+        <Input
+          label="E-mail"
+          required
+          value={email}
+          onChange={setEmail}
+          type="email"
+          name="email"
+          placeholder="E-mail"
+        />
 
-        <Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
+        <Input
+          type="password"
+          name="password"
+          label="Password"
+          value={password}
+          onChange={setPassword}
+          placeholder="Password"
+          required
+        />
         <Input
           type="password"
           name="confirmPassword"
@@ -160,11 +209,21 @@ export default function UserCreator({ user, users, entities = [], permissions, o
         />
 
         <div className="flex flex-col gap-4">
-          <label className="font-normal text-base text-mti-gray-dim">Country *</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Country *
+          </label>
           <CountrySelect value={country} onChange={setCountry} />
         </div>
 
-        <Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
+        <Input
+          type="tel"
+          name="phone"
+          label="Phone number"
+          value={phone}
+          onChange={setPhone}
+          placeholder="Phone number"
+          required
+        />
 
         {type === "student" && (
           <>
@@ -177,14 +236,26 @@ export default function UserCreator({ user, users, entities = [], permissions, o
               placeholder="National ID or Passport number"
               required
             />
-            <Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
+            <Input
+              type="text"
+              name="studentID"
+              label="Student ID"
+              onChange={setStudentID}
+              value={studentID}
+              placeholder="Student ID"
+            />
           </>
         )}
 
         <div className={clsx("flex flex-col gap-4")}>
-          <label className="font-normal text-base text-mti-gray-dim">Entity</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Entity
+          </label>
           <Select
-            defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
+            defaultValue={{
+              value: (entities || [])[0]?.id,
+              label: (entities || [])[0]?.label,
+            }}
             options={entities.map((e) => ({ value: e.id, label: e.label }))}
             onChange={(e) => setEntity(e?.value || undefined)}
             isClearable={checkAccess(user, ["admin", "developer"])}
@@ -192,11 +263,20 @@ export default function UserCreator({ user, users, entities = [], permissions, o
         </div>
 
         {["corporate", "mastercorporate"].includes(type) && (
-          <Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
+          <Input
+            type="text"
+            name="department"
+            label="Department"
+            onChange={setPosition}
+            value={position}
+            placeholder="Department"
+          />
         )}
 
         <div className={clsx("flex flex-col gap-4")}>
-          <label className="font-normal text-base text-mti-gray-dim">Classroom</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Classroom
+          </label>
           <Select
             options={groups
               .filter((x) => x.entity?.id === entity)
@@ -209,63 +289,85 @@ export default function UserCreator({ user, users, entities = [], permissions, o
         <div
           className={clsx(
             "flex flex-col gap-4",
-            !checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
+            !checkAccess(user, [
-          )}>
+              "developer",
-          <label className="font-normal text-base text-mti-gray-dim">Type</label>
+              "admin",
+              "corporate",
+              "mastercorporate",
+            ]) && "col-span-2"
+          )}
+        >
+          <label className="font-normal text-base text-mti-gray-dim">
+            Type
+          </label>
           {user && (
             <select
               defaultValue="student"
               value={type}
               onChange={(e) => setType(e.target.value as Type)}
-              className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+              className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white"
-              {Object.keys(USER_TYPE_LABELS)
+            >
-                .filter((x) => {
+              {Object.keys(USER_TYPE_LABELS).reduce<string[]>((acc, x) => {
-                  const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
+                const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
-                  return checkAccess(user, getTypesOfUser(list), permissions, perm);
+                if (checkAccess(user, getTypesOfUser(list), permissions, perm))
-                })
+                  acc.push(x);
-                .map((type) => (
+                return acc;
-                  <option key={type} value={type}>
+              }, [])}
-                    {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-                  </option>
-                ))}
             </select>
           )}
         </div>
 
         <div className="flex flex-col gap-4">
-          {user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+          {user &&
-            <>
+            checkAccess(user, [
-              <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+              "developer",
-                <label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+              "admin",
-                <Checkbox
+              "corporate",
-                  isChecked={isExpiryDateEnabled}
+              "mastercorporate",
-                  onChange={setIsExpiryDateEnabled}
+            ]) && (
-                  disabled={!!user?.subscriptionExpirationDate}>
+              <>
-                  Enabled
+                <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-                </Checkbox>
+                  <label className="text-mti-gray-dim text-base font-normal">
-              </div>
+                    Expiry Date
-              {isExpiryDateEnabled && (
+                  </label>
-                <ReactDatePicker
+                  <Checkbox
-                  className={clsx(
+                    isChecked={isExpiryDateEnabled}
-                    "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+                    onChange={setIsExpiryDateEnabled}
-                    "hover:border-mti-purple tooltip",
+                    disabled={!!user?.subscriptionExpirationDate}
-                    "transition duration-300 ease-in-out",
+                  >
-                  )}
+                    Enabled
-                  filterDate={(date) =>
+                  </Checkbox>
-                    moment(date).isAfter(new Date()) &&
+                </div>
-                    (user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
+                {isExpiryDateEnabled && (
-                  }
+                  <ReactDatePicker
-                  dateFormat="dd/MM/yyyy"
+                    className={clsx(
-                  selected={expiryDate}
+                      "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-                  onChange={(date) => setExpiryDate(date)}
+                      "hover:border-mti-purple tooltip",
-                />
+                      "transition duration-300 ease-in-out"
-              )}
+                    )}
-            </>
+                    filterDate={(date) =>
-          )}
+                      moment(date).isAfter(new Date()) &&
+                      (user?.subscriptionExpirationDate
+                        ? moment(date).isBefore(
+                            user?.subscriptionExpirationDate
+                          )
+                        : true)
+                    }
+                    dateFormat="dd/MM/yyyy"
+                    selected={expiryDate}
+                    onChange={(date) => setExpiryDate(date)}
+                  />
+                )}
+              </>
+            )}
         </div>
       </div>
 
-      <Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
+      <Button
+        onClick={createUser}
+        isLoading={isLoading}
+        disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}
+      >
         Create User
       </Button>
     </div>

src/pages/(exam)/ExamPage.tsx

@@ -140,10 +140,10 @@ export default function ExamPage({
 
   useEvaluationPolling(sessionId ? [sessionId] : [], "exam", user?.id);
 
-  useEffect(() => {
+  /*  useEffect(() => {
     setModuleLock(true);
   }, [flags.finalizeModule]);
-
+ */
   useEffect(() => {
     if (flags.finalizeModule && !showSolutions) {
       if (
@@ -183,9 +183,9 @@ export default function ExamPage({
               })
             );
             const updatedSolutions = userSolutions.map((solution) => {
-              const completed = results
+              const completed = results.find(
-                .filter((r) => r !== null)
+                (c: any) => c && c.exercise === solution.exercise
-                .find((c: any) => c.exercise === solution.exercise);
+              );
               return completed || solution;
             });
             setUserSolutions(updatedSolutions);

src/pages/(register)/RegisterCorporate.tsx

@@ -13,267 +13,268 @@ import moment from "moment";
 import useAcceptedTerms from "@/hooks/useAcceptedTerms";
 
 interface Props {
-	isLoading: boolean;
+  isLoading: boolean;
-	setIsLoading: (isLoading: boolean) => void;
+  setIsLoading: (isLoading: boolean) => void;
-	mutateUser: KeyedMutator<User>;
+  mutateUser: KeyedMutator<User>;
-	sendEmailVerification: typeof sendEmailVerification;
+  sendEmailVerification: typeof sendEmailVerification;
 }
 
 const availableDurations = {
-	"1_month": { label: "1 Month", number: 1 },
+  "1_month": { label: "1 Month", number: 1 },
-	"3_months": { label: "3 Months", number: 3 },
+  "3_months": { label: "3 Months", number: 3 },
-	"6_months": { label: "6 Months", number: 6 },
+  "6_months": { label: "6 Months", number: 6 },
-	"12_months": { label: "12 Months", number: 12 },
+  "12_months": { label: "12 Months", number: 12 },
 };
 
 export default function RegisterCorporate({
-	isLoading,
+  isLoading,
-	setIsLoading,
+  setIsLoading,
-	mutateUser,
+  mutateUser,
-	sendEmailVerification,
+  sendEmailVerification,
 }: Props) {
-	const [name, setName] = useState("");
+  const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
+  const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
+  const [password, setPassword] = useState("");
-	const [confirmPassword, setConfirmPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
-	const [referralAgent, setReferralAgent] = useState<string | undefined>();
+  const [referralAgent, setReferralAgent] = useState<string | undefined>();
 
-	const [companyName, setCompanyName] = useState("");
+  const [companyName, setCompanyName] = useState("");
-	const [companyUsers, setCompanyUsers] = useState(0);
+  const [companyUsers, setCompanyUsers] = useState(0);
-	const [subscriptionDuration, setSubscriptionDuration] = useState(1);
+  const [subscriptionDuration, setSubscriptionDuration] = useState(1);
-	const { acceptedTerms, renderCheckbox } = useAcceptedTerms();
+  const { acceptedTerms, renderCheckbox } = useAcceptedTerms();
 
-	const { users } = useUsers();
+  const { users } = useUsers({ type: "agent" });
 
-	const onSuccess = () =>
+  const onSuccess = () =>
-		toast.success(
+    toast.success(
-			"An e-mail has been sent, please make sure to check your spam folder!",
+      "An e-mail has been sent, please make sure to check your spam folder!"
-		);
+    );
 
-	const onError = (e: Error) => {
+  const onError = (e: Error) => {
-		console.error(e);
+    console.error(e);
-		toast.error("Something went wrong, please logout and re-login.", {
+    toast.error("Something went wrong, please logout and re-login.", {
-			toastId: "send-verify-error",
+      toastId: "send-verify-error",
-		});
+    });
-	};
+  };
 
-	const register = (e: any) => {
+  const register = (e: any) => {
-		e.preventDefault();
+    e.preventDefault();
 
-		if (confirmPassword !== password) {
+    if (confirmPassword !== password) {
-			toast.error("Your passwords do not match!", {
+      toast.error("Your passwords do not match!", {
-				toastId: "password-not-match",
+        toastId: "password-not-match",
-			});
+      });
-			return;
+      return;
-		}
+    }
 
-		setIsLoading(true);
+    setIsLoading(true);
-		axios
+    axios
-			.post("/api/register", {
+      .post("/api/register", {
-				name,
+        name,
-				email,
+        email,
-				password,
+        password,
-				type: "corporate",
+        type: "corporate",
-				profilePicture: "/defaultAvatar.png",
+        profilePicture: "/defaultAvatar.png",
-				subscriptionExpirationDate: moment().subtract(1, "days").toISOString(),
+        subscriptionExpirationDate: moment().subtract(1, "days").toISOString(),
-				corporateInformation: {
+        corporateInformation: {
-					monthlyDuration: subscriptionDuration,
+          monthlyDuration: subscriptionDuration,
-					referralAgent,
+          referralAgent,
-				},
+        },
-			})
+      })
-			.then((response) => {
+      .then((response) => {
-				mutateUser(response.data.user).then(() =>
+        mutateUser(response.data.user).then(() =>
-					sendEmailVerification(setIsLoading, onSuccess, onError),
+          sendEmailVerification(setIsLoading, onSuccess, onError)
-				);
+        );
-			})
+      })
-			.catch((error) => {
+      .catch((error) => {
-				console.log(error.response.data);
+        console.log(error.response.data);
 
-				if (error.response.status === 401) {
+        if (error.response.status === 401) {
-					toast.error("There is already a user with that e-mail!");
+          toast.error("There is already a user with that e-mail!");
-					return;
+          return;
-				}
+        }
 
-				if (error.response.status === 400) {
+        if (error.response.status === 400) {
-					toast.error("The provided code is invalid!");
+          toast.error("The provided code is invalid!");
-					return;
+          return;
-				}
+        }
 
-				toast.error("There was something wrong, please try again!");
+        toast.error("There was something wrong, please try again!");
-			})
+      })
-			.finally(() => setIsLoading(false));
+      .finally(() => setIsLoading(false));
-	};
+  };
 
-	return (
+  return (
-		<form
+    <form
-			className="flex w-full flex-col items-center gap-4"
+      className="flex w-full flex-col items-center gap-4"
-			onSubmit={register}
+      onSubmit={register}
-		>
+    >
-			<div className="flex w-full gap-4">
+      <div className="flex w-full gap-4">
-				<Input
+        <Input
-					type="text"
+          type="text"
-					name="name"
+          name="name"
-					onChange={(e) => setName(e)}
+          onChange={(e) => setName(e)}
-					placeholder="Enter your name"
+          placeholder="Enter your name"
-					defaultValue={name}
+          defaultValue={name}
-					required
+          required
-				/>
+        />
-				<Input
+        <Input
-					type="email"
+          type="email"
-					name="email"
+          name="email"
-					onChange={(e) => setEmail(e.toLowerCase())}
+          onChange={(e) => setEmail(e.toLowerCase())}
-					placeholder="Enter email address"
+          placeholder="Enter email address"
-					defaultValue={email}
+          defaultValue={email}
-					required
+          required
-				/>
+        />
-			</div>
+      </div>
 
-			<div className="flex w-full gap-4">
+      <div className="flex w-full gap-4">
-				<Input
+        <Input
-					type="password"
+          type="password"
-					name="password"
+          name="password"
-					onChange={(e) => setPassword(e)}
+          onChange={(e) => setPassword(e)}
-					placeholder="Enter your password"
+          placeholder="Enter your password"
-					defaultValue={password}
+          defaultValue={password}
-					required
+          required
-				/>
+        />
-				<Input
+        <Input
-					type="password"
+          type="password"
-					name="confirmPassword"
+          name="confirmPassword"
-					onChange={(e) => setConfirmPassword(e)}
+          onChange={(e) => setConfirmPassword(e)}
-					placeholder="Confirm your password"
+          placeholder="Confirm your password"
-					defaultValue={confirmPassword}
+          defaultValue={confirmPassword}
-					required
+          required
-				/>
+        />
-			</div>
+      </div>
 
-			<Divider className="!my-2 w-full" />
+      <Divider className="!my-2 w-full" />
 
-			<div className="flex w-full gap-4">
+      <div className="flex w-full gap-4">
-				<Input
+        <Input
-					type="text"
+          type="text"
-					name="companyName"
+          name="companyName"
-					onChange={(e) => setCompanyName(e)}
+          onChange={(e) => setCompanyName(e)}
-					placeholder="Corporate name"
+          placeholder="Corporate name"
-					label="Corporate name"
+          label="Corporate name"
-					defaultValue={companyName}
+          defaultValue={companyName}
-					required
+          required
-				/>
+        />
-				<Input
+        <Input
-					type="number"
+          type="number"
-					name="companyUsers"
+          name="companyUsers"
-					onChange={(e) => setCompanyUsers(parseInt(e))}
+          onChange={(e) => setCompanyUsers(parseInt(e))}
-					label="Number of users"
+          label="Number of users"
-					defaultValue={companyUsers}
+          defaultValue={companyUsers}
-					required
+          required
-				/>
+        />
-			</div>
+      </div>
 
-			<div className="flex w-full gap-4">
+      <div className="flex w-full gap-4">
-				<div className="flex w-full flex-col gap-3">
+        <div className="flex w-full flex-col gap-3">
-					<label className="text-mti-gray-dim text-base font-normal">
+          <label className="text-mti-gray-dim text-base font-normal">
-						Referral *
+            Referral *
-					</label>
+          </label>
-					<Select
+          <Select
-						className="placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none disabled:cursor-not-allowed"
+            className="placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none disabled:cursor-not-allowed"
-						options={[
+            options={[
-							{ value: "", label: "No referral" },
+              { value: "", label: "No referral" },
-							...users
+              ...users.map((x) => ({
-								.filter((u) => u.type === "agent")
+                value: x.id,
-								.map((x) => ({ value: x.id, label: `${x.name} - ${x.email}` })),
+                label: `${x.name} - ${x.email}`,
-						]}
+              })),
-						defaultValue={{ value: "", label: "No referral" }}
+            ]}
-						onChange={(value) => setReferralAgent(value?.value)}
+            defaultValue={{ value: "", label: "No referral" }}
-						styles={{
+            onChange={(value) => setReferralAgent(value?.value)}
-							control: (styles) => ({
+            styles={{
-								...styles,
+              control: (styles) => ({
-								paddingLeft: "4px",
+                ...styles,
-								border: "none",
+                paddingLeft: "4px",
-								outline: "none",
+                border: "none",
-								":focus": {
+                outline: "none",
-									outline: "none",
+                ":focus": {
-								},
+                  outline: "none",
-							}),
+                },
-							option: (styles, state) => ({
+              }),
-								...styles,
+              option: (styles, state) => ({
-								backgroundColor: state.isFocused
+                ...styles,
-									? "#D5D9F0"
+                backgroundColor: state.isFocused
-									: state.isSelected
+                  ? "#D5D9F0"
-										? "#7872BF"
+                  : state.isSelected
-										: "white",
+                  ? "#7872BF"
-								color: state.isFocused ? "black" : styles.color,
+                  : "white",
-							}),
+                color: state.isFocused ? "black" : styles.color,
-						}}
+              }),
-					/>
+            }}
-				</div>
+          />
+        </div>
 
-				<div className="flex w-full flex-col gap-3">
+        <div className="flex w-full flex-col gap-3">
-					<label className="text-mti-gray-dim text-base font-normal">
+          <label className="text-mti-gray-dim text-base font-normal">
-						Subscription Duration *
+            Subscription Duration *
-					</label>
+          </label>
-					<Select
+          <Select
-						className="placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none disabled:cursor-not-allowed"
+            className="placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none disabled:cursor-not-allowed"
-						options={Object.keys(availableDurations).map((value) => ({
+            options={Object.keys(availableDurations).map((value) => ({
-							value,
+              value,
-							label:
+              label:
-								availableDurations[value as keyof typeof availableDurations]
+                availableDurations[value as keyof typeof availableDurations]
-									.label,
+                  .label,
-						}))}
+            }))}
-						defaultValue={{
+            defaultValue={{
-							value: "1_month",
+              value: "1_month",
-							label: availableDurations["1_month"].label,
+              label: availableDurations["1_month"].label,
-						}}
+            }}
-						onChange={(value) =>
+            onChange={(value) =>
-							setSubscriptionDuration(
+              setSubscriptionDuration(
-								value
+                value
-									? availableDurations[
+                  ? availableDurations[
-										value.value as keyof typeof availableDurations
+                      value.value as keyof typeof availableDurations
-									].number
+                    ].number
-									: 1,
+                  : 1
-							)
+              )
-						}
+            }
-						styles={{
+            styles={{
-							control: (styles) => ({
+              control: (styles) => ({
-								...styles,
+                ...styles,
-								paddingLeft: "4px",
+                paddingLeft: "4px",
-								border: "none",
+                border: "none",
-								outline: "none",
+                outline: "none",
-								":focus": {
+                ":focus": {
-									outline: "none",
+                  outline: "none",
-								},
+                },
-							}),
+              }),
-							option: (styles, state) => ({
+              option: (styles, state) => ({
-								...styles,
+                ...styles,
-								backgroundColor: state.isFocused
+                backgroundColor: state.isFocused
-									? "#D5D9F0"
+                  ? "#D5D9F0"
-									: state.isSelected
+                  : state.isSelected
-										? "#7872BF"
+                  ? "#7872BF"
-										: "white",
+                  : "white",
-								color: state.isFocused ? "black" : styles.color,
+                color: state.isFocused ? "black" : styles.color,
-							}),
+              }),
-						}}
+            }}
-					/>
+          />
-				</div>
+        </div>
-			</div>
+      </div>
-			<div className="flex w-full flex-col items-start gap-4">
+      <div className="flex w-full flex-col items-start gap-4">
-				{renderCheckbox()}
+        {renderCheckbox()}
-			</div>
+      </div>
-			<Button
+      <Button
-				className="w-full lg:mt-8"
+        className="w-full lg:mt-8"
-				color="purple"
+        color="purple"
-				disabled={
+        disabled={
-					isLoading ||
+          isLoading ||
-					!email ||
+          !email ||
-					!name ||
+          !name ||
-					!password ||
+          !password ||
-					!confirmPassword ||
+          !confirmPassword ||
-					password !== confirmPassword ||
+          password !== confirmPassword ||
-					!companyName ||
+          !companyName ||
-					companyUsers <= 0
+          companyUsers <= 0
-				}
+        }
-			>
+      >
-				Create account
+        Create account
-			</Button>
+      </Button>
-		</form>
+    </form>
-	);
+  );
 }

src/pages/api/approval-workflows/index.ts

@@ -19,5 +19,14 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
         return res.status(403).json({ ok: false });
     }
 
-    return res.status(200).json(await getApprovalWorkflows("active-workflows"));
+    const entityIdsString = req.query.entityIds as string;
-}
+
+    const entityIdsArray = entityIdsString.split(",");
+
+    if (!["admin", "developer"].includes(user.type)) {
+        // filtering workflows that have user as assignee in at least one of the steps
+        return res.status(200).json(await getApprovalWorkflows("active-workflows", entityIdsArray, undefined, user.id));
+    } else {
+        return res.status(200).json(await getApprovalWorkflows("active-workflows", entityIdsArray));
+    }
+}

src/pages/api/code/entities.ts

@@ -3,16 +3,8 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import client from "@/lib/mongodb";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import { Code, Group, Type } from "@/interfaces/user";
+import { Code, } from "@/interfaces/user";
-import { PERMISSIONS } from "@/constants/userPermissions";
-import { prepareMailer, prepareMailOptions } from "@/email";
-import { isAdmin } from "@/utils/users";
 import { requestUser } from "@/utils/api";
-import { doesEntityAllow } from "@/utils/permissions";
-import { getEntity, getEntityWithRoles } from "@/utils/entities.be";
-import { findBy } from "@/utils";
-import { EntityWithRoles } from "@/interfaces/entity";
-
 const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
@@ -30,7 +22,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
 	const { entities } = req.query as { entities?: string[] };
 	if (entities)
-		return res.status(200).json(await db.collection("codes").find<Code>({ entity: { $in: entities } }).toArray());
+		return res.status(200).json(await db.collection("codes").find<Code>({ entity: { $in: Array.isArray(entities) ? entities : [entities] } }).toArray());
 
 	return res.status(200).json(await db.collection("codes").find<Code>({}).toArray());
 }

src/pages/api/code/index.ts

@@ -32,6 +32,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	}
 
 	const { entity } = req.query as { entity?: string };
+
 	const snapshot = await db.collection("codes").find(entity ? { entity } : {}).toArray();
 
 	res.status(200).json(snapshot);

src/pages/api/exam/[module]/index.ts

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import { Module } from "@/interfaces";
-import { Exam, ExamBase, InstructorGender, Variant } from "@/interfaces/exam";
+import { Exam, ExamBase, InstructorGender, LevelExam, ListeningExam, ReadingExam, SpeakingExam, Variant } from "@/interfaces/exam";
-import { createApprovalWorkflowsOnExamCreation } from "@/lib/createWorkflowsOnExamCreation";
+import { createApprovalWorkflowOnExamCreation } from "@/lib/createWorkflowsOnExamCreation";
 import client from "@/lib/mongodb";
 import { sessionOptions } from "@/lib/session";
 import { mapBy } from "@/utils";
@@ -10,6 +10,8 @@ import { getApprovalWorkflowsByExamId, updateApprovalWorkflows } from "@/utils/a
 import { generateExamDifferences } from "@/utils/exam.differences";
 import { getExams } from "@/utils/exams.be";
 import { isAdmin } from "@/utils/users";
+import { uuidv4 } from "@firebase/util";
+import { access } from "fs";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -17,127 +19,161 @@ const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
-async function handler(req: NextApiRequest, res: NextApiResponse) {
+// Temporary: Adding UUID here but later move to backend.
-	if (req.method === "GET") return await GET(req, res);
+function addUUIDs(exam: ReadingExam | ListeningExam | LevelExam): ExamBase {
-	if (req.method === "POST") return await POST(req, res);
+    const arraysToUpdate = ["solutions", "words", "questions", "sentences", "options"];
 
-	res.status(404).json({ ok: false });
+    exam.parts = exam.parts.map((part) => {
+        const updatedExercises = part.exercises.map((exercise: any) => {
+            arraysToUpdate.forEach((arrayName) => {
+                if (exercise[arrayName] && Array.isArray(exercise[arrayName])) {
+                    exercise[arrayName] = exercise[arrayName].map((item: any) => (item.uuid ? item : { ...item, uuid: uuidv4() }));
+                }
+            });
+            return exercise;
+        });
+        return { ...part, exercises: updatedExercises };
+    });
+    return exam;
+}
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === "GET") return await GET(req, res);
+    if (req.method === "POST") return await POST(req, res);
+
+    res.status(404).json({ ok: false });
 }
 
 async function GET(req: NextApiRequest, res: NextApiResponse) {
-	if (!req.session.user) {
+    if (!req.session.user) {
-		res.status(401).json({ ok: false });
+        res.status(401).json({ ok: false });
-		return;
+        return;
-	}
+    }
 
-	const { module, avoidRepeated, variant, instructorGender } = req.query as {
+    const { module, avoidRepeated, variant, instructorGender } = req.query as {
-		module: Module;
+        module: Module;
-		avoidRepeated: string;
+        avoidRepeated: string;
-		variant?: Variant;
+        variant?: Variant;
-		instructorGender?: InstructorGender;
+        instructorGender?: InstructorGender;
-	};
+    };
 
-	const exams: Exam[] = await getExams(db, module, avoidRepeated, req.session.user.id, variant, instructorGender);
+    const exams: Exam[] = await getExams(db, module, avoidRepeated, req.session.user.id, variant, instructorGender);
-	res.status(200).json(exams);
+    res.status(200).json(exams);
 }
 
 async function POST(req: NextApiRequest, res: NextApiResponse) {
-	const user = await requestUser(req, res);
+    const user = await requestUser(req, res);
-	if (!user) return res.status(401).json({ ok: false });
+    if (!user) return res.status(401).json({ ok: false });
 
-	const { module } = req.query as { module: string };
+    const { module } = req.query as { module: string };
 
-	const session = client.startSession();
+    const session = client.startSession();
-	const entities = isAdmin(user) ? [] : mapBy(user.entities, "id"); // might need to change this with new approval workflows logic.. if an admin creates an exam no workflow is started because workflows must have entities configured.
+    const entities = isAdmin(user) ? [] : mapBy(user.entities, "id");
 
-	try {
+    try {
-		const exam = {
+        let exam = {
-			...req.body,
+            access: "public", // default access is public
-			module: module,
+            ...req.body,
-			entities,
+            module: module,
-			createdBy: user.id,
+            entities,
-			createdAt: new Date().toISOString(),
+            createdBy: user.id,
-		};
+            createdAt: new Date().toISOString(),
+        };
 
-		let responseStatus: number;
+		// Temporary: Adding UUID here but later move to backend.
-		let responseMessage: string;
+        exam = addUUIDs(exam);
 
-		await session.withTransaction(async () => {
+        let responseStatus: number;
-			const docSnap = await db.collection(module).findOne<ExamBase>({ id: req.body.id }, { session });
+        let responseMessage: string;
 
-			// Check whether the id of the exam matches another exam with different
+        await session.withTransaction(async () => {
-			// owners, throw exception if there is, else allow editing
+            const docSnap = await db.collection(module).findOne<ExamBase>({ id: req.body.id }, { session });
-			const existingExamOwners = docSnap?.owners ?? [];
-			const newExamOwners = exam.owners ?? [];
 
-			const ownersSet = new Set(existingExamOwners);
+            // Check whether the id of the exam matches another exam with different
+            // owners, throw exception if there is, else allow editing
+            const existingExamOwners = docSnap?.owners ?? [];
+            const newExamOwners = exam.owners ?? [];
 
-			if (docSnap !== null && (existingExamOwners.length !== newExamOwners.length || !newExamOwners.every((e: string) => ownersSet.has(e)))) {
+            const ownersSet = new Set(existingExamOwners);
-				throw new Error("Name already exists");
-			}
 
-			await db.collection(module).updateOne(
+            if (docSnap !== null && (existingExamOwners.length !== newExamOwners.length || !newExamOwners.every((e: string) => ownersSet.has(e)))) {
-				{ id: req.body.id },
+                throw new Error("Name already exists");
-				{ $set: { id: req.body.id, ...exam } },
+            }
-				{
-					upsert: true,
-					session,
-				}
-			);
 
-			// if it doesn't enter the next if condition it means the exam was updated and not created, so we can send this response.
+            if (exam.requiresApproval === true) {
-			responseStatus = 200;
+                exam.access = "confidential";
-			responseMessage = `Successfully updated exam with ID: "${exam.id}"`;
+            }
-			// TODO maybe find a way to start missing approval workflows in case they were only configured after exam creation.
 
-			// create workflow only if exam is being created for the first time
+            await db.collection(module).updateOne(
-			if (docSnap === null) {
+                { id: req.body.id },
-				try {
+                { $set: { id: req.body.id, ...exam } },
-					const { successCount, totalCount } = await createApprovalWorkflowsOnExamCreation(exam.createdBy, exam.entities, exam.id, module);
+                {
+                    upsert: true,
+                    session,
+                }
+            );
 
-					if (successCount === totalCount) {
+            // if it doesn't enter the next if condition it means the exam was updated and not created, so we can send this response.
-						responseStatus = 200;
+            responseStatus = 200;
-						responseMessage = `Successfully created exam "${exam.id}" and started its Approval Workflow(s)`;
+            responseMessage = `Successfully updated exam with ID: "${exam.id}"`;
-					} else if (successCount > 0) {
+
-						responseStatus = 207;
+            // create workflow only if exam is being created for the first time
-						responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to start/find an Approval Workflow for all the author's entities`;
+            if (docSnap === null) {
-					} else {
+                try {
-						responseStatus = 207;
+                    if (exam.requiresApproval === false) {
-						responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to find any configured Approval Workflow for the author.`;
+                        responseStatus = 200;
-					}
+                        responseMessage = `Successfully created exam "${exam.id}" and skipped Approval Workflow due to user request.`;
-				} catch (error) {
+                    } else if (isAdmin(user)) {
-					console.error("Workflow creation error:", error);
+                        responseStatus = 200;
-					responseStatus = 207;
+                        responseMessage = `Successfully created exam "${exam.id}" and skipped Approval Workflow due to admin rights.`;
-					responseMessage = `Successfully created exam with ID: "${exam.id}" but something went wrong while creating the Approval Workflow(s).`;
+                    } else {
-				}
+                        const { successCount, totalCount } = await createApprovalWorkflowOnExamCreation(exam.createdBy, exam.entities, exam.id, module);
-			} else { // if exam was updated, log the updates
+
-				const approvalWorkflows = await getApprovalWorkflowsByExamId(exam.id);
+                        if (successCount === totalCount) {
-				
+                            responseStatus = 200;
-				if (approvalWorkflows) {
+                            responseMessage = `Successfully created exam "${exam.id}" and started its Approval Workflow.`;
-					const differences = generateExamDifferences(docSnap as Exam, exam as Exam);
+                        } else if (successCount > 0) {
-					if (differences) {
+                            responseStatus = 207;
-						approvalWorkflows.forEach((workflow) => {
+                            responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to start/find an Approval Workflow for all the author's entities.`;
-							const currentStepIndex = workflow.steps.findIndex(step => !step.completed || step.rejected);
+                        } else {
-		
+                            responseStatus = 207;
-							if (workflow.steps[currentStepIndex].examChanges === undefined) {
+                            responseMessage = `Successfully created exam with ID: "${exam.id}" but skipping approval process because no approval workflow was found configured for the exam author.`;
-								workflow.steps[currentStepIndex].examChanges = [...differences];
+                        }
-							} else {
+                    }
-								workflow.steps[currentStepIndex].examChanges!.push(...differences);
+                } catch (error) {
-							}
+                    console.error("Workflow creation error:", error);
-						});
+                    responseStatus = 207;
-						await updateApprovalWorkflows("active-workflows", approvalWorkflows);
+                    responseMessage = `Successfully created exam with ID: "${exam.id}" but something went wrong while creating the Approval Workflow(s).`;
-					}
+                }
-				}
+            } else {
-			}
+                // if exam was updated, log the updates
-			
+                const approvalWorkflows = await getApprovalWorkflowsByExamId(exam.id);
-			res.status(responseStatus).json({
+
-				message: responseMessage,
+                if (approvalWorkflows) {
-			});
+                    const differences = generateExamDifferences(docSnap as Exam, exam as Exam);
-		});
+                    if (differences) {
-	} catch (error) {
+                        approvalWorkflows.forEach((workflow) => {
-		console.error("Transaction failed: ", error);
+                            const currentStepIndex = workflow.steps.findIndex((step) => !step.completed || step.rejected);
-		res.status(500).json({ ok: false, error: (error as any).message });
+
-	} finally {
+                            if (workflow.steps[currentStepIndex].examChanges === undefined) {
-		session.endSession();
+                                workflow.steps[currentStepIndex].examChanges = [...differences];
-	}
+                            } else {
+                                workflow.steps[currentStepIndex].examChanges!.push(...differences);
+                            }
+                        });
+                        await updateApprovalWorkflows("active-workflows", approvalWorkflows);
+                    }
+                }
+            }
+
+            res.status(responseStatus).json({
+                message: responseMessage,
+            });
+        });
+    } catch (error) {
+        console.error("Transaction failed: ", error);
+        res.status(500).json({ ok: false, error: (error as any).message });
+    } finally {
+        session.endSession();
+    }
 }

src/pages/api/exam/index.ts

@@ -1,11 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 import client from "@/lib/mongodb";
-import {withIronSessionApiRoute} from "iron-session/next";
+import { withIronSessionApiRoute } from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {flatten} from "lodash";
+import { flatten } from "lodash";
-import {Exam} from "@/interfaces/exam";
+import { AccessType, Exam } from "@/interfaces/exam";
-import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import { MODULE_ARRAY } from "@/utils/moduleUtils";
+import { requestUser } from "../../../utils/api";
+import { mapBy } from "../../../utils";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -14,17 +16,37 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (req.method === "GET") return await GET(req, res);
 
-	res.status(404).json({ok: false});
+	res.status(404).json({ ok: false });
 }
 
 async function GET(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
-		res.status(401).json({ok: false});
+		res.status(401).json({ ok: false });
 		return;
 	}
+	const user = await requestUser(req, res)
+	if (!user)
+		return res.status(401).json({ ok: false, reason: "You must be logged in!" })
+	const isAdmin = ["admin", "developer"].includes(user.type)
+	const { entities = [] } = req.query as { access?: AccessType, entities?: string[] | string };
+	let entitiesToFetch = Array.isArray(entities) ? entities : entities ? [entities] : []
+
+	if (!isAdmin) {
+		const userEntitiesIDs = mapBy(user.entities || [], 'id')
+		entitiesToFetch = entities ? entitiesToFetch.filter((entity): entity is string => entity ? userEntitiesIDs.includes(entity) : false) : userEntitiesIDs
+		if ((entitiesToFetch.length ?? 0) === 0) {
+			res.status(200).json([])
+			return
+		}
+	}
 
 	const moduleExamsPromises = MODULE_ARRAY.map(async (module) => {
-		const snapshot = await db.collection(module).find<Exam>({ isDiagnostic: false }).toArray();
+		const snapshot = await db.collection(module).find<Exam>({
+			isDiagnostic: false, ...(isAdmin && (entitiesToFetch.length ?? 0) === 0 ? {
+			} : {
+				entity: { $in: entitiesToFetch }
+			})
+		}).toArray();
 
 		return snapshot.map((doc) => ({
 			...doc,

src/pages/api/sessions/index.ts

@@ -48,4 +48,9 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 	await db.collection("sessions").updateOne({ id: session.id }, { $set: session }, { upsert: true });
 
 	res.status(200).json({ ok: true });
+	const sessions = await db.collection("sessions").find<Session>({ user: session.user }, { projection: { id: 1 } }).sort({ date: 1 }).toArray();
+	// Delete old sessions
+	if (sessions.length > 5) {
+		await db.collection("sessions").deleteOne({ id: { $in: sessions.slice(0, sessions.length - 5).map(x => x.id) } });
+	}
 }

src/pages/api/training/index.ts

@@ -25,8 +25,10 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
                 Authorization: `Bearer ${process.env.BACKEND_JWT}`,
             },
         });
+        console.log('response', response.data);
         res.status(response.status).json(response.data);
     } catch (error) {
+        console.error('Error fetching data:', error);
         res.status(500).json({ message: 'An unexpected error occurred' });
     }
 }

src/pages/approval-workflows/[id]/edit.tsx

@@ -73,13 +73,9 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
         }));
 
         const editableWorkflow: EditableApprovalWorkflow = {
+            ...workflow,
             id: workflow._id?.toString() ?? "",
-            name: workflow.name,
-            entityId: workflow.entityId,
             requester: user.id, // should it change to the editor?
-            startDate: workflow.startDate,
-            modules: workflow.modules,
-            status: workflow.status,
             steps: editableSteps,
         };
 

src/pages/approval-workflows/[id]/index.tsx

@@ -58,7 +58,13 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
     const allAssigneeIds: string[] = [
         ...new Set(
             workflow.steps
-                .map(step => step.assignees)
+                .map((step) => {
+                    const assignees = step.assignees;
+                    if (step.completedBy) {
+                        assignees.push(step.completedBy);
+                    }
+                    return assignees;
+                })
                 .flat()
         )
     ];
@@ -144,7 +150,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
     const handleApproveStep = () => {
         const isLastStep = (selectedStepIndex + 1 === currentWorkflow.steps.length);
         if (isLastStep) {
-            if (!confirm(`Are you sure you want to approve the last step? Doing so will approve the exam.`)) return;
+            if (!confirm(`Are you sure you want to approve the last step and complete the approval process?`)) return;
         }
 
         const updatedWorkflow: ApprovalWorkflow = {
@@ -186,7 +192,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
             const examId = currentWorkflow.examId;
 
             axios
-                .patch(`/api/exam/${examModule}/${examId}`, { isDiagnostic: false })
+                .patch(`/api/exam/${examModule}/${examId}`, { approved: true })
                 .then(() => toast.success(`The exam was successfuly approved and this workflow has been completed.`))
                 .catch((reason) => {
                     if (reason.response.status === 404) {
@@ -254,10 +260,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
         if (examModule && examId) {
             const exam = await getExamById(examModule, examId.trim());
             if (!exam) {
-                toast.error(
+                toast.error("Something went wrong while fetching exam!");
-                    "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
-                    { toastId: "invalid-exam-id" }
-                );
                 setViewExamIsLoading(false);
                 return;
             }
@@ -383,7 +386,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
             {/* Side panel */}
             <AnimatePresence mode="wait">
                 <LayoutGroup key="sidePanel">
-                    <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-[500px]' : 'w-0'}`}>
+                    <section className={`absolute inset-y-0 right-0 h-full overflow-y-auto bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-[500px]' : 'w-0'}`}>
                         {isPanelOpen && selectedStep && (
                             <motion.div
                                 className="p-6"
@@ -548,12 +551,16 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                                     transition={{ duration: 0.3 }}
                                                     className="overflow-hidden mt-2"
                                                 >
-                                                    <div className="p-3 border border-gray-300 rounded-xl bg-white bg-opacity-80 overflow-y-auto max-h-40">
+                                                    <div className="p-3 border border-gray-300 rounded-xl bg-white bg-opacity-80 overflow-y-auto max-h-[300px]">
                                                         {currentWorkflow.steps[selectedStepIndex].examChanges?.length ? (
                                                             currentWorkflow.steps[selectedStepIndex].examChanges!.map((change, index) => (
-                                                                <p key={index} className="text-sm text-gray-500 mb-2">
+                                                                <>
-                                                                    {change}
+                                                                    <p key={index} className="whitespace-pre-wrap text-sm text-gray-500 mb-2">
-                                                                </p>
+                                                                        <span className="text-mti-purple-light text-lg">{change.charAt(0)}</span>
+                                                                        {change.slice(1)}
+                                                                    </p>
+                                                                    <hr className="my-3 h-[3px] bg-mti-purple-light rounded-full w-full" />
+                                                                </>
                                                             ))
                                                         ) : (
                                                             <p className="text-normal text-opacity-70 text-gray-500">No changes made so far.</p>
@@ -570,7 +577,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                         value={comments}
                                         onChange={(e) => setComments(e.target.value)}
                                         placeholder="Input comments here"
-                                        className="w-full h-40 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
+                                        className="w-full h-[200px] p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
                                     />
 
                                     <Button

src/pages/approval-workflows/index.tsx

@@ -1,24 +1,22 @@
 import Tip from "@/components/ApprovalWorkflows/Tip";
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
-import { useAllowedEntities, useAllowedEntitiesSomePermissions, useEntityPermission } from "@/hooks/useEntityPermissions";
 import { Module, ModuleTypeLabels } from "@/interfaces";
 import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
-import { Entity, EntityWithRoles } from "@/interfaces/entity";
+import { EntityWithRoles } from "@/interfaces/entity";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { doesEntityAllow, findAllowedEntities } from "@/utils/permissions";
 import { isAdmin } from "@/utils/users";
 import { getSpecificUsers } from "@/utils/users.be";
-import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, getPaginationRowModel } from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
@@ -69,7 +67,11 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
 	if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) return redirect("/");
 
-	const workflows = await getApprovalWorkflows("active-workflows");
+	const entityIDS = mapBy(user.entities, "id");
+	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+	const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
+
+	const workflows = await getApprovalWorkflows("active-workflows", allowedEntities.map(entity => entity.id));
 
 	const allAssigneeIds: string[] = [
 		...new Set(
@@ -81,10 +83,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 		)
 	];
 
-	const entityIDS = mapBy(user.entities, "id");
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
-	const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
-
 	return {
 		props: serialize({
 			user,
@@ -103,7 +101,8 @@ interface Props {
 }
 
 export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
-	const { workflows, reload } = useApprovalWorkflows();
+	const entitiesString = userEntitiesWithLabel.map(entity => entity.id).join(",");
+	const { workflows, reload } = useApprovalWorkflows(entitiesString);
 	const currentWorkflows = workflows || initialWorkflows;
 
 	const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
@@ -191,7 +190,15 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 					{info.getValue().map((module: Module, index: number) => (
 						<span
 							key={index}
-							className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900">
+							/* className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900"> */
+							className={clsx("inline-block rounded-full px-3 py-1 text-sm font-medium text-white",
+								module === "speaking" ? "bg-ielts-speaking" :
+									module === "reading" ? "bg-ielts-reading" :
+										module === "writing" ? "bg-ielts-writing" :
+											module === "listening" ? "bg-ielts-listening" :
+												module === "level" ? "bg-ielts-level" :
+													"bg-slate-700"
+							)}>
 							{ModuleTypeLabels[module]}
 						</span>
 					))}
@@ -296,10 +303,20 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 		}),
 	];
 
+	const [pagination, setPagination] = useState({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+
 	const table = useReactTable({
 		data: filteredWorkflows,
 		columns: columns,
+		state: {
+			pagination,
+		},
+		onPaginationChange: setPagination,
 		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
 	});
 
 	return (
@@ -395,6 +412,43 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 						))}
 					</tbody>
 				</table>
+				<div className="mt-2 flex flex-row gap-2 w-full justify-end items-center">
+					<button
+						onClick={() => table.setPageIndex(0)}
+						disabled={!table.getCanPreviousPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{"<<"}
+					</button>
+					<button
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{"<"}
+					</button>
+					<span className="px-4 text-sm font-medium">
+						Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+					</span>
+					<button
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{">"}
+					</button>
+					<button
+						onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+						disabled={!table.getCanNextPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{">>"}
+					</button>
+				</div>
 			</div>
 		</>
 	);

src/pages/assignments/creator/[id].tsx

@@ -33,7 +33,6 @@ import moment from "moment";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { generate } from "random-words";
 import { useEffect, useMemo, useState } from "react";
 import ReactDatePicker from "react-datepicker";
 import {

src/pages/assignments/creator/index.tsx

@@ -63,26 +63,26 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
   const [users, groups] = await Promise.all([
     isAdmin(user)
       ? getUsers(
-          {},
+        {},
-          0,
+        0,
-          {},
+        {},
-          {
+        {
-            _id: 0,
-            id: 1,
-            type: 1,
-            name: 1,
-            email: 1,
-            levels: 1,
-          }
-        )
-      : getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
           _id: 0,
           id: 1,
           type: 1,
           name: 1,
           email: 1,
           levels: 1,
-        }),
+        }
+      )
+      : getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
+        _id: 0,
+        id: 1,
+        type: 1,
+        name: 1,
+        email: 1,
+        levels: 1,
+      }),
     isAdmin(user)
       ? getGroups()
       : getGroupsByEntities(mapBy(allowedEntities, "id")),
@@ -143,6 +143,9 @@ export default function AssignmentsPage({
   const [useRandomExams, setUseRandomExams] = useState(true);
   const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
 
+  const [showApprovedExams, setShowApprovedExams] = useState<boolean>(true);
+  const [showNonApprovedExams, setShowNonApprovedExams] = useState<boolean>(true);
+
   const { exams } = useExams();
   const router = useRouter();
 
@@ -326,7 +329,7 @@ export default function AssignmentsPage({
               onClick={
                 (!selectedModules.includes("level") &&
                   selectedModules.length === 0) ||
-                selectedModules.includes("level")
+                  selectedModules.includes("level")
                   ? () => toggleModule("level")
                   : undefined
               }
@@ -501,37 +504,64 @@ export default function AssignmentsPage({
                 Random Exams
               </Checkbox>
               {!useRandomExams && (
-                <div className="grid md:grid-cols-2 w-full gap-4">
+                <>
-                  {selectedModules.map((module) => (
+                  <Checkbox
-                    <div key={module} className="flex flex-col gap-3 w-full">
+                    isChecked={showApprovedExams}
-                      <label className="font-normal text-base text-mti-gray-dim">
+                    onChange={() => {
-                        {capitalize(module)} Exam
+                      setShowApprovedExams((prev) => !prev)
-                      </label>
+                    }}
-                      <Select
+                  >
-                        value={{
+                    Show approved exams
-                          value:
+                  </Checkbox>
-                            examIDs.find((e) => e.module === module)?.id ||
+                  <Checkbox
-                            null,
+                    isChecked={showNonApprovedExams}
-                          label:
+                    onChange={() => {
-                            examIDs.find((e) => e.module === module)?.id || "",
+                      setShowNonApprovedExams((prev) => !prev)
-                        }}
+                    }}
-                        onChange={(value) =>
+                  >
-                          value
+                    Show non-approved exams
-                            ? setExamIDs((prev) => [
+                  </Checkbox>
+                  <div className="grid md:grid-cols-2 w-full gap-4">
+                    {selectedModules.map((module) => (
+                      <div key={module} className="flex flex-col gap-3 w-full">
+                        <label className="font-normal text-base text-mti-gray-dim">
+                          {capitalize(module)} Exam
+                        </label>
+                        <Select
+                          isClearable
+                          value={{
+                            value:
+                              examIDs.find((e) => e.module === module)?.id ||
+                              null,
+                            label:
+                              examIDs.find((e) => e.module === module)?.id || "",
+                          }}
+                          onChange={(value) =>
+                            value
+                              ? setExamIDs((prev) => [
                                 ...prev.filter((x) => x.module !== module),
                                 { id: value.value!, module },
                               ])
-                            : setExamIDs((prev) =>
+                              : setExamIDs((prev) =>
                                 prev.filter((x) => x.module !== module)
                               )
-                        }
+                          }
-                        options={exams
+                          options={exams
-                          .filter((x) => !x.isDiagnostic && x.module === module)
+                            .filter((x) =>
-                          .map((x) => ({ value: x.id, label: x.id }))}
+                              !x.isDiagnostic &&
-                      />
+                              x.module === module &&
-                    </div>
+                              x.access !== "confidential" &&
-                  ))}
+                              (
-                </div>
+                                (x.requiresApproval && showApprovedExams) ||
+                                (!x.requiresApproval && showNonApprovedExams)
+                              )
+                            )
+                            .map((x) => ({ value: x.id, label: x.id }))}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </>
               )}
             </div>
           )}
@@ -568,7 +598,7 @@ export default function AssignmentsPage({
                     users
                       .filter((u) => g.participants.includes(u.id))
                       .every((u) => assignees.includes(u.id)) &&
-                      "!bg-mti-purple-light !text-white"
+                    "!bg-mti-purple-light !text-white"
                   )}
                 >
                   {g.name}
@@ -653,7 +683,7 @@ export default function AssignmentsPage({
                       users
                         .filter((u) => g.participants.includes(u.id))
                         .every((u) => teachers.includes(u.id)) &&
-                        "!bg-mti-purple-light !text-white"
+                      "!bg-mti-purple-light !text-white"
                     )}
                   >
                     {g.name}

src/pages/classrooms/[id].tsx

@@ -159,6 +159,21 @@ export default function Home({ user, group, users, entity }: Props) {
       prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
     );
 
+  const toggleAllUsersInList = () =>
+    setSelectedUsers((prev) =>
+      prev.length === rows.length
+        ? []
+        : [
+            ...prev,
+            ...items.reduce((acc, i) => {
+              if (!prev.find((item) => item === i.id)) {
+                (acc as string[]).push(i.id);
+              }
+              return acc;
+            }, [] as string[]),
+          ]
+    );
+
   const removeParticipants = () => {
     if (selectedUsers.length === 0) return;
     if (!canRemoveParticipants) return;
@@ -428,6 +443,25 @@ export default function Home({ user, group, users, entity }: Props) {
                   {capitalize(type)}
                 </button>
               ))}
+              <button
+                onClick={() => {
+                  toggleAllUsersInList();
+                }}
+                disabled={rows.length === 0}
+                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",
+                  "disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
+                  (isAdding ? nonParticipantUsers : group.participants)
+                    .length === selectedUsers.length &&
+                    "!bg-mti-purple-light !text-white"
+                )}
+              >
+                {"De/Select All"}
+              </button>
+              <span className="opacity-80">
+                {selectedUsers.length} selected
+              </span>
             </div>
           </section>
 

src/pages/dashboard/mastercorporate.tsx

@@ -1,269 +1,216 @@
 /* eslint-disable @next/next/no-img-element */
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
-import { useAllowedEntities } from "@/hooks/useEntityPermissions";
+import {useAllowedEntities} from "@/hooks/useEntityPermissions";
-import { EntityWithRoles } from "@/interfaces/entity";
+import {EntityWithRoles} from "@/interfaces/entity";
-import { Stat, StudentUser, Type, User } from "@/interfaces/user";
+import {Stat, StudentUser, Type, User} from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
+import {sessionOptions} from "@/lib/session";
-import { filterBy, mapBy, redirect, serialize } from "@/utils";
+import {filterBy, mapBy, redirect, serialize} from "@/utils";
-import { requestUser } from "@/utils/api";
+import {requestUser} from "@/utils/api";
-import { countEntitiesAssignments } from "@/utils/assignments.be";
+import {countEntitiesAssignments} from "@/utils/assignments.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
-import { countGroupsByEntities } from "@/utils/groups.be";
+import {countGroupsByEntities} from "@/utils/groups.be";
-import {
+import {checkAccess, groupAllowedEntitiesByPermissions} from "@/utils/permissions";
-  checkAccess,
+import {groupByExam} from "@/utils/stats";
-  groupAllowedEntitiesByPermissions,
+import {countAllowedUsers, getUsers} from "@/utils/users.be";
-} from "@/utils/permissions";
+import {clsx} from "clsx";
-import { groupByExam } from "@/utils/stats";
+import {withIronSessionSsr} from "iron-session/next";
-import { countAllowedUsers, getUsers } from "@/utils/users.be";
-import { clsx } from "clsx";
-import { withIronSessionSsr } from "iron-session/next";
 import moment from "moment";
 import Head from "next/head";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
-import { useMemo } from "react";
+import {useMemo} from "react";
-import {
+import {BsBank, BsClock, BsEnvelopePaper, BsPencilSquare, BsPeople, BsPeopleFill, BsPersonFill, BsPersonFillGear} from "react-icons/bs";
-  BsBank,
+import {ToastContainer} from "react-toastify";
-  BsClock,
+import {isAdmin} from "@/utils/users";
-  BsEnvelopePaper,
-  BsPencilSquare,
-  BsPeople,
-  BsPeopleFill,
-  BsPersonFill,
-  BsPersonFillGear,
-} from "react-icons/bs";
-import { ToastContainer } from "react-toastify";
-import { isAdmin } from "@/utils/users";
 
 interface Props {
-  user: User;
+	user: User;
-  students: StudentUser[];
+	students: StudentUser[];
-  latestStudents: User[];
+	latestStudents: User[];
-  latestTeachers: User[];
+	latestTeachers: User[];
-  userCounts: { [key in Type]: number };
+	userCounts: {[key in Type]: number};
-  entities: EntityWithRoles[];
+	entities: EntityWithRoles[];
-  assignmentsCount: number;
+	assignmentsCount: number;
-  stats: Stat[];
+	stats: Stat[];
-  groupsCount: number;
+	groupsCount: number;
 }
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
-  const user = await requestUser(req, res);
+	const user = await requestUser(req, res);
-  if (!user || !user.isVerified) return redirect("/login");
+	if (!user || !user.isVerified) return redirect("/login");
 
-  if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
+	if (!checkAccess(user, ["admin", "developer", "mastercorporate"])) return redirect("/");
-    return redirect("/");
 
-  const entityIDS = mapBy(user.entities, "id") || [];
+	const entityIDS = mapBy(user.entities, "id") || [];
-  const entities = await getEntitiesWithRoles(
+	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
-    isAdmin(user) ? undefined : entityIDS
+	const {["view_students"]: allowedStudentEntities, ["view_teachers"]: allowedTeacherEntities} = groupAllowedEntitiesByPermissions(user, entities, [
-  );
+		"view_students",
-  const {
+		"view_teachers",
-    ["view_students"]: allowedStudentEntities,
+	]);
-    ["view_teachers"]: allowedTeacherEntities,
-  } = groupAllowedEntitiesByPermissions(user, entities, [
-    "view_students",
-    "view_teachers",
-  ]);
 
-  const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
+	const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
 
-  const entitiesIDS = mapBy(entities, "id") || [];
+	const entitiesIDS = mapBy(entities, "id") || [];
 
-  const [
+	const [students, latestStudents, latestTeachers, userCounts, assignmentsCount, groupsCount] = await Promise.all([
-    students,
+		getUsers(
-    latestStudents,
+			{type: "student", "entities.id": {$in: allowedStudentEntitiesIDS}},
-    latestTeachers,
+			10,
-    userCounts,
+			{averageLevel: -1},
-    assignmentsCount,
+			{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
-    groupsCount,
+		),
-  ] = await Promise.all([
+		getUsers(
-    getUsers(
+			{type: "student", "entities.id": {$in: allowedStudentEntitiesIDS}},
-      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+			10,
-      10,
+			{registrationDate: -1},
-      { averageLevel: -1 },
+			{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
-      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+		),
-    ),
+		getUsers(
-    getUsers(
+			{
-      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+				type: "teacher",
-      10,
+				"entities.id": {$in: mapBy(allowedTeacherEntities, "id")},
-      { registrationDate: -1 },
+			},
-      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+			10,
-    ),
+			{registrationDate: -1},
-    getUsers(
+			{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
-      {
+		),
-        type: "teacher",
+		countAllowedUsers(user, entities),
-        "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
+		countEntitiesAssignments(entitiesIDS, {archived: {$ne: true}}),
-      },
+		countGroupsByEntities(entitiesIDS),
-      10,
+	]);
-      { registrationDate: -1 },
-      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
-    ),
-    countAllowedUsers(user, entities),
-    countEntitiesAssignments(entitiesIDS, { archived: { $ne: true } }),
-    countGroupsByEntities(entitiesIDS),
-  ]);
 
-  return {
+	return {
-    props: serialize({
+		props: serialize({
-      user,
+			user,
-      students,
+			students,
-      latestStudents,
+			latestStudents,
-      latestTeachers,
+			latestTeachers,
-      userCounts,
+			userCounts,
-      entities,
+			entities,
-      assignmentsCount,
+			assignmentsCount,
-      groupsCount,
+			groupsCount,
-    }),
+		}),
-  };
+	};
 }, sessionOptions);
 
 export default function Dashboard({
-  user,
+	user,
-  students,
+	students,
-  latestStudents,
+	latestStudents,
-  latestTeachers,
+	latestTeachers,
-  userCounts,
+	userCounts,
-  entities,
+	entities,
-  assignmentsCount,
+	assignmentsCount,
-  stats = [],
+	stats = [],
-  groupsCount,
+	groupsCount,
 }: Props) {
-  
+	const totalCount = useMemo(() => userCounts.corporate + userCounts.mastercorporate + userCounts.student + userCounts.teacher, [userCounts]);
-  const totalCount = useMemo(
-    () =>
-      userCounts.corporate +
-      userCounts.mastercorporate +
-      userCounts.student +
-      userCounts.teacher,
-    [userCounts]
-  );
 
-  const totalLicenses = useMemo(
+	const totalLicenses = useMemo(() => entities.reduce((acc, curr) => acc + parseInt(curr.licenses.toString()), 0), [entities]);
-    () =>
-      entities.reduce(
-        (acc, curr) => acc + parseInt(curr.licenses.toString()),
-        0
-      ),
-    [entities]
-  );
 
-  const router = useRouter();
+	const router = useRouter();
 
-  const allowedEntityStatistics = useAllowedEntities(
+	const allowedEntityStatistics = useAllowedEntities(user, entities, "view_entity_statistics");
-    user,
+	const allowedStudentPerformance = useAllowedEntities(user, entities, "view_student_performance");
-    entities,
-    "view_entity_statistics"
-  );
-  const allowedStudentPerformance = useAllowedEntities(
-    user,
-    entities,
-    "view_student_performance"
-  );
 
-  return (
+	return (
-    <>
+		<>
-      <Head>
+			<Head>
-        <title>EnCoach</title>
+				<title>EnCoach</title>
-        <meta
+				<meta
-          name="description"
+					name="description"
-          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-        />
+				/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+				<link rel="icon" href="/favicon.ico" />
-      </Head>
+			</Head>
-      <ToastContainer />
+			<ToastContainer />
-      <>
+			<>
-        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-          <IconCard
+					<IconCard
-            onClick={() => router.push("/users?type=student")}
+						onClick={() => router.push("/users?type=student")}
-            Icon={BsPersonFill}
+						Icon={BsPersonFill}
-            label="Students"
+						label="Students"
-            value={userCounts.student}
+						value={userCounts.student}
-            color="purple"
+						color="purple"
-          />
+					/>
-          <IconCard
+					<IconCard
-            onClick={() => router.push("/users?type=teacher")}
+						onClick={() => router.push("/users?type=teacher")}
-            Icon={BsPencilSquare}
+						Icon={BsPencilSquare}
-            label="Teachers"
+						label="Teachers"
-            value={userCounts.teacher}
+						value={userCounts.teacher}
-            color="purple"
+						color="purple"
-          />
+					/>
-          <IconCard
+					<IconCard
-            onClick={() => router.push("/users?type=corporate")}
+						onClick={() => router.push("/users?type=corporate")}
-            Icon={BsBank}
+						Icon={BsBank}
-            label="Corporate Accounts"
+						label="Corporate Accounts"
-            value={userCounts.corporate}
+						value={userCounts.corporate}
-            color="purple"
+						color="purple"
-          />
+					/>
-          <IconCard
+					<IconCard
-            Icon={BsPeople}
+						Icon={BsBank}
-            onClick={() => router.push("/classrooms")}
+						onClick={() => router.push("/users?type=mastercorporate")}
-            label="Classrooms"
+						label="Master Corporates"
-            value={groupsCount}
+						value={userCounts.mastercorporate}
-            color="purple"
+						color="purple"
-          />
+					/>
-          <IconCard
+					<IconCard Icon={BsPeople} onClick={() => router.push("/classrooms")} label="Classrooms" value={groupsCount} color="purple" />
-            Icon={BsPeopleFill}
+					<IconCard
-            onClick={() => router.push("/entities")}
+						Icon={BsPeopleFill}
-            label="Entities"
+						onClick={() => router.push("/entities")}
-            value={`${entities.length} - ${totalCount}/${totalLicenses}`}
+						label="Entities"
-            color="purple"
+						value={`${entities.length} - ${totalCount}/${totalLicenses}`}
-          />
+						color="purple"
-          {allowedStudentPerformance.length > 0 && (
+					/>
-            <IconCard
+					{allowedStudentPerformance.length > 0 && (
-              Icon={BsPersonFillGear}
+						<IconCard
-              onClick={() => router.push("/users/performance")}
+							Icon={BsPersonFillGear}
-              label="Student Performance"
+							onClick={() => router.push("/users/performance")}
-              value={userCounts.student}
+							label="Student Performance"
-              color="purple"
+							value={userCounts.student}
-            />
+							color="purple"
-          )}
+						/>
-          {allowedEntityStatistics.length > 0 && (
+					)}
-            <IconCard
+					{allowedEntityStatistics.length > 0 && (
-              Icon={BsPersonFillGear}
+						<IconCard
-              onClick={() => router.push("/statistical")}
+							Icon={BsPersonFillGear}
-              label="Entity Statistics"
+							onClick={() => router.push("/statistical")}
-              value={allowedEntityStatistics.length}
+							label="Entity Statistics"
-              color="purple"
+							value={allowedEntityStatistics.length}
-            />
+							color="purple"
-          )}
+						/>
-          <IconCard
+					)}
-            Icon={BsEnvelopePaper}
+					<IconCard
-            onClick={() => router.push("/assignments")}
+						Icon={BsEnvelopePaper}
-            label="Assignments"
+						onClick={() => router.push("/assignments")}
-            value={assignmentsCount}
+						label="Assignments"
-            className={clsx(
+						value={assignmentsCount}
-              allowedEntityStatistics.length === 0 && "col-span-2"
+						className={clsx(allowedEntityStatistics.length === 0 && "col-span-2")}
-            )}
+						color="purple"
-            color="purple"
+					/>
-          />
+					<IconCard
-          <IconCard
+						Icon={BsClock}
-            Icon={BsClock}
+						label="Expiration Date"
-            label="Expiration Date"
+						value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-            value={
+						color="rose"
-              user.subscriptionExpirationDate
+					/>
-                ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
+				</section>
-                : "Unlimited"
-            }
-            color="rose"
-          />
-        </section>
 
-        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-          <UserDisplayList users={latestStudents} title="Latest Students" />
+					<UserDisplayList users={latestStudents} title="Latest Students" />
-          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+					<UserDisplayList users={latestTeachers} title="Latest Teachers" />
-          <UserDisplayList users={students} title="Highest level students" />
+					<UserDisplayList users={students} title="Highest level students" />
-          <UserDisplayList
+					<UserDisplayList
-            users={students.sort(
+						users={students.sort(
-              (a, b) =>
+							(a, b) =>
-                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+								Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+								Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-            )}
+						)}
-            title="Highest exam count students"
+						title="Highest exam count students"
-          />
+					/>
-        </section>
+				</section>
-      </>
+			</>
-    </>
+		</>
-  );
+	);
 }

src/pages/entities/[id]/roles/[role].tsx

@@ -63,6 +63,9 @@ const EXAM_MANAGEMENT: PermissionLayout[] = [
 	{label: "Generate Level", key: "generate_level"},
 	{label: "Delete Level", key: "delete_level"},
 	{label: "Set as Private/Public", key: "update_exam_privacy"},
+	{label: "View Confidential Exams", key: "view_confidential_exams"},
+	{label: "Create Confidential Exams", key: "create_confidential_exams"},
+	{label: "Create Public Exams", key: "create_public_exams"},
 	{label: "View Statistics", key: "view_statistics"},
 ];
 

src/pages/entities/create.tsx

@@ -70,7 +70,7 @@ export default function Home({ user, users }: Props) {
   const [licenses, setLicenses] = useState(0);
 
   const { rows, renderSearch } = useListSearch<User>(
-    [["name"], ["corporateInformation", "companyInformation", "name"]],
+    [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]],
     users
   );
   const { items, renderMinimal } = usePagination<User>(rows, 16);

src/pages/generation.tsx

@@ -1,250 +1,325 @@
 /* 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 {ToastContainer} from "react-toastify";
+import { ToastContainer } from "react-toastify";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import {Radio, RadioGroup} from "@headlessui/react";
+import { Radio, RadioGroup } from "@headlessui/react";
 import clsx from "clsx";
-import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import { MODULE_ARRAY } from "@/utils/moduleUtils";
-import {capitalize} from "lodash";
+import { capitalize } from "lodash";
 import Input from "@/components/Low/Input";
-import {findAllowedEntities} from "@/utils/permissions";
+import {
-import {User} from "@/interfaces/user";
+  findAllowedEntities,
+  findAllowedEntitiesSomePermissions,
+  groupAllowedEntitiesByPermissions,
+} from "@/utils/permissions";
+import { User } from "@/interfaces/user";
 import useExamEditorStore from "@/stores/examEditor";
 import ExamEditorStore from "@/stores/examEditor/types";
 import ExamEditor from "@/components/ExamEditor";
-import {mapBy, redirect, serialize} from "@/utils";
+import { mapBy, redirect, serialize } from "@/utils";
-import {requestUser} from "@/utils/api";
+import { requestUser } from "@/utils/api";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {getExam} from "@/utils/exams.be";
+import { getExam } from "@/utils/exams.be";
-import {Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise} from "@/interfaces/exam";
+import {
-import {useEffect, useState} from "react";
+  Exam,
-import {getEntitiesWithRoles} from "@/utils/entities.be";
+  Exercise,
-import {isAdmin} from "@/utils/users";
+  InteractiveSpeakingExercise,
+  ListeningPart,
+  SpeakingExercise,
+} from "@/interfaces/exam";
+import { useEffect, useState } from "react";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { isAdmin } from "@/utils/users";
 import axios from "axios";
-import {EntityWithRoles} from "@/interfaces/entity";
+import { EntityWithRoles } from "@/interfaces/entity";
 
-type Permission = {[key in Module]: boolean};
+type Permission = { [key in Module]: boolean };
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) => {
+export const getServerSideProps = withIronSessionSsr(
-	const user = await requestUser(req, res);
+  async ({ req, res, query }) => {
-	if (!user) return redirect("/login");
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/");
+    if (shouldRedirectHome(user)) return redirect("/");
 
-	const entityIDs = mapBy(user.entities, "id");
+    const entityIDs = mapBy(user.entities, "id");
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs);
 
-	const permissions: Permission = {
+    const entities = await getEntitiesWithRoles(
-		reading: findAllowedEntities(user, entities, `generate_reading`).length > 0,
+      isAdmin(user) ? undefined : entityIDs
-		listening: findAllowedEntities(user, entities, `generate_listening`).length > 0,
+    );
-		writing: findAllowedEntities(user, entities, `generate_writing`).length > 0,
-		speaking: findAllowedEntities(user, entities, `generate_speaking`).length > 0,
-		level: findAllowedEntities(user, entities, `generate_level`).length > 0,
-	};
 
-	const entitiesAllowEditPrivacy = findAllowedEntities(user, entities, "update_exam_privacy");
+    const generatePermissions = groupAllowedEntitiesByPermissions(
-	console.log(entitiesAllowEditPrivacy);
+      user,
+      entities,
+      [
+        "generate_reading",
+        "generate_listening",
+        "generate_writing",
+        "generate_speaking",
+        "generate_level",
+      ]
+    );
 
-	if (Object.keys(permissions).every((p) => !permissions[p as Module])) return redirect("/");
+    const permissions: Permission = {
+      reading: generatePermissions["generate_reading"].length > 0,
+      listening: generatePermissions["generate_listening"].length > 0,
+      writing: generatePermissions["generate_writing"].length > 0,
+      speaking: generatePermissions["generate_speaking"].length > 0,
+      level: generatePermissions["generate_level"].length > 0,
+    };
 
-	const {id, module: examModule} = query as {id?: string; module?: Module};
+    const {
-	if (!id || !examModule) return {props: serialize({user, permissions})};
+      ["update_exam_privacy"]: entitiesAllowEditPrivacy,
+      ["create_confidential_exams"]: entitiesAllowConfExams,
+      ["create_public_exams"]: entitiesAllowPublicExams,
+    } = groupAllowedEntitiesByPermissions(user, entities, [
+      "update_exam_privacy",
+      "create_confidential_exams",
+      "create_public_exams",
+    ]);
 
-	//if (!permissions[module]) return redirect("/generation")
+    if (Object.keys(permissions).every((p) => !permissions[p as Module]))
+      return redirect("/");
 
-	const exam = await getExam(examModule, id);
+    const { id, module: examModule } = query as {
-	if (!exam) return redirect("/generation");
+      id?: string;
+      module?: Module;
+    };
+    if (!id || !examModule) return { props: serialize({ user, permissions }) };
 
-	return {
+    //if (!permissions[module]) return redirect("/generation")
-		props: serialize({id, user, exam, examModule, permissions, entitiesAllowEditPrivacy}),
+
-	};
+    const exam = await getExam(examModule, id);
-}, sessionOptions);
+    if (!exam) return redirect("/generation");
+
+    return {
+      props: serialize({
+        id,
+        user,
+        exam,
+        examModule,
+        permissions,
+        entitiesAllowEditPrivacy,
+        entitiesAllowConfExams,
+        entitiesAllowPublicExams,
+      }),
+    };
+  },
+  sessionOptions
+);
 
 export default function Generation({
-	id,
+  id,
-	user,
+  user,
-	exam,
+  exam,
-	examModule,
+  examModule,
-	permissions,
+  permissions,
-	entitiesAllowEditPrivacy,
+  entitiesAllowEditPrivacy,
+  entitiesAllowConfExams,
+  entitiesAllowPublicExams,
 }: {
-	id: string;
+  id: string;
-	user: User;
+  user: User;
-	exam?: Exam;
+  exam?: Exam;
-	examModule?: Module;
+  examModule?: Module;
-	permissions: Permission;
+  permissions: Permission;
-	entitiesAllowEditPrivacy: EntityWithRoles[];
+  entitiesAllowEditPrivacy: EntityWithRoles[];
+  entitiesAllowPublicExams: EntityWithRoles[];
+  entitiesAllowConfExams: EntityWithRoles[];
 }) {
-	const {title, currentModule, modules, dispatch} = useExamEditorStore();
+  const { title, currentModule, modules, dispatch } = useExamEditorStore();
-	const [examLevelParts, setExamLevelParts] = useState<number | undefined>(undefined);
+  const [examLevelParts, setExamLevelParts] = useState<number | undefined>(
+    undefined
+  );
 
-	const updateRoot = (updates: Partial<ExamEditorStore>) => {
+  const updateRoot = (updates: Partial<ExamEditorStore>) => {
-		dispatch({type: "UPDATE_ROOT", payload: {updates}});
+    dispatch({ type: "UPDATE_ROOT", payload: { updates } });
-	};
+  };
 
-	useEffect(() => {
+  useEffect(() => {
-		if (id && exam && examModule) {
+    if (id && exam && examModule) {
-			if (examModule === "level" && exam.module === "level") {
+      if (examModule === "level" && exam.module === "level") {
-				setExamLevelParts(exam.parts.length);
+        setExamLevelParts(exam.parts.length);
-			}
+      }
-			updateRoot({currentModule: examModule});
+      updateRoot({ currentModule: examModule });
-			dispatch({type: "INIT_EXAM_EDIT", payload: {exam, id, examModule}});
+      dispatch({ type: "INIT_EXAM_EDIT", payload: { exam, id, examModule } });
-		}
+    }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [id, exam, module]);
+  }, [id, exam, module]);
 
-	useEffect(() => {
+  useEffect(() => {
-		const fetchAvatars = async () => {
+    const fetchAvatars = async () => {
-			const response = await axios.get("/api/exam/avatars");
+      const response = await axios.get("/api/exam/avatars");
-			updateRoot({speakingAvatars: response.data});
+      updateRoot({ speakingAvatars: response.data });
-		};
+    };
 
-		fetchAvatars();
+    fetchAvatars();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+  }, []);
 
-	// media cleanup on unmount
+  // media cleanup on unmount
-	useEffect(() => {
+  useEffect(() => {
-		return () => {
+    return () => {
-			const state = modules;
+      const state = modules;
 
-			if (state.writing.academic_url) {
+      if (state.writing.academic_url) {
-				URL.revokeObjectURL(state.writing.academic_url);
+        URL.revokeObjectURL(state.writing.academic_url);
-			}
+      }
 
-			state.listening.sections.forEach((section) => {
+      state.listening.sections.forEach((section) => {
-				const listeningPart = section.state as ListeningPart;
+        const listeningPart = section.state as ListeningPart;
-				if (listeningPart.audio?.source) {
+        if (listeningPart.audio?.source) {
-					URL.revokeObjectURL(listeningPart.audio.source);
+          URL.revokeObjectURL(listeningPart.audio.source);
-					dispatch({
+          dispatch({
-						type: "UPDATE_SECTION_SINGLE_FIELD",
+            type: "UPDATE_SECTION_SINGLE_FIELD",
-						payload: {
+            payload: {
-							sectionId: section.sectionId,
+              sectionId: section.sectionId,
-							module: "listening",
+              module: "listening",
-							field: "state",
+              field: "state",
-							value: {...listeningPart, audio: undefined},
+              value: { ...listeningPart, audio: undefined },
-						},
+            },
-					});
+          });
-				}
+        }
-			});
+      });
 
-			if (state.listening.instructionsState.customInstructionsURL.startsWith("blob:")) {
+      if (
-				URL.revokeObjectURL(state.listening.instructionsState.customInstructionsURL);
+        state.listening.instructionsState.customInstructionsURL.startsWith(
-			}
+          "blob:"
+        )
+      ) {
+        URL.revokeObjectURL(
+          state.listening.instructionsState.customInstructionsURL
+        );
+      }
 
-			state.speaking.sections.forEach((section) => {
+      state.speaking.sections.forEach((section) => {
-				const sectionState = section.state as Exercise;
+        const sectionState = section.state as Exercise;
-				if (sectionState.type === "speaking") {
+        if (sectionState.type === "speaking") {
-					const speakingExercise = sectionState as SpeakingExercise;
+          const speakingExercise = sectionState as SpeakingExercise;
-					URL.revokeObjectURL(speakingExercise.video_url);
+          URL.revokeObjectURL(speakingExercise.video_url);
-					dispatch({
+          dispatch({
-						type: "UPDATE_SECTION_SINGLE_FIELD",
+            type: "UPDATE_SECTION_SINGLE_FIELD",
-						payload: {
+            payload: {
-							sectionId: section.sectionId,
+              sectionId: section.sectionId,
-							module: "listening",
+              module: "listening",
-							field: "state",
+              field: "state",
-							value: {...speakingExercise, video_url: undefined},
+              value: { ...speakingExercise, video_url: undefined },
-						},
+            },
-					});
+          });
-				}
+        }
-				if (sectionState.type === "interactiveSpeaking") {
+        if (sectionState.type === "interactiveSpeaking") {
-					const interactiveSpeaking = sectionState as InteractiveSpeakingExercise;
+          const interactiveSpeaking =
-					interactiveSpeaking.prompts.forEach((prompt) => {
+            sectionState as InteractiveSpeakingExercise;
-						URL.revokeObjectURL(prompt.video_url);
+          interactiveSpeaking.prompts.forEach((prompt) => {
-					});
+            URL.revokeObjectURL(prompt.video_url);
-					dispatch({
+          });
-						type: "UPDATE_SECTION_SINGLE_FIELD",
+          dispatch({
-						payload: {
+            type: "UPDATE_SECTION_SINGLE_FIELD",
-							sectionId: section.sectionId,
+            payload: {
-							module: "listening",
+              sectionId: section.sectionId,
-							field: "state",
+              module: "listening",
-							value: {
+              field: "state",
-								...interactiveSpeaking,
+              value: {
-								prompts: interactiveSpeaking.prompts.map((p) => ({...p, video_url: undefined})),
+                ...interactiveSpeaking,
-							},
+                prompts: interactiveSpeaking.prompts.map((p) => ({
-						},
+                  ...p,
-					});
+                  video_url: undefined,
-				}
+                })),
-			});
+              },
-			dispatch({type: "FULL_RESET"});
+            },
-		};
+          });
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+        }
-	}, []);
+      });
+      dispatch({ type: "FULL_RESET" });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-	return (
+  return (
-		<>
+    <>
-			<Head>
+      <Head>
-				<title>Exam Generation | EnCoach</title>
+        <title>Exam Generation | EnCoach</title>
-				<meta
+        <meta
-					name="description"
+          name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
+        />
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/favicon.ico" />
-			</Head>
+      </Head>
-			<ToastContainer />
+      <ToastContainer />
-			{user && (
+      {user && (
-				<>
+        <>
-					<h1 className="text-2xl font-semibold">Exam Editor</h1>
+          <h1 className="text-2xl font-semibold">Exam Editor</h1>
-					<div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-3">
-						<Input
+            <Input
-							type="text"
+              type="text"
-							placeholder="Insert a title here"
+              placeholder="Insert a title here"
-							name="title"
+              name="title"
-							label="Title"
+              label="Title"
-							onChange={(title) => updateRoot({title})}
+              onChange={(title) => updateRoot({ title })}
-							roundness="xl"
+              roundness="xl"
-							value={title}
+              value={title}
-							defaultValue={title}
+              defaultValue={title}
-							required
+              required
-						/>
+            />
-						<label className="font-normal text-base text-mti-gray-dim">Module</label>
+            <label className="font-normal text-base text-mti-gray-dim">
-						<RadioGroup
+              Module
-							value={currentModule}
+            </label>
-							onChange={(currentModule) => updateRoot({currentModule})}
+            <RadioGroup
-							className="flex flex-row flex-wrap w-full gap-4 -md:justify-center justify-between">
+              value={currentModule}
-							{[...MODULE_ARRAY]
+              onChange={(currentModule) => updateRoot({ currentModule })}
-								.filter((m) => permissions[m])
+              className="flex flex-row flex-wrap w-full gap-4 -md:justify-center justify-between"
-								.map((x) => (
+            >
-									<Radio value={x} key={x}>
+              {[...MODULE_ARRAY].reduce((acc, x) => {
-										{({checked}) => (
+                if (permissions[x])
-											<span
+                  acc.push(
-												className={clsx(
+                    <Radio value={x} key={x}>
-													"px-6 py-4 w-64 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                      {({ checked }) => (
-													"transition duration-300 ease-in-out",
+                        <span
-													x === "reading" &&
+                          className={clsx(
-														(!checked
+                            "px-6 py-4 w-64 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-															? "bg-white border-mti-gray-platinum"
+                            "transition duration-300 ease-in-out",
-															: "bg-ielts-reading/70 border-ielts-reading text-white"),
+                            x === "reading" &&
-													x === "listening" &&
+                              (!checked
-														(!checked
+                                ? "bg-white border-mti-gray-platinum"
-															? "bg-white border-mti-gray-platinum"
+                                : "bg-ielts-reading/70 border-ielts-reading text-white"),
-															: "bg-ielts-listening/70 border-ielts-listening text-white"),
+                            x === "listening" &&
-													x === "writing" &&
+                              (!checked
-														(!checked
+                                ? "bg-white border-mti-gray-platinum"
-															? "bg-white border-mti-gray-platinum"
+                                : "bg-ielts-listening/70 border-ielts-listening text-white"),
-															: "bg-ielts-writing/70 border-ielts-writing text-white"),
+                            x === "writing" &&
-													x === "speaking" &&
+                              (!checked
-														(!checked
+                                ? "bg-white border-mti-gray-platinum"
-															? "bg-white border-mti-gray-platinum"
+                                : "bg-ielts-writing/70 border-ielts-writing text-white"),
-															: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
+                            x === "speaking" &&
-													x === "level" &&
+                              (!checked
-														(!checked
+                                ? "bg-white border-mti-gray-platinum"
-															? "bg-white border-mti-gray-platinum"
+                                : "bg-ielts-speaking/70 border-ielts-speaking text-white"),
-															: "bg-ielts-level/70 border-ielts-level text-white"),
+                            x === "level" &&
-												)}>
+                              (!checked
-												{capitalize(x)}
+                                ? "bg-white border-mti-gray-platinum"
-											</span>
+                                : "bg-ielts-level/70 border-ielts-level text-white")
-										)}
+                          )}
-									</Radio>
+                        >
-								))}
+                          {capitalize(x)}
-						</RadioGroup>
+                        </span>
-					</div>
+                      )}
-					<ExamEditor levelParts={examLevelParts} entitiesAllowEditPrivacy={entitiesAllowEditPrivacy} />
+                    </Radio>
-				</>
+                  );
-			)}
+                return acc;
-		</>
+              }, [] as JSX.Element[])}
-	);
+            </RadioGroup>
+          </div>
+          <ExamEditor
+            levelParts={examLevelParts}
+            entitiesAllowEditPrivacy={entitiesAllowEditPrivacy}
+            entitiesAllowConfExams={entitiesAllowConfExams}
+            entitiesAllowPublicExams={entitiesAllowPublicExams}
+          />
+        </>
+      )}
+    </>
+  );
 }

src/pages/record.tsx

@@ -287,7 +287,7 @@ export default function History({
               list={filteredStats}
               renderCard={customContent}
               searchFields={[]}
-              pageSize={30}
+              pageSize={25}
               className="lg:!grid-cols-3"
             />
           )}

src/pages/settings.tsx

@@ -1,268 +1,201 @@
 /* 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 { ToastContainer } from "react-toastify";
+import {ToastContainer} from "react-toastify";
 import CodeGenerator from "./(admin)/CodeGenerator";
 import ExamLoader from "./(admin)/ExamLoader";
 import Lists from "./(admin)/Lists";
 import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import BatchCreateUser from "./(admin)/Lists/BatchCreateUser";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
-import { useState } from "react";
+import { useState} from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/components/IconCard";
-import {
+import {BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill} from "react-icons/bs";
-  BsCode,
-  BsCodeSquare,
-  BsGearFill,
-  BsPeopleFill,
-  BsPersonFill,
-} from "react-icons/bs";
 import UserCreator from "./(admin)/UserCreator";
 import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
-import { CEFR_STEPS } from "@/resources/grading";
+import {CEFR_STEPS} from "@/resources/grading";
-import { User } from "@/interfaces/user";
+import {User} from "@/interfaces/user";
-import { getUserPermissions } from "@/utils/permissions.be";
+import {getUserPermissions} from "@/utils/permissions.be";
-import { PermissionType } from "@/interfaces/permissions";
+import {PermissionType} from "@/interfaces/permissions";
-import { getUsers } from "@/utils/users.be";
+import {getUsers} from "@/utils/users.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
-import { mapBy, serialize, redirect } from "@/utils";
+import {mapBy, serialize, redirect, filterBy} from "@/utils";
-import { EntityWithRoles } from "@/interfaces/entity";
+import {EntityWithRoles} from "@/interfaces/entity";
-import { requestUser } from "@/utils/api";
+import {requestUser} from "@/utils/api";
-import { isAdmin } from "@/utils/users";
+import {isAdmin} from "@/utils/users";
-import {
+import {getGradingSystemByEntities, getGradingSystemByEntity} from "@/utils/grading.be";
-  getGradingSystemByEntities,
+import {Grading} from "@/interfaces";
-  getGradingSystemByEntity,
+import {useRouter} from "next/router";
-} from "@/utils/grading.be";
+import {useAllowedEntities} from "@/hooks/useEntityPermissions";
-import { Grading } from "@/interfaces";
-import { useRouter } from "next/router";
-import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
-  const user = await requestUser(req, res);
+	const user = await requestUser(req, res);
-  if (!user) return redirect("/login");
+	if (!user) return redirect("/login");
 
-  if (
+	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"])) return redirect("/");
-    shouldRedirectHome(user) ||
+	const [permissions, entities, allUsers] = await Promise.all([
-    !checkAccess(user, [
+		getUserPermissions(user.id),
-      "admin",
+		isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, "id")),
-      "developer",
+		getUsers(),
-      "corporate",
+	]);
-      "teacher",
+	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, "id"));
-      "mastercorporate",
+	const entitiesGrading = entities.map(
-    ])
+		(e) =>
-  )
+			gradingSystems.find((g) => g.entity === e.id) || {
-    return redirect("/");
+				entity: e.id,
-  const [permissions, entities, allUsers] = await Promise.all([
+				steps: CEFR_STEPS,
-    getUserPermissions(user.id),
+			},
-    isAdmin(user)
+	);
-      ? await getEntitiesWithRoles()
-      : await getEntitiesWithRoles(mapBy(user.entities, "id")),
-    getUsers(),
-  ]);
-  const gradingSystems = await getGradingSystemByEntities(
-    mapBy(entities, "id")
-  );
-  const entitiesGrading = entities.map(
-    (e) =>
-      gradingSystems.find((g) => g.entity === e.id) || {
-        entity: e.id,
-        steps: CEFR_STEPS,
-      }
-  );
 
-  return {
+	return {
-    props: serialize({
+		props: serialize({
-      user,
+			user,
-      permissions,
+			permissions,
-      entities,
+			entities,
-      allUsers,
+			allUsers,
-      entitiesGrading,
+			entitiesGrading,
-    }),
+		}),
-  };
+	};
 }, sessionOptions);
 
 interface Props {
-  user: User;
+	user: User;
-  permissions: PermissionType[];
+	permissions: PermissionType[];
-  entities: EntityWithRoles[];
+	entities: EntityWithRoles[];
-  allUsers: User[];
+	allUsers: User[];
-  entitiesGrading: Grading[];
+	entitiesGrading: Grading[];
 }
 
-export default function Admin({
+export default function Admin({user, entities, permissions, allUsers, entitiesGrading}: Props) {
-  user,
+	const [modalOpen, setModalOpen] = useState<string>();
-  entities,
+	const router = useRouter();
-  permissions,
-  allUsers,
-  entitiesGrading,
-}: Props) {
-  const [modalOpen, setModalOpen] = useState<string>();
-  const router = useRouter();
 
-  const entitiesAllowCreateUser = useAllowedEntities(
+	const entitiesAllowCreateUser = useAllowedEntities(user, entities, "create_user");
-    user,
+	const entitiesAllowCreateUsers = useAllowedEntities(user, entities, "create_user_batch");
-    entities,
+	const entitiesAllowCreateCode = useAllowedEntities(user, entities, "create_code");
-    "create_user"
+	const entitiesAllowCreateCodes = useAllowedEntities(user, entities, "create_code_batch");
-  );
+	const entitiesAllowEditGrading = useAllowedEntities(user, entities, "edit_grading_system");
-  const entitiesAllowCreateUsers = useAllowedEntities(
-    user,
-    entities,
-    "create_user_batch"
-  );
-  const entitiesAllowCreateCode = useAllowedEntities(
-    user,
-    entities,
-    "create_code"
-  );
-  const entitiesAllowCreateCodes = useAllowedEntities(
-    user,
-    entities,
-    "create_code_batch"
-  );
-  const entitiesAllowEditGrading = useAllowedEntities(
-    user,
-    entities,
-    "edit_grading_system"
-  );
 
-  return (
+	return (
-    <>
+		<>
-      <Head>
+			<Head>
-        <title>Settings Panel | EnCoach</title>
+				<title>Settings Panel | EnCoach</title>
-        <meta
+				<meta
-          name="description"
+					name="description"
-          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-        />
+				/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+				<link rel="icon" href="/favicon.ico" />
-      </Head>
+			</Head>
-      <ToastContainer />
+			<ToastContainer />
-      <>
+			<>
-        <Modal
+				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
-          isOpen={modalOpen === "batchCreateUser"}
+					<BatchCreateUser
-          onClose={() => setModalOpen(undefined)}
+						user={user}
-          maxWidth="max-w-[85%]"
+						entities={entitiesAllowCreateUsers.filter(
-        >
+							(e) =>
-          <BatchCreateUser
+								e.licenses > 0 &&
-            user={user}
+								e.licenses > allUsers.filter((u) => !isAdmin(u) && (u.entities || []).some((ent) => ent.id === e.id)).length,
-            entities={entitiesAllowCreateUser}
+						)}
-            permissions={permissions}
+						permissions={permissions}
-            onFinish={() => setModalOpen(undefined)}
+						onFinish={() => setModalOpen(undefined)}
-          />
+					/>
-        </Modal>
+				</Modal>
-        <Modal
+				<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
-          isOpen={modalOpen === "batchCreateCode"}
+					<BatchCodeGenerator
-          onClose={() => setModalOpen(undefined)}
+						entities={entitiesAllowCreateCodes}
-        >
+						user={user}
-          <BatchCodeGenerator
+						users={allUsers}
-            entities={entitiesAllowCreateCodes}
+						permissions={permissions}
-            user={user}
+						onFinish={() => setModalOpen(undefined)}
-            users={allUsers}
+					/>
-            permissions={permissions}
+				</Modal>
-            onFinish={() => setModalOpen(undefined)}
+				<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
-          />
+					<CodeGenerator
-        </Modal>
+						entities={entitiesAllowCreateCode}
-        <Modal
+						user={user}
-          isOpen={modalOpen === "createCode"}
+						permissions={permissions}
-          onClose={() => setModalOpen(undefined)}
+						onFinish={() => setModalOpen(undefined)}
-        >
+					/>
-          <CodeGenerator
+				</Modal>
-            entities={entitiesAllowCreateCode}
+				<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
-            user={user}
+					<UserCreator
-            permissions={permissions}
+						user={user}
-            onFinish={() => setModalOpen(undefined)}
+						entities={entitiesAllowCreateUser.filter(
-          />
+							(e) =>
-        </Modal>
+								e.licenses > 0 &&
-        <Modal
+								e.licenses > allUsers.filter((u) => !isAdmin(u) && (u.entities || []).some((ent) => ent.id === e.id)).length,
-          isOpen={modalOpen === "createUser"}
+						)}
-          onClose={() => setModalOpen(undefined)}
+						users={allUsers}
-        >
+						permissions={permissions}
-          <UserCreator
+						onFinish={() => setModalOpen(undefined)}
-            user={user}
+					/>
-            entities={entitiesAllowCreateUsers}
+				</Modal>
-            users={allUsers}
+				<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
-            permissions={permissions}
+					<CorporateGradingSystem
-            onFinish={() => setModalOpen(undefined)}
+						user={user}
-          />
+						entitiesGrading={entitiesGrading}
-        </Modal>
+						entities={entitiesAllowEditGrading}
-        <Modal
+						mutate={() => router.replace(router.asPath)}
-          isOpen={modalOpen === "gradingSystem"}
+					/>
-          onClose={() => setModalOpen(undefined)}
+				</Modal>
-        >
-          <CorporateGradingSystem
-            user={user}
-            entitiesGrading={entitiesGrading}
-            entities={entitiesAllowEditGrading}
-            mutate={() => router.replace(router.asPath)}
-          />
-        </Modal>
 
-        <section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
+				<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
-          <ExamLoader />
+					<ExamLoader />
-          {checkAccess(
+					{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
-            user,
+						<div className="w-full grid grid-cols-2 gap-4">
-            getTypesOfUser(["teacher"]),
+							<IconCard
-            permissions,
+								Icon={BsCode}
-            "viewCodes"
+								label="Generate Single Code"
-          ) && (
+								color="purple"
-            <div className="w-full grid grid-cols-2 gap-4">
+								className="w-full h-full"
-              <IconCard
+								onClick={() => setModalOpen("createCode")}
-                Icon={BsCode}
+								disabled={entitiesAllowCreateCode.length === 0}
-                label="Generate Single Code"
+							/>
-                color="purple"
+							<IconCard
-                className="w-full h-full"
+								Icon={BsCodeSquare}
-                onClick={() => setModalOpen("createCode")}
+								label="Generate Codes in Batch"
-                disabled={entitiesAllowCreateCode.length === 0}
+								color="purple"
-              />
+								className="w-full h-full"
-              <IconCard
+								onClick={() => setModalOpen("batchCreateCode")}
-                Icon={BsCodeSquare}
+								disabled={entitiesAllowCreateCodes.length === 0}
-                label="Generate Codes in Batch"
+							/>
-                color="purple"
+							<IconCard
-                className="w-full h-full"
+								Icon={BsPersonFill}
-                onClick={() => setModalOpen("batchCreateCode")}
+								label="Create Single User"
-                disabled={entitiesAllowCreateCodes.length === 0}
+								color="purple"
-              />
+								className="w-full h-full"
-              <IconCard
+								onClick={() => setModalOpen("createUser")}
-                Icon={BsPersonFill}
+								disabled={entitiesAllowCreateUser.length === 0}
-                label="Create Single User"
+							/>
-                color="purple"
+							<IconCard
-                className="w-full h-full"
+								Icon={BsPeopleFill}
-                onClick={() => setModalOpen("createUser")}
+								label="Create Users in Batch"
-                disabled={entitiesAllowCreateUser.length === 0}
+								color="purple"
-              />
+								className="w-full h-full"
-              <IconCard
+								onClick={() => setModalOpen("batchCreateUser")}
-                Icon={BsPeopleFill}
+								disabled={entitiesAllowCreateUsers.length === 0}
-                label="Create Users in Batch"
+							/>
-                color="purple"
+							{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
-                className="w-full h-full"
+								<IconCard
-                onClick={() => setModalOpen("batchCreateUser")}
+									Icon={BsGearFill}
-                disabled={entitiesAllowCreateUsers.length === 0}
+									label="Grading System"
-              />
+									color="purple"
-              {checkAccess(user, [
+									className="w-full h-full col-span-2"
-                "admin",
+									onClick={() => setModalOpen("gradingSystem")}
-                "corporate",
+									disabled={entitiesAllowEditGrading.length === 0}
-                "developer",
+								/>
-                "mastercorporate",
+							)}
-              ]) && (
+						</div>
-                <IconCard
+					)}
-                  Icon={BsGearFill}
+				</section>
-                  label="Grading System"
+				<section className="w-full">
-                  color="purple"
+					<Lists user={user} entities={entities} permissions={permissions} />
-                  className="w-full h-full col-span-2"
+				</section>
-                  onClick={() => setModalOpen("gradingSystem")}
+			</>
-                  disabled={entitiesAllowEditGrading.length === 0}
+		</>
-                />
+	);
-              )}
-            </div>
-          )}
-        </section>
-        <section className="w-full">
-          <Lists user={user} entities={entities} permissions={permissions} />
-        </section>
-      </>
-    </>
-  );
 }

src/pages/training/grammar.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { User } from "@/interfaces/user";
+import { ToastContainer } from "react-toastify";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import {  redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
+
+  if (shouldRedirectHome(user)) return redirect("/");
+
+  return {
+    props: serialize({ user }),
+  };
+}, sessionOptions);
+
+const Grammar: React.FC<{
+  user: User;
+}> = ({ user }) => {
+  return (
+    <>
+      <Head>
+        <title>Training | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+    </>
+  );
+};
+
+export default Grammar;

src/pages/training/index.tsx

@@ -203,6 +203,32 @@ const Training: React.FC<{
       </Head>
       <ToastContainer />
 
+      <RecordFilter
+        entities={entities}
+        user={user}
+        isAdmin={isAdmin}
+        filterState={{ filter: filter, setFilter: setFilter }}
+        assignments={false}
+      >
+        {user.type === "student" && (
+          <>
+            <div className="flex items-center">
+              <div className="font-semibold text-2xl">
+                Generate New Training Material
+              </div>
+              <button
+                className={clsx(
+                  "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
+                  "transition duration-300 ease-in-out"
+                )}
+                onClick={handleNewTrainingContent}
+              >
+                <FaPlus />
+              </button>
+            </div>
+          </>
+        )}
+      </RecordFilter>
       <>
         {isNewContentLoading || areRecordsLoading ? (
           <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
@@ -215,38 +241,10 @@ const Training: React.FC<{
           </div>
         ) : (
           <>
-            <RecordFilter
-              entities={entities}
-              user={user}
-              isAdmin={isAdmin}
-              filterState={{ filter: filter, setFilter: setFilter }}
-              assignments={false}
-            >
-              {user.type === "student" && (
-                <>
-                  <div className="flex items-center">
-                    <div className="font-semibold text-2xl">
-                      Generate New Training Material
-                    </div>
-                    <button
-                      className={clsx(
-                        "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
-                        "transition duration-300 ease-in-out"
-                      )}
-                      onClick={handleNewTrainingContent}
-                    >
-                      <FaPlus />
-                    </button>
-                  </div>
-                </>
-              )}
-            </RecordFilter>
             {trainingContent.length == 0 && (
-              <div className="flex flex-grow justify-center items-center">
                 <span className="font-semibold ml-1">
                   No training content to display...
                 </span>
-              </div>
             )}
             {!areRecordsLoading &&
               groupedByTrainingContent &&

src/pages/training/vocabulary.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { User } from "@/interfaces/user";
+import { ToastContainer } from "react-toastify";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import {  redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
+
+  if (shouldRedirectHome(user)) return redirect("/");
+
+  return {
+    props: serialize({ user }),
+  };
+}, sessionOptions);
+
+const Vocabulary: React.FC<{
+  user: User;
+}> = ({ user }) => {
+  return (
+    <>
+      <Head>
+        <title>Training | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+    </>
+  );
+};
+
+export default Vocabulary;

src/pages/users/performance.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { BsChevronLeft } from "react-icons/bs";
 import { mapBy, serialize } from "@/utils";
 import { withIronSessionSsr } from "iron-session/next";
-import { getEntitiesUsers, getUsers } from "@/utils/users.be";
+import { getUsersWithStats } from "@/utils/users.be";
 import { sessionOptions } from "@/lib/session";
 import { checkAccess, findAllowedEntities } from "@/utils/permissions";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
@@ -30,12 +30,35 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     entities,
     "view_student_performance"
   );
-
   if (allowedEntities.length === 0) return redirect("/");
 
   const students = await (checkAccess(user, ["admin", "developer"])
-    ? getUsers({ type: "student" })
+    ? getUsersWithStats(
-    : getEntitiesUsers(mapBy(allowedEntities, "id"), { type: "student" }));
+        { type: "student" },
+        {
+          id: 1,
+          entities: 1,
+          focus: 1,
+          email: 1,
+          name: 1,
+          levels: 1,
+          userStats: 1,
+          studentID: 1,
+        }
+      )
+    : getUsersWithStats(
+        { type: "student", "entities.id": { in: mapBy(entities, "id") } },
+        {
+          id: 1,
+          entities: 1,
+          focus: 1,
+          email: 1,
+          name: 1,
+          levels: 1,
+          userStats: 1,
+          studentID: 1,
+        }
+      ));
   const groups = await getParticipantsGroups(mapBy(students, "id"));
 
   return {
@@ -45,23 +68,22 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
 interface Props {
   user: User;
-  students: StudentUser[];
+  students: (StudentUser & { userStats: Stat[] })[];
   entities: Entity[];
   groups: Group[];
 }
 
-const StudentPerformance = ({ user, students, entities, groups }: Props) => {
+const StudentPerformance = ({ students, entities, groups }: Props) => {
-  const { data: stats } = useFilterRecordsByUser<Stat[]>();
-
   const router = useRouter();
 
   const performanceStudents = students.map((u) => ({
     ...u,
     group: groups.find((x) => x.participants.includes(u.id))?.name || "N/A",
-    entitiesLabel: mapBy(u.entities, "id")
+    entitiesLabel: (u.entities || []).reduce((acc, curr, idx) => {
-      .map((id) => entities.find((e) => e.id === id)?.label)
+      const entity = entities.find((e) => e.id === curr.id);
-      .filter((e) => !!e)
+      if (idx === 0) return entity ? entity.label : "";
-      .join(", "),
+      return acc + (entity ? `${entity.label}` : "");
+    }, ""),
   }));
 
   return (
@@ -76,7 +98,6 @@ const StudentPerformance = ({ user, students, entities, groups }: Props) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <ToastContainer />
-
       <>
         <div className="flex items-center gap-2">
           <button
@@ -91,7 +112,7 @@ const StudentPerformance = ({ user, students, entities, groups }: Props) => {
             Student Performance ({students.length})
           </h2>
         </div>
-        <StudentPerformanceList items={performanceStudents} stats={stats} />
+        <StudentPerformanceList items={performanceStudents} />
       </>
     </>
   );

src/resources/entityPermissions.ts

@@ -71,7 +71,10 @@ export type RolePermission =
 	| "view_workflows"
 	| "configure_workflows"
 	| "edit_workflow"
-	| "delete_workflow";
+	| "delete_workflow"
+	| "view_confidential_exams"
+	| "create_confidential_exams"
+	| "create_public_exams";
 
 export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_students",
@@ -156,4 +159,6 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
 	"view_workflows",
 	"edit_workflow",
 	"delete_workflow",
+	"create_confidential_exams",
+	"create_public_exams",
 ];

src/stores/exam/reducers/index.ts

@@ -14,7 +14,7 @@ export type RootActions =
     { type: 'UPDATE_TIMERS'; payload: { timeSpent: number; inactivity: number; timeSpentCurrentModule: number; } } |
     { type: 'FINALIZE_MODULE'; payload: { updateTimers: boolean } } |
     { type: 'FINALIZE_MODULE_SOLUTIONS' } |
-    { type: 'UPDATE_EXAMS'}
+    { type: 'UPDATE_EXAMS' }
 
 
 export type Action = RootActions | SessionActions;
@@ -130,7 +130,7 @@ export const rootReducer = (
             if (state.flags.reviewAll) {
                 const notLastModule = state.moduleIndex < state.selectedModules.length - 1;
                 const moduleIndex = notLastModule ? state.moduleIndex + 1 : -1;
-                
+
                 if (notLastModule) {
                     return {
                         questionIndex: 0,
@@ -152,7 +152,7 @@ export const rootReducer = (
                     moduleIndex: -1
                 }
             }
-            
+
         }
         case 'UPDATE_EXAMS': {
             const exams = state.exams.map((e) => updateExamWithUserSolutions(e, state.userSolutions));

src/stores/examEditor/defaults.ts

@@ -158,7 +158,7 @@ const defaultModuleSettings = (module: Module, minTimer: number, reset: boolean
 		examLabel: defaultExamLabel(module),
 		minTimer,
 		difficulty: [sample(["A1", "A2", "B1", "B2", "C1", "C2"] as Difficulty[])!],
-		isPrivate: true,
+		access: "private",
 		sectionLabels: sectionLabels(module),
 		expandedSections: [(reset && (module === "writing" || module === "speaking")) ? 0 : 1],
 		focusedSection: 1,

src/stores/examEditor/reducers/index.ts

@@ -6,6 +6,7 @@ import { SECTION_ACTIONS, SectionActions, sectionReducer } from "./sectionReduce
 import { Module } from "@/interfaces";
 import { updateExamWithUserSolutions } from "@/stores/exam/utils";
 import { defaultExamUserSolutions } from "@/utils/exams";
+import { access } from "fs";
 
 type RootActions = { type: 'FULL_RESET' } |
 { type: 'INIT_EXAM_EDIT', payload: { exam: Exam; examModule: Module; id: string } } |
@@ -121,7 +122,7 @@ export const rootReducer = (
                         ...defaultModuleSettings(examModule, exam.minTimer),
                         examLabel: exam.label,
                         difficulty: exam.difficulty,
-                        isPrivate: exam.private,
+                        access: exam.access,
                         sections: examState,
                         importModule: false,
                         sectionLabels:

src/stores/examEditor/reorder/global.ts

@@ -59,8 +59,8 @@ const reorderWriteBlanks = (exercise: WriteBlanksExercise, startId: number): Reo
     let newIds = oldIds.map((_, index) => (startId + index).toString());
 
     let newSolutions = exercise.solutions.map((solution, index) => ({
-        id: newIds[index],
+        ...solution,
-        solution: [...solution.solution]
+        id: newIds[index]
     }));
 
     let newText = exercise.text;

src/stores/examEditor/types.ts

@@ -1,4 +1,4 @@
-import { Difficulty, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, Script, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
+import { AccessType, Difficulty, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, Script, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
 import { Module } from "@/interfaces";
 import Option from "@/interfaces/option";
 
@@ -71,7 +71,7 @@ export interface LevelSectionSettings extends SectionSettings {
     isAudioGenerationOpen: boolean;
     listeningTopic: string;
     isListeningTopicOpen: boolean;
-    
+
     // speaking
     speakingTopic?: string;
     speakingSecondTopic?: string;
@@ -87,7 +87,7 @@ export interface LevelSectionSettings extends SectionSettings {
 
 export type Context = "passage" | "video" | "audio" | "listeningScript" | "speakingScript" | "writing";
 export type Generating = Context | "exercises" | string | undefined;
-export type LevelGenResults = {generating: string, result: Record<string, any>[], module: Module};
+export type LevelGenResults = { generating: string, result: Record<string, any>[], module: Module };
 export type Section = LevelPart | ReadingPart | ListeningPart | WritingExercise | SpeakingExercise | InteractiveSpeakingExercise;
 export type ExamPart = ListeningPart | ReadingPart | LevelPart;
 
@@ -97,10 +97,10 @@ export interface SectionState {
     state: Section;
     expandedSubSections: number[];
     generating: Generating;
-    genResult: {generating: string, result: Record<string, any>[], module: Module} | undefined;
+    genResult: { generating: string, result: Record<string, any>[], module: Module } | undefined;
     levelGenerating: Generating[];
     levelGenResults: LevelGenResults[];
-    focusedExercise?: {questionId: number; id: string} | undefined;
+    focusedExercise?: { questionId: number; id: string } | undefined;
     writingSection?: number;
     speakingSection?: number;
     readingSection?: number;
@@ -111,7 +111,7 @@ export interface SectionState {
 export interface ListeningInstructionsState {
     isInstructionsOpen: boolean;
     chosenOption: Option;
-    
+
     currentInstructions: string;
     presetInstructions: string;
     customInstructions: string;
@@ -126,8 +126,8 @@ export interface ModuleState {
     sections: SectionState[];
     minTimer: number;
     difficulty: Difficulty[];
-    isPrivate: boolean;
+    access: AccessType;
-    sectionLabels: {id: number; label: string;}[];
+    sectionLabels: { id: number; label: string; }[];
     expandedSections: number[];
     focusedSection: number;
     importModule: boolean;

src/utils/approval.workflows.be.ts

@@ -4,11 +4,26 @@ import { ObjectId } from "mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getApprovalWorkflows = async (collection: string, ids?: string[]) => {
+export const getApprovalWorkflows = async (collection: string, entityIds?: string[], ids?: string[], assignee?: string) => {
+    const filters: any = {};
+
+    if (ids && ids.length > 0) {
+        filters.id = { $in: ids };
+    }
+
+    if (entityIds && entityIds.length > 0) {
+        filters.entityId = { $in: entityIds };
+    }
+
+    if (assignee) {
+        filters["steps.assignees"] = assignee;
+    }
+
     return await db
-        .collection<ApprovalWorkflow>(collection)
+		.collection<ApprovalWorkflow>(collection)
-        .find(ids ? { _id: { $in: ids.map((id) => new ObjectId(id)) } } : {})
+		.find(filters)
-        .toArray();
+		.sort({ startDate: -1 })
+		.toArray();
 };
 
 export const getApprovalWorkflow = async (collection: string, id: string) => {
@@ -19,6 +34,7 @@ export const getApprovalWorkflowsByEntities = async (collection: string, ids: st
     return await db
         .collection<ApprovalWorkflow>(collection)
         .find({ entityId: { $in: ids } })
+        .sort({ startDate: -1 })
         .toArray();
 };
 
@@ -37,9 +53,9 @@ export const getApprovalWorkflowByFormIntaker = async (entityId: string, formInt
 export const getApprovalWorkflowsByExamId = async (examId: string) => {
     return await db
         .collection<ApprovalWorkflow>("active-workflows")
-        .find({ 
+        .find({
-            examId, 
+            examId,
-            status: { $in: ["pending"] }
+            status: { $in: ["pending"] },
         })
         .toArray();
 };

src/utils/exam.differences.ts

@@ -1,84 +1,168 @@
 import { Exam } from "@/interfaces/exam";
-import { diff, Diff } from "deep-diff";
 
-const EXCLUDED_FIELDS = new Set(["_id", "id", "createdAt", "createdBy", "entities", "isDiagnostic", "private"]);
+const EXCLUDED_KEYS = new Set<string>(["_id", "id", "uuid", "isDiagnostic", "owners", "entities", "createdAt", "createdBy", "access", "requiresApproval", "exerciseID", "questionID", "sectionId", "userSolutions"]);
+
+const PATH_LABELS: Record<string, string> = {
+    access: "Access Type",
+    parts: "Parts",
+    exercises: "Exercises",
+    userSolutions: "User Solutions",
+    words: "Words",
+    options: "Options",
+    prompt: "Prompt",
+    text: "Text",
+    audio: "Audio",
+    script: "Script",
+    difficulty: "Difficulty",
+    shuffle: "Shuffle",
+    solutions: "Solutions",
+    variant: "Variant",
+    prefix: "Prefix",
+    suffix: "Suffix",
+    topic: "Topic",
+    allowRepetition: "Allow Repetition",
+    maxWords: "Max Words",
+    minTimer: "Timer",
+    section: "Section",
+    module: "Module",
+    type: "Type",
+    intro: "Intro",
+    category: "Category",
+    context: "Context",
+    instructions: "Instructions",
+    name: "Name",
+    gender: "Gender",
+    voice: "Voice",
+    enableNavigation: "Enable Navigation",
+    limit: "Limit",
+    instructorGender: "Instructor Gender",
+    wordCounter: "Word Counter",
+    attachment: "Attachment",
+    first_title: "First Title",
+    second_title: "Second Title",
+    first_topic: "First Topic",
+    second_topic: "Second Topic",
+    questions: "Questions",
+    sentences: "Sentences",
+    sentence: "Sentence",
+    solution: "Solution",
+    passage: "Passage",
+};
+
+const ARRAY_ITEM_LABELS: Record<string, string> = {
+    exercises: "Exercise",
+    paths: "Path",
+    difficulties: "Difficulty",
+    solutions: "Solution",
+    options: "Option",
+    words: "Word",
+    questions: "Question",
+    userSolutions: "User Solution",
+    sentences: "Sentence",
+    parts: "Part",
+};
 
 export function generateExamDifferences(oldExam: Exam, newExam: Exam): string[] {
-    const differences = diff(oldExam, newExam) || [];
+    const differences: string[] = [];
-    return differences.map((change) => formatDifference(change)).filter(Boolean) as string[];
+    compareObjects(oldExam, newExam, [], differences);
+    return differences;
 }
 
-function formatDifference(change: Diff<any, any>): string | undefined {
+function isObject(val: any): val is Record<string, any> {
-    if (!change.path) {
+    return val !== null && typeof val === "object" && !Array.isArray(val);
-        return;
-    }
-
-    if (change.path.some((segment) => EXCLUDED_FIELDS.has(segment))) {
-        return;
-    }
-
-    // Convert path array to something human-readable
-    const pathString = change.path.join(" \u2192 "); // e.g. "parts → 0 → exercises → 1 → prompt"
-
-    switch (change.kind) {
-        case "N":
-            // A new property/element was added
-            return `\u{2022} Added \`${pathString}\` with value: ${formatValue(change.rhs)}`;
-
-        case "D":
-            // A property/element was deleted
-            return `\u{2022} Removed \`${pathString}\` which had value: ${formatValue(change.lhs)}`;
-
-        case "E":
-            // A property/element was edited
-            return `\u{2022} Changed \`${pathString}\` from ${formatValue(change.lhs)} to ${formatValue(change.rhs)}`;
-
-        case "A":
-            // An array change; change.item describes what happened at array index change.index
-            return formatArrayChange(change);
-
-        default:
-            return;
-    }
 }
 
-function formatArrayChange(change: Diff<any, any>): string | undefined {
+function formatPrimitive(value: any): string {
-    if (!change.path) return;
-    if (change.path.some((segment) => EXCLUDED_FIELDS.has(segment))) {
-        return;
-    }
-    
-    const pathString = change.path.join(" \u2192 ");
-
-    const arrayChange = (change as any).item;
-    const idx = (change as any).index;
-
-    if (!arrayChange) return;
-
-    switch (arrayChange.kind) {
-        case "N":
-            return `\u{2022} Added an item at index [${idx}] in \`${pathString}\`: ${formatValue(arrayChange.rhs)}`;
-        case "D":
-            return `\u{2022} Removed an item at index [${idx}] in \`${pathString}\`: ${formatValue(arrayChange.lhs)}`;
-        case "E":
-            return `\u{2022} Edited an item at index [${idx}] in \`${pathString}\` from ${formatValue(arrayChange.lhs)} to ${formatValue(arrayChange.rhs)}`;
-        case "A":
-            // Nested array changes could happen theoretically; handle or ignore similarly
-            return `\u{2022} Complex array change at index [${idx}] in \`${pathString}\`: ${JSON.stringify(arrayChange)}`;
-        default:
-            return;
-    }
-}
-
-function formatValue(value: any): string {
-    if (value === null) return "null";
     if (value === undefined) return "undefined";
-    if (typeof value === "object") {
+    if (value === null) return "null";
-        try {
-            return JSON.stringify(value);
-        } catch {
-            return String(value);
-        }
-    }
     return JSON.stringify(value);
 }
+
+function pathToHumanReadable(pathSegments: Array<string | number>): string {
+    const mapped = pathSegments.map((seg) => {
+        if (typeof seg === "number") {
+            return `#${seg + 1}`;
+        }
+        return PATH_LABELS[seg] ?? seg;
+    });
+
+    let result = "";
+    for (let i = 0; i < mapped.length; i++) {
+        result += mapped[i];
+        if (mapped[i].startsWith("#") && i < mapped.length - 1) {
+            result += " - ";
+        } else if (i < mapped.length - 1) {
+            result += " ";
+        }
+    }
+
+    return result.trim();
+}
+
+function getArrayItemLabel(path: (string | number)[]): string {
+    if (path.length === 0) return "item";
+    const lastSegment = path[path.length - 1];
+    if (typeof lastSegment === "string" && ARRAY_ITEM_LABELS[lastSegment]) {
+        return ARRAY_ITEM_LABELS[lastSegment];
+    }
+    return "item";
+}
+
+function getIdentifier(item: any): string | number | undefined {
+    if (item?.uuid !== undefined) return item.uuid;
+    if (item?.id !== undefined) return item.id;
+    return undefined;
+}
+
+function compareObjects(oldObj: any, newObj: any, path: (string | number)[], differences: string[]) {
+    if (Array.isArray(oldObj) && Array.isArray(newObj)) {
+        // Check if array elements are objects with an identifier (uuid or id).
+        if (oldObj.length > 0 && typeof oldObj[0] === "object" && getIdentifier(oldObj[0]) !== undefined) {
+            // Process removed items
+            const newIds = new Set(newObj.map((item: any) => getIdentifier(item)));
+            for (let i = 0; i < oldObj.length; i++) {
+                const oldItem = oldObj[i];
+                const identifier = getIdentifier(oldItem);
+                if (identifier !== undefined && !newIds.has(identifier)) {
+                    differences.push(`• Removed ${getArrayItemLabel(path)} #${i + 1} from ${pathToHumanReadable(path)}\n`);
+                }
+            }
+
+            const oldIndexMap = new Map(oldObj.map((item: any, index: number) => [getIdentifier(item), index]));
+            // Process items in the new array using their order.
+            for (let i = 0; i < newObj.length; i++) {
+                const newItem = newObj[i];
+                const identifier = getIdentifier(newItem);
+                if (identifier !== undefined) {
+                    if (oldIndexMap.has(identifier)) {
+                        const oldIndex = oldIndexMap.get(identifier)!;
+                        const oldItem = oldObj[oldIndex];
+                        compareObjects(oldItem, newItem, path.concat(`#${i + 1}`), differences);
+                    } else {
+                        differences.push(`• Added new ${getArrayItemLabel(path)} #${i + 1} at ${pathToHumanReadable(path)}\n`);
+                    }
+                } else {
+                    // Fallback: if item does not have an identifier, compare by index.
+                    compareObjects(oldObj[i], newItem, path.concat(`#${i + 1}`), differences);
+                }
+            }
+        } else {
+            // For arrays that are not identifier-based, compare element by element.
+            const maxLength = Math.max(oldObj.length, newObj.length);
+            for (let i = 0; i < maxLength; i++) {
+                compareObjects(oldObj[i], newObj[i], path.concat(`#${i + 1}`), differences);
+            }
+        }
+    } else if (isObject(oldObj) && isObject(newObj)) {
+        // Compare objects by keys (ignoring excluded keys).
+        const keys = new Set([...Object.keys(oldObj), ...Object.keys(newObj)]);
+        for (const key of keys) {
+            if (EXCLUDED_KEYS.has(key)) continue;
+            compareObjects(oldObj[key], newObj[key], path.concat(key), differences);
+        }
+    } else {
+        if (oldObj !== newObj) {
+            differences.push(`• Changed ${pathToHumanReadable(path)} from:\n ${formatPrimitive(oldObj)}\n To:\n ${formatPrimitive(newObj)}\n`);
+        }
+    }
+}

src/utils/exams.be.ts

@@ -64,6 +64,7 @@ export const getExams = async (
 		.collection(module)
 		.find<Exam>({
 			isDiagnostic: false,
+			access: "public",
 		})
 		.toArray();
 
@@ -72,7 +73,7 @@ export const getExams = async (
 			...doc,
 			module,
 		})) as Exam[],
-	).filter((x) => !x.private);
+	)
 
 	let exams: Exam[] = await filterByEntities(shuffledPublicExams, userId);
 	exams = filterByVariant(exams, variant);

src/utils/exams.ts

@@ -1,4 +1,4 @@
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
 import {
 	Exam,
 	ReadingExam,
@@ -70,9 +70,9 @@ export const getExamById = async (module: Module, id: string): Promise<Exam | un
 
 export const defaultExamUserSolutions = (exam: Exam) => {
 	if (exam.module === "reading" || exam.module === "listening" || exam.module === "level")
-		return exam.parts.flatMap((x) => x.exercises).map((x) => defaultUserSolutions(x, exam));
+		return (exam.parts.flatMap((x) => x.exercises) ?? []).map((x) => defaultUserSolutions(x, exam));
 
-	return exam.exercises.map((x) => defaultUserSolutions(x, exam));
+	return (exam.exercises ?? []).map((x) => defaultUserSolutions(x, exam));
 };
 
 export const defaultUserSolutions = (exercise: Exercise, exam: Exam): UserSolution => {
@@ -88,26 +88,26 @@ export const defaultUserSolutions = (exercise: Exercise, exam: Exam): UserSoluti
 	switch (exercise.type) {
 		case "fillBlanks":
 			total = exercise.text.match(/({{\d+}})/g)?.length || 0;
-			return {...defaultSettings, score: {correct: 0, total, missing: total}};
+			return { ...defaultSettings, score: { correct: 0, total, missing: total } };
 		case "matchSentences":
 			total = exercise.sentences.length;
-			return {...defaultSettings, score: {correct: 0, total, missing: total}};
+			return { ...defaultSettings, score: { correct: 0, total, missing: total } };
 		case "multipleChoice":
 			total = exercise.questions.length;
-			return {...defaultSettings, score: {correct: 0, total, missing: total}};
+			return { ...defaultSettings, score: { correct: 0, total, missing: total } };
 		case "writeBlanks":
 			total = exercise.text.match(/({{\d+}})/g)?.length || 0;
-			return {...defaultSettings, score: {correct: 0, total, missing: total}};
+			return { ...defaultSettings, score: { correct: 0, total, missing: total } };
 		case "trueFalse":
 			total = exercise.questions.length;
-			return {...defaultSettings, score: {correct: 0, total, missing: total}};
+			return { ...defaultSettings, score: { correct: 0, total, missing: total } };
 		case "writing":
 			total = 1;
-			return {...defaultSettings, score: {correct: 0, total, missing: total}};
+			return { ...defaultSettings, score: { correct: 0, total, missing: total } };
 		case "speaking":
 			total = 1;
-			return {...defaultSettings, score: {correct: 0, total, missing: total}};
+			return { ...defaultSettings, score: { correct: 0, total, missing: total } };
 		default:
-			return {...defaultSettings, score: {correct: 0, total: 0, missing: 0}};
+			return { ...defaultSettings, score: { correct: 0, total: 0, missing: 0 } };
 	}
 };

src/utils/moduleUtils.ts

@@ -23,7 +23,7 @@ export const sortByModuleName = (a: string, b: string) => {
 };
 
 export const countExercises = (exercises: Exercise[]) => {
-	const lengthMap = exercises.map((e) => {
+	const lengthMap = (exercises ?? []).map((e) => {
 		if (e.type === "multipleChoice") return e.questions.length;
 		if (e.type === "interactiveSpeaking") return e.prompts.length;
 		if (e.type === "fillBlanks") return e.solutions.length;
@@ -40,37 +40,37 @@ export const countCurrentExercises = (
 	exercises: Exercise[],
 	exerciseIndex: number,
 	questionIndex?: number
-  ) => {
+) => {
 	return exercises.reduce((acc, exercise, index) => {
-	  if (index > exerciseIndex) {
+		if (index > exerciseIndex) {
-		return acc;
+			return acc;
-	  }
-  
-	  let count = 0;
-	  
-	  if (exercise.type === "multipleChoice") {
-		if (index === exerciseIndex && questionIndex !== undefined) {
-		  count = questionIndex + 1;
-		} else {
-		  count = exercise.questions!.length;
 		}
-	  } else if (exercise.type === "interactiveSpeaking") {
+
-		count = exercise.prompts.length;
+		let count = 0;
-	  } else if (exercise.type === "fillBlanks") {
+
-		count = exercise.solutions.length;
+		if (exercise.type === "multipleChoice") {
-	  } else if (exercise.type === "writeBlanks") {
+			if (index === exerciseIndex && questionIndex !== undefined) {
-		count = exercise.solutions.length;
+				count = questionIndex + 1;
-	  } else if (exercise.type === "matchSentences") {
+			} else {
-		count = exercise.sentences.length;
+				count = exercise.questions!.length;
-	  } else if (exercise.type === "trueFalse") {
+			}
-		count = exercise.questions.length;
+		} else if (exercise.type === "interactiveSpeaking") {
-	  } else {
+			count = exercise.prompts.length;
-		count = 1;
+		} else if (exercise.type === "fillBlanks") {
-	  }
+			count = exercise.solutions.length;
-	  
+		} else if (exercise.type === "writeBlanks") {
-	  return acc + count;
+			count = exercise.solutions.length;
+		} else if (exercise.type === "matchSentences") {
+			count = exercise.sentences.length;
+		} else if (exercise.type === "trueFalse") {
+			count = exercise.questions.length;
+		} else {
+			count = 1;
+		}
+
+		return acc + count;
 	}, 0);
-  };
+};
 
 export const countFullExams = (stats: Stat[]) => {
 	const sessionExams = groupBySession(stats);

src/utils/permissions.ts

@@ -2,7 +2,6 @@ import { EntityWithRoles, Role } from "@/interfaces/entity";
 import { PermissionType } from "@/interfaces/permissions";
 import { User, Type, userTypes } from "@/interfaces/user";
 import { RolePermission } from "@/resources/entityPermissions";
-import axios from "axios";
 import { findBy, mapBy } from ".";
 import { isAdmin } from "./users";
 
@@ -55,11 +54,11 @@ export function groupAllowedEntitiesByPermissions(
 		const userEntity = userEntityMap.get(entity.id);
 		const role = userEntity
 			? roleCache.get(userEntity.role) ??
-			  (() => {
+			(() => {
-				  const foundRole = entity.roles.find(r => r.id === userEntity.role) || null;
+				const foundRole = entity.roles.find(r => r.id === userEntity.role) || null;
-				  roleCache.set(userEntity.role, foundRole);
+				roleCache.set(userEntity.role, foundRole);
-				  return foundRole;
+				return foundRole;
-			  })()
+			})()
 			: null;
 
 		permissions.forEach(permission => {
@@ -76,7 +75,7 @@ export function groupAllowedEntitiesByPermissions(
 export function findAllowedEntities(user: User, entities: EntityWithRoles[], permission: RolePermission) {
 	if (["admin", "developer"].includes(user?.type)) return entities
 
-	const allowedEntities = entities.filter((e) => doesEntityAllow(user, e, permission))
+	const allowedEntities = (entities ?? []).filter((e) => doesEntityAllow(user, e, permission))
 	return allowedEntities
 }
 

src/utils/score.ts

@@ -1,9 +1,9 @@
-import {Module, Step} from "@/interfaces";
+import { Module, Step } from "@/interfaces";
-import {Stat, User} from "@/interfaces/user";
+import { Stat, User } from "@/interfaces/user";
 
 type Type = "academic" | "general";
 
-export const writingReverseMarking: {[key: number]: number} = {
+export const writingReverseMarking: { [key: number]: number } = {
 	9: 90,
 	8.5: 85,
 	8: 80,
@@ -25,7 +25,7 @@ export const writingReverseMarking: {[key: number]: number} = {
 	0: 0,
 };
 
-export const speakingReverseMarking: {[key: number]: number} = {
+export const speakingReverseMarking: { [key: number]: number } = {
 	9: 90,
 	8.5: 85,
 	8: 80,
@@ -47,7 +47,7 @@ export const speakingReverseMarking: {[key: number]: number} = {
 	0: 0,
 };
 
-export const writingMarking: {[key: number]: number} = {
+export const writingMarking: { [key: number]: number } = {
 	90: 9,
 	80: 8,
 	70: 7,
@@ -60,7 +60,7 @@ export const writingMarking: {[key: number]: number} = {
 	0: 0,
 };
 
-const readingGeneralMarking: {[key: number]: number} = {
+const readingGeneralMarking: { [key: number]: number } = {
 	100: 9,
 	97.5: 8.5,
 	92.5: 8,
@@ -77,7 +77,7 @@ const readingGeneralMarking: {[key: number]: number} = {
 	15: 2.5,
 };
 
-const academicMarking: {[key: number]: number} = {
+const academicMarking: { [key: number]: number } = {
 	97.5: 9,
 	92.5: 8.5,
 	87.5: 8,
@@ -94,7 +94,7 @@ const academicMarking: {[key: number]: number} = {
 	10: 2.5,
 };
 
-const levelMarking: {[key: number]: number} = {
+const levelMarking: { [key: number]: number } = {
 	88: 9, // Advanced
 	64: 8, // Upper-Intermediate
 	52: 6, // Intermediate
@@ -103,7 +103,7 @@ const levelMarking: {[key: number]: number} = {
 	0: 0, // Beginner
 };
 
-const moduleMarkings: {[key in Module | "overall"]: {[key in Type]: {[key: number]: number}}} = {
+const moduleMarkings: { [key in Module | "overall"]: { [key in Type]: { [key: number]: number } } } = {
 	reading: {
 		academic: academicMarking,
 		general: readingGeneralMarking,
@@ -147,7 +147,7 @@ export const calculateBandScore = (correct: number, total: number, module: Modul
 	return 0;
 };
 
-export const calculateAverageLevel = (levels: {[key in Module]: number}) => {
+export const calculateAverageLevel = (levels: { [key in Module]: number }) => {
 	return (
 		Object.keys(levels)
 			.filter((x) => x !== "level")
@@ -193,20 +193,21 @@ export const getGradingLabel = (score: number, grading: Step[]) => {
 	return "N/A";
 };
 
-export const averageLevelCalculator = (users: User[], studentStats: Stat[]) => {
+export const averageLevelCalculator = (focus: Type, studentStats: Stat[]) => {
-	const formattedStats = studentStats
+	/* const formattedStats = studentStats
 		.map((s) => ({
-			focus: users.find((u) => u.id === s.user)?.focus,
+			focus: focus,
 			score: s.score,
 			module: s.module,
 		}))
-		.filter((f) => !!f.focus);
+		.filter((f) => !!f.focus); */
-	const bandScores = formattedStats.map((s) => ({
+
+	const bandScores = studentStats.map((s) => ({
 		module: s.module,
-		level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+		level: calculateBandScore(s.score.correct, s.score.total, s.module, focus),
 	}));
 
-	const levels: {[key in Module]: number} = {
+	const levels: { [key in Module]: number } = {
 		reading: 0,
 		listening: 0,
 		writing: 0,

src/utils/users.be.ts

@@ -6,7 +6,7 @@ import client from "@/lib/mongodb";
 import { EntityWithRoles, WithEntities } from "@/interfaces/entity";
 import { getEntity } from "./entities.be";
 import { getRole } from "./roles.be";
-import { findAllowedEntities, groupAllowedEntitiesByPermissions } from "./permissions";
+import { groupAllowedEntitiesByPermissions } from "./permissions";
 import { mapBy } from ".";
 
 const db = client.db(process.env.MONGODB_DB);
@@ -20,6 +20,15 @@ export async function getUsers(filter?: object, limit = 0, sort = {}, projection
 		.toArray();
 }
 
+export async function getUsersWithStats(filter?: object, projection = {}, limit = 0, sort = {}) {
+	return await db
+		.collection("usersWithStats")
+		.find<User>(filter || {}, { projection: { _id: 0, ...projection } })
+		.limit(limit)
+		.sort(sort)
+		.toArray();
+}
+
 export async function searchUsers(searchInput?: string, limit = 50, page = 0, sort: object = { "name": 1 }, projection = {}, filter?: object) {
 	const compoundFilter = {
 		"compound": {
@@ -266,12 +275,13 @@ export const countAllowedUsers = async (user: User, entities: EntityWithRoles[])
 		'view_corporates',
 		'view_mastercorporates',
 	]);
+	console.log(mapBy(allowedStudentEntities, 'id'))
 	const [student, teacher, corporate, mastercorporate] = await Promise.all([
 		countEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" }),
 		countEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" }),
 		countEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" }),
 		countEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" }),
 	])
-
+	console.log(student)
 	return { student, teacher, corporate, mastercorporate }
 }

src/utils/users.ts

@@ -1,8 +1,9 @@
-import {WithLabeledEntities} from "@/interfaces/entity";
+import { WithLabeledEntities } from "@/interfaces/entity";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
-import {capitalize} from "lodash";
+import { capitalize } from "lodash";
 import moment from "moment";
+import ExcelJS from "exceljs";
 
 export interface UserListRow {
 	name: string;
@@ -17,6 +18,22 @@ export interface UserListRow {
 	gender: string;
 }
 
+const indexToLetter = (index: number): string => {
+	// Base case: if the index is less than 0, return an empty string
+	if (index < 0) {
+		return '';
+	}
+
+	// Calculate the quotient for recursion (number of times the letter sequence repeats)
+	const quotient = Math.floor(index / 26);
+
+	// Calculate the remainder for the current letter
+	const remainder = index % 26;
+
+	// Recursively call indexToLetter for the quotient and append the current letter
+	return indexToLetter(quotient - 1) + String.fromCharCode(65 + remainder);
+};
+
 export const exportListToExcel = (rowUsers: WithLabeledEntities<User>[]) => {
 	const rows: UserListRow[] = rowUsers.map((user) => ({
 		name: user.name,
@@ -33,10 +50,31 @@ export const exportListToExcel = (rowUsers: WithLabeledEntities<User>[]) => {
 		gender: user.demographicInformation?.gender ? capitalize(user.demographicInformation.gender) : "N/A",
 		verified: user.isVerified?.toString() || "FALSE",
 	}));
-	const header = "Name,Email,Type,Entities,Expiry Date,Country,Phone,Employment/Department,Gender,Verification";
+	const workbook = new ExcelJS.Workbook();
-	const rowsString = rows.map((x) => Object.values(x).join(",")).join("\n");
+	const worksheet = workbook.addWorksheet("User Data");
+	const border: Partial<ExcelJS.Borders> = { top: { style: 'thin' as ExcelJS.BorderStyle }, left: { style: 'thin' as ExcelJS.BorderStyle }, bottom: { style: 'thin' as ExcelJS.BorderStyle }, right: { style: 'thin' as ExcelJS.BorderStyle } }
+	const header = ['Name', 'Email', 'Type', 'Entities', 'Expiry Date', 'Country', 'Phone', 'Employment/Department', 'Gender', 'Verification'].forEach((item, index) => {
+		const cell = worksheet.getCell(`${indexToLetter(index)}1`);
+		const column = worksheet.getColumn(index + 1);
+		column.width = item.length * 2;
+		cell.value = item;
+		cell.font = { bold: true, size: 16 };
+		cell.border = border;
 
-	return `${header}\n${rowsString}`;
+	});
+	rows.forEach((x, index) => {
+		(Object.keys(x) as (keyof UserListRow)[]).forEach((key, i) => {
+			const cell = worksheet.getCell(`${indexToLetter(i)}${index + 2}`);
+			cell.value = x[key];
+			if (index === 0) {
+				const column = worksheet.getColumn(i + 1);
+				column.width = Math.max(column.width ?? 0, x[key].toString().length * 2);
+			}
+			cell.border = border;
+		});
+	})
+
+	return workbook.xlsx.writeBuffer();
 };
 
 export const getUserName = (user?: User) => {