Merge branch 'develop' into master-corporate

src/components/Generation/fill.blanks.edit.tsx

@@ -0,0 +1,84 @@
+import { FillBlanksExercise } from "@/interfaces/exam";
+import React from "react";
+import Input from "@/components/Low/Input";
+
+interface Props {
+  exercise: FillBlanksExercise;
+  updateExercise: (data: any) => void;
+}
+
+const FillBlanksEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <Input
+        type="text"
+        label="Text"
+        name="text"
+        required
+        value={exercise.text}
+        onChange={(value) =>
+          updateExercise({
+            text: value,
+          })
+        }
+      />
+      <h1>Solutions</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.solutions.map((solution, index) => (
+          <div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
+            <Input
+              type="text"
+              label={`Solution ${index + 1}`}
+              name="solution"
+              required
+              value={solution.solution}
+              onChange={(value) =>
+                updateExercise({
+                  solutions: exercise.solutions.map((sol) =>
+                    sol.id === solution.id ? { ...sol, solution: value } : sol
+                  ),
+                })
+              }
+            />
+          </div>
+        ))}
+      </div>
+      <h1>Words</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.words.map((word, index) => (
+          <div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
+            <Input
+              type="text"
+              label={`Word ${index + 1}`}
+              name="word"
+              required
+              value={word}
+              onChange={(value) =>
+                updateExercise({
+                  words: exercise.words.map((sol, idx) =>
+                    index === idx ? value : sol
+                  ),
+                })
+              }
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default FillBlanksEdit;

src/components/Generation/interactive.speaking.edit.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const InteractiveSpeakingEdit = () => {
+  return null;
+};
+
+export default InteractiveSpeakingEdit;

src/components/Generation/match.sentences.edit.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { MatchSentencesExercise } from "@/interfaces/exam";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+
+interface Props {
+  exercise: MatchSentencesExercise;
+  updateExercise: (data: any) => void;
+}
+const MatchSentencesEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+
+  const selectOptions = exercise.options.map((option) => ({
+    value: option.id,
+    label: option.id,
+  }));
+
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <h1>Solutions</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.sentences.map((sentence, index) => (
+          <div key={sentence.id} className="flex flex-col w-full px-2">
+            <div className="flex w-full">
+              <Input
+                type="text"
+                label={`Sentence ${index + 1}`}
+                name="sentence"
+                required
+                value={sentence.sentence}
+                onChange={(value) =>
+                  updateExercise({
+                    sentences: exercise.sentences.map((iSol) =>
+                      iSol.id === sentence.id
+                        ? {
+                            ...iSol,
+                            sentence: value,
+                          }
+                        : iSol
+                    ),
+                  })
+                }
+                className="px-2"
+              />
+              <div className="w-48 flex items-end px-2">
+                <Select
+                  value={selectOptions.find(
+                    (o) => o.value === sentence.solution
+                  )}
+                  options={selectOptions}
+                  onChange={(value) => {
+                    updateExercise({
+                      sentences: exercise.sentences.map((iSol) =>
+                        iSol.id === sentence.id
+                          ? {
+                              ...iSol,
+                              solution: value?.value,
+                            }
+                          : iSol
+                      ),
+                    });
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+        <h1>Options</h1>
+        <div className="w-full flex flex-wrap -mx-2">
+          {exercise.options.map((option, index) => (
+            <div key={option.id} className="flex flex-col w-full px-2">
+              <div className="flex w-full">
+                <Input
+                  type="text"
+                  label={`Option ${index + 1}`}
+                  name="option"
+                  required
+                  value={option.sentence}
+                  onChange={(value) =>
+                    updateExercise({
+                      options: exercise.options.map((iSol) =>
+                        iSol.id === option.id
+                          ? {
+                              ...iSol,
+                              sentence: value,
+                            }
+                          : iSol
+                      ),
+                    })
+                  }
+                  className="px-2"
+                />
+                <div className="w-48 flex items-end px-2">
+                  <Select
+                    value={{
+                      value: option.id,
+                      label: option.id,
+                    }}
+                    options={[
+                      {
+                        value: option.id,
+                        label: option.id,
+                      },
+                    ]}
+                    disabled
+                    onChange={() => {}}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MatchSentencesEdit;

src/components/Generation/multiple.choice.edit.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import Input from "@/components/Low/Input";
+import {
+  MultipleChoiceExercise,
+  MultipleChoiceQuestion,
+} from "@/interfaces/exam";
+import Select from "@/components/Low/Select";
+
+interface Props {
+  exercise: MultipleChoiceExercise;
+  updateExercise: (data: any) => void;
+}
+
+const variantOptions = [
+  { value: "text", label: "Text", key: "text" },
+  { value: "image", label: "Image", key: "src" },
+];
+
+const MultipleChoiceEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+
+  return (
+    <>
+      <h1>Questions</h1>
+      <div className="w-full flex-no-wrap -mx-2">
+        {exercise.questions.map((question: MultipleChoiceQuestion, index) => {
+          const variantValue = variantOptions.find(
+            (o) => o.value === question.variant
+          );
+
+          const solutionsOptions = question.options.map((option) => ({
+            value: option.id,
+            label: option.id,
+          }));
+
+          const solutionValue = solutionsOptions.find(
+            (o) => o.value === question.solution
+          );
+          return (
+            <div key={question.id} className="flex w-full px-2 flex-col">
+              <span>Question ID: {question.id}</span>
+
+              <Input
+                type="text"
+                label="Prompt"
+                name="prompt"
+                required
+                value={question.prompt}
+                onChange={(value) =>
+                  updateExercise({
+                    questions: exercise.questions.map((sol) =>
+                      sol.id === question.id ? { ...sol, prompt: value } : sol
+                    ),
+                  })
+                }
+              />
+              <div className="flex w-full">
+                <div className="w-48 flex items-end px-2">
+                  <Select
+                    value={solutionValue}
+                    options={solutionsOptions}
+                    onChange={(value) => {
+                      updateExercise({
+                        questions: exercise.questions.map((sol) =>
+                          sol.id === question.id
+                            ? { ...sol, solution: value?.value }
+                            : sol
+                        ),
+                      });
+                    }}
+                  />
+                </div>
+                <div className="w-48 flex items-end px-2">
+                  <Select
+                    value={variantValue}
+                    options={variantOptions}
+                    onChange={(value) => {
+                      updateExercise({
+                        questions: exercise.questions.map((sol) =>
+                          sol.id === question.id
+                            ? { ...sol, variant: value?.value }
+                            : sol
+                        ),
+                      });
+                    }}
+                  />
+                </div>
+              </div>
+              <div className="flex w-full flex-wrap -mx-2">
+                {question.options.map((option) => (
+                  <div
+                    key={option.id}
+                    className="flex sm:w-1/2 lg:w-1/4 px-2 px-2"
+                  >
+                    <Input
+                      type="text"
+                      label={`Option ${option.id}`}
+                      name="option"
+                      required
+                      value={option.text}
+                      onChange={(value) =>
+                        updateExercise({
+                          questions: exercise.questions.map((sol) =>
+                            sol.id === question.id
+                              ? {
+                                  ...sol,
+                                  options: sol.options.map((opt) => {
+                                    if (
+                                      opt.id === option.id &&
+                                      variantValue?.key
+                                    ) {
+                                      return {
+                                        ...opt,
+                                        [variantValue.key]: value,
+                                      };
+                                    }
+
+                                    return opt;
+                                  }),
+                                }
+                              : sol
+                          ),
+                        })
+                      }
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default MultipleChoiceEdit;

src/components/Generation/speaking.edit.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const SpeakingEdit = () => {
+    return null;
+}
+
+export default SpeakingEdit;

src/components/Generation/true.false.edit.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { TrueFalseExercise } from "@/interfaces/exam";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+interface Props {
+  exercise: TrueFalseExercise;
+  updateExercise: (data: any) => void;
+}
+
+const options = [
+  { value: "true", label: "True" },
+  { value: "false", label: "False" },
+  { value: "not_given", label: "Not Given" },
+];
+
+const TrueFalseEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <h1>Questions</h1>
+      <div className="w-full flex-no-wrap -mx-2">
+        {exercise.questions.map((question, index) => (
+          <div key={question.id} className="flex w-full px-2">
+            <Input
+              type="text"
+              label={`Question ${index + 1}`}
+              name="question"
+              required
+              value={question.prompt}
+              onChange={(value) =>
+                updateExercise({
+                  questions: exercise.questions.map((sol) =>
+                    sol.id === question.id ? { ...sol, prompt: value } : sol
+                  ),
+                })
+              }
+            />
+            <div className="w-48 flex items-end px-2">
+              <Select
+                value={options.find((o) => o.value === question.solution)}
+                options={options}
+                onChange={(value) => {
+                  updateExercise({
+                    questions: exercise.questions.map((sol) =>
+                      sol.id === question.id ? { ...sol, solution: value?.value } : sol
+                    ),
+                  });
+                }}
+                className="h-18"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default TrueFalseEdit;

src/components/Generation/write.blanks.edit.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import Input from "@/components/Low/Input";
+import { WriteBlanksExercise } from "@/interfaces/exam";
+
+interface Props {
+  exercise: WriteBlanksExercise;
+  updateExercise: (data: any) => void;
+}
+const WriteBlankEdits = (props: Props) => {
+  const { exercise, updateExercise } = props;
+
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <Input
+        type="text"
+        label="Text"
+        name="text"
+        required
+        value={exercise.text}
+        onChange={(value) =>
+          updateExercise({
+            text: value,
+          })
+        }
+      />
+      <Input
+        type="text"
+        label="Max Words"
+        name="number"
+        required
+        value={exercise.maxWords}
+        onChange={(value) =>
+          updateExercise({
+            maxWords: Number(value),
+          })
+        }
+      />
+      <h1>Solutions</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.solutions.map((solution) => (
+          <div key={solution.id} className="flex flex-col w-full px-2">
+            <span>Solution ID: {solution.id}</span>
+            {/* TODO: Consider adding an add and delete button */}
+            <div className="flex flex-wrap">
+            {solution.solution.map((sol, solIndex) => (
+              <Input
+                key={`${sol}-${solIndex}`}
+                type="text"
+                label={`Solution ${solIndex + 1}`}
+                name="solution"
+                required
+                value={sol}
+                onChange={(value) =>
+                  updateExercise({
+                    solutions: exercise.solutions.map((iSol) =>
+                      iSol.id === solution.id
+                        ? {
+                            ...iSol,
+                            solution: iSol.solution.map((iiSol, iiIndex) => {
+                              if (iiIndex === solIndex) {
+                                return value;
+                              }
+
+                              return iiSol;
+                            }),
+                          }
+                        : iSol
+                    ),
+                  })
+                }
+                className="sm:w-1/2 lg:w-1/4 px-2"
+              />
+            ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default WriteBlankEdits;

src/components/Generation/writing.edit.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const WritingEdit = () => {
+    return null;
+}
+
+export default WritingEdit;

src/pages/(generation)/LevelGeneration.tsx

@@ -1,5 +1,11 @@
 import Select from "@/components/Low/Select";
-import {Difficulty, LevelExam, MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
+import {
+  Difficulty,
+  LevelExam,
+  MultipleChoiceExercise,
+  MultipleChoiceQuestion,
+  LevelPart,
+} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import { getExamById } from "@/utils/exams";
 import { playSound } from "@/utils/sound";
@@ -15,9 +21,16 @@ import {v4} from "uuid";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
-const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => {
+const QuestionDisplay = ({
+  question,
+  onUpdate,
+}: {
+  question: MultipleChoiceQuestion;
+  onUpdate: (question: MultipleChoiceQuestion) => void;
+}) => {
   const [isEditing, setIsEditing] = useState(false);
   const [options, setOptions] = useState(question.options);
+  const [answer, setAnswer] = useState(question.solution);
 
   return (
     <div key={question.id} className="flex flex-col gap-1">
@@ -26,15 +39,32 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
       </span>
       <div className="flex flex-col gap-1">
         {question.options.map((option, index) => (
-					<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
+          <span
-						<span className={clsx("font-semibold", question.solution === option.id ? "text-mti-green-light" : "text-ielts-level")}>
+            key={option.id}
+            className={clsx(answer === option.id && "font-bold")}
+          >
+            <span
+              className={clsx(
+                "font-semibold",
+                answer === option.id
+                  ? "text-mti-green-light"
+                  : "text-ielts-level"
+              )}
+			  onClick={() => setAnswer(option.id)}
+            >
               ({option.id})
             </span>{" "}
             {isEditing ? (
               <input
                 defaultValue={option.text}
                 className="w-60"
-								onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
+                onChange={(e) =>
+                  setOptions((prev) =>
+                    prev.map((x, idx) =>
+                      idx === index ? { ...x, text: e.target.value } : x
+                    )
+                  )
+                }
               />
             ) : (
               <span>{option.text}</span>
@@ -46,7 +76,8 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
         {!isEditing && (
           <button
             onClick={() => setIsEditing(true)}
-						className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+            className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
+          >
             <BsPencilSquare />
           </button>
         )}
@@ -54,15 +85,17 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
           <>
             <button
               onClick={() => {
-								onUpdate({...question, options});
+                onUpdate({ ...question, options, solution: answer });
                 setIsEditing(false);
               }}
-							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+              className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
+            >
               <BsCheck />
             </button>
             <button
               onClick={() => setIsEditing(false)}
-							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+              className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
+            >
               <BsX />
             </button>
           </>
@@ -72,7 +105,15 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
   );
 };
 
-const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Difficulty; setExam: (exam: LevelExam) => void}) => {
+const TaskTab = ({
+  exam,
+  difficulty,
+  setExam,
+}: {
+  exam?: LevelPart;
+  difficulty: Difficulty;
+  setExam: (exam: LevelPart) => void;
+}) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const generate = () => {
@@ -84,7 +125,10 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
       .get(`/api/exam/level/generate/level?${url.toString()}`)
       .then((result) => {
         playSound(typeof result.data === "string" ? "error" : "check");
-				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
+        if (typeof result.data === "string")
+          return toast.error(
+            "Something went wrong, please try to generate again."
+          );
         setExam(result.data);
       })
       .catch((error) => {
@@ -99,11 +143,12 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 
     const updatedExam = {
       ...exam,
-			parts: exam.parts.map((p) =>
+	  exercises: exam.exercises.map((x) => ({
-				p.exercises.map((x) => ({
 		...x,
-					questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
+		questions: (x as MultipleChoiceExercise).questions.map((q) =>
-				})),
+            q.id === question.id ? question : q
+          ),
+	  }),
       ),
     };
     console.log(updatedExam);
@@ -119,8 +164,9 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
           className={clsx(
             "bg-ielts-level/70 border border-ielts-level text-white w-full px-6 py-6 rounded-xl h-[70px]",
             "hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
-						"transition ease-in-out duration-300",
+            "transition ease-in-out duration-300"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -132,14 +178,17 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
       </div>
       {isLoading && (
         <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
-					<span className={clsx("loading loading-infinity w-32 text-ielts-level")} />
+          <span
-					<span className={clsx("font-bold text-2xl text-ielts-level")}>Generating...</span>
+            className={clsx("loading loading-infinity w-32 text-ielts-level")}
+          />
+          <span className={clsx("font-bold text-2xl text-ielts-level")}>
+            Generating...
+          </span>
         </div>
       )}
       {exam && (
         <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
-					{exam.parts
+          {exam.exercises
-						.flatMap((x) => x.exercises)
             .filter((x) => x.type === "multipleChoice")
             .map((ex) => {
               const exercise = ex as MultipleChoiceExercise;
@@ -147,14 +196,20 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
               return (
                 <div key={ex.id} className="w-full h-full flex flex-col gap-2">
                   <div className="flex gap-2">
-										<span className="text-xl font-semibold">Multiple Choice</span>
+                    <span className="text-xl font-semibold">
+                      Multiple Choice
+                    </span>
                     <span className="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">
                       {exercise.questions.length} questions
                     </span>
                   </div>
                   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {exercise.questions.map((question) => (
-											<QuestionDisplay question={question} onUpdate={onUpdate} key={question.id} />
+                      <QuestionDisplay
+                        question={question}
+                        onUpdate={onUpdate}
+                        key={question.id}
+                      />
                     ))}
                   </div>
                 </div>
@@ -167,10 +222,12 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 };
 
 const LevelGeneration = () => {
-	const [generatedExam, setGeneratedExam] = useState<LevelExam>();
+  const [generatedExam, setGeneratedExam] = useState<LevelPart>();
   const [isLoading, setIsLoading] = useState(false);
   const [resultingExam, setResultingExam] = useState<LevelExam>();
-	const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
+  const [difficulty, setDifficulty] = useState<Difficulty>(
+    sample(DIFFICULTIES)!
+  );
 
   const router = useRouter();
 
@@ -180,9 +237,12 @@ const LevelGeneration = () => {
   const loadExam = async (examId: string) => {
     const exam = await getExamById("level", examId.trim());
     if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
           toastId: "invalid-exam-id",
-			});
+        }
+      );
 
       return;
     }
@@ -200,12 +260,13 @@ const LevelGeneration = () => {
     }
 
     setIsLoading(true);
+
     const exam: LevelExam = {
-			...generatedExam,
       isDiagnostic: false,
       minTimer: 25,
       module: "level",
       id: v4(),
+	  parts: [generatedExam],
     };
 
     axios
@@ -213,14 +274,18 @@ const LevelGeneration = () => {
       .then((result) => {
         playSound("sent");
         console.log(`Generated Exam ID: ${result.data.id}`);
-				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
+        toast.success(
+          "This new exam has been generated successfully! Check the ID in our browser's console."
+        );
         setResultingExam(result.data);
 
         setGeneratedExam(undefined);
       })
       .catch((error) => {
         console.log(error);
-				toast.error("Something went wrong while generating, please try again later.");
+        toast.error(
+          "Something went wrong while generating, please try again later."
+        );
       })
       .finally(() => setIsLoading(false));
   };
@@ -229,10 +294,17 @@ const LevelGeneration = () => {
     <>
       <div className="flex gap-4 w-1/2">
         <div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Difficulty
+          </label>
           <Select
-						options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
+            options={DIFFICULTIES.map((x) => ({
-						onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
+              value: x,
+              label: capitalize(x),
+            }))}
+            onChange={(value) =>
+              value ? setDifficulty(value.value as Difficulty) : null
+            }
             value={{ value: difficulty, label: capitalize(difficulty) }}
           />
         </div>
@@ -245,14 +317,21 @@ const LevelGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-level/70",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-level focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level"
               )
-						}>
+            }
+          >
             Exam
           </Tab>
         </Tab.List>
         <Tab.Panels>
-					<TaskTab difficulty={difficulty} exam={generatedExam} setExam={setGeneratedExam} />
+          <TaskTab
+            difficulty={difficulty}
+            exam={generatedExam}
+            setExam={setGeneratedExam}
+          />
         </Tab.Panels>
       </Tab.Group>
       <div className="w-full flex justify-end gap-4">
@@ -263,8 +342,9 @@ const LevelGeneration = () => {
             className={clsx(
               "bg-white border border-ielts-level text-ielts-level w-full max-w-[200px] rounded-xl h-[70px] self-end",
               "hover:bg-ielts-level hover:text-white disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
-							"transition ease-in-out duration-300",
+              "transition ease-in-out duration-300"
-						)}>
+            )}
+          >
             Perform Exam
           </button>
         )}
@@ -276,8 +356,9 @@ const LevelGeneration = () => {
             "bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
             "hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						!generatedExam && "tooltip",
+            !generatedExam && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />

src/pages/(generation)/ListeningGeneration.tsx

@@ -1,3 +1,4 @@
+import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import { Difficulty, Exercise, ListeningExam } from "@/interfaces/exam";
@@ -10,27 +11,49 @@ import axios from "axios";
 import clsx from "clsx";
 import { capitalize, sample } from "lodash";
 import { useRouter } from "next/router";
-import {useEffect, useState} from "react";
+import { useEffect, useState, Dispatch, SetStateAction } from "react";
 import { BsArrowRepeat, BsCheck } from "react-icons/bs";
 import { toast } from "react-toastify";
+import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
+const MULTIPLE_CHOICE = { type: "multipleChoice", label: "Multiple Choice" };
+const WRITE_BLANKS_QUESTIONS = {
+  type: "writeBlanksQuestions",
+  label: "Write the Blanks: Questions",
+};
+const WRITE_BLANKS_FILL = {
+  type: "writeBlanksFill",
+  label: "Write the Blanks: Fill",
+};
+const WRITE_BLANKS_FORM = {
+  type: "writeBlanksForm",
+  label: "Write the Blanks: Form",
+};
+const MULTIPLE_CHOICE_3 = {
+  type: "multipleChoice3Options",
+  label: "Multiple Choice",
+};
+
 const PartTab = ({
   part,
-	types,
   difficulty,
+  availableTypes,
   index,
   setPart,
+  updatePart,
 }: {
   part?: ListeningPart;
   difficulty: Difficulty;
-	types: string[];
+  availableTypes: { type: string; label: string }[];
   index: number;
   setPart: (part?: ListeningPart) => void;
+  updatePart: Dispatch<SetStateAction<ListeningPart | undefined>>;
 }) => {
   const [topic, setTopic] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [types, setTypes] = useState<string[]>([]);
 
   const generate = () => {
     const url = new URLSearchParams();
@@ -42,10 +65,17 @@ const PartTab = ({
     setPart(undefined);
     setIsLoading(true);
     axios
-			.get(`/api/exam/listening/generate/listening_section_${index}${topic || types ? `?${url.toString()}` : ""}`)
+      .get(
+        `/api/exam/listening/generate/listening_section_${index}${
+          topic || types ? `?${url.toString()}` : ""
+        }`
+      )
       .then((result) => {
         playSound(typeof result.data === "string" ? "error" : "check");
-				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
+        if (typeof result.data === "string")
+          return toast.error(
+            "Something went wrong, please try to generate again."
+          );
         setPart(result.data);
       })
       .catch((error) => {
@@ -55,10 +85,107 @@ const PartTab = ({
       .finally(() => setIsLoading(false));
   };
 
+  const renderExercises = () => {
+    return part?.exercises.map((exercise) => {
+      switch (exercise.type) {
+        case "multipleChoice":
+          return (
+            <>
+              <h1>Exercise: Multiple Choice</h1>
+              <MultipleChoiceEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) =>
+                  updatePart((part?: ListeningPart) => {
+                    if (part) {
+                      const exercises = part.exercises.map((x) =>
+                        x.id === exercise.id ? { ...x, ...data } : x
+                      ) as Exercise[];
+                      const updatedPart = {
+                        ...part,
+                        exercises,
+                      } as ListeningPart;
+                      return updatedPart;
+                    }
+
+                    return part;
+                  })
+                }
+              />
+            </>
+          );
+        // TODO: This might be broken as they all returns the same
+        case "writeBlanks":
+          return (
+            <>
+              <h1>Exercise: Write Blanks</h1>
+              <WriteBlanksEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) => {
+                  updatePart((part?: ListeningPart) => {
+                    if (part) {
+                      return {
+                        ...part,
+                        exercises: part.exercises.map((x) =>
+                          x.id === exercise.id ? { ...x, ...data } : x
+                        ),
+                      } as ListeningPart;
+                    }
+
+                    return part;
+                  });
+                }}
+              />
+            </>
+          );
+        default:
+          return null;
+      }
+    });
+  };
+
+  const toggleType = (type: string) =>
+    setTypes((prev) =>
+      prev.includes(type)
+        ? [...prev.filter((x) => x !== type)]
+        : [...prev, type]
+    );
+
   return (
     <Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
+        <label className="font-normal text-base text-mti-gray-dim">
+          Exercises
+        </label>
+        <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
+          {availableTypes.map((x) => (
+            <span
+              onClick={() => toggleType(x.type)}
+              key={x.type}
+              className={clsx(
+                "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                "transition duration-300 ease-in-out",
+                !types.includes(x.type)
+                  ? "bg-white border-mti-gray-platinum"
+                  : "bg-ielts-listening/70 border-ielts-listening text-white"
+              )}
+            >
+              {x.label}
+            </span>
+          ))}
+        </div>
+      </div>
       <div className="flex gap-4 items-end">
-				<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
+        <Input
+          type="text"
+          placeholder="Grand Canyon..."
+          name="topic"
+          label="Topic"
+          onChange={setTopic}
+          roundness="xl"
+          defaultValue={topic}
+        />
         <button
           onClick={generate}
           disabled={isLoading || types.length === 0}
@@ -67,8 +194,9 @@ const PartTab = ({
             "bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px]",
             "hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						isLoading && "tooltip",
+            isLoading && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -80,20 +208,34 @@ const PartTab = ({
       </div>
       {isLoading && (
         <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
-					<span className={clsx("loading loading-infinity w-32 text-ielts-listening")} />
+          <span
-					<span className={clsx("font-bold text-2xl text-ielts-listening")}>Generating...</span>
+            className={clsx(
+              "loading loading-infinity w-32 text-ielts-listening"
+            )}
+          />
+          <span className={clsx("font-bold text-2xl text-ielts-listening")}>
+            Generating...
+          </span>
         </div>
       )}
       {part && (
+        <>
           <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
             <div className="flex gap-4">
               {part.exercises.map((x) => (
-							<span className="rounded-xl bg-white border border-ielts-listening p-1 px-4" key={x.id}>
+                <span
+                  className="rounded-xl bg-white border border-ielts-listening p-1 px-4"
+                  key={x.id}
+                >
                   {x.type && convertCamelCaseToReadable(x.type)}
                 </span>
               ))}
             </div>
-					{typeof part.text === "string" && <span className="w-full h-96">{part.text.replaceAll("\n\n", " ")}</span>}
+            {typeof part.text === "string" && (
+              <span className="w-full h-96">
+                {part.text.replaceAll("\n\n", " ")}
+              </span>
+            )}
             {typeof part.text !== "string" && (
               <div className="w-full h-96 flex flex-col gap-2">
                 {part.text.conversation.map((x, index) => (
@@ -105,6 +247,8 @@ const PartTab = ({
               </div>
             )}
           </div>
+          {renderExercises()}
+        </>
       )}
     </Tab.Panel>
   );
@@ -132,8 +276,9 @@ const ListeningGeneration = () => {
   const [minTimer, setMinTimer] = useState(30);
   const [isLoading, setIsLoading] = useState(false);
   const [resultingExam, setResultingExam] = useState<ListeningExam>();
-	const [types, setTypes] = useState<string[]>([]);
+  const [difficulty, setDifficulty] = useState<Difficulty>(
-	const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
+    sample(DIFFICULTIES)!
+  );
 
   useEffect(() => {
     const part1Timer = part1 ? 5 : 0;
@@ -145,33 +290,31 @@ const ListeningGeneration = () => {
     setMinTimer(sum > 0 ? sum : 5);
   }, [part1, part2, part3, part4]);
 
-	const availableTypes = [
-		{type: "multipleChoice", label: "Multiple Choice"},
-		{type: "writeBlanksQuestions", label: "Write the Blanks: Questions"},
-		{type: "writeBlanksFill", label: "Write the Blanks: Fill"},
-		{type: "writeBlanksForm", label: "Write the Blanks: Form"},
-	];
-
   const router = useRouter();
 
   const setExams = useExamStore((state) => state.setExams);
   const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-	const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
-
   const submitExam = () => {
     const parts = [part1, part2, part3, part4].filter((x) => !!x);
     console.log({ parts });
-		if (parts.length === 0) return toast.error("Please generate at least one section!");
+    if (parts.length === 0)
+      return toast.error("Please generate at least one section!");
 
     setIsLoading(true);
 
     axios
-			.post(`/api/exam/listening/generate/listening`, {parts, minTimer, difficulty})
+      .post(`/api/exam/listening/generate/listening`, {
+        parts,
+        minTimer,
+        difficulty,
+      })
       .then((result) => {
         playSound("sent");
         console.log(`Generated Exam ID: ${result.data.id}`);
-				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
+        toast.success(
+          "This new exam has been generated successfully! Check the ID in our browser's console."
+        );
         setResultingExam(result.data);
 
         setPart1(undefined);
@@ -179,7 +322,6 @@ const ListeningGeneration = () => {
         setPart3(undefined);
         setPart4(undefined);
         setDifficulty(sample(DIFFICULTIES)!);
-				setTypes([]);
       })
       .catch((error) => {
         console.log(error);
@@ -191,9 +333,12 @@ const ListeningGeneration = () => {
   const loadExam = async (examId: string) => {
     const exam = await getExamById("listening", examId.trim());
     if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
           toastId: "invalid-exam-id",
-			});
+        }
+      );
 
       return;
     }
@@ -208,7 +353,9 @@ const ListeningGeneration = () => {
     <>
       <div className="flex gap-4 w-1/2">
         <div className="flex flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Timer</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Timer
+          </label>
           <Input
             type="number"
             name="minTimer"
@@ -218,36 +365,22 @@ const ListeningGeneration = () => {
           />
         </div>
         <div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Difficulty
+          </label>
           <Select
-						options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
+            options={DIFFICULTIES.map((x) => ({
-						onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
+              value: x,
+              label: capitalize(x),
+            }))}
+            onChange={(value) =>
+              value ? setDifficulty(value.value as Difficulty) : null
+            }
             value={{ value: difficulty, label: capitalize(difficulty) }}
             disabled={!!part1 || !!part2 || !!part3 || !!part4}
           />
         </div>
       </div>
-
-			<div className="flex flex-col gap-3">
-				<label className="font-normal text-base text-mti-gray-dim">Exercises</label>
-				<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
-					{availableTypes.map((x) => (
-						<span
-							onClick={() => toggleType(x.type)}
-							key={x.type}
-							className={clsx(
-								"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-								"transition duration-300 ease-in-out",
-								!types.includes(x.type)
-									? "bg-white border-mti-gray-platinum"
-									: "bg-ielts-listening/70 border-ielts-listening text-white",
-							)}>
-							{x.label}
-						</span>
-					))}
-				</div>
-			</div>
-
       <Tab.Group>
         <Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1">
           <Tab
@@ -256,9 +389,12 @@ const ListeningGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
               )
-						}>
+            }
+          >
             Section 1 {part1 && <BsCheck />}
           </Tab>
           <Tab
@@ -267,9 +403,12 @@ const ListeningGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
               )
-						}>
+            }
+          >
             Section 2 {part2 && <BsCheck />}
           </Tab>
           <Tab
@@ -278,9 +417,12 @@ const ListeningGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
               )
-						}>
+            }
+          >
             Section 3 {part3 && <BsCheck />}
           </Tab>
           <Tab
@@ -289,20 +431,57 @@ const ListeningGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
               )
-						}>
+            }
+          >
             Section 4 {part4 && <BsCheck />}
           </Tab>
         </Tab.List>
         <Tab.Panels>
           {[
-						{part: part1, setPart: setPart1},
+            {
-						{part: part2, setPart: setPart2},
+              part: part1,
-						{part: part3, setPart: setPart3},
+              setPart: setPart1,
-						{part: part4, setPart: setPart4},
+              types: [
-					].map(({part, setPart}, index) => (
+                MULTIPLE_CHOICE,
-						<PartTab part={part} difficulty={difficulty} types={types} index={index + 1} key={index} setPart={setPart} />
+                WRITE_BLANKS_QUESTIONS,
+                WRITE_BLANKS_FILL,
+                WRITE_BLANKS_FORM,
+              ],
+            },
+            {
+              part: part2,
+              setPart: setPart2,
+              types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS],
+            },
+            {
+              part: part3,
+              setPart: setPart3,
+              types: [MULTIPLE_CHOICE_3, WRITE_BLANKS_QUESTIONS],
+            },
+            {
+              part: part4,
+              setPart: setPart4,
+              types: [
+                MULTIPLE_CHOICE,
+                WRITE_BLANKS_QUESTIONS,
+                WRITE_BLANKS_FILL,
+                WRITE_BLANKS_FORM,
+              ],
+            },
+          ].map(({ part, setPart, types }, index) => (
+            <PartTab
+              part={part}
+              difficulty={difficulty}
+              availableTypes={types}
+              index={index + 1}
+              key={index}
+              setPart={setPart}
+              updatePart={setPart}
+            />
           ))}
         </Tab.Panels>
       </Tab.Group>
@@ -314,8 +493,9 @@ const ListeningGeneration = () => {
             className={clsx(
               "bg-white border border-ielts-listening text-ielts-listening w-full max-w-[200px] rounded-xl h-[70px] self-end",
               "hover:bg-ielts-listening hover:text-white disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
-							"transition ease-in-out duration-300",
+              "transition ease-in-out duration-300"
-						)}>
+            )}
+          >
             Perform Exam
           </button>
         )}
@@ -327,8 +507,9 @@ const ListeningGeneration = () => {
             "bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
             "hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						!part1 && !part2 && !part3 && !part4 && "tooltip",
+            !part1 && !part2 && !part3 && !part4 && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />

src/pages/(generation)/ReadingGeneration.tsx

@@ -1,6 +1,11 @@
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
-import {Difficulty, ReadingExam, ReadingPart} from "@/interfaces/exam";
+import {
+  Difficulty,
+  Exercise,
+  ReadingExam,
+  ReadingPart,
+} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import { getExamById } from "@/utils/exams";
 import { playSound } from "@/utils/sound";
@@ -10,28 +15,48 @@ import axios from "axios";
 import clsx from "clsx";
 import { capitalize, sample } from "lodash";
 import { useRouter } from "next/router";
-import {useEffect, useState} from "react";
+import { useEffect, useState, Dispatch, SetStateAction } from "react";
 import { BsArrowRepeat, BsCheck } from "react-icons/bs";
 import { toast } from "react-toastify";
 import { v4 } from "uuid";
+import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
+import TrueFalseEdit from "@/components/Generation/true.false.edit";
+import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
+import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
+const availableTypes = [
+  { type: "fillBlanks", label: "Fill the Blanks" },
+  { type: "trueFalse", label: "True or False" },
+  { type: "writeBlanks", label: "Write the Blanks" },
+  { type: "paragraphMatch", label: "Match Sentences" },
+];
+
 const PartTab = ({
   part,
-	types,
   difficulty,
   index,
   setPart,
+  updatePart,
 }: {
   part?: ReadingPart;
-	types: string[];
   index: number;
   difficulty: Difficulty;
   setPart: (part?: ReadingPart) => void;
+  updatePart: Dispatch<SetStateAction<ReadingPart | undefined>>;
+  // updatePart: (updater: (part: ReadingPart) => ReadingPart) => void;
 }) => {
   const [topic, setTopic] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [types, setTypes] = useState<string[]>([]);
+
+  const toggleType = (type: string) =>
+    setTypes((prev) =>
+      prev.includes(type)
+        ? [...prev.filter((x) => x !== type)]
+        : [...prev, type]
+    );
 
   const generate = () => {
     const url = new URLSearchParams();
@@ -43,10 +68,17 @@ const PartTab = ({
     setPart(undefined);
     setIsLoading(true);
     axios
-			.get(`/api/exam/reading/generate/reading_passage_${index}${topic || types ? `?${url.toString()}` : ""}`)
+      .get(
+        `/api/exam/reading/generate/reading_passage_${index}${
+          topic || types ? `?${url.toString()}` : ""
+        }`
+      )
       .then((result) => {
         playSound(typeof result.data === "string" ? "error" : "check");
-				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
+        if (typeof result.data === "string")
+          return toast.error(
+            "Something went wrong, please try to generate again."
+          );
         setPart(result.data);
       })
       .catch((error) => {
@@ -56,10 +88,144 @@ const PartTab = ({
       .finally(() => setIsLoading(false));
   };
 
+  const renderExercises = () => {
+    return part?.exercises.map((exercise) => {
+      switch (exercise.type) {
+        case "fillBlanks":
+          return (
+            <>
+              <h1>Exercise: Fill Blanks</h1>
+              <FillBlanksEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) =>
+                  updatePart((part?: ReadingPart) => {
+                    if (part) {
+                      const exercises = part.exercises.map((x) =>
+                        x.id === exercise.id ? { ...x, ...data } : x
+                      ) as Exercise[];
+                      const updatedPart = { ...part, exercises } as ReadingPart;
+                      return updatedPart;
+                    }
+
+                    return part;
+                  })
+                }
+              />
+            </>
+          );
+        case "trueFalse":
+          return (
+            <>
+              <h1>Exercise: True or False</h1>
+              <TrueFalseEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) => {
+                  updatePart((part?: ReadingPart) => {
+                    if (part) {
+                      return {
+                        ...part,
+                        exercises: part.exercises.map((x) =>
+                          x.id === exercise.id ? { ...x, ...data } : x
+                        ),
+                      } as ReadingPart;
+                    }
+
+                    return part;
+                  });
+                }}
+              />
+            </>
+          );
+        case "writeBlanks":
+          return (
+            <>
+              <h1>Exercise: Write Blanks</h1>
+              <WriteBlanksEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) => {
+                  updatePart((part?: ReadingPart) => {
+                    if (part) {
+                      return {
+                        ...part,
+                        exercises: part.exercises.map((x) =>
+                          x.id === exercise.id ? { ...x, ...data } : x
+                        ),
+                      } as ReadingPart;
+                    }
+
+                    return part;
+                  });
+                }}
+              />
+            </>
+          );
+        case "matchSentences":
+          return (
+            <>
+              <h1>Exercise: Match Sentences</h1>
+              <MatchSentencesEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) => {
+                  updatePart((part?: ReadingPart) => {
+                    if (part) {
+                      return {
+                        ...part,
+                        exercises: part.exercises.map((x) =>
+                          x.id === exercise.id ? { ...x, ...data } : x
+                        ),
+                      } as ReadingPart;
+                    }
+
+                    return part;
+                  });
+                }}
+              />
+            </>
+          );
+        default:
+          return null;
+      }
+    });
+  };
+
   return (
     <Tab.Panel className="w-full bg-ielts-reading/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
+        <label className="font-normal text-base text-mti-gray-dim">
+          Exercises
+        </label>
+        <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
+          {availableTypes.map((x) => (
+            <span
+              onClick={() => toggleType(x.type)}
+              key={x.type}
+              className={clsx(
+                "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                "transition duration-300 ease-in-out",
+                !types.includes(x.type)
+                  ? "bg-white border-mti-gray-platinum"
+                  : "bg-ielts-reading/70 border-ielts-reading text-white"
+              )}
+            >
+              {x.label}
+            </span>
+          ))}
+        </div>
+      </div>
       <div className="flex gap-4 items-end">
-				<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
+        <Input
+          type="text"
+          placeholder="Grand Canyon..."
+          name="topic"
+          label="Topic"
+          onChange={setTopic}
+          roundness="xl"
+          defaultValue={topic}
+        />
         <button
           onClick={generate}
           disabled={isLoading || types.length === 0}
@@ -68,8 +234,9 @@ const PartTab = ({
             "bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px]",
             "hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						isLoading && "tooltip",
+            isLoading && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -81,15 +248,23 @@ const PartTab = ({
       </div>
       {isLoading && (
         <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
-					<span className={clsx("loading loading-infinity w-32 text-ielts-reading")} />
+          <span
-					<span className={clsx("font-bold text-2xl text-ielts-reading")}>Generating...</span>
+            className={clsx("loading loading-infinity w-32 text-ielts-reading")}
+          />
+          <span className={clsx("font-bold text-2xl text-ielts-reading")}>
+            Generating...
+          </span>
         </div>
       )}
       {part && (
+        <>
           <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
             <div className="flex gap-4">
               {part.exercises.map((x) => (
-							<span className="rounded-xl bg-white border border-ielts-reading p-1 px-4" key={x.id}>
+                <span
+                  className="rounded-xl bg-white border border-ielts-reading p-1 px-4"
+                  key={x.id}
+                >
                   {x.type && convertCamelCaseToReadable(x.type)}
                 </span>
               ))}
@@ -97,6 +272,8 @@ const PartTab = ({
             <h3 className="text-xl font-semibold">{part.text.title}</h3>
             <span className="w-full h-96">{part.text.content}</span>
           </div>
+          {renderExercises()}
+        </>
       )}
     </Tab.Panel>
   );
@@ -107,10 +284,11 @@ const ReadingGeneration = () => {
   const [part2, setPart2] = useState<ReadingPart>();
   const [part3, setPart3] = useState<ReadingPart>();
   const [minTimer, setMinTimer] = useState(60);
-	const [types, setTypes] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [resultingExam, setResultingExam] = useState<ReadingExam>();
-	const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
+  const [difficulty, setDifficulty] = useState<Difficulty>(
+    sample(DIFFICULTIES)!
+  );
 
   useEffect(() => {
     const parts = [part1, part2, part3].filter((x) => !!x);
@@ -122,21 +300,15 @@ const ReadingGeneration = () => {
   const setExams = useExamStore((state) => state.setExams);
   const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-	const availableTypes = [
-		{type: "fillBlanks", label: "Fill the Blanks"},
-		{type: "trueFalse", label: "True or False"},
-		{type: "writeBlanks", label: "Write the Blanks"},
-		{type: "matchSentences", label: "Match Sentences"},
-	];
-
-	const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
-
   const loadExam = async (examId: string) => {
     const exam = await getExamById("reading", examId.trim());
     if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
           toastId: "invalid-exam-id",
-			});
+        }
+      );
 
       return;
     }
@@ -171,7 +343,9 @@ const ReadingGeneration = () => {
       .then((result) => {
         playSound("sent");
         console.log(`Generated Exam ID: ${result.data.id}`);
-				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
+        toast.success(
+          "This new exam has been generated successfully! Check the ID in our browser's console."
+        );
         setResultingExam(result.data);
 
         setPart1(undefined);
@@ -179,11 +353,12 @@ const ReadingGeneration = () => {
         setPart3(undefined);
         setDifficulty(sample(DIFFICULTIES)!);
         setMinTimer(60);
-				setTypes([]);
       })
       .catch((error) => {
         console.log(error);
-				toast.error("Something went wrong while generating, please try again later.");
+        toast.error(
+          "Something went wrong while generating, please try again later."
+        );
       })
       .finally(() => setIsLoading(false));
   };
@@ -192,7 +367,9 @@ const ReadingGeneration = () => {
     <>
       <div className="flex gap-4 w-1/2">
         <div className="flex flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Timer</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Timer
+          </label>
           <Input
             type="number"
             name="minTimer"
@@ -202,34 +379,22 @@ const ReadingGeneration = () => {
           />
         </div>
         <div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Difficulty
+          </label>
           <Select
-						options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
+            options={DIFFICULTIES.map((x) => ({
-						onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
+              value: x,
+              label: capitalize(x),
+            }))}
+            onChange={(value) =>
+              value ? setDifficulty(value.value as Difficulty) : null
+            }
             value={{ value: difficulty, label: capitalize(difficulty) }}
             disabled={!!part1 || !!part2 || !!part3}
           />
         </div>
       </div>
-
-			<div className="flex flex-col gap-3">
-				<label className="font-normal text-base text-mti-gray-dim">Exercises</label>
-				<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
-					{availableTypes.map((x) => (
-						<span
-							onClick={() => toggleType(x.type)}
-							key={x.type}
-							className={clsx(
-								"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-								"transition duration-300 ease-in-out",
-								!types.includes(x.type) ? "bg-white border-mti-gray-platinum" : "bg-ielts-reading/70 border-ielts-reading text-white",
-							)}>
-							{x.label}
-						</span>
-					))}
-				</div>
-			</div>
-
       <Tab.Group>
         <Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">
           <Tab
@@ -238,9 +403,12 @@ const ReadingGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
               )
-						}>
+            }
+          >
             Passage 1 {part1 && <BsCheck />}
           </Tab>
           <Tab
@@ -249,9 +417,12 @@ const ReadingGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
               )
-						}>
+            }
+          >
             Passage 2 {part2 && <BsCheck />}
           </Tab>
           <Tab
@@ -260,9 +431,12 @@ const ReadingGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
               )
-						}>
+            }
+          >
             Passage 3 {part3 && <BsCheck />}
           </Tab>
         </Tab.List>
@@ -272,7 +446,14 @@ const ReadingGeneration = () => {
             { part: part2, setPart: setPart2 },
             { part: part3, setPart: setPart3 },
           ].map(({ part, setPart }, index) => (
-						<PartTab part={part} types={types} difficulty={difficulty} index={index + 1} key={index} setPart={setPart} />
+            <PartTab
+              part={part}
+              difficulty={difficulty}
+              index={index + 1}
+              key={index}
+              setPart={setPart}
+              updatePart={setPart}
+            />
           ))}
         </Tab.Panels>
       </Tab.Group>
@@ -284,8 +465,9 @@ const ReadingGeneration = () => {
             className={clsx(
               "bg-white border border-ielts-reading text-ielts-reading w-full max-w-[200px] rounded-xl h-[70px] self-end",
               "hover:bg-ielts-reading hover:text-white disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
-							"transition ease-in-out duration-300",
+              "transition ease-in-out duration-300"
-						)}>
+            )}
+          >
             Perform Exam
           </button>
         )}
@@ -297,8 +479,9 @@ const ReadingGeneration = () => {
             "bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
             "hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						!part1 && !part2 && !part3 && "tooltip",
+            !part1 && !part2 && !part3 && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />

src/pages/(generation)/SpeakingGeneration.tsx

@@ -1,6 +1,12 @@
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
-import {Difficulty, Exercise, InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise} from "@/interfaces/exam";
+import {
+  Difficulty,
+  Exercise,
+  InteractiveSpeakingExercise,
+  SpeakingExam,
+  SpeakingExercise,
+} from "@/interfaces/exam";
 import { AVATARS } from "@/resources/speakingAvatars";
 import useExamStore from "@/stores/examStore";
 import { getExamById } from "@/utils/exams";
@@ -12,7 +18,7 @@ import clsx from "clsx";
 import { capitalize, sample, uniq } from "lodash";
 import moment from "moment";
 import { useRouter } from "next/router";
-import {useEffect, useState} from "react";
+import { useEffect, useState, Dispatch, SetStateAction } from "react";
 import { BsArrowRepeat, BsCheck } from "react-icons/bs";
 import { toast } from "react-toastify";
 import { v4 } from "uuid";
@@ -24,11 +30,13 @@ const PartTab = ({
   index,
   difficulty,
   setPart,
+  updatePart,
 }: {
   part?: SpeakingPart;
   difficulty: Difficulty;
   index: number;
   setPart: (part?: SpeakingPart) => void;
+  updatePart: Dispatch<SetStateAction<SpeakingPart | undefined>>;
 }) => {
   const [gender, setGender] = useState<"male" | "female">("male");
   const [isLoading, setIsLoading] = useState(false);
@@ -41,10 +49,15 @@ const PartTab = ({
     url.append("difficulty", difficulty);
 
     axios
-			.get(`/api/exam/speaking/generate/speaking_task_${index}?${url.toString()}`)
+      .get(
+        `/api/exam/speaking/generate/speaking_task_${index}?${url.toString()}`
+      )
       .then((result) => {
         playSound(typeof result.data === "string" ? "error" : "check");
-				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
+        if (typeof result.data === "string")
+          return toast.error(
+            "Something went wrong, please try to generate again."
+          );
         console.log(result.data);
         setPart(result.data);
       })
@@ -56,8 +69,13 @@ const PartTab = ({
   };
 
   const generateVideo = async () => {
-		if (!part) return toast.error("Please generate the first part before generating the video!");
+    if (!part)
-		toast.info("This will take quite a while, please do not leave this page or close the tab/window.");
+      return toast.error(
+        "Please generate the first part before generating the video!"
+      );
+    toast.info(
+      "This will take quite a while, please do not leave this page or close the tab/window."
+    );
 
     const avatar = sample(AVATARS.filter((x) => x.gender === gender));
 
@@ -65,14 +83,27 @@ const PartTab = ({
     const initialTime = moment();
 
     axios
-			.post(`/api/exam/speaking/generate/speaking/generate_video_${index}`, {...part, avatar: avatar?.id})
+      .post(`/api/exam/speaking/generate/speaking/generate_video_${index}`, {
+        ...part,
+        avatar: avatar?.id,
+      })
       .then((result) => {
-				const isError = typeof result.data === "string" || moment().diff(initialTime, "seconds") < 60;
+        const isError =
+          typeof result.data === "string" ||
+          moment().diff(initialTime, "seconds") < 60;
 
         playSound(isError ? "error" : "check");
         console.log(result.data);
-				if (isError) return toast.error("Something went wrong, please try to generate the video again.");
+        if (isError)
-				setPart({...part, result: {...result.data, topic: part?.topic}, gender, avatar});
+          return toast.error(
+            "Something went wrong, please try to generate the video again."
+          );
+        setPart({
+          ...part,
+          result: { ...result.data, topic: part?.topic },
+          gender,
+          avatar,
+        });
       })
       .catch((e) => {
         toast.error("Something went wrong!");
@@ -84,14 +115,18 @@ const PartTab = ({
   return (
     <Tab.Panel className="w-full bg-ielts-speaking/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
       <div className="flex flex-col gap-3 w-full">
-				<label className="font-normal text-base text-mti-gray-dim">Gender</label>
+        <label className="font-normal text-base text-mti-gray-dim">
+          Gender
+        </label>
         <Select
           options={[
             { value: "male", label: "Male" },
             { value: "female", label: "Female" },
           ]}
           value={{ value: gender, label: capitalize(gender) }}
-					onChange={(value) => (value ? setGender(value.value as typeof gender) : null)}
+          onChange={(value) =>
+            value ? setGender(value.value as typeof gender) : null
+          }
           disabled={isLoading}
         />
       </div>
@@ -104,8 +139,9 @@ const PartTab = ({
             "bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
             "hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						isLoading && "tooltip",
+            isLoading && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -122,8 +158,9 @@ const PartTab = ({
             "bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
             "hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						isLoading && "tooltip",
+            isLoading && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -135,14 +172,22 @@ const PartTab = ({
       </div>
       {isLoading && (
         <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
-					<span className={clsx("loading loading-infinity w-32 text-ielts-speaking")} />
+          <span
-					<span className={clsx("font-bold text-2xl text-ielts-speaking")}>Generating...</span>
+            className={clsx(
+              "loading loading-infinity w-32 text-ielts-speaking"
+            )}
+          />
+          <span className={clsx("font-bold text-2xl text-ielts-speaking")}>
+            Generating...
+          </span>
         </div>
       )}
       {part && !isLoading && (
         <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-96">
           <h3 className="text-xl font-semibold">
-						{!!part.first_topic && !!part.second_topic ? `${part.first_topic} & ${part.second_topic}` : part.topic}
+            {!!part.first_topic && !!part.second_topic
+              ? `${part.first_topic} & ${part.second_topic}`
+              : part.topic}
           </h3>
           {part.question && <span className="w-full">{part.question}</span>}
           {part.questions && (
@@ -156,7 +201,9 @@ const PartTab = ({
           )}
           {part.prompts && (
             <div className="flex flex-col gap-1">
-							<span className="font-medium">You should talk about the following things:</span>
+              <span className="font-medium">
+                You should talk about the following things:
+              </span>
               {part.prompts.map((prompt, index) => (
                 <span className="w-full" key={index}>
                   - {prompt}
@@ -164,12 +211,40 @@ const PartTab = ({
               ))}
             </div>
           )}
-					{part.result && <span className="font-bold mt-4">Video Generated: ✅</span>}
+          {part.result && (
+            <span className="font-bold mt-4">Video Generated: ✅</span>
+          )}
           {part.avatar && part.gender && (
             <span>
-							<b>Instructor:</b> {part.avatar.name} - {capitalize(part.avatar.gender)}
+              <b>Instructor:</b> {part.avatar.name} -{" "}
+              {capitalize(part.avatar.gender)}
             </span>
           )}
+          {part.questions?.map((question, index) => (
+            <Input
+              key={index}
+              type="text"
+              label="Question"
+              name="question"
+              required
+              value={question}
+              onChange={
+                (value) =>
+                  updatePart((part?: SpeakingPart) => {
+                    if (part) {
+                      return {
+                        ...part,
+                        questions: part.questions?.map((x, xIndex) =>
+                          xIndex === index ? value : x
+                        ),
+                      } as SpeakingPart;
+                    }
+
+                    return part;
+                  })
+              }
+            />
+          ))}
         </div>
       )}
     </Tab.Panel>
@@ -195,7 +270,9 @@ const SpeakingGeneration = () => {
   const [minTimer, setMinTimer] = useState(14);
   const [isLoading, setIsLoading] = useState(false);
   const [resultingExam, setResultingExam] = useState<SpeakingExam>();
-	const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
+  const [difficulty, setDifficulty] = useState<Difficulty>(
+    sample(DIFFICULTIES)!
+  );
 
   useEffect(() => {
     const parts = [part1, part2, part3].filter((x) => !!x);
@@ -208,28 +285,40 @@ const SpeakingGeneration = () => {
   const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
   const submitExam = () => {
-		if (!part1?.result && !part2?.result && !part3?.result) return toast.error("Please generate at least one task!");
+    if (!part1?.result && !part2?.result && !part3?.result)
+      return toast.error("Please generate at least one task!");
 
     setIsLoading(true);
 
-		const genders = [part1?.gender, part2?.gender, part3?.gender].filter((x) => !!x);
+    const genders = [part1?.gender, part2?.gender, part3?.gender].filter(
+      (x) => !!x
+    );
 
     const exercises = [part1?.result, part2?.result, part3?.result]
       .filter((x) => !!x)
       .map((x) => ({
         ...x,
-				first_title: x?.type === "interactiveSpeaking" ? x.first_topic : undefined,
+        first_title:
-				second_title: x?.type === "interactiveSpeaking" ? x.second_topic : undefined,
+          x?.type === "interactiveSpeaking" ? x.first_topic : undefined,
+        second_title:
+          x?.type === "interactiveSpeaking" ? x.second_topic : undefined,
       }));
 
     const exam: SpeakingExam = {
       id: v4(),
       isDiagnostic: false,
-			exercises: exercises as (SpeakingExercise | InteractiveSpeakingExercise)[],
+      exercises: exercises as (
+        | SpeakingExercise
+        | InteractiveSpeakingExercise
+      )[],
       minTimer,
       variant: minTimer >= 14 ? "full" : "partial",
       module: "speaking",
-			instructorGender: genders.every((x) => x === "male") ? "male" : genders.every((x) => x === "female") ? "female" : "varied",
+      instructorGender: genders.every((x) => x === "male")
+        ? "male"
+        : genders.every((x) => x === "female")
+        ? "female"
+        : "varied",
     };
 
     axios
@@ -237,7 +326,9 @@ const SpeakingGeneration = () => {
       .then((result) => {
         playSound("sent");
         console.log(`Generated Exam ID: ${result.data.id}`);
-				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
+        toast.success(
+          "This new exam has been generated successfully! Check the ID in our browser's console."
+        );
         setResultingExam(result.data);
 
         setPart1(undefined);
@@ -248,7 +339,9 @@ const SpeakingGeneration = () => {
       })
       .catch((error) => {
         console.log(error);
-				toast.error("Something went wrong while generating, please try again later.");
+        toast.error(
+          "Something went wrong while generating, please try again later."
+        );
       })
       .finally(() => setIsLoading(false));
   };
@@ -256,9 +349,12 @@ const SpeakingGeneration = () => {
   const loadExam = async (examId: string) => {
     const exam = await getExamById("speaking", examId.trim());
     if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
           toastId: "invalid-exam-id",
-			});
+        }
+      );
 
       return;
     }
@@ -273,7 +369,9 @@ const SpeakingGeneration = () => {
     <>
       <div className="flex gap-4 w-1/2">
         <div className="flex flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Timer</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Timer
+          </label>
           <Input
             type="number"
             name="minTimer"
@@ -283,10 +381,17 @@ const SpeakingGeneration = () => {
           />
         </div>
         <div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Difficulty
+          </label>
           <Select
-						options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
+            options={DIFFICULTIES.map((x) => ({
-						onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
+              value: x,
+              label: capitalize(x),
+            }))}
+            onChange={(value) =>
+              value ? setDifficulty(value.value as Difficulty) : null
+            }
             value={{ value: difficulty, label: capitalize(difficulty) }}
             disabled={!!part1 || !!part2 || !!part3}
           />
@@ -301,9 +406,12 @@ const SpeakingGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking"
               )
-						}>
+            }
+          >
             Exercise 1 {part1 && part1.result && <BsCheck />}
           </Tab>
           <Tab
@@ -312,9 +420,12 @@ const SpeakingGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking"
               )
-						}>
+            }
+          >
             Exercise 2 {part2 && part2.result && <BsCheck />}
           </Tab>
           <Tab
@@ -323,9 +434,12 @@ const SpeakingGeneration = () => {
                 "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
                 "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
                 "transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking"
               )
-						}>
+            }
+          >
             Interactive {part3 && part3.result && <BsCheck />}
           </Tab>
         </Tab.List>
@@ -335,7 +449,14 @@ const SpeakingGeneration = () => {
             { part: part2, setPart: setPart2 },
             { part: part3, setPart: setPart3 },
           ].map(({ part, setPart }, index) => (
-						<PartTab difficulty={difficulty} part={part} index={index + 1} key={index} setPart={setPart} />
+            <PartTab
+              difficulty={difficulty}
+              part={part}
+              index={index + 1}
+              key={index}
+              setPart={setPart}
+              updatePart={setPart}
+            />
           ))}
         </Tab.Panels>
       </Tab.Group>
@@ -347,21 +468,25 @@ const SpeakingGeneration = () => {
             className={clsx(
               "bg-white border border-ielts-speaking text-ielts-speaking w-full max-w-[200px] rounded-xl h-[70px] self-end",
               "hover:bg-ielts-speaking hover:text-white disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
-							"transition ease-in-out duration-300",
+              "transition ease-in-out duration-300"
-						)}>
+            )}
+          >
             Perform Exam
           </button>
         )}
         <button
-					disabled={(!part1?.result && !part2?.result && !part3?.result) || isLoading}
+          disabled={
+            (!part1?.result && !part2?.result && !part3?.result) || isLoading
+          }
           data-tip="Please generate all three passages"
           onClick={submitExam}
           className={clsx(
             "bg-ielts-speaking/70 border border-ielts-speaking text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
             "hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
             "transition ease-in-out duration-300",
-						!part1 && !part2 && !part3 && "tooltip",
+            !part1 && !part2 && !part3 && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />

src/pages/payment-record.tsx

@@ -788,10 +788,11 @@ export default function PaymentRecord() {
 	const {rows: filteredRows, renderSearch} = useListSearch(paypalFilterRows, updatedPaypalPayments);
 
 	const paypalTable = useReactTable({
-		data: filteredRows,
+		data: filteredRows.sort((a, b) => moment(b.createdAt).diff(moment(a.createdAt), "second")),
 		columns: paypalColumns,
 		getCoreRowModel: getCoreRowModel(),
 	});
+
 	const getUserModal = () => {
 		if (user) {
 			if (selectedCorporateUser) {
@@ -888,7 +889,7 @@ export default function PaymentRecord() {
 	const {rows: csvRows, columns: csvColumns} = getCSVData();
 
 	const renderTable = (table: Table<any>) => (
-		<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+		<table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
 			<thead>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<tr key={headerGroup.id}>